Make Transitions Using Grayscale Gradients

Hey there! In this lecture you’ll learn a technique to make transitions using a grayscale gradient and a shader. Basically, this:

gradient.png Image result for right arrow transi1.gif

gradient2.png Image result for right arrow transi2.gif

You can see that the image appears gradually, based on its lightness. Black pixels appear first and white pixels appear last.

Let’s see how it’s done!


I’ll create a new shader, and call it sh_transition. I’ll add this in its fragment shader:

varying vec2 v_vTexcoord;
varying vec4 v_vColour;

uniform float time;

void main(){    
    gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord ); 

    if (gl_FragColor.r > time) gl_FragColor.a = 0.0; 

    gl_FragColor.rgb = vec3(0.0);


The uniform “time” will store the time value for the transition. It will start from 0.0 and end at 1.0.

The condition (gl_FragColor.r > time) will check whether the value of the pixel color is greater than the current time, in which case we want the pixel to not be visible. So if that’s true, its alpha will be set to 0.

Then lastly, the color of the pixel will be changed to black. Here you can change it to vec3(1.0) if you want the transition output to be white, or vec3(R, G, B) to make it some other color.


Now I need to set up a new object for the transition. In its Create event, I’ll add this:

transition_length = 2; //seconds
transition_time = 0;

uni_time = shader_get_uniform(sh_transition, "time");

transition_length is the length of the transition in seconds, and transition_time will be the current time value for the transition. uni_time is the uniform ID of the “time” uniform inside the shader. This ID will be used to give the uniform a value.

Now I’ll add this in the Draw event:

if (transition_time < transition_length) transition_time += 1/room_speed;


shader_set_uniform_f(uni_time, transition_time/transition_length);

draw_sprite(spr_transition_0, 0, 0, 0);


First up, it will increase the transition_time if it’s under transition_length. Then it’ll set the shader to sh_transition so that it can be used for further drawing. The uniform uni_time will be given a value that is transition_time divided by transition_length, to give a value between 0 and 1, as the shader needs it. Then the transition image will be drawn, and the shader used for drawing will be reset.


Using this technique, you can create some amazing effects:

b0658db4-97e3-44f8-8dce-0d9abc0854b1.png Image result for right arrow transi3.gif

You can download the project here: GMS 2 Project

See you later, and till then, happy dev’ing!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s