Placing the tiles and grid in the city layer

We created the layers' foundation in the last task. The city layer was empty. In this task, we focus on the city layer where we put tiles and buildings.

Prepare for lift off

First, we will draw some graphics for the isometric city. Any graphic editor should work. To draw a floor tile, we use the steps shown in the following figure:

1. Draw a square shape.

2. Rotate it by 45 degrees to form a diamond shape.

3. Set the current vertical diagonal of the resulting rhombus to 50 percent of the width.

The resulting graphic is our base floor and we can start drawing buildings on top of it. Besides the tile graphic, we also put the city-bg.png file in the images folder, as shown in the following screenshot:

We will need two more JS files for this task. Create the following two JS files inside the scripts folder:

scripts/view-sprites.js
scripts/helpers.js

For newly created files, we need to include them inside our index.html file before loading the game.js file:

<script...