Tutorial: GM2 Chromatic Aberration


Purpose: Using chromatic aberration (shifting of R,G,B in a shader( in Game Maker). However as it is written in GLSL this can be applied simply anywhere.


Shader
Simple the shader separates the red, green and blue channels and shifts them in a different direction or whatever you want to do with them.
The following will outline a basic scene and outline the elements to be aware of.
Lets take Gunter from adventure time.
  • Create a sprite
  • Create an object
  • Set background colour to pink
  • Give the object some alpha


Beautiful this is what our game should look like.
Create a new shader. If you aren’t familiar with shaders I won’t cover them here. I recommend learning via any of the following resources:
For now just ignore the first tab being the Vertex shader. We only want to deal with the fragment shader.


View the banner image to see the effect this gives

For the sake of brevity I will just outline at a high level what this is doing.
  • base_col is the colour of the fragment the shader is currently rendering
  • The color vec3 is offsetting the current base texture being our little gunter by some shakex and shakey we can provide the shader. The division of 2.0 is just a choice I put in this shader but you can also pass that in as a uniform.
  • The black variable calculates if the shifted colour is black and divides by 3. This will result in 0 if it is black and we do not want to render out black as that is what the alpha will be output as. However we do want to render out the black on the original image so we add the base_col.a.
This shader specifically creates a seperation so black aren’t transposed outside of the base textures color set. This may look like some colours are leaping off more than others. So we can add in the alpha for each subset colour we are displacing.



Pretty much the same as above except we are capturing the alpha of each offset image and determining if there was intended alpha.

Hooking up the shader

Go to our object and add the following events
  • Create
  • Step
  • Draw
Lets assume we want to have a bit of an animation effect. so we can see the colours separate and then reform.
Create


Get texel size so we know the relative sizes we are dealing with. Use the scale to change the distortion amount so it is relative to each sprite applied to.
Step


We can use chroma_time to keep track of the time that this shader is active. I’ve created a small helper script just to turn the value from time to distance by scaling the value from the old bounds to new bounds.


Draw


If the time is active we can draw our chromatic aberration and set its values based on the shifted value between the time min and max and shift min and max. This is linear so if you want it to be quadratic just change out the helper script.
Running our game results in the following when pressing space and using the alpha of every channel yields the following result.


So four items on note here:
  1. It looks pretty shit, lets blame my quick wanding cut out of the alpha with setting the strength
  2. The blacks look a little much
  3. The shift directions are kind of crappy
  4. Is… is that cutting off on the left? Yea, make yours sprites wide enough to expect that.
Lets try the first shader again with just the original image alpha


I think this looks better. It depends on what you want to go for.


And there is the time moving our distortion.

Comments