Otterly

This is a short article about how we arrived at the basic look of Floe, a beautiful sliding block puzzle game, developed by Otterly.

We’ll start at the prototype stage and work our way to the final product. Graphically the prototype looked like this:

This is what we might describe as “visually functional”. It’s a playable game at this stage, with the elements of the game rendered as very basic shapes with very basic textures. If you look carefully, you can see that certain visual problems have been overcome, such as how the walls and blocks and avatar stand out against the colour of the floor.

What follows are the steps we took to arrive at our final look for Floe.

We needed to find an art style for the game, and one way to begin is by visually enhancing the existing elements of the prototype.

In art-design there can be simple as well as complex relationships between forms, but we’re still at the “throw paint at the canvas” stage and experimentation is the way forward.

This is where the concepts and the game prototype start interacting. concepts are interesting, but the real rock ‘n’ roll happens when you see concepts brought to life in the actual game. For the first time, we see Flo. Flo is a blue bear caught in a maze of blue cubes. Flo doesn’t yet realise that she’s a Polar Bear, and she doesn’t realise where she is or what that green arrow means.

Some of the concept ideas, such as white cubes, are finding their way into the playable version of the game and its starting to change things.

Things, such as blocks, stop being just ‘coloured’ and start to gain some texture. This is clearly a blue bear in some kind of environment, possibly related to ice or coldness.

If you opened your fridge and saw a blue bear inside, just run. But honestly, you never know how you’ll react if faced with a real bear in your fridge so its best to just fall back on your training.

White cubes often float in a white void, but not everyone has experienced that. People on Earth will buy your game. Its important to realise this, so here is a blue bear on some kind of snowy floaty toast-like slab of pervasive blueness. Those white cube things can only be one thing. White Cubes.

This is the playable version of the game at a crucial moment in development, because the game’s camera angle has changed. It makes the game more readable as a 3D environment and that affects the gameplay in terms of difficulty.

We are getting close to the final look.

The floor colour needs to visually support the brightly coloured blocks. the blocks can become frozen, which also means that they turn whitish and would need to stand out against the floor. That means that the game floor can’t be white any more. To avoid this clash, the floor must be darker, which in turn becomes the catalyst for changing the colour of the Bear. The Bear still needs to stand out against the floor, right?

You can see how the look of the main gameplay elements can be just as important as the look of the avatar. When the visual look of every element starts working together, its echoes the harmony of nature, which some humans find pleasing.

We have a polar bear, and it’s possessed with an overly enlarged cranium so that on an iPhone, you can actually see its face without using two fingers to enlarge it and then dropping your phone in the bath, and then having to face the shame of getting it mended by a “genius”.

We’re very near the end now. Your patience is amazing, have you ever thought of becoming a videogame artist?

We have a baby female polar bear. That explains the giant head. Well, babies have heads that are in proportion to the rest of their body, although when I was born I also had a giant body. I weighed 11 pounds. People had to take turns carrying me. Anyway, studies indicate that female baby polar bears are awesome. This is Flo, she has an entire continent to cross and needs your help!

We start testing the game with a few close friends and family, and someone complains that artistically, it’s all a bit ‘blue’. We tend to agree, but instead of making the sea green or the floor pink or changing the bear into a monkey or introducing a mission based open-world and a first-person camera, we decided to make the buttons white. And it worked.

This is Flo at the start of one of her journeys through a complex, frozen puzzle-land. What do you mean, “I prefer the prototype”?

So that’s the basic look of Floe, and it looks lovely on the iPhone and iPad, especially on some of the later levels when lots of brightly coloured blocks stand between Flo and complete triumph!

I hope you enjoyed our little article on The Art of Floe.

Please subscribe or follow @otterlygames for updates.