Skip to content
vgai Learn

Run a 2D game on the world2d surface

tutorial lesson Intermediate ⏱ 8 min vgai 0.1.0

Prerequisites: Foundations — components in action

What you'll learn

  • Reach the world2d page (it's a dedicated surface, not the 3D editor toolbar)
  • Run an authored Scene2D with Rapier 2D physics and GameComponent2D
  • Move a player and collect a coin in a 2D game

What you'll build: A look at the shipped PixiJS world2d 2D render surface running a real 2D game.

Walkthrough — Run a 2D game on the world2d surface · generated by site/media/lessons/surfaces-batch.lesson.ts (4 steps)

vgai has a third render surface beside Three.js 3D and the React HUD: world2d, a 2D surface built on PixiJS v8 with Rapier 2D physics. It reuses the same engine model — entities, the GameComponent lifecycle, authored scene data — but instantiates PixiJS display objects instead of Object3Ds.

Steps

Section titled “Steps”

  1. Open the world2d page — a PixiJS 2D render surface. The banner names what’s running: first-party authored Scene2D • Rapier 2D physics • GameComponent2D.

    The world2d page loaded
    The PixiJS world2d surface with an authored 2D scene.

  2. It runs an authored Scene2D with Rapier 2D physics + GameComponent2D. The walls, player, and pickups come from a Scene2DFile; a GameComponent2D drives the player exactly like a 3D GameComponent (same init/update lifecycle, different display object).

    The 2D arena with sprites
    An authored arena: walls (static bodies), colored sprites, and a coin.

  3. Move the player with the arrow keys. Input flows through the same input system; the player body is simulated by Rapier 2D.

    The player moving in the 2D arena
    Arrow keys move the Rapier-2D player body.

  4. Jump with Space — the HUD tracks coins as you collect them. Walk into the coin and the Coins: counter ticks up — gameplay logic and a 2D trigger, on the 2D surface.

    Coins counter at 1 after collecting
    Collected a coin — the HUD reads Coins: 1.

Recap

New functionality

  • Reached and ran the world2d 2D surface
  • Moved a Rapier-2D player and collected a coin

New concepts & skills

  • world2d is a peer render surface (PixiJS v8 + Rapier 2D) to 3D + React UI
  • It reuses the SAME entity/GameComponent model — GameComponent2D has the same lifecycle
  • It ships as a dedicated world2d.html page, not yet in the 3D editor toolbar

Next lesson → Foundations: components in action

See also

Section titled “See also”