Pixelblog - 51 - City Builder / by Raymond Schlitter

Intro

Made in the image of God, it’s in the nature of mankind to create, build, grow, and influence with the power of flesh, and the will of spirit. Within the digital realm, video games allow us to exercise these desires far beyond the limits of our earthly capacity. While all games contain some kind of god-like features, an entire genre emphasizes the overlord concept to such a degree, they’ve earned the moniker god-simulator. Among these games, I most enjoy the city builder type found in the early iterations of Sim-City. However, I never got deeply into the kind of games, for playing god is a stressful job. Nevertheless, I enjoy the creation aspect, and find great satisfaction witnessing a civilization flourish. You could describe much of my work as a practice in playing god, often featuring communal architecture from a top-down viewpoint. This has lead me to consider the compelling prospect of what a city builder game in my style might look like.

Top-Down Assets

Having spent most my life in Kansas, I approach the concept in terms of the typical mid-west city of the United States. Country style homes with lawns, wide roads, and a relatively flat, grid layout are key characteristics of these suburban getaways. From top to bottom, I present a couple houses, school, office building, and a church. The designs are classic idealizations for the sake of recognition and visual charm. More or less, they are colorful simplifications of real life counterparts in my neck of the woods. In reality, most roofing materials are dull browns, and grays. The modern school building is commonly a single story, tan brick prison, literally constructed by the same contractors who build the other kind of prison for convicted criminals. Multi-story office buildings are rare but do exist. The church is the most inspiring architecture, and probably the most accurate design, modeled after one of the many great limestone structures that grace these plains.

Moving on, I present more essential elements of any town of substance. From top to bottom, we have a post office, restaurant, courthouse, police station, and fire station. Again, they are somewhat cutified versions of irl counterparts, which check key characteristics to be easily recognizable.

As for the technical execution, I determine the size based on 16x16px grid units, which offers compatibility on a tile map with terrain tiles. The foundation of the area the structure will encompass adheres to 16x16px tiles, however I permit the height of the structure to slightly go beyond this foundation a few pixels at the top of the asset along the y-axis. This creates subtle overlap of other elements for a nice touch of depth. Note, that I do not break the foundation along the bottom or sides of the asset, as this will create conflicts with layering order.

The natural sequence of creation for me starts with the roof and works down, first establishing the basic structure. I then apply details like windows and doorways. Next, I apply drop shadows under eaves, in recessed areas, and anywhere that feels appropriate based on the light source. Then I add outlining to make the whole thing pop. Rather than use straight black outlines, I prefer subtle outlines that use a slightly darker color than the adjacent pixels. Finally, I flesh out the surrounding property and cast drop shadows on it. The size of the surrounding area is determined from the start based on a 16x16px grid.

Terrain Tiles

Before the city, there was frontier. Another aspect of city builders I find interesting is the prospecting, and razing of the land. Furthermore, I want to include that element in my concept, and provide a proper background around the boundaries of the city. Additionally, roads are necessary infrastructure to connect the city, and provide meaningful structure to the layout. Remember, this is modeled after an American city. Passenger trains are super rare, and god forbid someone walk or cycle to their destination, no matter how close it might be. Also, car pooling is for wussies.

Just covering some basic terrain here, but I can envision many variations for more dynamic environments. For example, mountains and water features could provide interesting challenges to build around. Seasonal changes and weather patterns could alter the appearance of the background, and practicality of building.

Notice there are several features presented in the city that are not broken down in tutorial format. The main principles are redundant, so If you can successfully create all the assets in the first two tutorials, I figure you should be on your way to creating whatever your city needs. Anyway, the additional assets are included in the asset pack linked at the end of the article.

Final Thoughts

After the technical subject of animating human figures in the past couple Pixelblogs, I needed to take a breather with my comfort food, which is low res top-down subjects. Especially architecture is cozy for me. But it’s not all fun and games. I did my research, considering essential features, and utilizing the most appropriate references. As usual, I made everything in context of practical game design, so the assets and concepts can be used to springboard a tangible game dev project. I hope you find the content useful, and enjoy the trip to Pixeltown, USA.

Resources

Please consider supporting my work by becoming a Patron. Among many other rewards, Patrons can download the assets featured in my tutorials. But, most importantly, you allow me to continue making new content! 

Many of my popular assets are also available to purchase from my digital shop

Alternatively, you can support me by making a one-time donation 

Assets featured in this Pixelblog are available in City Builder Assets Pack

Source files used in the making of this Pixelblog are available in City Builder Source Files

Get caught up on all my downloads

You made it to the end of the article. Thank you for reading! 

-By Raymond Schlitter