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 2D GameComponents
• 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.

How to reach it (the manifest route — the standalone page is retired)

Since T6.1, 2D worlds are reached like every other world: declare a pixijs world in a game’s vgai.game.json ("kind": "pixijs" with a .scn2d.json scene or an entry module) and open the project — the editor mounts it through the same manifest pipeline as 3D worlds, stacked beside them if the manifest declares both. The old dedicated world2d.html page shown in this lesson’s video is deleted; the scene it ran is preserved as a committed fixture (packages/editor/src/ingest/games-2d/_fixtures/first-party-scene.scn2d.json), and the same authored-Scene2D + Rapier-2D + GameComponent model runs unchanged through the manifest route.

Steps

1. Open a pixijs world — a PixiJS 2D render surface. (The video shows the retired standalone page; the running surface is identical.) The banner names what’s running: first-party authored Scene2D • Rapier 2D physics • 2D GameComponents.

   

   The PixiJS world2d surface with an authored 2D scene.

2. It runs an authored Scene2D with Rapier 2D physics + 2D GameComponents. The walls, player, and pickups come from a Scene2DFile; a GameComponent<'pixijs'> subclass drives the player exactly like a 3D GameComponent (same init/update lifecycle and the same unified ComponentManager since T7.3 — the display object is a PIXI.Container instead of an Object3D).

   

   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.

   

   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.

   

   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 — 2D components extend GameComponent<'pixijs'> with the same lifecycle (unified manager since T7.3)
• You reach it by declaring a pixijs world in vgai.game.json — the manifest route; the old standalone world2d.html page is deleted (T6.1)

Next lesson → Foundations: components in action

See also

• Components in action · Rendering manual