Gameplay Feature: Tools That Power Anterra - Part 1

This update shows off one of the MANY tools that we’ve made to help bring our vision to life.

Shadow Offset Map Editor

(We need to come up with a name that can be shortened…S.O.M.E. just doesn’t work)

First up, we have our height map creation tool, called our Shadow Offset Map Editor. This tool was created to help us generate height maps for our game assets.

A height map is a visual representation of the distance a pixel is supposed to be from the ground. Since our assets are all flat 2D images, everything is actually on the ground, so we need to fake their height. Height maps use colour to encode data for our code to interrupt when you’re playing the game. It essentially gives 2D assets 3D information, so shadows know how far to “climb up” before wrapping around, and objects know how to properly clip and overlap each other, like when the player stands in tall grass.

The grass and the player both have height maps, which allow it to properly obscure the player. The height map lets the game know when each pixel of the grass should be in front of the player or behind, and how high it should appear before it goes behind.

With height maps, our shadows properly climb up and over the top of the crate.

To give each asset in the game an appropriate height map, we needed to create a custom tool, because the amount of data in a single asset’s height map could take a game designer or artist hours to make by hand.

This is our Shadow Offset Map Editor, which was created to generate height maps for each asset in the game. It has features that you would see in a typical image editor, like free drawing, line drawing, fill, as well as parameters and properties to help make the process a lot easier for our team.

It’s important to note that every frame of animation or state of an asset needs its own height map, so the crate needs a map for both its closed and open states. But the good thing is, we don't have to be perfect when using the tool. If you look closely at the height map for the crate (or look back at the first GIF I shared), you will notice some extra pixels in the height map. Height map pixels that hang off the sprite are ignored by the engine. So painting outside the lines is fine... even if it triggers the perfectionist in me. 😳

And here is our tool in action! For vertical surfaces, you have to first tell the tool where the ground should be, represented by the white square in the red line. That's called the offset point. Once it's set, you can then draw upwards over the row of pixels. The tool automatically sets the height data by colour coding each pixel. Since the crate is on an angle, we have to reset the offset point for each vertical row of pixels on each face of the crate. The top of the crate can be filled in much more easily, because it’s a flat surface that uses the same offset position for the whole top.

Since there will be hundreds or thousands of assets in our game, we needed to streamline this process as much as possible.

Let us know what you think!

• Stephane, Game Director