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"
Temp1401740711
<!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"
Temp1401741162
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.
Temp1401741306
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
Temp1401741382
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.
Temp1401741607

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.
Temp1401741744
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.
Temp1401742478
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:
Temp1401742660

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
Temp1401742859
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?
Temp1401743004
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.
Temp1401743136

Step 15
Now we are ready to add the shooting to our shooter! Begin by creating a new phaser group called "bullets"
Temp1401743333
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!
Temp1401743430
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.
Temp1401743615

2D Shooter - Part 1 Info

Account

MVCode Clubs

Created By

Mvcc logo new aaron

Access Level

public

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