Affinity for Game VFX - Step Animation w/ Live Procedural Texture

[leshido]

I consider Affinity to be one of the best software for game art in general and specifically game UI design. While Figma/Sketch may be great for general UI, games often benefit from a richer style, with textures and effects that are hard to accomplish in modern design tools, making many companies opt for Photoshop instead. Affinity, in my view, offers the best of both worlds.

Lately though, I started experimenting more heavily with Affinity for game VFX and found this seemingly minor but hugely powerful feature—the Procedural Texture live filter. It basically allows direct non-destructive manipulation of channels using GLSL-like functions. For example, I used it to create a jelly effect by writing a simple “Metaball” shader.

More recently, I’m using this powerful filter to produce “step animations” and I’d like to share this method here for anyone who might be interested.

Step Animation Process

First, what is a step animation? It’s basically a way to pack certain kinds of effects into a single image. Traditionally, animations would use a sequence of images and loop through each one to simulate movement, like a flipbook. A step animation is similar, but instead of multiple images it uses a single texture and a basic passthrough test to display each frame. While this method has its limitations, it can be perfect for many effects. If you ever used the Threshold adjustment you can probably see how it works.

Now, let's see how to approach this. With one greyscale image in Affinity Photo, we can add our Live Procedural Texture filter and write our own custom formula. Here, we pass 1.0 as the value for RGB making it completely white, and let the brightness of the Red channel determine the Alpha (opacity) over time. The lighter a pixel is, the earlier it appears.

At this point, it’s not that different from a Threshold adjustment. We can get a little fancy if we replace `step` with `smoothstep` and add a parameter to control the “smoothness” of the transition, basically making it less aliased.

This only covers the IN part of the animation, how it appears. We still need an OUT. Luckily, we’re only using greyscale here, and any single image actually contains 4 different greyscale images, one in each of its RGBA channels. So, we’ll use the Red channel for the IN and the Green channel for the OUT and modify our shader to reflect that change.

Nice! With 0.5 both the IN and the OUT parts of the animation should each take exactly half of the total time. In my final iteration I decided to actually use the Blue and Alpha channels to control both the timing and smoothness per pixel. My current effect I'm working on looks something like this.

Hopefully this was interesting to some of you. Affinity truly has some great yet undervalued features, and this little exercise helped me learn more about some of them. Thanks for reading!

[Frozen Death Knight]

@leshido Very cool! As a game artist I definitely agree about Affinity being very useful for game UI. Very easy to create pixel perfect designs and mass export everything from a single document. Once you have set up your assets it is very easy to iterate on the designs. That VFX through code is a really solid idea for building 2D animations. This makes me even more hungry for an animation timeline to be able to do this kind of work as well, since I think Affinity could be perfect for filling the niche that Photoshop fills in editing pixel/2D animations, storyboarding, UI, etc. Being able to key animate various settings like that filter slider you made would open up so many possibilities.

Thanks for sharing!

[bobdobbs]

Your results are really cool, but I have no idea what you are doing.

I stumbled across your post while browsing through the forums. I was basically just searching the forum with the string 'animation', because I wanted to see how people are using Photo and Designer in their animation work.

Can you tell me what you are doing?

>> It basically allows direct non-destructive manipulation of channels using GLSL-like functions.

What does this mean, and how are you able to use it to get the results that you are illustrating?

[leshido]

Of course @bobdobbs, happy to explain what's going on here.

It might make more sense in a game-development/tech-art context, but basically most game engines (i.e Unity, Unreal, Godot, Defold, etc.) offer some sort of functionality called Shaders. These mini-programs often use a programming language called GLSL to write functions that manipulate or otherwise determine how things are drawn to the screen.

Affinity Photo has this unique Live Filter called Procedural Texture. It is admittedly quite advanced and intimidating at first glance, but it allows one to write these equations and use them to manipulate channels (Red, Green, Blue and Alpha) in roughly the same way shaders do.

In this example above, I used the filter to achieve a very specific use-case for an effect in a game we're working on — basically the equivalent of running a Thershold adjustment with increasing input over time (if that makes sense, hopefully you're familiar with the Thereshold adjustment). With this shader, we're able to use a single image and apply this sort of effect first to it's Red channel (for the first part of the animation) and then to the Green channel (for the closing part of it).

It is a very specific and limited effect, aimed at a niche use case. So, while I'm not sure it's very useful as-is, my hope was to help users get more curious and familiar with the Procedural Texture live filter as I think it can be used to create/simulate many types of animated VFX.