City Generator
Create procedurally generated city maps in the style of American grid-based cities.
More detailed documentation and instructions here.
Support the project on Patreon
Follow me on Twitter: @probabletrain
View the source: Github
What's New:
- 3D model export has just been released, Blender tutorial available here: https://maps.probabletrain.com/#/stl
Using downloaded assets:
Feel free to use downloaded images and 3D models however you like! Credit is appreciated but not required.
I'd love to see what you make, send it to me on Twitter!
Features:
- .png download
- .png heightmap download
- .svg download
- .stl download
- Several colour themes including Google Maps, Apple Maps, and hand-drawn styles
- Pseudo-3D buildings
- Open source
Basic Usage:
- Click 'Generate' in the menu in the top right
- Drag and scroll to pan and zoom
- Open the 'Style' folder to access styling options - Switch to 'GoogleNoZoom' to see 3D buildings, or 'Google' to see buildings when zoomed in
- You can turn 3D buildings on/off for any style with 'buildingModels'
- When 'zoomBuildings' is enabled, buildings are only shown when zoomed in
- Download a high-res image of what's on screen with the 'Download' button in the 'options' folder
- Use 'imageScale' to control the resolution of the downloaded image - higher imageScale for higher resolution
- Mac users and other users with high-DPI displays - Tick 'highDPI' under options to increase the resolution of the canvas
Performance
- The size of the generated world depends on your zoom + pan when you click generate
- The more zoomed in you are, the smaller the map and the faster it will generate
- 3D buildings slow down pan+zoom, but not generation time. You can turn them on when you want them with the 'buildingModels' option under 'Style'
Advanced Usage:
Tensor Field
Cities are generated using tensor field. If you open the 'Tensor Field' folder you'll be able to view and edit it. You can add and remove grid elements. Use the red squares to drag them to different positions. Under the folder corresponding to each element, you can change its size and decay. You can also change the angle of the fields.
Click 'setRecommended' in the tensor field folder to have the tool place 4 grids and one radial field in the scene. These have random parameters, so click multiple times until you find one you like
IMPORTANT: After editing the Tensor field, you need to open the 'Maps' folder to generate roads. The main 'generate' button above the tensor folder will randomise the tensor field.
Maps
Open the 'Maps' folder to start creating roads. You can click 'generateEverything' or step through the process manually.
- Water - generate until you find a sea and river combination you like. Under the params folders, you can change the noise parameters to control how rough the shore and river bank are. The simplify tolerance controls how closely the road follows the waterline.
- Roads - There are three road sizes: main, major, minor. Under each of the folders, you can click generate to create each class of roads individually. You can go back and edit the tensor field at any point in this process to create roads on different tensor fields. Experiment.
- Buildings - click 'addBuildings' to fill the city with buildings. If you can't see them, the chosen style might not display buildings, or you might not be zoomed in enough. The 'Default' style, and 'GoogleNoZoom' styles both show buildings at all zoom levels. You can change the minimum building size, and the sidewalk size with 'shrinkSpacing'
- Animation - Generation will be faster if you untick 'Animate', but note that this will swamp the UI thread so you won't be able to pan, zoom, or retry until generation has completed. Animation speed gives you a tradeoff between FPS and generation time.
Recommended Workflow
Here are the steps I usually take when I use the tool:
- Water First - I open the
Map/Water
folder and clickGenerate
until I’m happy with the water features. - Tensor Field Detail - Opening the
Tensor
folder reveals the tensor field. IaddRadial
a couple of times to add some roundabouts. IaddGrid
a few times and change their size, decay, and position to vary the grid structure. - Roads - I step through each of the
Main
,Major
,Minor
foldersGenerate
ing roads at each stage, moving to the next when I’m happy. IncreasenumParks
underMap/Params
if you want more parks. - Buildings -
Buildings/AddBuildings
Source code: Github
Contact:
Email: keir@probabletrain.com
Twitter: @probabletrain
Feel free to contact me with any questions, feature requests, or bug reports by email, Twitter, Github, or in the comments.
Check out the project board for known bugs/upcoming features.
Status | In development |
Category | Tool |
Platforms | HTML5 |
Rating | Rated 4.8 out of 5 stars (135 total ratings) |
Author | ProbableTrain |
Tags | city, generated, generation, Generator, map, Procedural Generation, procedurally, tool |
Average session | A few minutes |
Inputs | Keyboard, Mouse |
Links | Twitter/X |
Development log
- Minor releaseMay 05, 2020
- 3D Model Export (STL) ReleasedMay 01, 2020
- Heightmap UpdateApr 26, 2020
- Algorithm OverviewApr 25, 2020
- 3D Drawn Buildings ReleasedApr 24, 2020
- 3D Drawn Buildings - In ProgressApr 23, 2020
- SVG Download Now AvailableApr 22, 2020
Comments
Log in with itch.io to leave a comment.
Is there a way to return to a map I generated?
Amazing work.
Was trying to do a more spread out city/town.
Less dense buildings, is there a setting to help with that?
Many Thanks.
This has been a life saver so many times already for me. Have been in need several times to have a city map for one of my prototypes and this created them for me in mere seconds without being the same over and over again. Well done!
I just found this--looks amazing!
I'm interested in generating smaller towns, with less density. I couldn't quite find the right mix of settings to get there.
This is an awesome tool.
Nice Work :) i am working on Wave collapse function at this time (i am developer) ... could you explain the function what are u using? perlin noise? how to make citys like yours? regards
Love this tool, it saves me so much time for a game I run it's unreal. I would say that for my use case (generating a large city map that needs to be consistent for my players) it can be very difficult to get smaller maps of individual sections of the larger city. A fully zoomed out .png is great for an overview, but the fine details which come through fine in the generator are lost even at the highest resolution download available, and I generally have to resort to recreating the layout by hand which is rather tedious, especially since the generator renders down to that level of detail already.
An option to divide a map into a grid and download each section as an individual high resolution .png file to better capture the details would be amazing. Right now you can sort of do it manually when the generator feels like cooperating, panning while zoomed and downloading sections of a map, but it can get sloppy, and a way to do that automatically would be wonderful.
I have no idea how feasible that would be to implement, but if it is possible it would be an incredible tool to have.
It works great!
Now if there was a way to merge this with dungeonscrawl it would be excellent for making rpg villages, towns and cities in a fantasy/sci-fi or other types of genres
Thank you.
Question.
How do I get a map of the area I want?
please, let me know
This plugin is very useful to me.
Thank you!
This is an amazing tool. I just wish we had the ability to customize the water how we wish (like creating an island for instance) this could maybe be done by allowing direct access to the tensor field to delete specific spots on it
Fantastic tool. The incredible detail and being able to zoom right in, is simply amazing.
Feature Request 1# What about an optional for overlay for a grid (optional square or hex) which could also generate unique hex/grid numbers in the center (being another layer/option in itself) that could have some color & size parameters with it too. This would be great for tabletop or solo RPG gamers where players could explore a city etc.
Feature Request 2# Also similar to another request i see here, what about an option to display on the corner of the map the population number. This could be based off number of residential buildings generated. This would help a lot if the map is used for a game where you want to give a realistic est of how many people live in the city.
how do i expand map size ?
v6p9d9t4.ssl.hwcdn.net took too long to respond. How do I fix this?
The speed of generation is phenomenal considering its web only
This is pretty fantastic! I was wondering if there was a way to spit the parameters out into the URL with each change, or some other method for the user to save/load a configuration.
If that was possible, people might be able to
Really awesome great stuff you have here!
Say, is it possible to put the number of inhabitants of the city in the generated map?
At least, does the number of people in the city affect the map?
Thank you so much for this! I've been needing something like this to help develop a campaign for tabletop Shadowrun! You have no idea how game changing this is for me!
<3 <3 <3
круто!
I play a crap ton of City Skylines. This has given me actually city layouts to build.
nice
This is nice. Thank you.
I love playing around with you tool and decided to recreate a city for your Tabletop game.
In the end I ran into a single problem: when filling in buildings a sizeable chunk of space wont get filled in. Is there a way to deactivate this behavior?
Also: How do I save my current map? After restarting Chrome everything was gone.
Also, I am using this tool to assist in drawing street networks in the OpenGeoFiction online fantasy mapping tool (using the Java Open Street Map Editor and image import plugins).
I'm having way too much fun with this. How does one enable the ability to generate more than one river through the city?
One bug I noticed is that parks seem to clump together and are not spread out. A few possible features I think would improve the generator would be a way to better center the river perhaps, and control how much ocean is generated (sometimes, I've noticed, only a sliver of both is visible). I'm interested in possibly contributing to the project.
Hello! your work is remarkable I would like to propose the following functionality: I wish that it is possible to import 3d models, or then, in the parameters of the buildings, to be able to control the size (in length and width) of the buildings, in order that it is easy to replace them after export in stl by models that we created ourselves
This is rad! Thank you
This is really cool, it looks almost like real cities!