The Art of Floe

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:

Floe_Prototype_Otterly_Image

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.

Floe_PrototypeConceptArt_Otterly01Floe_PrototypeConceptArt_Otterly03

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.

Floe_ConceptArt02_Otterly

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.

Floe_ConceptArt05_Otterly

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.

Floe_ConceptArt06_Otterly

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.

Floe_ConceptArt07_Otterly

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.

Floe_ConceptArt09_Otterly

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.

Floe_ConceptArt10_Otterly

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?

Floe_ConceptArt12_Otterly

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.

Floe_ConceptArt13_Otterly

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!

Floe_ConceptArt14_Otterly

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.

Floe_ConceptArt14_OtterlyThis 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.

This entry was posted in Art, Design, Development, Floe and tagged , , . Bookmark the permalink.

1 Response to The Art of Floe

  1. Pingback: The Sound of Floe. | PJ Belcher Pro Audio.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s