PinballTable

The single source of truth for the playfield's width and depth.

What it does

Holds the table's width (X) and depth (Z) and acts as the dimension authority every other pinball element follows. On init the system emits pinballTable.resized once with the seed dimensions so subscribers (layout, camera) can align on the first frame. When a pinballTable.resize request arrives (typically from the viz panel), it updates the stored dims and re-broadcasts pinballTable.resized. The system never reaches into other entities itself — dependents listen for the event and reposition themselves.

Use it in a scene

A scene is just data — a list of entities, each with its components. At startup the SceneLoader turns this JSON into a live world; edit the file and reload to rebuild it.

Fastest path

bjs download scene PinballTable

Pulls this exact scene into your project and runs it — no copy-paste. Add --all to grab the components and assets it needs too.

Or build it from scratch with the bjs CLI:

1Scaffold a project
```
npm create @babylonjsmarket/arcade@latest my-game
```
World, renderer, and dev server — ready to run.
2Install dependencies
```
cd my-game && npm install
```
3Add PinballTable
```
bjs download PinballTable
```
Copies its source into src/ so the scene resolves.
First time? Run bjs login once.
4Paste the scene into src/scenes/arcade-room.ts and run
```
npm run dev
```
SceneLoader builds the world from the JSON; reload to rebuild.

JSON

{
  "entities": {
    "Table": {
      "components": {
        "PinballTable": { "width": 16, "depth": 33.2 }
      }
    }
  }
}

Props

width (number, default 16) — table width in world units along the X axis.
depth (number, default 33.2) — table depth in world units along the Z axis. Defaults match a regulation 20.25"×42" Williams/Bally playfield.

Events

Emits pinballTable.resized — { width, depth }, once on init and again on every applied resize.
Listens for pinballTable.resize — { width?, depth? }, a request to change the dimensions.

Notes

Declare exactly one PinballTable entity per scene; the system only operates on the first matching entity.
A resize is only re-broadcast when a value actually changes.

What it does

Use it in a scene

A scene is just data — a list of entities, each with its components. At startup the SceneLoader turns this JSON into a live world; edit the file and reload to rebuild it.

Fastest path

bjs download scene PinballTable

Pulls this exact scene into your project and runs it — no copy-paste. Add --all to grab the components and assets it needs too.

Or build it from scratch with the bjs CLI:

1Scaffold a project
```
npm create @babylonjsmarket/arcade@latest my-game
```
World, renderer, and dev server — ready to run.
2Install dependencies
```
cd my-game && npm install
```
3Add PinballTable
```
bjs download PinballTable
```
Copies its source into src/ so the scene resolves.
First time? Run bjs login once.
4Paste the scene into src/scenes/arcade-room.ts and run
```
npm run dev
```
SceneLoader builds the world from the JSON; reload to rebuild.

JSON

{
  "entities": {
    "Table": {
      "components": {
        "PinballTable": { "width": 16, "depth": 33.2 }
      }
    }
  }
}

PinballTable

PinballTable

What it does

Use it in a scene

Props

Events

Notes

PinballTable

What it does

Use it in a scene

Props

Events

Notes

Unlock the source

What you get

More like this

Was this page helpful?