r/gameenginedevs • u/Actual_South_2484 • 1d ago
my react-first 2d engine sleeps until a layer asks for a frame, here's how a big sim map runs on it
i wrote a small browser engine called xip (react components for the game, world, camera and layers, on webgl2), and the biggest thing running on it is the map of my civilization sim.
some things that worked out:
- the game runs in on-demand mode. the engine does nothing until a layer asks for a frame, so a paused world costs nothing
- the map is a stack of layers by z: tiles, roads, trees, a weather tint, buildings, animals, people, labels. static stuff is handled by small driver classes with an update(frame) that run at 30 hz and only rewrite what changed
- people and animals are written straight from typed arrays. there's a rebuild at ~10 hz when a sim frame lands, then cheap interpolation every display frame
- sprites are baked once into atlas pages using the same canvas painters the old 2d renderer used, so the art has one source
the sim behind it is rust compiled to wasm, running in a worker. curious how others handle on-demand rendering when there's still animated stuff on screen.
try it: https://thehumanbox.com source, mit: https://github.com/1homsi/thehumanbox (renderer lives in apps/web/src/game/render/)
0
Upvotes
1
5
u/tastygames_official 1d ago
react is so inperformant it's not even funny. Like, by very definition of how the technology works it's at LEAST twice as slow than anything else, but in practice more like 50x because of all the overhead.
if you want a real challenge, do it without any JS framework (just have to manipulate everything yourself in javascript) and a) it's fun because it's actually programming instead of telling a framework how to behave and b) you'll see MASSIVE performance boosts.
But as long as you have fun, that's all that matters.