World Building: Design to Art - Part Two

Hello again! Last week we starting looking at the journey we take in order to create content for Röki. If you've not read it yet, you can check it out here.

Today we'll be talking about ART! Specifically how we construct the final quality scenes, and some of the tricks we use to do so.

Step 1: Photoshop Paintover

This is necessary for every scene, but it's something I like to do for key locations, particularly if a target image hasn't been established for that part of the game yet. My aim is to find a composition that features both foreground and background elements, as well as a harmonious colour palette that relies on 3-5 hues. Typically, I may use a website like Adobe Kuler to help me establish a palette that I like. Overall, there are obviously certain restrictions to consider, particularly in the gameplay space, but generally this is the first chance to try and take the game to the next level.

Step 2: Background sets

Once I'm happy with the image, I'll focus on the very distant background elements and convert them into geometry flats in game. Firstly I'll create a new high resolution image (6000x3000) and bring in the background layers from my original drawing. Then using a combination of hard edge brushes and the lasso tools, I'll create a much crisper, more detailed version, with every element (clouds, sky, mountains, trees) on a separate layer. This allows me to then select each item as a photoshop path, which can then be exported as an illustrator file.

I'll also start creating the in-game texture for the scene, it's essentially consists of small colour swatches for each different colour in the image, like this:

Next, I'll swap to Maya to import the illustrator curves (create->adobe illustrator object) and use them to create a polygonal shape (surfaces->planar).

Then, using the swatches I've created, I can quickly add the colour back in to make them look as intended. Finally, I'll then space the elements out in 3D to create more depth. Depending on their distance from the camera, some of them may need extending left or right to cover any gaps.

Any animated elements (such as clouds) will also need to be set up accordingly as well, either as a simple translation that plays consistently in the background, or as a bespoke animated object that will be exported separately. Once all elements are ready, they can be exported into Unity.

Step 3 - The foreground

This step tends to cover anything that Tove walks on or interacts with, so in the mountain scene, it's the ground and stone walls. Unlike the background sets, all of these items get modelled properly in 3D. They are textured in exactly the same way though. Typically I'll place a light in the scene to mimic the sun direction. This allows me to get a rough approximation of shadows, that I can then use to cut similar shadows into the geometry. I keep them loose and general to avoid them becoming too fussy. I'll also use artistic licence where appropriate! Cutting in the shadows in this way has two main benefits. Firstly, it allows for greater artistic control over each scene. Secondly, it is more efficient for performance, and stops any nasty aliasing and fizzing artefacts that you sometimes get from realtime shadows.

As with the 2D background flats, these elements are then brought into Unity.

Step 4 - Animated elements

As we've mentioned previously, it's important for us that the scenes feel alive, so animated objects play a big part in this. For the foreground of the mountain shot we decided to add a lot of plants blowing in the wind to add some much needed motion. The plants are created in the same way as the background flats, expect instead of basing them on some concept art, they're approximations of plants in photo reference we've taken. It's important to note that they're not 100% cutouts of these photos. We tried that and the level of detail was jarring. Instead, they're loose interpretations, created by hand (human error is useful for adding character!) with the line tool. They're then exported as shapes and made into flat planes in Maya.

The animation pass is pretty simple as well; just some rotation around one axis, with some subtle variety. All plants are then exported together as a group and imported into Unity. Here we set them up as a looping animation which triggers when the scene starts. Hey presto, the plants now move!

Step 5 - Particles and camera FX

The majority of the scene is now done, but to add some polish and to push the visuals further we add some subtle blurring and vignetting to the game play camera. In this scene we also created a snow particle effect in Unity. Nothing too clever, just some random snowflake sizes and falling speeds. Again, this is triggered when the scene begins.

Step 6 - Bedding in the characters

The sixth and final step! Here we'll setup a custom lighting probe which controls the colour and brightness of the characters. So, for the snow scene we push Tove's lighting to be a bit darker and bluer to bed her in. We also colour match her shadow to those in the environment.

And that's it! From nothing to something! As you can see, each step is quite straightforward, but the combination of them all creates a scene which is very effective.

Until next time,

Tom & Alex