PinballLayout

Declarative proportional placement that keeps table elements arranged at any table size.

What it does

Each entity carries layout coefficients that express its position as x = xCoeff * tableWidth + xOffset and z = zCoeff * tableDepth + zOffset, with optional X/Z mesh scaling tied to the same dims. The system listens for pinballTable.resized and, in one pass, rewrites every layout entity's MeshPrimitive position (and scale, if scaleWith is set) through the renderer. Because PinballTable broadcasts seed dims on init, the first layout pass happens automatically; resizing the table then re-runs the whole arrangement. Y position is taken from MeshPrimitive.position[1] and is never touched.

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 PinballLayout

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 PinballLayout
```
bjs download PinballLayout
```
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 }
      }
    },
    "Wall_Left": {
      "components": {
        "MeshPrimitive": {
          "primitive": "box",
          "width": 0.5, "height": 2, "depth": 33.2,
          "position": [-8, 1, 0],
          "color": [0.32, 0.18, 0.5]
        },
        "PinballLayout": { "xCoeff": -0.5, "scaleWith": "depth" }
      }
    }
  }
}

Props

xCoeff (number, default 0) — fraction of table width applied to X (±0.5 = side wall, 0 = centerline).
xOffset (number, default 0) — fixed X offset added after the coefficient.
zCoeff (number, default 0) — fraction of table depth applied to Z (-0.5 = back, 0 = centerline).
zOffset (number, default 0) — fixed Z offset added after the coefficient.
scaleWith ('both' | 'width' | 'depth' | 'none', default 'none') — which axis scales with live table dims (both = playfield, width = top/bottom walls, depth = side walls, none = position only).
refW (number, default 16) — as-authored geometry width; scale is W / refW.
refD (number, default 33.2) — as-authored geometry depth; scale is D / refD.

Events

Listens for pinballTable.resized — re-applies position and scale to every layout entity.

Dependencies

MeshPrimitive — required on the same entity; this is the mesh whose position/scale gets rewritten. PinballTable — supplies the dimensions via pinballTable.resized.

Notes

The small numeric coefficients in real layouts (0.0602, 0.1807, 0.34375…) come from the regulation 16×33.2 table ratios.