Phaser workshop - Speaker Deck

Slide 1

Slide 1 text

Code & Play

Slide 2

Slide 2 text

Hello Pierre CHABILAND @PierreChabiland casusludi.com Alvin BERTHELOT @alvinberthelot webyousoon.com

Slide 3

Slide 3 text

Our goals Coder un jeu web Découvrir Phaser Se faire plaisir

Slide 4

Slide 4 text

Progress 1. Présentation Phaser 2. Présentation du code/Git 3. Concepts puis réalisation du jeu “Step by step” 4. Temps d’expérimentation et de fun

Slide 5

Slide 5 text

The game to build ARKANOID

Slide 6

Slide 6 text

Phaser

Slide 7

Slide 7 text

Phaser Framework de jeu 2D en HTML5/JS pour le web mobile et desktop Exploite WebGL et Canvas (se base sur PIXI.JS pour le rendu d’affichage) Accent mis sur les performances web mobiles

Slide 8

Slide 8 text

Features - Sprites / Animation - Particules - Moteurs physique (3 par défaut, possibilité d’en ajouter) - Camera - Tilemaps (décors en tuiles, comme sur les 1ers Zelda) - Sons (musiques / effets sonores) - Etc….

Slide 9

Slide 9 text

Code Git

Slide 10

Slide 10 text

TUTORIAL git clone https://github. com/alvinberthelot/phaser-example-arkanoid cd phaser-example-arkanoid npm install gulp localhost:3000

Slide 11

Slide 11 text

TUTORIAL git checkout game

Slide 12

Slide 12 text

Press start

Slide 13

Slide 13 text

Phaser init var Phaser = require('phaser'); var SCALE = 3; var game = new Phaser.Game( 120 * SCALE, 60 * SCALE, Phaser.AUTO, 'phaser-example-arkanoid', { preload: _preload, create: _create, update: _update }, false, false );

Slide 14

Slide 14 text

Loading assets function _preload() { game.load.image('ball', 'game/assets/ball.png'); }

Slide 15

Slide 15 text

Add sprite function _create() { var ball = game.add.sprite(x, y, 'ball'); }

Slide 16

Slide 16 text

Change game function _update() { if(ball.x > ...) { ... } }

Slide 17

Slide 17 text

UNLOCK LEVEL 1 1. Add background colour to the game 2. Show ball in the game

Slide 18

Slide 18 text

PASSWORD LEVEL 1 git checkout feat/game-view

Slide 19

Slide 19 text

Add life to your sprite function _update() { ball.x += 10; }

Slide 20

Slide 20 text

Add physics function _create() { ... game.physics.enable(ball, Phaser.Physics.ARCADE); }

Slide 21

Slide 21 text

Velocity function _create() { ... var angle = 0; ball.body.velocity.setTo( Math.cos(angle) * ballSpeed, Math.sin(angle) * ballSpeed ); }

Slide 22

Slide 22 text

Collide function _create() { ... ball.body.collideWorldBounds = true; }

Slide 23

Slide 23 text

Keep dynamic function _create() { ... ball.body.bounce.set(1); }

Slide 24

Slide 24 text

UNLOCK LEVEL 2 1. Move the ball in the old school way 2. With physics the ball can’t exit 3. Use velocity instead of the old school way and add bounce

Slide 25

Slide 25 text

PASSWORD LEVEL 2 git checkout feat/game-physics

Slide 26

Slide 26 text

Add controls function _create() { ... cursor = game.input.keyboard.createCursorKeys(); } function _update() { ... bar.body.velocity.x = 0; if (cursor.left.isDown) { bar.body.velocity.x = - barSpeed * SCALE; } else if (cursor.right.isDown) { bar.body.velocity.x = barSpeed * SCALE; } }

Slide 27

Slide 27 text

Collide bar / ball function _create() { ... bar.body.immovable = true; } function _update() { ... game.physics.arcade.collide(bar, ball, null, null, this); }

Slide 28

Slide 28 text

function _update() { ... game.physics.arcade.collide(bar, ball, null, _reflect, this); } function _reflect(bar, ball) { ... } Action when collide

Slide 29

Slide 29 text

Slide 30

Slide 30 text

UNLOCK LEVEL 3 1. Add a bar and move it with the keyboard 2. Add physics between ball and bar 3. Calculate new angle when ball touch bar

Slide 31

Slide 31 text

PASSWORD LEVEL 3 git checkout feat/game-keyboard

Slide 32

Slide 32 text

Create a brick function _create() { ... var brick = game.add.sprite(x, y, 'brick'); brick.scale.set(SCALE); game.physics.enable(brick, Phaser.Physics.ARCADE); brick.body.immovable = true; }

Slide 33

Slide 33 text

Collide ball / brick function _update() { ... game.physics.arcade.collide(ball, brick, null, null, this); }

Slide 34

Slide 34 text

Group of brick function _createBricks() { var bricks = game.add.group(); var widthBrick = game.cache.getImage('brick').width; var heightBrick = game.cache.getImage('brick').height; for (var i = 0; i < 10; i++) { for (var j = 0; j < 6; j++) { var brick = _createOneBrick( widthBrick * SCALE * i, heightBrick * SCALE * j, 'brick'); bricks.add(brick); } } return bricks; }

Slide 35

Slide 35 text

Kill a brick function _update() { ... game.physics.arcade.collide( ball, bricks, null, _breakBrick, this); } function _breakBrick(ball, brick) { brick.kill(); return true; }

Slide 36

Slide 36 text

UNLOCK LEVEL 4 1. Create a brick 2. Create a group of bricks 3. Kill a brick when the ball touch it

Slide 37

Slide 37 text

PASSWORD LEVEL 4 git checkout feat/game-bricks

Slide 38

Slide 38 text

Pause function _create() { ... game.paused = true; spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); spaceKey.onDown.add(function() { game.paused = !game.paused; }, this); }

Slide 39

Slide 39 text

UNLOCK LEVEL 5 1. Init bar, ball and bricks with game dimensions 2. Game paused by default 3. Toggle pause with spacebar

Slide 40

Slide 40 text

PASSWORD LEVEL 5 git checkout feat/game-paused

Slide 41

Slide 41 text

Show text var message; var style = { font: '32px Arial', fill: '#ffffff' }; message = game.add.text( game.width * 0.5, game.height * 0.5, 'Ready ?', style); message.anchor.set(0.5); message.text = 'Bye';

Slide 42

Slide 42 text

Prepare WebFont // The Google WebFont Loader will look for this object, so create it before loading the script. WebFontConfig = { active: function() { game.time.events.add( Phaser.Timer.SECOND, _createMessage, this); }, google: { families: ['Pacifico', 'Cookie'] } };

Slide 43

Slide 43 text

Use WebFont function _preload() { ... // Load the Google WebFont Loader script game.load.script( 'webfont', '//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js'); } var style = { font: '32px Cookie', fill: '#ffffff' };

Slide 44

Slide 44 text

UNLOCK LEVEL 6 1. Show text when game paused 2. Load web font 3. Show text when win or lose

Slide 45

Slide 45 text

PASSWORD LEVEL 6 git checkout feat/game-text

Slide 46

Slide 46 text

Class Brick var Brick = function(game, x, y, image) { Phaser.Sprite.call(this, game, x, y, 'brick'); this.scale.set(SCALE); this.game.physics.enable(this, Phaser.Physics.ARCADE); this.body.immovable = true; }; Brick.prototype = Object.create(Phaser.Sprite.prototype); Brick.prototype.constructor = Brick; var brick = new Brick(...);

Slide 47

Slide 47 text

Handle events Brick.prototype = Object.create(Phaser.Sprite.prototype); Brick.prototype.constructor = Brick; Brick.prototype.destruct = function() { this.events.onKilled.addOnce(this._onKillHandler, this); this.kill(); }; Brick.prototype._onKillHandler = function() { ... };

Slide 48

Slide 48 text

Particles Brick.prototype._onKillHandler = function() { var emitter = this.game.add.emitter(0, 0, 100); emitter.makeParticles('brick-dust'); emitter.x = this.x + this.width * 0.5; emitter.y = this.y + this.height * 0.5; emitter.minParticleSpeed.setTo(-50 * SCALE, -50 * SCALE); emitter.maxParticleSpeed.setTo(50 * SCALE, 50 * SCALE); emitter.minParticleScale = 1 * SCALE; emitter.maxParticleScale = 1.5 * SCALE; emitter.start(true, 300, null, 10); this.game.time.events.add(2000,function() { emitter.destroy(); }); };

Slide 49

Slide 49 text

UNLOCK LEVEL 7 1. Create specific class for brick 2. Destroy bricks with particles

Slide 50

Slide 50 text

PASSWORD LEVEL 7 git checkout feat/game-particles

Slide 51

Slide 51 text

Gamepad function _create() { ... game.input.gamepad.start(); gamepad1 = game.input.gamepad.pad1; } function _update() { ... var mainAxis = gamepad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X); if (gamepad1.isDown(Phaser.Gamepad.XBOX360_DPAD_LEFT) || mainAxis < -0.1) { bar.body.velocity.x = - barSpeed * SCALE; } ... }

Slide 52

Slide 52 text

Audio function _preload() { ... // Load sounds game.load.audio('sound', 'game/assets/sounds/sound1.ogg'); } function _create() { ... sound = game.add.audio('sound'); } function _update() { ... sound.play(); }