Shaders are a very powerful tool that can be used to manipulate the graphics that your game renders to the screen, permitting incredibly fast effects that can range from, for example, adding a subtle colour hue to a sprite, right up to full screen distortion effects. But what is a shader?

A shader is basically a two-part program that runs directly on the graphics card itself, making it very fast since the GPU is doing all the work and freeing up CPU cycles for your game code. The full shader is comprised of a vertex shader program, and a fragment shader program (also known as a pixel shader). Both of these tiny programs work together in order to manipulate what the graphics card renders to the screen. This then permits you to manipulate in real time, the position, colour and alpha values that are actually rendered into the display buffer.

Vertex Shader

The Vertex Shader is the programmable shader stage in the rendering pipeline that handles the processing of individual vertices (the points of the triangles used to render any image), and when you are rendering a geometry - like a sprite or a surface - GameMaker Studio 2 creates a stream of vertices, called a Vertex Buffer, that define the geometry of these triangles. A sprite for example would have a geometry of two triangles (polygons) rendered together to form a "quad". This vertex stream from the Vertex Buffer is fed as an input to the Vertex Shader, which can process the vertices data in a programmable way. The Vertex Shader output is used by the GPU to assemble triangles, which are then properly clipped and culled to the view port, and then sent on to the rasterizer block of the GPU which generates a new output stream, constituted by something called Fragments. These are tiny data structures, each of which is relative to a single triangle pixel that appears on the screen.

Fragment Shader

The Fragment Shader is the programmable shader stage in the rendering pipeline that deals with "fragments" - the interpolated pixels used to texture any given polygon - and they are responsible for outputting the final pixel colour of each rendered triangle pixel. Basically it works like this: the Fragment Shader receives as its input all those fragments (the individual pixels of the triangle being rendered) that have been passed along the pipeline by the Vertex Shader. You can then process these fragments to change the colour and alpha of the final destination pixel that will be drawn to the screen.

A complete overview of how shaders really work and what place they have in the graphics pipeline is outside the scope of this manual, but YoYo Games have produced a number of Tech Blog articles which give an excellent base to start from:

• Shaders Part 1
• Shaders Part 2
• Shaders Part 3
• Shaders Part 4

GameMaker Studio 2 supports the following shader languages:

To create a shader resource, simply right click on the Shader folder in the Resource tree and select Create. Once you have created the base shader, you can then use the right mouse menu on the new resource to select the shader type before continuing to edit the code:

The code editor itself is split into two programs when you create a new shader, with each one being available from tabs at the top. This is because you cannot create a shader without both parts. Even if you wish to only use the fragment shader you will have to have created a "pass through" vertex shader first, which is why by default any new shader being created will have a vertex and fragment pass through shader already coded for you (in the screen shot at the top of the page, you can see that we have used the code editor pane view to show the two side by side... useful when working on both the shader programs together).

It is worth noting that you can use GLSL ES shaders on all target platforms, but for the HTML5 target platform but you must have enabled WebGL in the HTML5 Game Options otherwise it will not work.

For further details relating to shader functions and how they can be used in GameMaker Studio 2 please see the following pages:

• Shader Functions - The GML reference section for shaders
• Shader Constants - The constants built in to GameMaker Studio 2 that can be used when writing shaders
• GLSL ES Specifications - pdf of the Open GL Shader Language specifications that GameMaker Studio 2 uses