Category: Art


The Container Revisited

A simple container-crate was one of the first objects I approached and did tests with to figure out the art style and working approach for Caromble. It has stayed as this, although the game evolved to more of a line-art style over the next years. Time to bring this one up to date.

First, here you can see the original texture I created back then. I tried pencils to draw the details, which gave a nice look in black and white.

pencil texture

The first texture, done with pencil on paper and scanned.

But on the final object, when adding color, it’s actually a bit hard to see. Mostly you would not even get this close. Additionally (and this weighted even more in the decision), it was a lot of work. It’s hard to get the inevitable digital fixes to look exactly like pencil. Imagine cutting and rotating a piece – the parts would not have the same direction of the hatching anymore.

Ingame asset with color

Screenshot from the game, with a color overlay on the texture.

Real-Time colored pencil texure

For better comparison, I’ve made a more up-to date real-time shot of the asset. As you can see – with more effects like reflections and normal map shading, it’s even harder to notice the style.

And here is the updated approach – with just a black pen as base. There is a bit analogue detail in there, like irregularity in the lines, but it’s more subtle and easier to move around.

Generated Pen Texture

The new texture – this time done with Substance Painter, with some tweaks.

In an earlier posting, I described the procedural workflow for these 3D assets. A lot is automated – and then I go over and do manual tweaks. Later the programs help me to create variations like different colors or damaged stages, often with just one or two clicks.

Pen Textured Container

Here is the new version with a texture based on pen line-art. It does have an updated normal map, and the effects, but the line-art shows.

Damaged Container Asset

The damaged version – it’s naturally even more noisy, but still reads as stylized.

Container Color Variations

Furthermore, I generate color variations. Currently as separate textures – though we may switch to a shader that allows the programmers to change the color on the fly.

All objects have this style, with old objects being updated. I have a series of asset-shots on the Caromble blog, to show them off.

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.

Caromble! Friday #362: Story & Characters

Thomas—the artist—is completing the final art assets for Chapter 3. The rest of us are adding new sound effects and art assets to the upcoming prologue level. This will be the first level that new players will see. This way we can show a glimpse of the upcoming gameplay and give an introduction to the world of Caromble! and its main characters.

In Caromble! you fight the epic battle against your red alien nemesis. This is a very simple version of the story we have in mind. We know that it’s not necessary to communicate every detail of a story because people will create and experience their own stories inside their minds. What we do want to communicate is this battle between the paddle and the alien. In the prologue level we like to emphasize this duel with a classic “versus screen”. These are some iterations:

Artist’s first sketch

Artist’s first sketch

Programmer's feedback

Programmer’s feedback

Artist's latest version

Artist’s latest version

We have yet to agree on the names of our main characters. Maybe you already have created their names in your own mind?

Bonus question: What are those sentient beings inside the paddle’s spheres?

April Fools & New Boss Model

So yes… we did our first April Fools’ prank since we’ve started making Caromble!. Of course we will not introduce Pay-Per-Ball. The game remains a premium title. We did get some serious reactions to this, and also some fun responds.

The suggestion to ask 0.99 per ball because of the Dunlop Ball logic was very amusing.

Dunlop balls

Dunlop balls

We are currently working on several stuff. Thomas D. is working on the implementation of some new Sound effects. Raymond is working on the Boss Fight of chapter 3 where you need to use Arkatron #2. Peter is working on a Skill level called: “Race Race Race”, without using the ‘Race card’ of course. Pascal is working on the Prologue story level, which introduces both the Protagonist and Antagonist and where the epic battle for Earth commences. Thomas S is working on the new boss model, which gives it more character:

Like A Boss

Like A Boss

We’re still looking or good names for both the Protagonist (the Paddle) and Antagonist (The Red evil Boss-thing). Do you have any ideas?

The Final Caromble! Cover Artwork

I’ve posted the sketches earlier, and you’ve probably seen the artwork pop up in various shapes everywhere. But I haven’t posted a nice clean version here yet – and how about a wallpaper?

I’m used to do marketing artworks, but never actually been on the side of using them myself. So it was once again a good chance to learn some lessons. I chose the highest resolution I could work in, and kept everything in separate layers. That makes working slow, but pays off in the end. In this case especially when the big banner for the firstlook expo had to be printed.
The part that I wasn’t aware of, is how many different formats I’ll have to use this one in. The high banner is quite different from the square Steam

Caromble Banner Photo

There were quite some adjustments to get it into this format – so it’s good to keep all major elements in layers.

Caromble banner artwork

And here is the final version – this time the size for the banner. Some elements moved and the path is longer than in the wallpaper. I like this version of the composition a lot.

Next Steps of the Cover Artwork

Taking in the feedback from the team, I worked on new versions of the Cover artwork (of which I posted the first steps last week).

The crew liked the general idea of the zig-zag pattern. But the idea of tumbling objects got a bit lost in the latest sketch. So here I’ve made it central, and removed the enemy – so that the composition stays simple.

Good progress – but I wasn’t quite quite happy. And the team wanted to keep the alien, as it hints at an interesting story. So here is another version… though the composition is narrowing down.
This drawing is cleaner, so I can use it as base for working digitally on it.

Next I made a blockout, so I have a better feeling for the brightness-values that the image will use.

And finally I added some colors. Some things I just keep in mind for now – for example that the explosions will blend better with the background in the final version. But it gives a good preview. The detailing can begin.

Caromble! Cover Art Is Coming

This will be an important part of our Greenlight launch, so I have to get this right. Here are some first sketches I did for the cover art – of which I will use elements for the various images in the Steam store.

Quite a lot of elements to get in there. I have the paddle shooting the ball straight at some objects. Lots of explosions of course. And the nemesis wailing about.

In a second sketch I tried to highlight the specific game elements more: The ball bounces around, and aims finally at the enemy as central figure. The scale comes across a bit better – and I think it’s overall nicer to look at.

More work is to be done on these concepts – I’ll update next week with the progress.