This is a work-in-progress build of MicroState and is not a finished game.
Terrain and graphics are procedurally generated.
Rendered using 2D Canvas using vanilla JavaScript, with no dependencies or libraries required.
For updates follow mastodon.social@iaincollins
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 highlights the area 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 can also rotate your view from the minimap or by using the Q and E keys.
You can open the map using the 🗺️ Map button or by using the M key.
Terrain can be Parkland, Soil, Scrub, Clay, Sand, Water or Paved.
You can 🔼 Raise, 🔽 Lower, ⏬ Flatten, and 💫 Smooth terrain by clicking and dragging using the relevant tools.
Unlike in many other isometric games, terrain is not constrained to being a fixed height or to fixed angles, you can even create cliff edges.
Terrain that is too steep may be unable to support features like roads.
Different terrain types support different types of trees and structures.
Hold the Control Key (⌘ on macOS) while placing terrain tiles to "flood fill" in an area between other terrain tiles, or between roads.
Hold the Control Key (⌘ on macOS) when changing a terrain type under a road to change the terrain of`connected roads.
You can place 🚦 Highways which are optimised for heavy traffic and allow for higher traffic speeds.
You can also place 🚸 Streets which are generally favoured by pedestrians, cyclists and in residential areas.
When a Highway intersects a Street, traffic travelling along the road always has priority, allowing you to shape traffic flow.
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 (⌘ on macOS) while placing roads to draw a grid.
All Highways and Streets have pavements by default, with streetlights if there are buildings nearby.
If you change a tile with a road to be Paved, it will add double-wide pavements and street lighting, even if there are no buildings nearby.
Hold the Control Key (⌘ on macOS) when changing the type of a tile with a road to change all tiles along a stretch of road.
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.
Zoned areas need to be reasonably close to a road before they will develop.
Terrain under buildings will be automatically levelled if the ground is too steep.
How long construction takes depends on the size and type of building.
Improving road access can result in increased density of buildings.
When zoning across tiles with existing roads, tiles with roads will change their type to match the new zoning.
When an area is zoned, developers may leave some space unused. You can erase and re-zone an area to encourage higher density.
If you you pass over a road while zoning the road surface will be automatically changed to Paved to accommodate a larger pavement.
Hold the Control Key (⌘ on macOS) 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 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 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.
Game saves are persisted if you close the browser and open it again later.
Close Help