Sprite basics — load, attach, place

This demo even generates its image from code (two loops, one colour decision per pixel), so you can see there's no magic hiding in an asset file. Then it places that image several times with different position, scale, and alpha (transparency).

// STEP 0 — generate a tiny "creature" image in code
// (normally you'd load a PNG; this proves images are just pixels)
const size = 16;
const art = document.createElement("canvas");
art.width = size; art.height = size;
const a = art.getContext("2d");
for (let y = 0; y < size; y++) {
  for (let x = 0; x < size; x++) {
    const inBody = Math.hypot(x - 8, y - 9) < 6;   // round body
    const inEye  = (x === 6 || x === 10) && y === 8;
    if (inEye)      { a.fillStyle = "#2B2440"; }
    else if (inBody){ a.fillStyle = "#5A63C8"; }
    else continue;                                  // transparent pixel
    a.fillRect(x, y, 1, 1);
  }
}

// STEP 1..3 — load is done (art), now attach+place by drawing
ctx.imageSmoothingEnabled = false;   // keep pixels crisp

// place it — (image, x, y, width, height)
ctx.drawImage(art, 40, 60, 64, 64);

// same image, bigger
ctx.drawImage(art, 150, 40, 128, 128);

// same image, half-transparent (alpha = 0.4)
ctx.globalAlpha = 0.4;
ctx.drawImage(art, 320, 90, 96, 96);
ctx.globalAlpha = 1.0;

// a little crowd — placement is just numbers in a loop
for (let i = 0; i < 5; i++) {
  ctx.drawImage(art, 60 + i * 55, 220 + Math.sin(i) * 18, 40, 40);
}

The same 16×16 image, placed four ways. "Moving a sprite" = changing those x, y numbers. That's the whole secret.

Try tweaking: the eye positions (lines with inEye) · the body colour · the crowd loop count from 5 to 12 · the Math.sin(i) * 18 wobble to 50. Every change is one number, and Reset always brings the original back.

In Godot: this is Sprite2D.new() + add_child() — download sprite_basics.gd, or grab the whole Godot project and run it from the menu. In Unity: AddComponent<SpriteRenderer>() + transform.position. In Unreal: a UMG Image widget or PaperSprite. Same recipe, different accents — chapter 02 shows all four.