GameSpark/Tutorials Open editor ↗
GameSpark · Lesson 8

Choosing a screen size

Every lesson so far assumed a 128 × 128 screen — that is why the center was (64, 64) and the walls were at 0 and 127. But GameSpark games do not have to be small squares. Here is how to change the screen, and how to write code that adapts.

1. Pick a shape and size

Open the Settings tab. Under Screen there are two choices:

The default is Square · Extra small, which is 128 × 128. Pick Widescreen · Medium, for example, and your game is now much wider than it is tall. Try it, then run one of the earlier programs — the circle that used to sit dead center is now off to the left, because (64, 64) is no longer the middle.

💡

Sizes are always multiples of 8, so sprites (8 × 8) and map tiles stay perfectly aligned no matter which screen you choose.

2. SCREEN_W and SCREEN_H

The engine gives you two values that always hold the current screen size: SCREEN_W (width) and SCREEN_H (height). Use them instead of hard-coded numbers and your code fits any screen. The center is simply half of each:

function draw() {
  cls(1);
  circfill(SCREEN_W / 2, SCREEN_H / 2, 8, 9);  // always centered
}

Change the screen size in Settings, run again, and the circle stays centered — no code change needed.

3. Bounce off any wall

The bouncing ball from Motion and bouncing used 127 for the far walls. That is really "the last pixel" — SCREEN_W - 1 across and SCREEN_H - 1 down. Swap the constants for those and the ball bounces correctly on a wide screen, a tall phone, anything:

let x = 20;
let y = 20;
let dx = 1.5;
let dy = 1;
let r = 4;

function update() {
  x += dx;
  y += dy;

  if (x < r || x > SCREEN_W - 1 - r) {
    dx = -dx;
  }
  if (y < r || y > SCREEN_H - 1 - r) {
    dy = -dy;
  }
}

function draw() {
  cls(0);
  circfill(x, y, r, 12);
}
🎯

Rule of thumb: any time you were about to type 64, 127, or 128, ask whether you mean "the middle" or "the edge" — and reach for SCREEN_W/SCREEN_H instead. Your game will then work at every size.

What you learned