window/resize_reflow

Goal

Learn how to make layout react to window size changes without breaking world-space simulation.

Why this tutorial exists

Games need both:

  • stable world-space rendering in virtual coordinates

  • responsive UI anchored to screen edges

This tutorial demonstrates both in one scene.

Source map

  • Settings profile: examples/settings/window/resize_reflow.yml

  • Example builder: examples/catalog/window/resize_reflow/main.py

  • Scene: examples/catalog/window/resize_reflow/scenes/scene.py

  • Render passes: packages/mini-arcade-core/src/mini_arcade_core/engine/render/passes/world.py packages/mini-arcade-core/src/mini_arcade_core/engine/render/passes/ui.py

Runtime flow

  1. Window resize events update viewport state in window service.

  2. Scene reads fresh vp.window_w/h each tick.

  3. World draw op stays in virtual space (world pass).

  4. UI draw op recomputes panel/footer layout in screen space (ui pass).

What to verify

Resize the window continuously.

  1. world marker movement remains stable in virtual space.

  2. top-right panel reflows based on current window size.

  3. bottom footer stretches with window width.

  4. resize count increases when dimensions change.

Run

mini-arcade run --example window/resize_reflow

mini-arcade run --example window/resize_reflow --pass-through --backend native

Controls

  • Resize the window

  • F1 -> debug overlay

  • ESC -> quit

Next step