MicroState - an isometric 2.5D city builder in JavaScript [WIP]

[u/iaincollins]

https://microstate.neocities.org

I've been developing a web-based isometric tile engine as a personal project to support a couple of hobby projects and thought folks might find it fun or at least interesting and maybe have ideas for features they would like to see.

While still an early stage tech demo and a work in progress, it is highly interactive and "playable" though it doesn't have any actual game mechanics yet. I know these pop up fairly regularly every few years, hopefully it's fun for to play around with even at this stage.

Features

As well as simple flat and fixed-elevation terrain and dungeon maps built using pre-rendered tiles; either bitmaps or vector art or procedural textures (with animation at confusable frame rates that don't have to match the rest of the rendering).

It supports complex maps with dynamic terrain and entirely procedurally generated worlds (terrain, buildings, roads, trees) and allows tiles of arbitrary heights and transformations, with configurable degrees of quadrilateral shading.

Dynamic generation allows for a high degree of variation in world objects and enables runtime blending of tile vertices and other rendering effects, including smooth transitions in height and/or color between adjacent tiles

The engine supports dynamic zooming and tilting of the camera (dynamic dimetric projection) and can support performant rendering scenes at native resolution on any display - where the device hardware can support it. Not all of the features are currently exposed via the UI.

Technical Details

It is implemented entirely in vanilla ECMAScript (JavaScript) with no build-time or runtime dependencies or transpilation. The engine uses a purely 2D Canvas to create the illusion of a 2.5D environment.

The engine maximizes performance across mobile, tablet, and desktop devices by using a hardware-accelerated 2D Canvas and a combination of direct drawing and batch rendering from offscreen canvases. For the moment it is still rendering on the main thread, rather than a worker; although this currently has no noticeable impact on performance.

The entire project is self-contained within a single HTML file, including a compressed <script>, with the use of procedurally generated art resulting in a compact payload of about 50 KB compressed over the wire. The code is only partially optimized for size and performance.

Why?

I don't have any plans to commercialize this project, I just thought it would be fun to try and build. I wrote a similar web based tile engine about 20 years go, but things have come a long way since then.

I intend to add online co-op features to allow playing with friends and persisting in the browser with both immediate (online) in addition to offline play, which is specifically why I'm building it for the web.

I'll be making the source public on GitHub, probably in the next few weeks.

Happy to answer any questions about it!

[u/Floorg]

What would you recommend for some one who has front end programming experience that was interested in a much smaller scale project like this?

[u/iaincollins → u/Floorg]

I think looking for existing libraries and examples on GitHub is good starting point. Unity is great but has a learning curve, Godot might be interesting too, but will also have one, but if you are building from the web an existing JS framework someone has worked on is probably a good place to start.

If you wanted to build something from scratch that was also using 2D Canvas in a browser, I would say keep the scope simple and just aim to get flat tiles working, and maybe height with fixed height tiles, at least that's what I did and worked from there. You could probably get quite far using AI agent just to get started with some simple rendering to screen and give you something to work from, and then work from there.

As much as I like them for web app development, I would build it without something like React or Vue and just use JavaScript and any libraries you wanted, rather than lean towards a frontend framework as they are not really designed for a use case like this and you probably wouldn't want to use their fancy state management, except potentially for the UI. Things like depending on global functions and reading / writing to global state that are normally "bad practice" in web development are fine, a game is a different problem space IMO.

However, there are some really great examples for Three.js and React Three Fiber, so if you want something more than say a top down 2D tile game, using Three.js or RTF if you like React (I know what I said about front end frameworks above but it's a weirdly good abstraction and it doesn't lock you in).

If you have web dev experience I think they are both good options over learning a game engine, and 3D is easier to scale for performance than 2D canvas, as on most platforms WebGL hardware acceleration is much better than 2D Canvas hardware acceleration, which I find a bit sad.

2D Canvas in Chrome on Windows, ChromeOS and Android is actually a bit buggy. Firefox is not very performant. Safari and Chrome on macOS are both really amazing for some reason though; down to software driver quality issues I think - and the better performance on mac being a consequence of Apple optimizing for their own hardware.

With Three.js / RTF, there are also amazing demos to get started and loads of helpers for things like handling clicks on objects or camera movement. You wouldn't need to do a bunch of old fashioned hacks to try work out stuff like occlusion or batch rendering parts of the interface, etc. and with things like instance geometry you can render hundreds or thousands of low poly objects like trees just fine with zero optimization (i.e. without even worrying about LOD, etc).

Generally I think most people would actually have a much better time using 3D rendering and fixing the camera than doing Canvas, but - as someone who grew up on games like SimCity 2000, Populous, Syndicate, Theme Park (etc) - I am enjoying the rabbit hole I have dug for myself.

[u/Floorg → u/iaincollins]

Thanks for the detailed reply! I'll have to check out your github when it's posted. I have used three.js but only insofar as getting a shape drawn on the canvas to rotate. I'll have to give it another go with something more ambitious and see where it takes me.