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

Transitions of your own

CLS with !! effect clears a layer with one of my transitions: a fade, a melt, a dissolve. !! effect_shader clears it with a transition you wrote.

A transition is a shader that takes a setting called progress. I put it on the layer, move progress from 0 to 1, and when it gets there I take the shader off and clear the layer for real. All your shader has to do is draw the layer progress of the way to gone.

SCREEN 320, 240
SHADER "curtain"
    USE NUMBER progress DEFAULT 0
    WHEN DRAWING
        c = IMAGE
        side = ABS(UV.x - 0.5) * 2.0
        closed = STEP(1.0 - progress, side)
        SET COLOR = MIX(c, RGB(0.5, 0.0, 0.1), closed)
    END WHEN
END SHADER

LOADIMG "city.png", "city"
showing = FALSE
DO
    IF COOLDOWN(60) AND transition = ""
        IF showing
            CLS 0 !! effect_shader("curtain")
        ELSE
            PUTIMAGE (32, 0), "city"
        END IF
        showing = NOT showing
    END IF
LOOP

A curtain closes over the city from both sides, the city’s gone, and a second later it’s back to be closed on again.

side is 0 in the middle of the layer and 1 at both edges: how far out to the side the pixel is. As progress goes up, 1.0 - progress comes down from 1, and STEP closes the curtain over every pixel whose side it’s dropped under: the edges first, the middle last.

While it runs, transition is the shader’s name, as you gave it to CLS, and "" once it’s done:

SCREEN 320, 240
SHADER "curtain"
    USE NUMBER progress DEFAULT 0
    WHEN DRAWING
        c = IMAGE
        side = ABS(UV.x - 0.5) * 2.0
        closed = STEP(1.0 - progress, side)
        SET COLOR = MIX(c, RGB(0.5, 0.0, 0.1), closed)
    END WHEN
END SHADER

LOADIMG "city.png", "city"
PUTIMAGE (32, 0), "city"
CLS 0 !! effect_shader("curtain")
PRINT "now running:", transition
now running: curtain

The color it clears to

CLS takes the color to clear to, and the transition can know it: give the shader USE NUMBER settings called target_r, target_g, target_b and target_a, and I fill them in, from 0 to 1. A transition that draws the layer going to that color, rather than to a color of its own, ends on just what’s there when it finishes.

SCREEN 320, 240
SHADER "rise"
    USE NUMBER progress DEFAULT 0
    USE NUMBER target_r DEFAULT 0
    USE NUMBER target_g DEFAULT 0
    USE NUMBER target_b DEFAULT 0
    WHEN DRAWING
        c = IMAGE
        risen = STEP(1.0 - progress, UV.y)
        SET COLOR = MIX(c, RGB(target_r, target_g, target_b), risen)
    END WHEN
END SHADER

LOADIMG "city.png", "city"
PUTIMAGE (32, 0), "city"
CLS 1 !! effect_shader("rise")
PAUSE

Blue water rises over the city from the bottom, and the layer’s left blue: 1 is blue in the palette, and that’s what target_r, target_g and target_b were.

How fast

!! speed says how fast, the same as for my own transitions: 60, the speed it has if you don’t say, takes a second; 120 takes half a second; 30 takes two.

SCREEN 320, 240
SHADER "rise"
    USE NUMBER progress DEFAULT 0
    WHEN DRAWING
        c = IMAGE
        SET COLOR = MIX(c, RGB(0.0, 0.0, 0.0), STEP(1.0 - progress, UV.y))
    END WHEN
END SHADER

LOADIMG "city.png", "city"
PUTIMAGE (32, 0), "city"
CLS 0 !! effect_shader("rise") speed(20)
PAUSE

Three seconds of darkness rising.

Crash-tan’s Tip: A transition shader is an ordinary shader, so try it out as one before it’s a transition: put it on the layer with shader_params({progress: 0.5}) and look at it halfway, then at 0.1 and 0.9.