Graphics Intro to Shaders in GameMaker

A

AleHitti

Guest
GM Version: GameMaker Studio 2 (should work on GMS1.4 though)
Target Platform: ALL
Download: DEMO File
Links: Intro to Shaders in GameMaker Studio 2

Summary:
Shaders are often used to create beautiful graphical effects in games. They are also among the most advanced features offered by GameMaker Studio 2, but I will try to explain everything as simply as possible in this post. To follow along, you do not need any previous knowledge of these features, but it is necessary that you have a basic understanding of programming and know your way around GameMaker Studio 2. Let’s get started.

Tutorial:

What is a shader?
Initially created to provide shading for lighting (hence the name), they are now used to produce a huge variety of effects. Shader code is similar to regular code, but it is (almost always) executed by the GPU (your graphics card), not the CPU (your processor). This difference comes with its own set of rules and limitations, but we’ll cover those later.

Each shader is made up of two separate scripts: a vertex shader and a fragment shader (also referred to as pixel shader). When I first started learning about shaders, I had a tough time getting my head around how they work. However, I came up with an analogy that made it much simpler for me to think about them.

Let’s start with the vertex shader. Each sprite is formed by a rectangle, but computers like to draw triangles, so those rectangles are split into two triangles. This leaves us with six vertices per sprite, but two of those are the same one, so we should only worry about four. Now, imagine we have a for loop that goes over every vertex and executes the code inside the vertex shader for each. This allows us to change the vertex position and color before passing it over to the fragment shader since the vertex shader is executed earlier.

Here’s how that would look:



For the fragment shader, you can imagine the same loop as before, but this time it goes over every single pixel in your sprite, giving you information such as location and color of that pixel. In your fragment shader code, you perform operations and calculations to determine the color of that pixel to get the effect you want. For example, if you want a shader to make your sprite be black and white, then you’d calculate which shade of grey each pixel needs to be to create the effect.

It would look something like this:



The full article can be found on the link above, or by CLICKING HERE. If you follow along, by the end you'll have a shader that will do this:



I hope you enjoy it! Let me know if you have any questions/suggestions and I will get back to you.

Cheers!
Alejandro Hitti
 
Last edited by a moderator:
F

Flab

Guest
Just nitpicking a bit, have been coding "shaders" since dx 7 hardware (yes...gf/gf2). Stencil shadows and hardware t&l for normal mapping and specular highlights, anyone?

But in that second animation of yours it looks like a sequential fill/processing, but that's not what happens, though the result is the same. Typically the hardware processes small tiles. Though that is perhaps not generally relevant to beginners, it does have implications for more advanced shader use.
 
M

mog-frarol96

Guest
Nice explanation, this will save me a lot of work explaining the basics of shaders to my team members!
 
Top