Animal Well is just another 2D pixel art indie game, so why does it look and feel… just a little different? In his Summer Game Festival synopsis, Danny O’Dwyer (Noclip) said it best when he called Animal Well “the game that’s hard to explain why I like it best.” Determining exactly what makes it so different can be elusive, especially when your brain tells you it looks like it might be from Commodore 64. Today, I think I will. take a moment to break down some of the work to create a single frame of Animal Well the same way it does. What lies ahead will be a relatively brief and high-level tour — each feature shown can have its own blog post — but nevertheless, I think a quick look will prove interesting.
For starters, Animal Well is shown in a variety of layers, all brought together in rather complex ways. Here you can take a look at some of those layers, and how they are used together to render the light, before creating the final image.
This shot is from the beginning of the game, where you can use cannons to banish a pursuing ghost. We can break it down to see some of the rendering steps involved.
For more fun, we can also see how the photo will look with the lights off.
When it comes to rendering, Animal Well is doing a lot of little work to make up the final result you see. These are just a few examples.
Normal map
As a light moves through the background, it illuminates it differently based on the direction the light is coming from. To achieve this I am using normal map. Conventional maps are textures that help define small geometric details on a surface that would otherwise be completely flat. The color of each pixel represents the ‘surface normal’, which is a vector that describes the direction the surface is facing. They are a very standard part of most 3D art paths but are much less common in 2D games. I draw the normal maps manually, right along with the rest of the game artwork.
Interactive light source with regular map
Background effects
Animal Well does a lot of interesting things for its wallpapers. In this example we see a bunch of implicitly divided 3D geometry, then there are also scattered reflections! Raymarching is similar to raytracing, but instead of passing rays that intersect the polygons, you are walking along a ray and evaluating signed distance functions, or SDF. SDF can represent all types of geometry mathematically and can be combined together to create very dynamic shapes – often impossible with traditional rendering. These shapes are illuminated by light sources defined in the layers in front of it. SDF can be expensive to render (“expensive” in the sense of using precious limited processing power), but in this case, the PS5’s GPU does the trick.
Liquid effect
Animal Well has a class dedicated to continuously running Navier Stokes fluid simulations. It is used for a variety of effects throughout the game, most commonly water and smoke. Sprites can be drawn into it as ‘dye’, and then in-game objects can also draw force into the field, causing the liquid to stick in a very realistic way. Simulations like these can be expensive, needing to be run many times to get accurate results. Special care is also taken to threshold the colors to match the rest of the pixel art.
Tools
A large part of the development process doesn’t involve making the game yourself, but instead creating the tools to make the game. I developed the game’s engine and editor from scratch while using it to create the game at the same time.
Controller Midi
Any variable in my tool can only be edited through the midi controller I have connected to my computer. It makes tweaking game variables much faster (and more fun too!) Using a midi controller I can literally dial in the settings.
I use a modified version of the popular program Aseprite to draw and animate. I could make changes in Aseprite, export a custom binary animation format, and then the engine would instantly reload while the game was running.
Super low latency
Likewise, as difficult as accurately presenting Animal Well’s look to other pixel art games can be, it’s equally challenging to say why playing feels enjoyable. After all, the controls are extremely simple: move left and right, jump and use items. That’s it. So what makes Animal Well different from every other game in gamekind’s history? It’s all due to input lag.
Creating a brand new custom tool is a lot of work, which is probably why not many people do it. There is no shortage of existing engines, from Unreal to Unity to GameMaker and beyond. Games are made from unusable engines that sit on top of 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 tell the GPU immediately and directly what to do, which means the game can render using your input from same frame without any buffering. The path from brain → finger → controller → game → screen becomes almost instantaneous. Of course no one noticed this on a conscious level. The game just starts out as an extension of your mind, and the controller seems to disappear.
Recorded at 240 FPS on OLED display, so the speed slows down by about 400%
When describing the development process behind Animal Well, I often use the phrase oxymoronic “next-generation 2D pixel art platform”. I hope this sneak peek has cleared up what I mean by that.
