Inspiration
I read publications like the Strong Towns blog and CityLab, and recently started playing Cities: Skylines. So, I figured that a city simulation game would be an interesting way to highlight the issues facing American cities that I've learned about.
What it does
It is a website that, currently, draws a road network, assigns a maintenance cost to each section of the roads and also calculates how much revenue can be attributed to road section.
How I built it
The roads are drawn as tiles and procedurally generated using an L-System followed by passes over the network to fix intersections and add culs-de-sac. The little houses (red squares) by the roads are drawn as part of the road tiles.
Each tile is assigned the same yearly maintenance cost (2000 of some imaginary currency). The city revenue associated with the road tile is calculated as 2 * 200 for an assumed 2 houses in each tile + 50 for each other tile reachable from the current one in 5 steps, excluding the current tile.
All the actual drawing is done by PIXI.js.
Challenges I ran into
I had the most trouble with procedurally generating roads. Either it felt that there wasn't enough road, or that the roads were overlapping themselves too much. Also, there are some isolated road sections. I introduced the tile system to make it easier to tell when road sections meet. This solution was inspired by a series of videos about someone developing a city-building game.
Accomplishments that we're proud of
- Being somewhat successful with generating roads.
- Learning how to use PIXI.js.
- Implementing my own tooltips.
- Implementing a cost model for roads.
What we learned
I learned a lot about procedural generation, a few things about cities along the way, and that getting started with making a game isn't as hard as I imagine it to be.
What's next for What ails American cities?
I would like to explore other issues, like lack of missing-middle housing and which kinds of businesses support local economies better, in the game. I would also like to make the city generation random and the game more interactive and visually appealing. Ultimately, an interactive experience like this could help inspire people to tackle issues in their communities.
what-ails-us-cities.tech was registered with domain.com, but I can't fill out the corresponding field now :(
Built With
- pixi.js
- typescript
Log in or sign up for Devpost to join the conversation.