Steamroll Art Pipeline: From sketch to Blender, from Blender to UE4

Being Steamroll the first real video game project I have worked on, I’ve faced a lot of issues and doubts I have resolved on the go. In this article I want to share the art pipeline we’ve developed during this months, not with the intention to be a tutorial or a ‘How to’ but a ‘How we did it’. So this post is a basic introduction and wants to show an overall process without getting so much into step by step detail.

References

The art of Steamroll is being developed mostly with Blender, Photoshop (and Gimp) and Unreal Engine 4, but all the ideas come from pencil sketches in a notebook.

Steamroll is set in a steampunk world full of moving mechanics, copper and rusty iron pieces and steam jets everywhere. To accomplish an attractive overall look, we gathered tons of reference images from quite different sources: Jules Verne, The Time Machine, Hugo, Final Fantasy VI, Confrontation miniatures, François Schuiten, The Castle in the Sky, Steamboy, old underground pictures, City of Ember, Georges Méliès, The Room, lots of steampunk artifacts and illustrations… even Starcraft 2 or Metal Slug! And each one of this was taken for different reasons (the look, the color palette, the atmosphere, the movement of machinery, the camera approach, the user interface…) in order to make the visual aspect of the game richer and more interesting.

1

Concept design

As I said, any element design starts with concept sketches which are lead by the needs of game design. The first sketches where done first with pencil and then taken to Photoshop to put color on them, but when the color palette and general tone was established, most of next concept art was only sketched in pencil and then directly put in 3D with Blender.

2

Steamballs, the Scarabeus (the rolling vehicle) and the old mine were the first elements to design, but one of my favourites has been the mechanical 3D user interface, and because of this I will be focusing the article on the making of the Pressure and Damage Meter main part (PDM from now on).

I’ve decided to choose an element from this UI because, despite the interface is still work in progress, it complements with the other article my programmer fellows have written about developing the 3D HUD in Unreal Engine 4, which you can read here.

The PDM design

As a good steampunk invention, the Scarabeus, your vehicle, has its own clockwork meter, and this one displays the steam pressure you have when you are a rolling ball and the shot intensity when you are set in a deployment spot and can shoot Steamballs. It also shows the level of damage the Scarabeus can resist. Given this, first sketches were drawn and painted, and position on the screen for the PDM was decided.

3

The design of the object requires a round dial with number reference, the damage indicator arc and a couple of moving hands. With this asset I started the modelling with no more detailed sketch, as this is an important part of the game and it was necessary to be developed and running the sooner the better. So I opened Blender and started up…

Modeling hi-poly mesh

In this stage of modeling I didn’t care about the number of polys, just about the visual design and its accordance to the function. I modeled most of the parts separately, specially stuff like small screws; by doing this the complexity of topology keeps small and details can be added easily.

4

Basic shapes and some nice subdivision surface modifiers made the job pretty simple. I left some minor details like the numbers and the radial steps for the texture and normal maps.

Retopo

The next step was to make things lighter by re-elaborating the mesh with less polygons. That’s it, retopology time! Retopology, or retopo for friends, is the process in which topology is reorganized in order to have a clean mesh for animating and, specially in video games, to reduce the amount of polys preserving the main shape. In this case, being this a hard surface asset and not having complicated animations in mind, the retopo was quite simple to do.

4retopo

In Blender I usually put the hi-poly meshes locked in a separate but visible layer and then, in the active layer, I add a basic shape such as a plane, a cylinder or a cube and start to trace the object by extruding with snap (to face) tool activated.

A couple of things I discovered and I do when retopologizing: as one of the goals of retopo is to save polys, I decided not to create polys that aren’t going to appear on screen, that is most of the back polys of the asset.

Also, I found easier to do the retopo by parts, so I separated the main parts of the hi-poly object and then created its retopo separately as well. This is also helpful for the unwrapping of the low poly object, which will be already split and easier to work with.

5

Unwrapping & UV Maps

When the low poly mesh was finished I unwrapped the mesh into a 2D UV map. By unwrapping, what we do is to place the 3D mesh into a 2D plane in order to project texture maps onto it. These texture maps can be color maps, normal maps or specularity maps, for example. In Blender, the Mark Seam tool helps to unwrap and organize the mesh parts in the UV map.

6seams

You can group objects and make some with one single UV map and some with two or more. By joining two meshes with two different UV maps you can keep the two material channels separately and then, in UE4, create two materials for one object and control them independently. So, each UV map I created is equivalent to a material available in the future.

7groups

In this PDM asset, for example, the round dial has been kept in a separate UV map/material but inside a bigger mesh ‘group’. Otherwise, the moving hands, despite being different single objects, share the same UV map, meaning that the same material works for all of them.

8uvmap

Baking maps

Once I have set all the maps it’s time for some bakery. Another usual process in 3D creation for video games is the bake of normal maps. In order to save all the detail and smooth level we created in the high poly object, we can project geometrical information to the low poly model and save it in the UV map as a normal map. So now, I picked the high and the low poly objects by pairs and started to Bake the normal and ambient occlusion maps.

* One of the things we’ve added to the pipeline is to triangulate the meshes just before Baking. Not doing this has ended sometimes in normal mapping issues in Unreal, because it triangulates the mesh when is imported. So it’s better if you manually do it before exporting.

In Blender you can find the Bake options on the bottom of the Render tab. There you can select which map you want and the different options depending on the meshes you built. Another free option for baking your normal and AO maps is xNormal software.

9NormalAO

The radial steps with the numbers maps were done in Photoshop transforming height maps to Normal and Ambient Occlusion maps. Check out the xNormal filter options for PS.

Texturing

I know most of triple A games have a real complicated process of texturing and creating materials but for the complexity of our project the color texturing pipeline is the following: I open the UV maps in Photoshop or Gimp and paint a first plain color base; then the AO map is set to multiply with low opacity to have a reference for the object shape and parts; having this, I paint some shape details, rust, worn edges, the screws and all the rest.

10textureprocess

In Steamroll we also use Roughness map to create different reflection tones. Keeping the color map in different layers it’s easy to desaturate and edit brightness and create the Roughness map.

11roughness

Exporting

Ok, now we have our low poly meshes with their texture maps (color, normal, roughness and ambient occlusion) and we want to bring them to Unreal Engine: time to export!

If this asset was animated this would be the time to create an armature and move the mesh around, but PDM’s hands will be animated by code. Anyway, I’ll show the two exporting settings for the static mesh (no armature) and skeletal meshes (armature) we use in Blender.

We export meshes in FBX format by selecting the mesh you want to export (and the armature if it’s the case) and going to File > Export > Autodesk FBX. (If you don’t have that option, check out the Blender Addons in User Preferences).

Here are the two export settings. The main difference is the Armature button and the animation checkboxes. It’s also really important to check the Tangent Space option in both cases, this is also another Blender to Unreal issue we got sometimes, it’s better to calculate the tangent space in the same software that made the normals.

12export

You can save this presets by clicking ‘+’ next to ‘Operator Presets’, on top of this.

Importing to Unreal Engine 4

Then in UE4 we have to import all assets we created. These are some FBX for the meshes and some PNG for the texture maps. With FBX it’s important to check ‘Import Normals and Tangents’ inside the Mesh tab and uncheck ‘Import Materials’ and ‘Import Textures’.

When Normal maps are imported we make sure we have ‘Flip Green Channel’ checkbox checked (because Blender and Unreal calculate normals in a different way). Also, Compression Settings must be set at ‘TC Normalmap’ option. All of this can be found inside the Details tab of each asset. Finally, we make all textures to ‘Never Stream’ due to our level composition and texture complexity.

13import

Creating Materials

This is the last step before we throw our little asset to the level or blueprint editor. Epic has really nice video documentation in its Youtube Channel and I highly recommend to watch the Material video series.

Material Editor of Unreal Engine 4 is one of its great features and you can do pretty much anything you can imagine. With Steamroll we use a really basic level of shaders complexity, but I encourage you to write your suggestions to improve Steamroll Materials!

Any static or skeletal mesh in Unreal has its material ‘channels’ in the Mesh Details tab. Here is where materials (one or more) can be linked to a mesh.

14materialchanels

By clicking in the ‘Add New…’ button we create new materials for each object and then edit them with imported texture maps. Inside the Material Editor, we throw the texture assets and link and edit according to the needs of each object.

15materialeditor

Once the materials are created and linked to the mesh, our PDM asset is ready to be used in the ancient art of coding. I remember you can check out our last post in which you can see the process we made to set this asset as a 3D user interface element.

Last words

That’s all folks! I hope this post serves to get a general idea of how we work and to encourage Blender users to create projects and assets for Unreal and for video games. I want to remember that this has been a ‘making of’ post of the development of our project and what is told here is just the way we’ve took and it’s possibly improved. It would be nice if you share your comments, criticisms and alternatives!

Thank you!

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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