Building a Game

with

@nicodev_23  @dwaksman

so hold tight and...set phasers to stun!

What is Phaser?

How do I create a game?

Phaser.Game(width, height, renderer, htmlElt)

  var game = new Phaser.Game(800, 600, Phaser.AUTO, 'gameDiv');

Code:

Adding states

Game.state.add(stateName, stateObject);

  // Create a new game instance.
  var game = new Phaser.Game(800, 600, Phaser.AUTO, 'gameDiv');

  // Add some states to the game.
  game.state.add('menu', MenuState);
  game.state.add('play', PlayState);

  // Initialize the game in the 'menu' state.
  game.state.start('menu');

Code:

States Structure

    // Create a PlayState class.
    var PlayState = function () {};
    
    // Create the preload, create and update methods.
    PlayState.prototype = {
    
        preload: function () {
            // Called while loading the state.
        },
    
        create: function () {
            // Called once after loading the state.
        },
    
        update: function () {
            // Called 60 times per second.
        }

    };

Loading assets

Game.load.image(stateName, stateObject);

Game.load.audio(stateName, stateObject);

    

    // Create the preload, create and update methods.
    PlayState.prototype = {
    
        preload: function () {
            this.game.load.image('player', 'assets/player.png');
            this.game.load.audio('music', 'assets/music.ogg');:
        },
    
        create: function () { ... },
    
        update: function () { ... }

    };

Code:

Drawing on the screen

Game.add.sprite(width, height, assetName);

    

    // Create the preload, create and update methods.
    PlayState.prototype = {
    
        preload: function () {
            this.game.load.image('player', 'assets/player.png');
            this.game.load.audio('music', 'assets/music.ogg');:
        },
    
        create: function () {
            // Add the player sprite at (50, 50). 
            this.game.add.sprite(50, 50, 'player');
        },
    
        update: function () { ... }

    };

Code:

Jumping

    

    // Create the preload, create and update methods.
    PlayState.prototype = {
    
        preload: function () {
            this.game.load.image('player', 'assets/player.png');
            
            // Enable physics.
            this.game.physics.startSystem(Phaser.Physics.ARCADE);
        },
    
        create: function () {
            this.player = this.game.add.sprite(50, 50, 'player');

            // Add the player to the physics system and add gravity.
            this.game.physics.arcade.enable(this.player);
            this.player.body.gravity.y = 1000;
        },
    
        update: function () {                                       
            var UpArrow = this.game.input.keyboard.addKey(Phaser.Keyboard.UP);
              
            if (UpArrow.isDown())
                this.player.body.velocity.y = -300;                               
        }

    };

Adding some music

    

    // Create the preload, create and update methods.
    PlayState.prototype = {
    
        preload: function () {
            this.game.load.audio('music', 'assets/music.ogg');
        },
    
        create: function () {
            // Add some music to the game.
            this.music = this.game.add.audio('music');
            this.music.loop = true;

            // Play the music.
            this.music.play();
        },
    
        update: function () { ... }

    };

Collisions

    

    // Create the preload, create and update methods.
    PlayState.prototype = {
    
        preload: function () { ... },
    
        create: function () {
            // Create a player and wall.
            this.player = this.game.add.sprite(50, 50, 'player');
            this.wall = this.game.add.sprite(150, 50, 'player');

            // Make the player move to the right (in order to colide with the wall).
            this.player.body.velocity.x = 50;
            
            // Enable physics for both and blabla...
        },
    
        update: function () { 
            // Make them collide.
            this.game.physics.arcade.collide(this.player, this.wall);
        }

    };