Skip to main content
All bundles

Advanced · free with an account

Web Game Starter

Roadmap: Engine basics

The official PixiJS v8 skills for 2D, a nine-skill Three.js kit for 3D browser games and our tested glb scene starter, with notes on which to pick.

Pick one renderer per game. PixiJS is for 2D: sprites, UI-heavy games, puzzle and arcade. Three.js is for 3D: its director skill scaffolds a Vite + TypeScript game and hands work to the gameplay, graphics, UI and QA skills. For a first 3D scene, start with threejs-glb-scene-assembly, our original: it loads a Draco glb and wires water, colliders, particles and sound in one file, and carries our tested badge. All three were run in headless Chrome. The PixiJS and Three.js kits do not carry the badge yet: four PixiJS examples are wrong for pixi.js 8.22.0 (listed on its page), and four Three.js skill descriptions do not say when to use them.

Download the bundle

Free, no payment: we only ask you to sign in. Each skill below is also a free download on its own page.

Sign up free to downloadAlready have an account? Sign in

For agents, create an API key in Settings and use:

curl -fL -H "Authorization: Bearer $GAMESKILL_API_KEY" https://gameskill.dev/bundles/web-starter/download.zip -o web-starter.zip

In the order you use them

  1. PixiJS Skills (official, v8)Hosted, 39/52, no badge

    2D: PixiJS v8 setup, scene graph, assets, filters, performance (start from the pixijs router)

    By GameSkill · based on PixiJS (MIT)

    Skill ZIP
  2. Three.js Game SkillsHosted, 22/23, no badge

    3D: Three.js scaffold, gameplay, graphics, UI, debugging and release QA (start from threejs-game-director)

    By GameSkill · based on majidmanzarpour (MIT)

    Skill ZIP
  3. Three.js: Load a glb and Assemble a SceneTested 40/40

    3D first step: load a Draco glb and wire a small playable scene (GameSkill original, tested)

    By GameSkill · MIT

    Skill ZIP

Self-check

  • One renderer per game: PixiJS for 2D, Three.js for 3D
  • PixiJS code is v8: await app.init(), shape then fill, string blend modes
  • npm run build passes before any visual polish
  • A canvas check (not blank, inside budget) runs after visual changes
  • Frame rates from software rendering are not taken as real

Every skill is its author's work, included unchanged under its license (MIT or Apache-2.0), with LICENSE, ATTRIBUTION.md and CHANGES.md in its folder. The bundle README and checklist are ours, under MIT. Skills marked GameSkill original are ours as well (MIT), with LICENSE and CREDITS.md in their folder.