How we Gave 'Clash: Artifacts of Chaos' its Unique Art Style

Hello everyone, and welcome to this post about a topic we often get asked about: our game’s stylized rendering!

Video games can use many different styles to create a unique look and feel. For Clash, we knew from the beginning that we wanted to use a very colorful and non-realistic one for many reasons: to set it apart from other games in the genre, to allow us to stylize and exaggerate the animation and color palette, and to approximate the illustrations and punk-fantasy art that inspired the creation of the world in the first place.

Stylized rendering is a powerful tool that highlights that “What to draw?” and “How to draw it?” are two different questions. This is the third time we have visited the surreal world of Zenozoik and its primitive humanoid animal inhabitants, but it is the first time we are approaching the “how to draw it” with a really different technique!

header

There are many ways we could have gone, and we tested several different styles before landing on the one we used. By choosing what to simplify and what to exaggerate, you get very different effects. One of the more interesting styles we tested was a painterly thick brushstroke look.

It allowed very expressive shapes, a messy almost impressionistic look, and was certainly very different. We eventually decided against this style because of the excessive simplification it produced: our artists always wanted to add more small details to characters and environments, details which would not really shine in this impressionistic style.

The rendering style we ended up going for is called hatching, or crosshatching. It is a drawing style that creates shading and conveys lighting by drawing closely spaced lines. The closer the lines are together, the darker the area will appear. This style is often used in traditional drawings, illustrations, and comic books, and gives the artwork a hand-drawn look. This technique allowed us to achieve an illustrated style while still preserving detail.

By separating the lighting information and conveying light intensity and detail mostly with the ink pencil linework, we can treat color as a separate layer. This allows us to use more artificial color schemes which would look strange in a realistic rendering style but feel consistent with the look of an illustration. Violet and orange skies, characters with blue or yellow skin, orange dirt, cyan and green mineral deposits in the mountain walls… we intentionally use saturated colors, or color combinations hard to find in nature to convey this is a different world.

One of the main challenges to make the hatching style work was to make sure that it worked at different distances and different levels of detail. It is not just drawing lines on the surfaces, because what works for small details up close might not work for a mountain at a distance.

Also some features must be preserved more carefully, like character eyes which are a focus point and must always remain well defined and sharp. The linework needs to be consistent to seem like it was all done with the same tool.

Finally, while we have designed a very specific look for the game, we still chose to enable configuration options for players to personalize the look. Players can choose a cleaner look or add and remove effects. We even left in a comic book inspired black and white mode, which is not ideal for readability, but is still very cool to play with!

Hope you enjoyed this look as to how we developed the art style for this beautiful game.

- Edmundo Bordeu, Art Director at ACE Team

5 Likes

Nice to see a thread of the art direction here on the forum! I do wish you delved more in to the “how” you made it, especially regarding the following:

I’m also curious as to why, for a game with such a standout style, you let players disable all of it for a cleaner look? Was it accessibility reasons or fear of people not enjoying it?

I was “click baited” by the cover image which has expressive shapes. But you told me you ditched that.
Well, I am looking for the impressionistic style in games. Glad to know it’s possible.

1 Like

Nice! The effect looks stable during camera movement so I’m guessing this is:

  • Post processing with world-aligned textures for hatching on static objects
  • Stencil cutout & in-material hatching on dynamic objects. Perhaps writing to a buffer for compositing or use in a custom shading model?
  • Post process outlines to tie it together

In trying to replicate hatching (I’m going for an etching style), the tricky part is having the hatching scale with distance.


This is 3 texture samples of a 341KB hatch. I’m overlapping the samples to get 5 depth layers & blending between these. As you can see in the foreground, blending between layers can be awkward. Not sure how many layers I can squeeze out of 3 samples so I can expand the effect to the far distance.
I’d be interested in how you handled depth & optimisation!

this looks beautiful, thanks for sharing!


We don’t really allow completely removing the hatching style, but give controls to affect opacity and size of the hatching lines.
Another thing we allowed to enable and disable is an “animated lines” effect. That one did bother some people who found the constant movement over the entire surface of the screen distracting, so you could say that one was an accessibility choice. Exposing these settings is sometimes useful, but also sometimes just fun to play with.

As for how it is done, yes, you are right about several of the features. It is World-Aligned “triplanar” mapping, though we had to do something special so that the actual facing direction of faces are more important in the the shader than the vertex normal, else we would get some stretching of the texture in some meshes. The hatching textures are mapped on the geometry, but invisible unless viewing the scene with a material postprocess that uses that hatching layer in different ways (we sacrificed the subsurface buffer to store all the hatching info. It gave us R G B channels to play with and store 3 monochrome textures)
For the characters we could also use world aligned textures. They “stick to the surface” and do not slide with character movement because we use the “Pre-skinned local position” node, which will give you space coords of the character without animation, and also do not change when the character moves.
To solve the problem of having many more viable distances without adding more and more texture samples, we use just two texture samples, but they cross fade and change tiling 2X for the texture which is invisible. Successively alternating textures A and B and doubling the tiling, the same texture works for any distance. I added a little diagram I hope explains the idea

Also, I’m sharing here the material graph… hope the image is not compressed until unreadable!
It is not the final shader we used, but the essential stuff to calculate the transition distance is there

2 Likes