GameMaker Scanline Shader Tutorial

[Bulwarkene]

GM Version: Studio (all)
Target Platform: Windows
Download: (see code example below)
Links: n/a

This is a tutorial that explains how to make a basic scanline shader.

Step 1:
Make an object, and in the draw_gui_end event, add this code:

shader_set(test_shader);
t_h = 1/surface_get_height(application_surface);
shader_set_uniform_f(texelSize, t_h);
draw_surface(application_surface,0,0);
shader_reset();

In the create event add this code:

texelSize = shader_get_uniform(test_shader, "texelSize");

Drag and drop the object into every room you want the effect.

Step 2: Make a shader, and for the fragment shader use this code:

//
// Bulwarken Scanline Shader
// CC0 License
varying vec2 v_vTexcoord;
varying vec4 v_vColour;
uniform float texelSize;

void main()
{
    vec4 temp = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord );
    temp * (mod(v_vTexcoord.y, texelSize*2.0) * 1.0/texelSize);
    gl_FragColor = temp;
}

Result:

You are free to use this for any project.

 

[Bingdom]

This doesn't explain very much for a tutorial.

Anyways, I would recommend using the texel size rather than 0.005. This would make the shader pixel perfect (or at least close enough).

You get the height texel size by

t_h = 1/surface_get_height(application_surface);

So the new multiplication should be this

temp * (mod(v_vTexcoord.y, texelSize*2.0) * 1.0/texelSize);

Also, you are manually drawing the application surface, now there are 2 applications drawing. You should disable the default one.

BTW, the math is wrong.
0.005 * 250 = 1.25
Shouldn't it be
0.005 * 200 = 1
?

 

[GMWolf]

It's an ok shader, but I must agree with @Bingdom , a tutorial should explain the thought process. (Frankly I'm surprised this got through, the mods usually ask for more explanation).

Anyhow, I would recommend you implement the changes @Bingdom suggested.
Most importantly, explain what the different parts of the shaders do, as presumably this is a tutorial on writing the shader, not on how to apply a shader.

Criticism aside, it's a nice solution and a usefu l shader too!

 

[Bulwarkene]

...

Good point, I didn't think of that. Sorry if this isn't a good post... I just wanted to share this awesome idea I had.

 

[chance]

Good point, I didn't think of that. Sorry if this isn't a good post... I just wanted to share this awesome idea I had.

@Fel666 is right: I usually require more detail before approving a tutorial. That's why I sent you a PM when I approved this, suggesting you should add more explanation. I felt the example might be useful, and would spark some discussion.

So now would be a good time to incorporate the corrections and suggestions for improvement members have given you here. (Along with some basic explanation of how it works.)

 

[Bulwarkene]

@Fel666 is right: I usually require more detail before approving a tutorial. That's why I sent you a PM when I approved this, suggesting you should add more explanation. I felt the example might be useful, and would spark some discussion.

So now would be a good time to incorporate the corrections and suggestions for improvement members have given you here. (Along with some basic explanation of how it works.)

Every time I try editing it says EDIT IS NOT ALLOWED. hmmm.

 

[chance]

Sorry. Apparently, forum restrictions on new members are causing this. These restrictions are necessary to control spammers, but they can temporarily inconvenience legit members as a side effect. Apologies for that, and for assuming you could edit your post.

Please send me a PM with your changes. I'll edit the post to add them.

 

[Sam (Deleted User)]

Couldn't someone make a transparent scan line effect as a sprite and just draw that over everything using draw_sprite_tiled()?

On platforms like Android, shaders make your games pretty slow, so this is an alternate method I'm just throwing out there.

 

[Gai Daigoji]

I use a transparent scan line sprite, but it's cool to see other methods.

 

[Bulwarkene]

Figured out how to update the post. I have a video as well, its uploading right now.

 

[MatthewL019]

Version: GMS 2

 

[Bingdom]

Version: GMS 2
View attachment 11452

Make sure that GLSL ES shader type is selected!

 

[MatthewL019]

Make sure that GLSL ES shader type is selected!

It is. Still gives me the same compile errors...
edit: fixed

 

[DriftWare]

This doesnt work at all for me. At least not visibly. The shader setup is in the camera, no idea whats going on.

 

[FoxyOfJungle]

This doesnt work at all for me. At least not visibly. The shader setup is in the camera, no idea whats going on.

Could you show us the code?
How are you applying the shader? Are you drawing the surface manually? Is the camera in the room?