Bringing life to an empty world

They say the devil is in the details.

That is very true for animation. It isn’t hard to imagine an animation where someone tucks a lock of hair behind their ear, but what makes the scene truly come to life is if the hair that was tucked behind the ear comes loose right away and a few stray strands drop back again in front, making the character in question ever so slightly purse their mouth in annoyance. The former only animates an idea. The detail in the latter brings an idea to life.

For environments, the principle is the same. The world is far more interesting because of the little details of mundane things – of grass swaying but offset from each other, of shimmers on the water of which no two are quite the same, and the way a scrap of paper flutters when it comes loose from a surface it was once pasted to.

CIPHER ZERO hits a visual spot right between concrete and abstract. We take the realism we all think we know, then simplify it down to basic shapes before twisting it as if there is a glitch in the matrix. This allows players to keep one foot in reality and put one foot out. The animation is a large part of what keeps the one foot in.

Typical Animation Types

The Sway

The most common animation in CIPHER ZERO is probably a sway. This applies mostly to plant life but also any loose objects where there wind. The sway is most instrumental at setting the airflow, from the dance-like, regular back-and-forth of shrubs at the lake to the start-and-stop movements of the fuzzy dice at the gas station. How we animate it determines if there’s a steady breeze or just a sputtering air conditioner.

More rigid objects like swings or hanging decorations could be swayed with a simple rotation around a pivot. For softer objects, like nearly all of the foliage in the game, we used a shader that subtly distorted the sprite along a predetermined curve animated to resemble a constant but varied breeze. Combine that with a randomized speed and offset for every individual object, and the effect really brought the more lush environments to life.

The Spin

The spin is self-explanatory. It sets a pivot and spins the sprite around it. This proves useful for cyclical mechanical objects. The rotation on some objects, like the wind turbines, is actually synced to the tempo of the currently-playing song!

Flickers and Flashes

Flickers and flashes are achieved differently depending on how they present but they always serve a similar purpose of feeling electronic or twinkly. There are three general methods that they’re achieved.

Change in opacity - this is great for screens and for lights that pulsate

Change in scale - this is great for intense flashes as it creates a clearly pulsating sensation

Noise map - Noise maps involve masking Perlin noise to a texture and moving it, using it to control how bright an area of the texture is. When used in tandem with additive blending modes and bloom, it can make both invisible holes and intense glows, creating a twinkly, magical feeling.

Like with the wind turbines, some flickers are tied to the tempo of the currently-playing song. You can notice this on the red flares on the top of the buildings of Powerplant and City - while each flare flashes at a different time than the others, the interval between each flash is always the same and corresponds to one bar of the music. We wanted ways to tie the visuals of the biome to the music without having things cartoonishly dance around to it, and intermittent flashes like this hit a good middle ground.

Glitch

A glitch cuts quickly between two sprites or between two very different states of the same sprite. This is a somewhat rarer animation so please keep your eyes peeled for it!

Particles

The particles of CIPHER ZERO are tied to the identity of each biome. Many of them are abstract things like wind, pollen, pollution, and light. The most common representation is of disintegration or decay.

Disintegration particles - The disintegration particles themselves are fairly simple - they constantly emit rectangles with colors randomized from a predetermined array of colors. Rather than sampling the screen area around where they emit from, we opted for the more basic approach of hand-setting the colors ourselves. Placing these throughout each of the environments was quite the undertaking - each batch had to be manually adjusted to have a color set, size, and emission rate that felt natural for the spot it was placed. The end result was worth the effort, though!

Floating Particles - These particles have an up-up-and-away feel and give a feeling of dandelion seeds about to start new journeys.

Rolling Particles - Used for dust, fog, and clouds, these slowly make their way across the landscape and set the tone for the air quality.

And more?

These aren’t the only sort of animations in CIPHER ZERO, but if we show you everything, there will be nothing left to discover! As you progress through the levels and learn more about the world, there will be many more animations to discover. We hope you enjoy them! And please feel free to tell us which your favorite ones are.