This is an early tech demo of the engine for MicroState and is not a finished game.
Created for fun using HTML 2D Canvas and vanilla JavaScript by mastodon.social/@iaincollins
Some features in this preview have better support for mouse and keyboard than for devices with touch input.
You can click and drag with the right mouse button to move around the map.
You can also move the the map selecting the Move tool and dragging with the left mouse button.
Two / three finger dragging and pinch-to-zoom is supported on devices with touch input.
The mini map in the top right is interactive, it highights the are of the map you are viewing, you can click on it to view to another part of the map.
Zoom using the mouse wheel or the +/- buttons on the mini map. You c n also rotate your view from the minimap.
You can open larger view of the map using the M key.
You can place Parkland, Soil, Clay, Scrub, Paved, Sand, and Water tiles for terrain.
You can 🔼 Raise, 🔽 Lower, ⏬ Flatten, and 💫 Smooth terrain by clicking and dragging using the relevant tools.
Different terrain types support different types of trees and structures.
Unlike many isometric games, terrain is not constrained to being fixed heights - but there are limits to how steep it can be before you end up with a cliff!
Hold the Control Key while placing terrain tiles to "flood fill" in an area between other terrain tiles, or between roads.
Hold the Control Key when changing a terrain type under a road to change the terrain of connected roads.
You can place roads on any type of terrain except deep water - placing roads on shallower water creates a bridge.
Roads can't lean too much to the right or left, or have too steep a gradient. You use the 💫 Smooth tool to fix issues with the terrain.
You can click to place a single stretch of road or click and drag to place a longer stretch of road.
You can draw bridges over water, but bridges can't have intersections.
Hold the Shift Key while placing roads to constrain them along horizontal or vertical lines.
Hold the Control Key while placing roads to draw a grid.
You can zone areas for 🏠 Residential, 🏢 Commercial, and 🏭 Industrial buildings.
You can click to zone one tile at a time, or click and drag to zone a larger area.
Terrain under buildings will be automatically levelled if the ground is too steep.
Buildings are currently simple and randomly generated based on the type of zone.
They are currently static and do not change over time - this is an early tech demo and not playable simulation.
If you are zoning a large area and pass over a road, the terrain under the road will be changed to match the terrain you are zoning for.
Hold the Control Key when zoning to "flood fill" and change all the connected tiles of the same type (up to road boundries).
You can click and drag to place trees on Parkland, Soil and Sandy terrain, different environments support different types of trees.
You can also place trees along roadsides, if the terrain supports trees.
You can place ⛲ Fountains in paved plazas.
The Wireframe view lets you easily see the underlying structure of the terrain and infrastructure, without buildings getting in the way
The Grid view lets you see the underlying grid of tiles, which can be helpful when trying to line things up.
The 🗺️ New Map button can generate an entirely new map, with different terrain types and features, including rivers, lakes and shorelines.
You can try out auto generating an entire city for a map using the 🏙️ City Generation button.
The Save and Load buttons save the map locally. You can only have one save at a time. Changes are only saved when you choose to Save.
There is no option to undo changes! but you can revert to a previously save by using the Load button.
Saves will be persisted if you close the browser and open it again later.
Close Help