Reactive core
Signals, computed values, .ce single-file components, @if / @for templates, lifecycle hooks and a test bed. The glue that keeps game state and screen in sync.
Reactive 2D game engine · built on PixiJS
Build 2D games from ready-made components.
CanvasEngine is more than a renderer. Describe your game as reactive .ce components, then plug in the systems it needs: tilemaps, cameras, controls, day & night, weather, particles, shadows, sound and UI.
$
npx degit RSamaium/CanvasEngine/starter my-game
- 20+components
- 55FX presets
- 39weather presets
- 15+directives
A scene is a component
A living world in a few lines
No render loop to write, no manual syncing between state and pixels. Each system is a component you place in the scene, configured with props that can be plain values or signals. Change the hour, the world follows.
- Declarative
.cetemplates with@if/@for - Signals everywhere: props, positions, weather, time
- Directives for behavior:
controls,drag,sound,shake… - Plain Vite + TypeScript, hot reload included
<Canvas>
<Viewport worldWidth={1920} worldHeight={1440}>
<Sprite image="town.webp" />
<SpriteShadows ambientLight={sun} lights={lamps} />
<Sprite image="hero.png" x={x} y={y}
controls={keys} viewportFollow shadowCaster />
<DayNightCycle time={clock.time} lights={lamps} />
</Viewport>
<Weather preset="autumnGust" />
</Canvas>
<script>
const clock = useGameClock({ time: 18, speed: 10 })
const sun = computed(() => sunShadowAt(clock.time()))
</script>
From primitives to game systems
Three layers, use as much as you need
Start low-level with reactive primitives, or build a whole RPG world from presets. Every layer is made of the same reusable components, so your own become first-class too.
Game components
Everything a scene is made of, ready to compose: sprites and spritesheets, a camera viewport, text, graphics, layout, joystick, HTML overlays.
Game systems
The part other renderers leave to you. Drop a preset in a scene and your world gets weather, light, shadows, particles and life.
Built-in, not bolted on
Game systems ready to drop in
Every image below is rendered live by CanvasEngine presets, composed in a single scene.
<DayNightCycle>Day & night
Time of day grades the whole scene. Lamps light up one by one, windows follow their own schedule.
<Fx name="holyPillar">Spells & attacks
55 presets: slashes, limit breaks, elemental magic, auras, status effects. Recolor them in one prop.
<Weather preset="eruptionEmbers">Weather
Rain, snow, fog, clouds, light rays, embers, leaves, fireflies, sandstorms.
groundCasterSprites that live in their terrain
Characters wade into water, disappear into tall grass and leave prints on sand, read straight from the map.
<SpriteShadows>Projected shadows
Each sprite casts its real silhouette away from every light: sun, torches, street lamps.
<Fx name="summonSigil">Magic at night
Effects and lighting compose: a summoning circle glowing in a sleeping town.
<Weather effect="cloud">Clouds & sky
Fluffy cumulus seen from above, with their shadows sliding over the ground.
footprintCasterFootprints
Boots, bare feet, paws and hooves that sink into snow, sand and mud, then slowly fade.
<Weather preset="winterSnow">Seasons
Same town, new season: switch one preset and the afternoon turns into a snowfall.
customizeFx()Recolor any effect
Presets are data: change colors, scale, timing or layers and make them your own.
Where it fits
A game engine that feels like modern web development
Compared to PixiJS alone
Same fast WebGL renderer underneath. CanvasEngine adds the missing layer: a component model, reactivity, input, audio, cameras and ready-made game systems.
Compared to classic JS game frameworks
Scenes are declarative components instead of imperative update code: state lives in signals, the screen follows. Presets bring RPG-grade visuals out of the box.
Compared to full editors
No editor, no export step: it lives in your Vite + npm stack, mixes freely with HTML UI, and ships as a regular web app.
PixiJS v8 renderingTypeScriptVite & HMRTiled mapsKeyboard · gamepad · touchCanvas + HTML UIMIT license
Try it now
Play, then read the code
A complete mini-game in one component. Use the arrow keys, then switch to the code view and change anything.
Crystal Rush
A playable CanvasEngine mini-game.
Preview
Works great with AI
Your coding agent knows the engine
Install the CanvasEngine skill and your assistant writes idiomatic .ce scenes, controls, tilemaps and presets instead of guessing.
$
npx skills add https://github.com/RSamaium/CanvasEngine“Create a top-down RPG village at dusk with a playable knight.”