Gamasutra is part of the Informa Tech Division of Informa PLC

This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.

Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
September 26, 2020
arrowPress Releases

If you enjoy reading this site, you might also want to check out these UBM Tech sites:


City builder games: make Build-Up animations cheaply

by Junxue Li on 01/21/15 12:37:00 pm   Expert Blogs   Featured Blogs

6 comments Share on Twitter    RSS

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.


  For many types of games, not only strictly City Builder Games, you have a piece of land, that you can construct buildings upon, this scheme looks all too familiar:


   After you drag a building form the store on to your land, it would take a while before it’s done constructing.

   Most often, in this process, a single piece of graphic which resemble a construction site would be put there. And to save memory and budget, some games would use 3 common pieces of graphics: small, medium and large, to fit different buildings. When the construction is done, the graphic would be shift to the building in its completion.

  But if you want to create more subtle Build-Up animations for your game, that is, to see the building gradually growing to the sky?

  We know today most isometric buildings are made by 3D pre-render. If you need for example 5 frames animation for this purpose, you would have to make 5 stages of completion in 3D, then render the images. Yes, in this way it would cost lots of money.

  Our company had created this type of animation for a client’s game, 5 frames of Build-Up animations for around 40 buildings. We made them in a cheap way, taking a few days. It takes little budget, but the quality is not compromised. Let’s see how we did it:


Step One: Make Construction Components

   First of all, make lots of construction components in 3D, and as many types as you can imagine: walls, pillars, steel bars… just as the below image:

       And you need to render these things to 2D images, for later use. Needless to say, you should render these in the same camera angle as in your map, and cast the same lights to them.

   Everything should have two copies, placed in two directions of your isometric map.


Then pack all the construction components graphics in a large PSD file, each thing has its own layer.


Step Two: Make the Actual Animation

   In this example, we would make animation for a small hotel building.

   First, make the complete building graphic in the usual way:


   The next jobs could be done in Photoshop. This animation needs 5 frames. According to the degree of completion in each frame, erase some parts of the complete building away:

   Then fill the hollows/cross-sections  with the construction components you just created in Step One.

Put in the components following the structure of the building, that would look reasonable. For example, if the building is a cinema, you should make a big hall in middle of the space.


   The first frame could be a basic plan on the ground. And the last frame is the building itself. Now job Done!


    This solution can be applied to buildings of all shapes, not only boxy buildings, only that you need to bend the construction components a bit:


   I know this way of Building-Up is too cartoonish, but it’s for games, right?



If you like this post, please see more of my articles and follow me here...

I would post regularly--one article every two weeks, about game art production. 




Related Jobs

Visual Concepts
Visual Concepts — Agoura Hills, California, United States

Camera Designer
Remedy Entertainment
Remedy Entertainment — Espoo, Finland

Development Director
Remedy Entertainment
Remedy Entertainment — Espoo, Finland

Senior Development Manager (Xdev Team)
New Moon Production
New Moon Production — Hamburg, Germany

Product Manager (all genders)

Loading Comments

loader image