2D Shooter - Part 1

Step 1

Go to "plnkr.co" and create an account or log in

Step 2

Let's begin with the file "index.html"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/phaser/2.0.4/phaser.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <h1>2D Shooter - Part 1</h1>
  <div id="projectile-lesson-1"></div>
</body>
</html>

Step 3

Now we can add the framework of a game to our file "script.js"

var game = new Phaser.Game(640, 320, Phaser.CANVAS, 'projectile-lesson-1', { preload: preload, create: create, update: update });


function preload() {
  
  
}


function create() {
  
  
}


function update() {
  
  
}

Step 4

Inside preload() we load in the images and other assets we are using in our game.

game.load.tilemap('map', "tilemap.json", null, Phaser.Tilemap.TILED_JSON);
  game.load.image('tileset', '//i.imgur.com/PsulQEq.png');
  game.load.image('mountains', '//i.imgur.com/UY3o6h1.jpg');
  game.load.spritesheet('contra', '//i.imgur.com/lmXDYws.png', 45, 47);
  game.load.image('bullet', '//i.imgur.com/jzOjX7a.png');

Step 5

Before we start creating our game we need to initiate some variables that we will use later

var player, enemy, map, bg, layer, cursors, spaceKey, boom, winText;

Step 6

We also need to add a new file "tilemap.json" which contains the information from our map created using Tiled.

Step 7

Place this code inside "tilemap.json"

{ "height":10,
 "layers":[
        {
         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 25, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 27, 29],
         "height":10,
         "name":"layer1",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":20,
         "x":0,
         "y":0
        }],
 "orientation":"orthogonal",
 "properties":
    {

    },
 "tileheight":32,
 "tilesets":[
        {
         "firstgid":1,
         "image":"tileset-platformer.png",
         "imageheight":544,
         "imagewidth":192,
         "margin":0,
         "name":"tileset",
         "properties":
            {

            },
         "spacing":0,
         "tileheight":32,
         "tilewidth":32
        }],
 "tilewidth":32,
 "version":1,
 "width":20
}

Step 8

Now we are ready to begin creating our game world. This code inside create() adds the map and background to the world.

game.physics.startSystem(Phaser.Physics.ARCADE);
  
  bg = game.add.tileSprite(0, 0, 640, 320, 'mountains');
  bg.fixedToCamera = true;
  
  
  map = game.add.tilemap('map');
  map.addTilesetImage('tileset');
  layer = map.createLayer('layer1');
  map.setCollisionByExclusion([0]);

Step 9

This function will spawn a player in our world with specific attributes. Read through the code and think about what each line is doing to our player sprite.

function spawnPlayer() {
  player = game.add.sprite(100,230,'contra');
  game.physics.enable(player, Phaser.Physics.ARCADE);
  player.body.gravity.y = 500;
  player.body.collideWorldBounds = true;
  player.body.fixedRotation = true;
  player.frame = 1;
  player.animations.add('walk_right', [0,1,2,3,4,5,6,7], 12, true);
  player.animations.add('walk_left', [8,9,10,11,12,13,14,15], 12, true);
  game.camera.follow(player);
}

Step 10

Now we must call this function somewhere to add our player to the game. Where do you think it goes?

spawnPlayer();

Step 11

If you spawned the player correctly, your game should look like this right now:

Step 12

Now we are ready to add collisions and movement to our player. Add these lines to give us access to input from the cursor keys and spacebar

cursors = game.input.keyboard.createCursorKeys();
  spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

Step 13

This code inside update allows our player to control the movement of the sprite. Notice that it uses a variable "facing" that we have not created yet, do you remember how to create a new variable in javascript?

function update() {
  player.body.velocity.x = 0;
  game.physics.arcade.collide(player, layer);
  if (cursors.left.isDown) {
    player.animations.play('walk_left');
    player.body.velocity.x = -150;
    facing = 'left';
  } else if (cursors.right.isDown) {
    player.animations.play('walk_right');
    player.body.velocity.x = 150;
    facing = 'right';
  } else {
    player.animations.stop();
    if (facing == 'right') {
      player.frame = 0;
    } else {
      player.frame = 8;
    }
  }
  if (cursors.up.isDown && player.body.onFloor()) {
    player.body.velocity.y = -385;
  }
  
}

Step 14

Once you have completed these steps you should be able to move around and jump using the arrow keys.

Step 15

Now we are ready to add the shooting to our shooter! Begin by creating a new phaser group called "bullets"

bullets = game.add.group();
  game.physics.enable(bullets, Phaser.Physics.ARCADE);

Step 16

This function allows the player to shoot bullets! Try to understand what each line is doing, and if you have trouble ask us to explain. It's complicated!

var shotTimer = 0;
function shoot() {
  if (shotTimer < game.time.now) {
    shotTimer = game.time.now + 275;
    var bullet;
    if (facing == 'right') {
      bullet = bullets.create(player.body.x + player.body.width / 2 + 20, player.body.y + player.body.height / 2 - 4, 'bullet');
    } else {
      bullet = bullets.create(player.body.x + player.body.width / 2 - 20, player.body.y + player.body.height / 2 - 4, 'bullet');
    }
    game.physics.enable(bullet, Phaser.Physics.ARCADE);
    bullet.outOfBoundsKill = true;
    bullet.anchor.setTo(0.5, 0.5);
    bullet.body.velocity.y = 0;
    if (facing == 'right') {
      bullet.body.velocity.x = 400;
    } else {
      bullet.body.velocity.x = -400;
    }
  }
}

Step 17

You've probably noticed that you can't actually shoot yet. Well, that's because we haven't added anything that tells the game to shoot! Where do you think this goes?

if (spaceKey.isDown) {
    shoot();
  }

Step 18

Good work! You should now have a player that can move, jump, and shoot! Play around with the code and see how everything is working, next time we will add an enemy to shoot at.

2D Shooter - Part 1 Info

Account

MVCode

Created By

aaron

Access Level

public

Created over 6 years ago

Published Assigned 26 times

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach