Blog #10 – Creating Atmospheric 2D Visuals for Games

Hi All,

This week I want to talk about a project I am currently working on and show off some of its aesthetics and visual production pipeline.

 

Structuring the Painting into Layers

The painting and key animated features should be determined as early on as possible. Ideally this will happen after a sketch layout (generating quick thumbnails as a first step is a great way to explore compositions) has been chosen for production.

 As a general rule every image should consist of 3 core areas:

  1. Foreground
  2. Midground
  3. Background

And these areas should be on their own layers as a minimum, particularly when creating parallaxing for “moving cameras”.

Though this project is limited to still cameras, the basic layer separation helps create depth and the rules of parallaxing still apply to animated objects. Objects further away from the camera move slower than if they were in the foreground. And fog between layers creates depth by emphasizing the distance between objects.

Special objects or animated features are also on their own layers, such as foreground grass layers, swaying banners, textiles and ropes, flashing buttons and so on; in summary everything that helps bring the scene to life. Don’t be afraid to exaggerate things, especially when you want to draw the user’s attention to specific areas.

Sky Assets

I also recommend to have the sky on a separate layer as a backdrop. For the sky animations I tend to set up the sky as follows:

  • A base painting of the background sky capturing the core colour and atmosphere of the scene
  • Clouds on individual layers
  • Multiple cloud types, sizes and shapes to break up the sky and add variety

Tip:

  • It can be useful to create the sky as a “Master PSD” (a separate file)
  • Make sure none of your painted clouds are clipping the edge of the canvas as they are animated across the canvas in the animated scene.
  • Sky assets are implemented into multiple scenes as a backdrop and help unify the project and scenes’ visuals.

 

Step by Step Painting

1_Layout

A brief scene description and rough layout was provided by Fraser, our game designer.

2_Sketch&Composition

Based on the description rough compositions and sketches were created. The sketch above was chosen at this stage.

3_Colour&Environment

The colour scheme and environment is established in the next stage of the painting process.

4_Character&Lighting

Then the characters and lighting layers are added, which are later animated in the final scene.

 

Animated Characters

The animated characters require more detail and planning of their layering and animations. For this scene we split the character into the following layers: Hat, backdrop hat, head, neck backdrop, shoulders, arms, main body, stick and his legs; with additional sprites for blinking and speech.

The animations are then created by Rob in MODO with a rigged and skinned character mesh before being imported to the final game engine.

 

Adding Particles

Lastly particles are added to the scenes and they do make a huge difference as they provide the scene with more dynamic and randomised movement. These can be extra dust, snow, rain, fire, smoke particles and more. The challenge is to integrate these particles into the scene without making them look out of place and match the stylized painted aesthetics we are going for.

 

The final In-Engine Scene

I hope this got you interested and we are looking forward to bring you updates on our current project over the next weeks and months.

Thanks for reading and feel free to leave a comment and let us know how you approach your 2D game scenes!

 

Sam

Pixel Chief

Please Share our Development Blogs with the Community.

Leave a Reply

Your email address will not be published. Required fields are marked *