All chapters · Chapter 2/9

The paddle

Starting

One new call and there's something there. That orange rectangle is a sprite: the thing the engine draws in 2D, with a position, a size and a colour.

createSprite({
    anchor: { x: 0, y: 0 },
    transform: { x: (WIDTH - PADDLE_W) / 2, y: HEIGHT - 24 },
    width: PADDLE_W,
    height: PADDLE_H,
    tint: getColor('#ff6b1a'),
});

No image, and that's the point

A sprite usually carries an image. This one doesn't: when you give it none, the engine draws a flat rectangle in the tint colour. Useful for prototypes, for debug boxes, and, as here, for an entire game.

That's half the trick of a brick-breaker: you don't need a single drawing. Paddle, ball and bricks are coloured rectangles, exactly as in 1976. You'll finish this tutorial without opening an image editor, and it will still look like a game.

The Y axis grows downwards

Here's the trap that catches everyone. In maths class, up means a bigger Y. On a screen, no:

Which is why HEIGHT - 24 puts the paddle near the floor, not near the ceiling. It's the convention of every screen since screens existed, and the engine keeps it in 2D.

One more thing: which point of the sprite lands on x and y is what anchor says. By default it is the centre, which is what turning and scaling want. This tutorial uses anchor: { x: 0, y: 0 }, the top-left corner, because the collision sums in the next chapters read better that way: a rectangle runs from x to x + width. So to centre the paddle you subtract its own width before halving:

x: (WIDTH - PADDLE_W) / 2

Write x: WIDTH / 2 instead and the paddle starts at the centre and hangs 32 pixels off to the right.

What are those SHOUTING constants?

At the top of the file there are lines like this:

const PADDLE_W = 64;

const gives a value a name. From then on, PADDLE_W means 64 throughout the file.

They're written in capitals by convention, to signal that this number never changes while the game runs. It isn't a rule of the language: it's a note between people.

Why bother instead of writing 64 directly? Because that 64 shows up in five places (drawing the paddle, centring it, stopping it at the edges, bouncing the ball), and the day you want a shorter paddle you'd have to remember all five. With the constant, you change one.

Your turn

Change the tint. Set PADDLE_W to 120 and notice the paddle stays centred: that's what writing (WIDTH - PADDLE_W) / 2 bought you instead of a hard-coded number.

Then set y: 0 to see the axis thing for yourself: straight to the top.