Drawing sprites · GameSpark Tutorials

Shapes are great, but most games are made of sprites — small hand-drawn pictures. GameSpark has a built-in sprite editor, and one function to stamp your art onto the screen: spr().

1. Draw a sprite

In the editor, click the Sprites tab. You are looking at sprite slot 0 — an 8×8 grid. Pick a color from the palette and paint something simple: a face, a heart, a little ship. Every slot has a number, shown in the sheet along the bottom.

💡

Keep it readable. At 8×8 pixels, less is more — a couple of colors and a clear silhouette beat fussy detail. You can always use a bigger sprite size later.

2. Draw it on screen

Back in the Code tab, spr(n, x, y) draws sprite number n with its top-left corner at (x, y):

function draw() {
  cls(1);
  spr(0, 60, 60);  // draw sprite 0 near the middle
}

Your drawing appears on screen. Transparent pixels in the sprite stay transparent, so whatever is behind shows through — that is how sprites sit on top of a background.

3. Move and flip it

Because spr takes an x and y like any drawing function, everything from the earlier lessons applies. Store a position, change it in update(), and pass it to spr(). You can also flip the sprite horizontally or vertically with two extra arguments — perfect for making a character face the way it walks:

let x = 60;
let facingLeft = false;

function update() {
  if (key('ArrowLeft')) {
    x -= 1;
    facingLeft = true;
  }
  if (key('ArrowRight')) {
    x += 1;
    facingLeft = false;
  }
}

function draw() {
  cls(1);
  spr(0, x, 60, facingLeft);  // 4th arg = flip horizontally
}

The signature is spr(sprite, x, y, flipX, flipY) — the last two are optional and default to no flip. Passing facingLeft (a true/false value) as flipX mirrors the sprite whenever the character moves left.

🎯

Try it: draw a second sprite in another slot and show it with spr(1, ...). Animate by alternating sprites over time — spr(flr(time() * 6) % 2, x, y) flips between slots 0 and 1 to make a walk cycle.

What you learned

Sprites are small pictures you draw in the Sprites tab; each has a slot number.
spr(n, x, y) stamps sprite n at a position; transparent pixels show the background.
Sprites move exactly like shapes — store a position and update it.
spr(n, x, y, flipX, flipY) mirrors a sprite, e.g. to face left or right.