For the art style of Ripple and Frawg, we wanted to draw on the visual language of storybooks, puppet theater, and other physical children’s media. Our influences span a variety of disciplines- watercolor, gauche, ink, collage, illustration, and even crayon. We want to evoke a colorful and innocent fantasy world that is impressionistic but weighty, expressive but physical, and this has introduced lots of unique design challenges.
What we came up with was a game with two distinct mediums, which combine to create our art style. Each medium represents a different level of diegesis- the two-dimensional diegetic theater world, and the three-dimensional mimetic storybook world. Broadly, we use the language of a stage play or puppet show to represent things like menus and cutscenes- elements where information is being told to the player, and we use the language of a storybook for gameplay- when the player is the one acting upon the world. In both contexts, to tie them together, key objects and characters (including the player characters) remain in the same hand-drawn art style, but their environmental context changes.
Our approach to representing the 2D stage world is the more direct of the two. We construct a physical stage out of mostly flat objects and dramatic lighting. We use actual photo scanned watercolor to create our props and environments in this context. This is a very literal approach to simulating a physical art style in a game engine- we are actually creating physical objects, or reproducing them digitally, as faithfully as possible. The pipeline is a lot like a photoreal pipeline, but for subjects that have an extra layer of artifice to them. I think that it’s the strongest approach for this half of the game. It’s straight forward, but it works.
The 3D storybook world is a bit more complicated. We could have used the same pipeline here- physically constructing or digitally recreating real objects- but the constraints of this context (performance and workload) discouraged the 1 to 1 reproduction approach. Instead of trying to make the game look like a particular medium- to recreate it exactly- we settled on a hybrid art style that merely shares the same principles and values of the ones that influenced us. Thus, our art style circumvents any particular real medium, and attempts to be the digital version of what we wanted to convey in the first place.
The Storybook Aesthetic
As the key tech artist for Ripple and Frawg, my job was to create the digital infrastructure for our game’s art. A lot of my work centered on creating art pipelines, and engineering shaders and materials. It was important for this part of my job to quickly establish what we wanted the game to look like so that I could get on with figuring out how we were going to do it. These are the things I wanted our visual language to communicate:
Impressionism. This value is simply the rejection of naturalistic depiction in favor of impressions. When describing an object, we should always describe our impression of it, the way it seems, rather than the way it actually is.
Expressionism. Like impressionism, this value is about depiction. It also rejects naturalism, this this time in order to describe the way that something feels. We should always be leaning into the things about the world that we want to express, rather than the way they actually are.
Lushness. The world of Ripple and Frawg should feel vibrant and colorful. Our art style should feel like it is alive, that the world itself is full and lush.
Flatness. Our art style is a form of abstraction- it considers a smooth continuous subject and flattens it into something discrete, with interesting contours and boundaries. These flat forms are the basis of the art style, and so the whole world is divided into discrete forms that are simpler than their input but that create a complex whole in composite.
Irregularity. Things in our world should be organic and imperfect. Wherever possible, forms should be a bit irregular, distorted, or warped.
Physicality. Our world is composed of tangible things with weight and texture. The way that they appear should express something about their physical form.
These values are, to the best of my understanding, values that our physical influences have in common. I’ve tried to use them to guide the way that I make models and textures, but also the way that the game is rendered.
The Paint Shader
We considered using some kind of post-processing to make the game feel painted, but ultimately decided that it would detract from the physicality of our space. Most of the physical objects in the storybook world are rendered with one central shader, and most of the materials in the game are instances of this shader. In this way, the paint shader is a kind of material design pipeline itself. At its core, it is a lit PBR shader, and so it accounts for physical things like albedo and roughness and metalness to inform the way that objects interact with light. The stylization comes in the way that it intercepts this physical input and produces an unexpected physical output. It works in the following steps.
Normal Partitioning.
This is really the core of our art style. In order to ‘flatten’ objects in the scene, we need to divide the smooth forms into flat shapes. Sometimes, this is done with cell shading- where the entire pre-rendered image is divided into discrete bands of color in post-processing. Instead, our shader does this on a per-object basis for physical consistency, and it does it by manipulating the normals of the object.
The surface normal of an object is the ‘up’ direction of the surface, a direction that changes over its contour. The reason that physical objects have smooth gradients of color when lit is because they have smooth surface curves, and so the light reflects off in an evenly graduating pattern. In order to partition an object’s apparent color, we simply partition it’s normals. That is, we calculate what direction each pixel’s surface is pointing, and divide those directions into a couple of flattened groups. The effect of this partitioning is that the light reflects off at the same exact angle for every pixel in a normal partition, and so it appears, to the camera, like one solid block of color no matter what angle you look at it or how it is lit.
Because the ‘normal’ input is a combination of the model’s surface normal and the applied normal from the normal map, we can use that texture as an indirect way to ‘draw’ on an object- since any modification to the normals of the object will be fed into the partitioning algorithm and flattened into the final color shapes. This makes our art pipeline both expressive and physical.
Noise Distortion
After being flattened, most objects still look too ‘clean’ especially if they have a very geometric base mesh. My solution to this problem was to introduce distortion to the normal partitions. Before being flattened, the normal direction is randomly wiggled around with Perlin noise. Importantly, Perlin noise is random but continuous, so the effect is that the whole object is a bit warped around the edges rather than harshly distorted. It lends a soft irregularity to everything and evokes the slightly frayed texture of a brush stroke.
Color Transformations
The color of paint shader materials is based on the way that lighting tints the base albedo color. We found that this is often very monochrome because lighting’s effect on color is always the same for each object. The materials lacked lushness because each color partition on an object was roughly the same hue. My solution to this problem was to use the normal partitions we’d calculated earlier as the basis of several color transformations.
For each normal partition (every pixel that had the same final normal direction) we can apply a linear transformation to the hue, saturation, and value. I’ve implemented three different transformations. One of them is completely static for the whole object, ignoring the normal direction completely- it’s just a random color warp based on the world position of the object, so that objects with the same material will each look a bit different. Next, we apply a directional gradient based on the normal direction of each partition (in this case, vertically, so the color changes as the direction moves up and down). Finally, we have a random color ‘jitter’ for each partition. By feeding the normal direction into Perlin noise, we can transform the color of each partition by a random amount.
The combination of these color transformations really helps to break up the monotony, and it also affords us with more expression. With more control over the relationship between direction and color, we can express more things about the object’s relationship to light. For instance, by jittering the hue of an object, we can draw out a deeper range of tone on a single surface. By making the surface become a warmer hue as it faces the sun and cooler in shadow, we can make the light in the world feel warm.
In general, the paint shader is all about abstracting a complex input. The boundaries that it draws creates interesting forms that express things about the physical objects. Because of this relationship, the ideal input for the shader is things that are smooth and continuous, so that they can be flattened by the algorithm. This applies to textures- which should always be blurry and vague to not distract from the partitions with their own sharpness- and to the meshes- which should be irregular, complex, and always smooth-shaded to give the algorithm the maximum amount of normal complexity. Our art pipeline is in this way a process of creating things that are complicated so that the renderer can simplify them.
Other Materials
Not everything in our world is static, physical, and solid. The paint shader- a lit pbr material shader- is not the correct tool for everything we want to represent. So, I was faced with the challenge of creating alternate shader materials that reproduced the same principles and values for completely different kinds of things. My approach to this challenge was to lean on the same kinds of techniques to fulfill each value.
Everything in our 3D scene attempts to use partitioning to create discrete color shapes, in order to look flattened. While the paint shader partitions normals, the sky shader partitions light. The fire shader partitions color, and the water shader partitions refraction. Each of these materials also use Perlin noise to distort their shapes, and the fire even uses it to create the base form for the flames. They also try to replicate the same kinds of color transformations to their partitions- water changing its color with depth, fire with heat, and sky with brightness.
In repeating patterns across materials, we imbue them each with the same artistic values. The effect is that even though these materials are completely different, they still inherit the characteristic profile of our art style.
Rendering as Visual Design
The way that you render your game is not neutral. Fundamentally, the way that you process your visual information is the basis for how your game looks, and furthermore it carries with it implicit attitudes and biases and values. Raster graphics, for instance, assume that games should be made out of pixels. 3D graphics assume that games should have depth. PBR assumes that objects should be lit, and that those objects should behave physically. Each step in calculating what the final image your player sees should look like is a contribution to your art style, and the design of the game as a whole. If you care about what your game looks like, you should build in these biases deliberately so that they are the ones that you value.
Personally, I find our art pipeline and the technologies that support them instrumental not just in the way they shape my workflow, but in the way they shape my own understanding of the game’s identity. Having an explicit set of values- for art or for anything- sets you up to make consistent decisions and to create a deliberate and unified work.
Comments