About MicroState

This is a pre-release build of MicroState, not a finished game.

Created using vanilla JavaScript and rendered using 2D Canvas, delivered in under 100 KB.

Terrain, cities, sprites, textures and animations are all procedurally generated at runtime.

Help topics

For updates follow mastodon.social@iaincollins

🧭 Navigation

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.

The Arrow Keys and WSAD keys can also be used to move the map.

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, and you can click on the map to jump to a location.

⛰️ Terrain

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 create rolling hills or steep cliffs.

Terrain that is too steep may be unable to support features like roads and may be automatically levelled to support buildings.

Parkland
The default terrain type. Supports the widest variety of plant life including grasses, wildflowers, bushes and trees. At higher elevations it transitions to heath and upland vegetation. Near water it becomes riverbank or wetlands at lower elevations.
Scrub
Rough, brushy terrain with sparse, hardy vegetation like spruce trees. Transitions to more open scrubland at higher elevations. Common in drier or degraded areas.
Soil
Loamy soil that supports woodland growth. Can develop into dense pine forests when trees are planted. Well suited to forestry and rural areas.
Clay
Clay dessert terrain, with limited support for plant life.
Sand
Beach and dune terrain. Near water it forms sandy beaches; further inland it becomes dunes. Sandy terrain far from water cannot support plant life, though palms can grow near the shore.
Water
Water is always at sea level. It can be fresh (rivers and lakes), brackish (estuaries), or sea water. Shallow water sits at the edge of land; deep water forms in the middle of larger bodies of water. Roads on shallow water become bridges; roads cannot cross deep water.
Paved
Hard urban surfacing with no plant life. Roads on paved terrain get wider pavements and street lighting even without nearby buildings. Paved areas can feature decorative fountains or quaysides where they meet water.

Terrain at higher elevation may not be able to support dense forest coverage, and sandy terrain that is far from water may not be able to support plant life at all.

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) while placing trees to "flood fill" terrain with maximum tree coverage.

Hold the Control Key (⌘ on macOS) when changing a terrain type under a road to change the terrain of connected roads.

🚦 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.

🚶 Pavements

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.

🏙️ Buildings

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).

🌲 Trees and decorations

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.

⚙️ Other options

Use the F key to toggle fullscreen mode.

Wireframe view lets you easily see the underlying structure of the terrain and infrastructure, without buildings or trees getting in the way.

Grid view lets you see the underlying grid of tiles.

The ☀️ Day / 🌙 Night button or N key toggles between night and day.

📺 Screensaver mode will activate a full screen animation that moves from point-to-point across the map. You can click or tap anywhere on the screen to exit screensaver mode.

Use the ✨ New button or G key to generate a new map, with randomised terrain types and features, including forests, rivers, lakes and shorelines.

Use the 🏙️ City button or C key to generate a new city on the existing map, replacing existing roads and buildings.

Use 💾 Save and 🔃 Load to save and load the map locally. You can only have one save at a time. Changes are only saved when you choose to 💾 Save.