Tag Archive: Textures


The Procedural Texture Workflow

Since I’m solo-arting Caromble!, I have to find ways to optimize the work-flow. In the beginning I did a big degree of the work analog – with pen and paper. But in recent months I’ve set up a very procedurally. Basically keeping the style but letting the computer do the work for me. Here I’ll describe in layman’s terms some steps of how I go about it.

I should first describe what procedural art means. You can think of it as the artist not doing the actual artwork anymore, but describing rules to the computer that it then executes. This has some disadvantages: it takes longer, and needs a different skill set that you have to learn (e.g. knowing how to program is useful). The upside is that you can then just tell the program: Do some more variations. So the more assets you need, the more the initial effort will pay off.

A specific twist in my use-case is that I’m trying to emulate a hand-drawn line style for the textures. Let’s first take a look, of what a final object looks like:

Locomotive Comic Style

Starting out here with the final look of the diesel locomotive, so you see what the target look was. It has a bit of a comic style, but still shading and some little details.

Five years ago, there was not much in usable procedural tools out there. Now tools like Substance Painter became essentially industry standard. A lot of texturing-work you once had to do draw by hand in Photoshop – a tool that was made for … well, editing photos – you get now done near automatically. With Painter you can for example just take a 3D object, and drop a material like “wood” on it, and *boom*, your asset looks like made from wood.

Substance Painter Program Window

A working view of Substance Painter. You can see for example the swaps on the side that I could drag on an object to give it a specific material.

Painter is in essence made for painting details onto the 3D object – so here is the final result I export and then use in our game engine.
For the actual process, the program first calculates various properties of the 3D mesh. These I can then use to create rules – like “where the object has little hidden corners … make it more dark, to simulate shadow”. Notice how this is a flexible process. Depending on the object, I could also say “put dust in these hidden corners”.
Here is the object with this calculated data projected on it – in this case it’s called Occlusion-Map.

Occlusion Map Train

A map that shows shadows on the object, called Occlusion-Map – like how it would get darker in corners. It makes the object more readable.

Another such map shows me the elements of the object. It fills them with flat colors, so that with just a few clicks then I can define unique properties for an element.

Generated Color Code Map

This map automatically color codes elements. This way I can then easily say “make all girders yellow”.

Other examples are a map for showing the thickness of elements:

Generated Thickness Map

For this thickness map, the computer automatically calculates every element that is thin (and becomes black here) or thick (white)

Or the location:

Generated Position Map

The position map is a bit harder to read – but you can see for example, how in one corner everything becomes red. This way you can tell the program for example: “Color everything that’s on the bottom in a certain way”.

Specifically for my use-case, a map showing the edges is useful.

Curvature-Map

Here is the “Curvature-Map” – it shows edges that point outside as white, and inward pointing ones as black. I used this one as source to create the first step of my texture.

After all, my style has black lines that mimic how in comics elements are separated – which I try to make look like simple ink line style. Using the map you see above, I told the program to automatically draw a black line on all inner and outer edges. Here is the result.

Generated 3D Texture Outline

This outline is completely automatically generated – I told the program to add some distortion, to have more natural look.

It all still needs a more detailed artists input. In the following step, I go in and add by hand all details that the program by itself can not know. Like that locomotives have little lines and exhausts.

Painted 3D outline

I went in and painted in the 3D view, to add specific details like lights.

Using the earlier mentioned Position-Map, I then add variation to the surface.

Generated Damage Train

This step is now automatic – it adds variation. I’m using the height information from the earlier layers, to tell the program: Add more damage at the bottom (as there would be more dirt and such on a train)

I can then easily color it all and export the final result – in this case the flat map with all color details.

Train Texture view

The actual texture in the flat view.

There are some more twists and turns to it all, for example Normal maps. These are nowadays used in all 3D engines, to show the shape of small details on a flat surface. But for sake of brevity I’ll skip some finer points.

Normal Map Generated

The Normal-Map – it shows the 3D engine what 3D shape the smaller elements have.
Again, a lot is automatic – I’ve put for example a wobbly structure on it, to make it seem a bit damaged.

With this result I can use another procedural program, called Substance-Designer. I can then process the export images and create new sizes and color variations with one click.

Substance Designer Program Window

I use Substance Designer to take the base texture and automate the creation of color versions.

Train Generated Colors

These are colors I let Substance Designer create for me.

Another such program is Houdini.

Diesel Train Damage

This is a damaged version, which also includes some distortion of the 3D model, which I do in Houdini

And just as an example, here is a completely different object – but since I could just reuse the rules I’ve set up for the train, most of the result comes for free.

Cabin Generated Texture

It’s a little cabin/exit (kinda like one you would see on a top of a building). It has all the style-elements used for the train, just adapted.

Small Building Colors

Again, thanks to the automation, it’s just one click to get all these color versions.

Procedurally Damaged Building

The damaged version of the building could use the same procedure as the train – with only some adjustments, so that chipped paint for example wouldn’t expose metal, but rather concrete.

Final Commercial Chapter Assets – Part Two

Here are some more of the shiny new versions of the commercial assets.

As shown in the first asset show-off, they all now have a nice default version, a proper damage state and color variations.

Building in Construction

Building in Construction

damaged construction

Damaged construction building.

Colors Construction

Color Variations of the building.

Little extension building

Little extension building

Broken Extension

Broken version

Extension Building Colors

Color variations of the extension.

Apartment block

Apartment block – base version.

Destroyed apartement.

Destroyed version.

Apartment Colors

Apartment colors.

train wagon

Wagon for a train

damaged wagon

Damaged wagon.

colored wagons

Colored wagons

Pedestrain Bridge.

Bridge for Pedestrians.

Bridge Curve.

Curve of the bridge.

Bridge Color Versions

Color versions for the bridges.

Industrial Funnel

And as a special building with no destruction or colors: An industrial funnel.

Commercial Chapter Asset Collection – Part One

Art production for the “Commercial Chapter” of Caromble went to full steam the last months. Most objects were place-holders before, with the fitting shape, but not much details in the 3D meshes and no proper textures. By now all objects have gone though the final process.

I’ve made pictures when I finished an asset, so here is a first collection. One version is always the normal block, the next one is a destroyed version (once the ball has hit the object), and the last is the color variations in an overview).

Building with Trims

Building with Trims

Damage Version

Damaged version of the trimmed Building.

Trimmed Color Versions

Color versions of the trimmed building.

Road

Road with curve.

Road Damaged.

And the damaged road.

Road colors

Road colors.

Fence Cloth

Fence Cloth.

Damaged Fence

Damaged fence.

Fence Colors

Color versions of the fence.

Wood Fence.

A fence made from wood.

Damaged wooden fence.

Damaged wooden fence.

Wood Fence Colors

Wood fence colors.

Brick Wall

A brick wall.

Damaged brick wall

Damaged brick wall.

Brick wall colors

Colors of the brick wall.

Prototyping the Commercial Level Art

We’re now starting doing the commercial chapter of Caromble! We have test-levels so far, that show the puzzle ideas we’ll use. But they need a lot of tweaking. Not just for the gameplay, but also for the art.

The art assets for that new area are just dummies right now too, so they don’t look up to par. It’s a common practice to do called Prototyping. That way ideas can be tested without spending big production time which then might be scrapped if the ideas don’t work out.

3D Blockout for Prototyping

This is the earliers blockout stage – just using literally a block shape and some texture from another mesh. Not a beauty – but quick to do.

3D Blockout for Prototyping

After the basic usage was tested in the game, I made a better mesh – and created an UV texture mapping (with a checkered UV test texture).

3D Blockout for Prototyping

Then I used an earlier concept to drop in a very basic texture blockout. This will represent the final result much better – but a real texture with normal map and other effects still has be created.

There is work left to do on this asset – but once our team tests this in the new levels, I can much better tell if the idea works. All those steps help previewing the result without committing too much work too early. And there are still quite some assets to go over – to keep track I place them on colored blocks.

3D blockouts overview

The Commercial-Area assets on color-coded floors for easier working. Blue for the ones that are still in the early blockout stage. Red is for the ones that still need the final texture pass. And green is for completely finished assets.

Sweating the Small Stuff

As we’re in the final mile of the project, there are quite a lot of little details that need polishing. Not the most fun work – but gotta be done. Girders and metal bars are used all over the game, and used still some early test textures without final effects like normal maps. So now I redid all of them, fixed all errors – and brushed them up to the style of the other objects. That will also help to make the game look consistent.

girders 3d

Supports and girders

And menu stuff – little navigation arrows and medals for the achievements.

Menu Icons

More Icons – including achievement medals

And the endboss you will meet every chapter got updated – we’re still tweaking the gameplay. Beware: He can now shoot back!

alien mesh

The “alien” – got a new home.. and weapons.

Inking Out the Texture Style

Pens used for hand drawn texturing

These are the two pens I use for drawing the textures.


I want to write a bit about the texture-making process for Caromble, which is quite different than I learned to make textures for bigger games. Early on I decided to try a more analogue texture look, while not going too experimental.

All textures are done first on paper with a simple ink pen (the Pilot G-Tec-C4 0.4mm). Before that step I put the A4 paper on the monitor and trace the texture layout on with a light blue pen (Pilot Color eno 0.7 “soft blue”). A bit of a low tech approach, but it works quite well. On the side picture you can see the blue traces.

Over the years of working on the game, the style and process changed a bit. Earlier Assets used to be much more detailed. Here are some of the later assets (with the signs you can see in a recent post). There you can see the lineart, that I scan and then color on the computer. Without effects it looks quite bland, so there are always specular maps (that change the shininess of an object) and normal maps (which add surface details). Sometimes some other render effects like illumination maps, that for example make windows and car-lights glow.

Texture layers of stylized sign

The textures of the bus. With the linart first, the colored texture, specular – and then the effect map that shows which parts should glow.

Texture layers of stylized sign

The textures for a commercial sign. With the linart, the final diffuse, specular – and a normal map.

Texture layers of stylized sign

Another commercial sign. Showing linart, diffuse, specular and normal map.

I think going for that low tech pen workflow was a good choice, since it saved time compared to tougher lead-penciling styles – even if that might have been easier to show off with. This way I can gather more experience before trying crazier art styles. For example I learned over time that I can work really small – a 512 texture only taking up 3cm. By now I could nearly fit the whole game on two A4 papers.
On the scan below you can see some earlier textures. While more detail looks nicer on paper, in the game (surrounded by lots of items) these just disappeared. The simpler and much quicker way looks better in the end. Win-Win!

A4 ink texture sheet

This is the A4 sheet I use for inking – it has half the textures of the game.

Here I’ve made a render with just the line-art. It looks also interesting – definitely something I will experiment around with more. The next one shows how it looks with all textures applied – the colors help the gampelay a lot, making it easier to distinguish items and their function.

Noshadow Lineart-game render

This is how the game looks with just the line-art (and a small black outline around the objects).

Lineart-game render

Here it’s the same textures, but with shadows, shading and some effects like blur.

Flat color render

This is a plain render – with no shadows or effects, showing the added color layer.

Effects render

And this is after turning on some of the effects you see in the game, like the normal maps, glowing lights, blur in the depth, and of course shadowing. The game actually has some more.

Final Asset: The Farmhouse

One of the first bigger assets in it’s final form: the farmhouse. Which is right next to the start on or prototype level. I made a little turnaround movie – one with the diffuse map, and one with just the normal map (Normal maps are basically just showing the shape of a form, instead of the color).

I think I’ll keep this style throughout the project – after all the testing I’ve written about earlier, I’ve got it working: It’s quick, and unique enough. With some after effects we’re planning for this should work well in the final game (again, those asset shots are not done in the real engine yet, but close to it).




Next Step in 3D

After the 3D tests I showed earlier I had a pretty clear path to go. Inked lineart did a neat job: it is clearly visible, gives a unique look and is well workable. The next step was coloring to create some final assets so I know it works for all the remaining pieces. From the concepts I had a good idea of how the coloring should look like – and I wanted to take the loose approach very directly into 3D.

Here are some 3D tests that are further along. Note though, that while these are real-time shots, they are not from the actual game. Certain features, like the black outline are still missing. But I think we’re close – the depth of field (blurring in the distance) is working already albeit not as perfect yet.

Here the texture of an oil barrel. Each object will have also a damaged version – thats what the cracks are for. For who is not into 3D usually: The light blue part is a normal map, which helps the game with the lighting. It adds little details like the rims, without having to change the mesh.
It was a guideline from the team to create these, because the Ardor3D engine is able to handle modern shaders quite nicely and we want to show that off (and it looked nicer anyways). While in the game the lights is not set up well yet, these normal maps will look better than in those test shots.

From Concept to 3D

When we went for the city design – I had to start thinking about how to transfer this look into 3D. It’s great that the team gave me the OK to go for a pencil experiment. I am used to work on huge game projects with hundreds of people – there is not much flexibility there, and not much trying of new things. The switch to single artist is a very nice experience.

I started with a simple container as first test object. And I did the texture in a pencil style. Hoping to get as much of the drawings in to the final version.

There are some problems with this approach. As you can see in the texture-scan, it’s all a bit noisy. And when adding a color overlay (since the final version would surely be more colorful), the lines are hard to read.

In 3D this all got even worse. In the screenshot above you can also see a version with a normal map added. While this looks nicer to me since it seems much more detailed, it makes the line-effect nearly disappear.

Maybe adding contrast on the lineart would fix this, but it tends to look “dirty” with scanned pencil art. Which also creates another issue: Whenever I would add something in Photoshop, I would have to emulate the noise effect. Keeping in mind that I will have to do all assets on my own for now (the downside of not having a big team), I had to find an easier way.

So I made several dummy-objects with just ink-lines. It is faster, and way easier to fix in Photoshop.

The lines are much stronger, and won’t disappear, even if I add color later. I decided to go for this – and made one more detailed object to try the workflow. Some ambient shading definitely helps to sell the shapes.

I think with this I have a good balance of “easy to work”, while still having a somewhat analog look to it.