Thoughts on creating parallax background art

posted in: art, Dev Blog, tutorials | 0

Here are a few thoughts I came up with while creating the parallax layers for Flip Hair Sally (App Store, google store link to come!)

I began with a vague idea of trees in a forest, based on a sketch I had doodled a while ago:

 

sketch

and quickly laid out these backgrounds:

 

parallax_0

 

Top: The near background layer (with two of the original obstacles)

Mid: Far background layer

Bottom: The combined layers

The near and far background layers loop seamlessly over the background of the night sky. however in the bottom image (a simulation of motion) they start to blend too much into each other. Here we were also considering a kind of cut-out paper feel which we later discarded.

Parallax is highly-dependent on running the layers through the engine and making changes after seeing how it looks while animated at various speeds. There are many things that don’t quite look right and can only be spotted while in motion, because the background layers are constantly changing their positions relative to each other. We MUST check the layers in the game or we end up having to fix a lot of things after adding detail to the artwork. Even if we are building the layers out of individual objects (trees in this case) in a modular fashion, it’s important to see how the shapes work in tandem with all the other layers, or even the layer itself when it’s put on a loop.

Although it’s tempting to start tweaking and refining the art, it’s a better idea to add in detail only after deciding on the basic shapes and getting them to a state you’re happy with. This saves a lot of rework.

 

We changed style (I really liked the clean look tK came up with, so incorporated it) to a more graphic design: here are the layers for the first forest stage. The top two layers are a mist layer and a vignette that sits over the top of the entire game.

parallax_0_trees

 

 

The first stage

parallax_2_layers

 

The third stage — you can see the vignette is actually a square which is stretched in the engine (power of two squares preferrred for code efficiency, ie 128×128, 256×256, etc)

I also tried out a bunch of different styles in the background: here’s the original scribble for the third stage, where I had a vague idea of opening up the scenery into an open world with green grass (and rays of sunlight). However, after testing ingame I couldn’t get the ray effect quite right in the engine — and the new story of the game, with Sally becoming an intergalactic traveller, dictated a different feel.

bg_far5

The original scribble

end_bg_far

The revision: although it looks more polished by far, at this stage I had a bunch of assets from the previous two stages that I just colourshifted (for the shifting sands). You can see the shapes of the shapeships are still very loose.

(Note on tiling — it’s important to run everything through the engine sooner than later, as it’s impossible to test tiling and spacing if you can’t see it all in motion)

And here’s how I split up the seams for the transitions between the second and third stages: there is an in-between stage to blend between them (this is a real pain to clean up as that seam line has to match perfectly).

parallax_1_seams

More thoughts to come!

20140630-214621-78381431.jpg