O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

Prepare for lift off
  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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required