A character appears

Give your game its first inhabitant.

Create the game · chapter excerpt

const game = await createGame({
  canvas,
  signal: options.signal,
  background: "#c9e5d8",
  assets: { hero: { image: `${options.art}character_green_idle.png` } },
})
const hero = game.sprite("hero", {
  x: 320,
  y: 180,
  anchor: "center",
  width: options.characterSize,
  height: options.characterSize,
})

Live gameOpen game ↗

Play, change a setting, and play again.How it works ↓

Read the complete chapter module Imports, setup, and preview controls

src/chapters/01.ts

import { createGame } from "@hopkit/game"
import type { LessonOptions } from "../types.js"

export async function mount(canvas: HTMLCanvasElement, options: LessonOptions) {
  // lesson:start
  const game = await createGame({
    canvas,
    signal: options.signal,
    background: "#c9e5d8",
    assets: { hero: { image: `${options.art}character_green_idle.png` } },
  })
  const hero = game.sprite("hero", {
    x: 320,
    y: 180,
    anchor: "center",
    width: options.characterSize,
    height: options.characterSize,
  })
  // lesson:end
  function restart(): void {
    hero.position.set(320, 180)
    hero.width = hero.height = options.characterSize
    game.invalidate()
  }
  options.status("Your character, ready for an adventure.")
  options.ready(game.current!)
  return { game, restart }
}

createGame prepares the canvas and loads the declared image. Then game.sprite draws your first character. A default scene already owns it.

You need a browser to play this lesson. For local editing, create a project or download the runnable checkpoint below. It includes a README with setup commands.

Try it

Press Play, then change Character size. The character stays in the center because its anchor is "center" and its coordinates are x: 320, y: 180. The checkpoint recreates the scene when this setting changes.

Read the game

The default size is 640 by 360 logical units. X increases to the right and Y increases downward. The game keeps those coordinates when the browser resizes its canvas. Smooth rendering is the default artwork policy.

The returned hero is a Pixi sprite. Change hero.x or hero.y to move it. The default scene owns the sprite and removes it when replaced; the game owns its frame loop. Later chapters use an explicit bind when a separate player model owns movement.

Make one change

Move the character to x: 160. Where does it appear? Then try an anchor of "top-left".