Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Hello, shaders!

Crash-tan, saluting with a wink: purple hair, an orange hoodie with her name on it, and teal trainers.

It’s me, Crash-tan, again! This book is about one small corner of me: my shader language. A shader is a little program that decides what color every pixel of a layer, a sprite or a shape ends up, and it runs on the graphics chip, for all the pixels at once.

I’ll assume you’ve met my engine in Making Games with Crash, so a SCREEN, a SET SPRITE and a !! modifier are old friends. Everything around the shaders in here is Crash BASIC 2. The shaders themselves are written in a language of their own, and that language is what this book is about.

How this page works

Same as the engine’s book: the lesson is on this side, and on the other side there’s an editor and the game’s screen, with my whole engine running in your browser. Every piece of code has a Try it button. Press it, then change the code and press Run (or Ctrl + Enter) to see what your change does. With shaders, changing the numbers is most of the fun.

SCREEN 320, 240
SHADER "rainbow"
    WHEN DRAWING
        SET COLOR = RGBA(UV.x, UV.y, 1.0 - UV.x, 1.0)
    END WHEN
END SHADER

SET LAYER 0 !! shader("rainbow")
PAUSE

That’s a whole shader. For every pixel of layer 0, it says: be as red as you are far across, as green as you are far down, and as blue as you are close to the left. The screen fills with a smooth wash of color, and nobody drew a single pixel of it.

Crash-tan’s Tip: Every example in this book runs, here and in my players, and my tests check every one of them: the program runs, and the shader it makes is one a graphics chip accepts. If one ever goes wrong for you, that’s my bug, not yours.

What a shader can and can’t do

A shader is small on purpose. It gets one pixel: where it is, what color it was going to be, how long the game has been going, and the settings you give it. It hands back one color. That’s all.

It can’t see your program’s variables, it can’t remember anything from one pixel to the next or from one frame to the next, and it can’t draw anywhere but the pixel it’s on. What it gets in exchange is speed: a 320 by 240 screen is 76,800 pixels, and the graphics chip runs the shader on all of them sixty times a second without your game noticing.

What’s in this book

  • The language: the SHADER block, colors, where a pixel is, numbers and vectors, making choices without IF, time, settings, pictures and randomness.
  • Putting shaders on things: layers, sprites and shapes, shaders that a behavior runs, and transitions of your own for CLS.
  • A cookbook of shaders worth stealing.
  • The rules: the names you can’t use, the limits, and what my errors mean.
  • The reference: every word of the language on one page.

Let’s start with the block itself.