Quick Reference

Setup

const game = createGame();
await game.initialize(canvas, '2d');
game.start();

Scene

class MyScene extends BaseScene {
    constructor() { super('id', 'Name'); }
    async initialize() { await super.initialize(); }
    update(dt) { super.update(dt); }
}
sceneManager.add(new MyScene());
await sceneManager.switchTo('id');

UI

// Button
new UIButton({ text: 'OK', width: 100, height: 50, backgroundColor: 0x4CAF50 })

// TopBar
new TopBar({ width: 800, items: [{ id: 'score', type: TopBarItemType.RESOURCE, value: 0 }] })

// Progress
new UIProgressBar({ width: 150, height: 16, value: 100, maxValue: 100, color: 0x22c55e })

Input

input.keyboard.on('Space', (pressed) => {});
input.touch.on('tap', (e) => {});
input.keyboard.isPressed('KeyW');

Layout (Flexbox)

// Enable flexbox on container
container.layout = {
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  gap: 20
};

// Use presets
container.layout = LayoutPresets.center;
hud.layout = GameLayoutPresets.gameScreen;

// Create flex row/column
createFlexRow({ gap: 20, justify: 'space-between' });
createFlexColumn({ gap: 10, align: 'stretch' });

Physics

Physics.create2DWorld({ gravity: { x: 0, y: 1 } });
Physics.createBody({ x, y, width, height });
Physics.onCollision('a', 'b', callback);

Audio

Music.play('bgm', { loop: true });
SFX.play('click');
Audio.setMasterVolume(0.8);

Assets

await Assets.load([{ key: 'tex', url: 'img.png', type: 'texture' }]);
Assets.get('tex');

Services

Key	Type
renderer	Renderer
scene.manager	SceneManager
input	InputManager
audio	AudioManager
assets	AssetManager
physics	PhysicsManager
layout	LayoutManager

Layout Presets

Preset	Use Case
LayoutPresets.center	Center content
LayoutPresets.row	Horizontal items
LayoutPresets.column	Vertical stack
LayoutPresets.grid	Wrapping grid
LayoutPresets.topBar	Top HUD bar
LayoutPresets.bottomBar	Bottom nav
GameLayoutPresets.gameScreen	Full game HUD
GameLayoutPresets.touchButton	44pt min touch
GameLayoutPresets.levelButton	Level select btn