Phaser. Unit 5. Using tilemaps to build a shooter game in a huge world

A preview of the map

You can have a look at this preview of the whole map.

The source code and the assets

You can download this zip file to get the source code and all the assets.

Updating the map

As done previously, you can use the tile map editor to update the map. In case you have not done it yet, you can download the editor from this link and install it on your computer.

To update the map you have to go the assets folder and open the file “town.tmx” which contains the map of the example in this unit. Select a layer (on the right corner, at the top) and change anything you like (by adding or removing some objects to or from the map). When you finish, export the map to JSON format using the option “File” -> “Export as…”, and overwrite the file “town.json”, located inside the “assets” folder.

Since we are working with a lot of tilesets, in this case we are setting the collisions with all the objects in some of the layers: “Terrain_3”, “Buildings_1” and “Buildings_2”. The player and the enemies will collide with all the objects that you drawn in these three layers.

Finally check the results using your browser and move the player to go to each part of the map. You will notice that the camera will follow you on each movement. Do not forget to fully refresh the contents of the browser by pressing Ctrl+F5, since the map and some other contents are usually cached by the browser. Also move the player and check that the map has been updated with the changes you have made.

Renderization problems

Due to the large amount of resources this game is going to use from your computer, you might need to adjust a couple of parameters. It seems it works fine on Chrome browser, but if you are using another browser, or in case you find any problems, you can try updating the following parameters.

Phaser renderer

I have selected “Phaser.CANVAS” inside the phaser configuration settings, which seems to work much better on Chrome browser, but you may try “Phaser.AUTO” instead:

const config = {
  type: Phaser.AUTO

Frames per second (FPS)

You can also change the number of frames per second to choose the right renderization performance:

const MAX_FPS = 25;

Using the keyboard and the mouse

In this game we are using the keys A (left), S (down), D (right), W (up) to move the player on desktop computers and the joystick for mobile devices:

  let vX = 0, vY = 0;

  // Horizontal movement
  if (wsadKeys.A.isDown || joyStick.left) vX = -speed;
  else if (wsadKeys.D.isDown || joyStick.right) vX = speed;

  // Vertical movement
  if (wsadKeys.W.isDown || joyStick.up) vY = -speed;
  else if (wsadKeys.S.isDown || joyStick.down) vY = speed;

The mouse is used for shooting on desktop computers:

  let pointer = this.input.activePointer;
  if (pointer.isDown &&, pointer.worldX - player.x, pointer.worldY - player.y);

In case you do not have any mouse, you may use the cursor keys on desktop computers, or the second joystick on mobile devices, to shoot the bullets and to choose the shooting direction:

  let vX = 0, vY = 0;

  // Horizontal bullets
  if (cursors.left.isDown || joyStick2.left) vX = -speed;
  else if (cursors.right.isDown || joyStick2.right) vX = speed;

  // Vertical bullets
  if (cursors.up.isDown || joyStick2.up) vY = -speed;
  else if (cursors.down.isDown || joyStick2.down) vY = speed;

  if (vX || vY), vX, vY);

Enjoy the game!

You may enjoy playing this wonderful game online here.