YAGE v2 Examples

Click an example to launch it

Hello World

Simplest setup: a few colored shapes on screen. Proves the engine + renderer pipeline works.

core renderer

Debug Overlay

FPS, entity count, system timing HUD, physics collider wireframes, and input state. Toggle with backtick.

core renderer physics input

Camera

WASD player with smooth camera follow, deadzone, bounds, shake, and zoom controls.

core renderer

Physics Basics

Drop shapes that bounce in a box. Apply impulses and flip gravity. Shows rigid bodies, colliders, and restitution.

core renderer physics

Collisions & Sensors

Collect coins and dodge danger zones. Demonstrates sensors, trigger events, collision layers, and kinematic bodies.

core renderer physics

2D Platformer

Side-scrolling platformer with camera follow, moving platforms, collectibles, death pits, and physics-based player control.

core renderer physics

2D Shooter

Mega Man-style platformer-shooter with squash-stretch, hit flash, camera shake, knockback, and manual particle spawning.

core renderer physics

Particles

GPU-friendly particle emitters driven by mouse input. Hold click to emit, press Space to burst, switch presets with 1-4.

core renderer particles input

Audio

Channel-based audio with SFX pads, music toggle, per-channel volume control, and master mute. Wraps @pixi/sound.

core renderer audio input

UI

Screen-space UI with the builder API: nine-slice textured panels and buttons, logo image, progress bars (HP/XP), checkboxes, and a HUD overlay.

core renderer ui

UI (React)

Same menu built with the React custom renderer. Nine-slice textures, reactive progress bars, auto-filling XP, checkboxes, and image elements.

core renderer ui

@pixi/ui Kitchen Sink

Every @pixi/ui wrapper: FancyButton, Checkbox, ProgressBar, Slider, Input, Select, and RadioGroup — all Yoga-aware via React.

core renderer ui

Tilemap

Renders a Tiled dungeon map with @pixi/tilemap. WASD to pan the camera, mouse wheel to zoom.

core renderer tilemap