We created a canvas-based game in the last project. We will continue working on canvas and CreateJS library in this project. We are going to create a game where players build their own city. We give the city depth by using an isometric projection, the so-called 2.5D world. We also will learn more essential CreateJS techniques that help us build canvas-based games.
At the beginning of the game, we will show the player a new city. The player will act as its mayor, create buildings in his/her way, and earn coins.
We'll build a tiny economy system, which is made up of coins, diamonds, a power supply, and populations. Coins are the major currency, diamonds are the luxury resource, each building increases the population of the city, and the power supply building generates power to support the population. The power capacity of the supplies must be larger than the required population in order to create new buildings.
We introduced three types of buildings that affect the economy. They are the coins generator, power supply, and merchant. The player's goal is to create a beautiful city and collect as many coins and diamonds as possible.
You can visit http://makzan.net/html5-games/isometric-city/ to play the example game in order to have a better understand of what we will build throughout this project:
The following is a screenshot of the game that is created after we complete all the objectives in this project:
We will learn how to place the building on a map and visualize the map in a 2.5D isometric projection.
The skill to place buildings is useful in different ways. We will use some common techniques to place buildings in Project 6, Space Defenders.
The isometric projection creates depth in the game. This technique can be used in a wide range of games, such as RPG games, building games, or strategy games such as tower defense.
By changing the graphics and game parameters, we can easily modify this project into games of different themes. It may become a zoo park game or any business simulation game such as a hospital, restaurant, museum, or logistics company.
We need the EaselJS and TweenJS library code. Before we start the project, we have to download these library code from http://CreateJS.com, or from the code bundle.