Drawing on the screen

The screen

SCREEN comes first in almost every game. It says how many pixels the game has to draw on, and I scale those up to fill whatever window, phone or TV the game is shown on, so a 320 × 240 game looks chunky and sharp everywhere.

SCREEN 320, 240
PRINT "I have", screenwidth, "by", screenheight, "pixels."
LINE (0, 0) -> (319, 239), 15

I have 320 by 240 pixels.

Pixels count from the top left: (0, 0) is that corner, x grows to the right and y grows downwards. A point is written as a pair, (x, y).

Colors

A color can be a number from my palette. The first sixteen are the classic ones: 0 is black, 1 blue, 2 green, 4 red, 12 a brighter red, 14 yellow and 15 white.

SCREEN 320, 240
FOR c = 0 ... 15
    LINE (c * 20, 60) -> (c * 20 + 19, 180), c !! box fill
NEXT

LINE takes a vector, one point -> another, and draws a line from the first to the second. With !! box it draws the box those two points are the corners of, and fill fills it in.

You can change any palette entry to any color you like, by its red, green and blue:

SCREEN 320, 240
PALETTE 20, 255, 128, 0
CIRCLE (160, 120), 60, 20, 20

Crash-tan’s Tip: If you’d rather say every color yourself, SET PALETTE FALSE turns the palette off, and then a color is the number 0xAARRGGBB: 0xFFFF8000 is that same orange.

Shapes

CIRCLE takes its center, its radius, the color of its edge, and if you like, the color to fill it with. PSET sets one pixel. POLYGON takes a list of points, an edge color and a fill color.

SCREEN 320, 240
CIRCLE (60, 60), 40, 9
CIRCLE (60, 60), 20, 9, 9
FOR x = 0 ... 99
    PSET (180 + x, 40 + x MOD 20), 14
NEXT
POLYGON [(160, 220), (210, 130), (260, 220)], 10, 2

Words on the screen

PRINT writes where the text cursor is and moves it down a line. LOCATE moves the cursor to a row and a column, counting from 1, and COLOR picks the text’s color and, if you like, the color behind it.

SCREEN 320, 240
COLOR 14
LOCATE 2, 2
PRINT "SCORE  1200"
COLOR 15, 4
LOCATE 15, 15
PRINT "GAME OVER"

SCORE  1200
GAME OVER

Clearing

CLS clears the screen, to black or to the color you give it. A game clears and draws again every frame, which is the next lesson.

SCREEN 320, 240
CLS 1
CIRCLE (160, 120), 50, 15
PRINT "a blue screen with a circle on it"

a blue screen with a circle on it

Layers

A screen can have layers, one above the other: draw the sky once on layer 0, and the things that move on layer 1, and clearing layer 1 leaves the sky alone. CREATE LAYER makes one and SET LAYER says which one drawing goes to.

SCREEN 320, 240
CLS 1
CIRCLE (260, 50), 25, 14, 14
CREATE LAYER 1, 320, 240
SET LAYER 1
x = 0
WHILE x <= 300
    IF COOLDOWN(1)
        MEMORYBUFFER "block"
            LINE (x, 180) -> (x + 30, 200), 12 !! box fill
        END MEMORYBUFFER
        FRAME
            CLS
            PUTIMAGE (0, 0), "block"
        END FRAME
        x = x + 1
    END IF
WEND

CLS on layer 1 clears only layer 1, so the sun stays put while the red block slides past it. COOLDOWN(1) moves it one step every tick, sixty a second, and FRAME and MEMORYBUFFER get each step to the screen in one piece. More about all three next.

Keyboard shortcuts