Animal programs

How Animal Well leverages PS5 hardware to elevate the 2D pixel art platform

Animal Well is just another 2D pixel art indie game, so why does it look and feel…just a little different? In his Summer Games Fest recap, Danny O’Dwyer (Noclip) summed it up nicely when he called Animal Well “the hardest game to explain why I liked it”. Defining what exactly sets it apart can be tricky, especially when your brain is telling you it looks like it’s from the Commodore 64 era. Today I thought I’d take some time to break down some of the work involved to make a single Animal Well frame look the way it does. What awaits us will be a relatively brief, high-level tour – each of the featured features might have its own blog post – but I think a peek under the hood will prove interesting nonetheless.

For starters, Animal Well is rendered in many different layers that are all dialed together in quite a complicated way. Here you can preview some of these layers and how they are used together to render lighting, before producing the final image.

This shot is from the start of the game where you can use firecrackers to banish a ghost chasing you. We can break it down to see some of the rendering steps involved.

For more fun, we can also watch what this shot would look like with the lighting turned off.

When it comes to rendering, Animal Well does a lot of little things that add up to the end result you see. Here are some examples.

Normal cards

As a light moves across the background landscape, it illuminates it differently depending on the direction the light is coming from. To do this, I use normal cards. Normal maps are textures that help define small geometric details on an otherwise perfectly flat surface. The color of each pixel represents the “surface normal”, which is a vector describing the direction in which the surface is facing. They are an integral part of most 3D art pipelines, but are much less common in 2D games. I manually draw the normal maps, right next to the rest of the game art.

Light source interacting with normal maps

background effects

Animal Well does a lot of fun things for its backgrounds. In this example, we see a bunch of implicit 3D geometry being raymarched, which also has raymarch reflections! Ray tracing is similar to ray tracing, but instead of casting rays to intersect with polygons, you walk along a ray and evaluate signed distance functions or SDFs. SDFs can mathematically represent all kinds of geometries and can be mixed together to create very dynamic shapes, which is usually not possible with traditional rendering. These shapes are lit by the light sources defined in the layers in front of it. SDFs can be expensive to render (“expensive” in the sense of using precious limited processing power), but in this case, the PS5’s GPU makes quick work of them.

Smooth effects

Animal Well has a layer dedicated to constantly running a Navier Stokes fluid simulation. It is used for a wide variety of effects throughout the game, most commonly water and smoke. Sprites can be drawn into it as “dye” and then game objects can also draw forces into the field causing fluid to advection in a very realistic way. Simulations like this can be expensive, requiring many iterations to calculate an accurate result. Special care is also given to the color threshold to fit the rest of the pixel art.

Tools

A lot of the development doesn’t involve working on the game itself, but rather creating tools to make the game. I developed the game engine and editor from scratch while using it to create the game at the same time.

MIDI controller

Pretty much any variable in my motor can be changed through a midi controller that I have connected to my computer. It makes the process of fine-tuning gameplay variables much faster (and also more fun!) Using a midi controller, I can literally dial in the parameters.

I use a modified version of the popular program Aseprite to draw and animate sprites. I can make changes to Aseprite, which produces a custom binary animation format, and then the engine will instantly reload it while the game is running.

Super low latency

Just as it can be hard to express exactly how different Animal Well is from other pixel art games, it’s just as hard to say why it’s fun to play. After all, the controls are extremely simple: move from left to right, jump and use objects. That’s it. So what’s different about how Animal Well does it compared to every other game in gamekind’s history? It all comes down to input latency.

Creating an entirely new custom engine is a lot of work, which is perhaps why so few people do it. There’s no shortage of out-of-the-box engines, from Unreal to Unity to GameMaker and many more. Games created with out-of-the-box engines rely on the engine layer, which acts as a buffer between the game and the CPU and GPU. With Animal Well, as soon as the player touches the control, the game code can immediately and directly tell the GPU what to do, which means the game can be rendered using your input from the same frame, without any crawling. buffer memory. The path between brain → fingers → controller → game → display becomes almost instantaneous. Of course, no one notices this on a conscious level. The game just starts to feel like an extension of your mind and the controller seems to disappear.

Recorded at 240 FPS on an OLED screen, so slowed down by around 400%

When describing Animal Well’s development process, I often use the oxymoronic phrase “next generation 2D pixel art platform”. I hope this peek under the hood has shed some light on what I mean by that.