Designing MouseBot Part 2: Toons and Tech

After spending a year and a half fleshing out the console-first, ultra-detailed, gritty, futuristic, sci-fi world of Riptide: Renegade, we wanted a breath of fresh air. Since we had a ton of fun making the Beach Buggy series, something fun and cartoony seemed like a good general direction. 

Flat shaded, or simplistic elegance, has been a trend for indie developers for a while. This is in part due to the manpower necessary to achieve a realistic look. Realism takes a much longer time to develop because of a lot of very small, time consuming variables. We are used to realism; we live in it every day -- it's only natural to be less forgiving when something seems off. With stylized visuals, when executed by a small team with only one or two artists, you're able to cut a lot of corners. There’s no thirst for massive amounts of texture detail, polycounts that require many LODs, countless particle effects, or other “next gen” traits. All you have to worry about is general aesthetic. When one or two artists are building all of your art assets, they don't require documents and lists detailing the art style and what rules to abide by for the whole thing to feel congruent.

Because we were going with a super stylized look, we had to decide what that style was going to be, and how we would execute it. We had a few technical things to keep in mind for the art style that we knew we wanted to try out: no normal maps, a simplistic cell shaded feel, and to make good use of the dynamic lights we had. Since we knew we wanted this development cycle to be short, our emphasis was on art that was quick to author but made a strong visual impact. Simplistic was key. 

I used vertex coloring in both the Riptide GP and Beach Buggy series, and found it to be a really powerful tool. In those games it was mostly used for faked ambient occlusion or lighting. We took it up a notch in MouseBot: Many models in the game are 100% vertex color, with no texture information. This took out the need to UV most models, and avoided having our time consumed with authoring a lot of textures, including normal maps. It also had the included benefit of running extremely efficiently on even the oldest devices. The floors and walls used the largest textures because they take up a huge amount of your screen and you see them a lot.

This is a screenshot of a flat-shaded trap tile (consistently lit on every face). The only textures are on the screws and the hallway floor and walls. You can see the green lighting, which was faked using vertex colors. This, when paired with an actual dynamic light, worked really well to fake lighting detail we were not able to achieve because of technical restraints.

This is a screenshot of a flat-shaded trap tile (consistently lit on every face). The only textures are on the screws and the hallway floor and walls. You can see the green lighting, which was faked using vertex colors. This, when paired with an actual dynamic light, worked really well to fake lighting detail we were not able to achieve because of technical restraints.

This is the finished trap in game

This is the finished trap in game

We purposefully did not use a strong directional light (like a sun, or an overhead light fixture) when making the lighting schemes for MouseBot, meaning most of the brightness is coming from an ambient light, so it's more flat shaded than not. Each model was independently vertex colored to fake some generic lighting. 

Examples of flat-shaded props that are completely vertex colored

Examples of flat-shaded props that are completely vertex colored

A big part of the unique look of MouseBot is the metal. We did a lot of experimentation on what the shine would look like. It had to be simple and solid to fit the style we were shooting for, but also have it work with out currently existing method of cube mapping. The cube maps are applied additively so only the white information shines through. Also, because of the way cube maps stretch and deform across polygon faces, a few different ones had to be authored depending on what kind of surface it was used on. 

Example of two of the cube map textures we made

Example of two of the cube map textures we made

The same two cube maps in action

The same two cube maps in action

Skyboxes are typically painted onto a dome or sphere shape to simulate a sky, but MouseBot takes place inside so we had to figure out a different alternative. Because of the miniature scale and the way distance fogging works, we ran into a few road bumps just trying to throw a straight geometry roof overhead. It either felt way too close to the ground or was completely obscured by the distance fog. We created our own celing object that allowed us to place the ceiling closer to the camera than it would naturally be. Each ceiling type had its own parallax settings, so it could be told how quickly to move against the camera, which helped simulate the height of the ceiling. We created tiles, which was instanced out to the farthest fog plane. Everything below the skybox was filled with our fog color so it blended seamlessly. 

Tiling ceiling geometry for the garage and lab environments

Tiling ceiling geometry for the garage and lab environments

The asylum celing in game with distance fog

The asylum celing in game with distance fog

It's an important as an artist and also a fun challenge to work within specific technical boundaries to fit a project. It forces creativity in ways you wouldn't have previously thought, and confronts problems to solve within a team environment to establish a common goal. Know generally what you want to achieve from the start and work within your means to achieve it.