A Table on Screen

The canvas is empty. Before anything can roll, we need a floor to roll on, lamps to see by, and a ball. Then comes the hard part, a camera for a tower too tall to show at once.

Make the project

Make a game, then pull down the parts this lesson uses: three for pinball, and a free one for reflections:

bjs login
bjs create pinball --kind game --renderer babylon
cd pinball
npm install
bjs download PinballTable
bjs download PinballPlayfield
bjs download PinballScrollCamera
bjs download ScreenSpaceReflections
npm run dev

Your game runs at http://localhost:3000, and each component lands in src/components/<Name>/. The sky, the lights, ArcCamera, MeshPrimitive, Physics and Shadow came with the project when it was made. They are free core components, already in src/components.

src/main.ts stays as it is. It adds the debug panels: F1 is Entities, F2 the EventBus, and Esc lists them all. Point src/scenes/index.ts at a scene file, which is plain JSON data:

import PINBALL from './pinball.json'

export const SCENES = {
  pinball: PINBALL,
}

export const DEFAULT_SCENE: keyof typeof SCENES = 'pinball'