Build mobile HTML5 Games with Phaser

{Your name and details}

Build mobile HTML5 games

with Phaser

Phaser {Firstname}, {Lastname}, {Conference}, {Location}, {date}

What we are going to cover

Breakout Phaser gameplay
  • The framework
  • Scaling the Canvas
  • Loading the assets
  • Drawing images and text
  • Physics
  • Mobile input
  • Collision detection
  • Winning and losing
  • Animations nad tweens

Setup

  • Computer (Windows, Mac OS X, Linux)
    • Browser (Firefox, Chrome, Safari, Opera, Internet Explorer)
    • Text editor (Notepad, Sublime Text, Smultron)

HTML structure

        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8" />
          <title>Gamedev Phaser Workshop</title>
          <style>* { padding: 0; margin: 0; }</style>
          <script src="js/phaser.2.4.2.min.js"></script>
        </head>
        <body>
        <script>
        var game = new Phaser.Game(480, 320, Phaser.AUTO, null,
          { preload: preload, create: create, update: update });
        function preload() {}
        function create() {}
        function update() {}
        </script>
        </body>
        </html>

Scaling

        game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        game.scale.pageAlignHorizontally = true;
        game.scale.pageAlignVertically = true;

Scale modes: NO_SCALE, EXACT_FIT, SHOW_ALL, RESIZE, USER_SCALE.

Loading the assets

        function preload() {
          game.load.image('ball', 'img/ball.png');
          game.load.spritesheet('button', 'img/button.png', 120, 40);
        }

Drawing images

Breakout Phaser gameplay 
        ball = game.add.sprite(350, 200, 'ball');
        paddle = game.add.sprite(230, 300, 'paddle');

Text output

Breakout text

        textStyle = { font: '18px Arial', fill: '#0095DD' };
        livesText = game.add.text(5, 5, 'Lives: '+lives, textStyle);
      
        scoreText.setText('Points: '+score);

Score, lives, messages, etc.

Buttons

Button frames: over, out, down, up.

Breakout button

        startButton = game.add.button(15, 15, 'button',
          startGame, this, 1, 0, 2);

Physics

        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.physics.enable(ball, Phaser.Physics.ARCADE);
        ball.body.collideWorldBounds = true;
        ball.body.bounce.set(1);

Physics systems: Arcade, P2, Ninja and Box2D.

Movement

Breakout ball move 
        ball.x += 1;
        ball.y += 1;
      
        ball.body.velocity.set(150, -150);

Mobile input

Values and events.

        paddle.x = game.input.x;
      
        game.input.onDown.addOnce(function(){
          ball.body.velocity.set(150, -150);
        }, this);

Collision detection

collision 
        game.physics.arcade.collide(ball, bricks, ballHitBrick);

Losing

        game.physics.arcade.checkCollision.down = false;
        ball.events.onOutOfBounds.add(ballLeaveScreen, this);

Instant game over, or removing lives until they are available.

Winning

        function ballHitBrick(ball, brick) {
          // ...
          if(score === brickInfo.count.row*brickInfo.count.col*10) {
            alert('You won the game, congratulations!');
          }
        }

Destroy all the bricks.

Animations

        game.load.spritesheet('ball', 'img/wobble.png', 20, 20);
      
        ball = game.add.sprite(50, 250, 'ball');
        ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 24);
      
        function ballHitPaddle(ball, paddle) {
          ball.animations.play('wobble');
        }

Tweens

        var killTween = this.add.tween(brick.scale);
        killTween.to({x:0,y:0}, 200, Phaser.Easing.Linear.None);
        killTween.onComplete.addOnce(function(){
          brick.kill();
        }, this);
        killTween.start();
      
        game.add.tween(brick.scale).to({x:2,y:2}, 500,
          Phaser.Easing.Elastic.Out, true, 100);

Thanks! Questions?

  • {Your name and details}
  • Slides: {slideurl}