My 10 days with Phaser.js - WarsawJS Meetup #13

Piotr Kowalski
"My 10 days with Phaser.js"
2015-09-16
@piecioshka

Who am I?
Kierownik Działu Aplikacji Webowych
Cyfrowy Polsat, Warsaw
JavaScript Ninja. Mac lover. Pebble evangelist.
Organizer WarsawJS
"Kto chce szuka sposobu, kto nie chce szuka powodu."

piecioshka.pl/blog github.com/piecioshka
twitter.com/piecioshka soundcloud.com/piecioshka
Where am I?

Advantages of Phaser.js
• Big community
• A lot of lines of code (a lot of JSDocs)
• Good quality of code (components)
• Separation of layers in API, e.g. states and
keyboards
• Cool phaser.io/docs

Disadvantages of Phaser.js
• I didn't notice...

"State idea"
• The gameplay is based on state switching , e.g.
choose language, select character from menu,
ﬁght, defeat or win
• State deﬁnition - class with 4 methods: preload ,
create , update , render and optionally init
• Only one state is active !

init method
• It runs as the ﬁrst method

preload method
• Method which downloads the assets
• images
• sounds
• json ﬁles

create method
• Runs ones while generating the state
• In that method I create all objects that are
occurring in a game state

update method
• Phaser.Game#raf via
requestAnimationFrame or setTimeout
• 38881: Phaser.Game#update
• The core game loop

render method
• Method runs after update process
• Inside it we can enable displaying debug
details

Day I: Here we go!
31↑
Use ECMAScript 6.
webpack and Babel.js take care of compiling
to ECMAScript 5 (for browser).
“

webpack.conﬁg.js
module.exports = {
resolve: { extensions: ['.es6.js', '.js', ''] },
entry: './app/scripts/main',
output: {
filename: 'bundle.js',
path: './app/dist'
},
module: { loaders: [{
test: /.es6.js/,
exclude: /node_modules/,
loader: 'babel?stage=0'
}] }
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.

Advantages of ECMAScript 6
• Modules - no global variables
• Importing - require only dependency
• Smooth syntax of class deﬁnition with cool inheritance
• Default parameters and Arrow function
// Destructuring assignment
let [x, y] = ['abc', 100]
// x = 'abc', y = 100
01.
02.
03.

HTML (index.html)
No more HTML files, because everything is in the Canvas.
1. Create container for game: <div id="game"></div>
2. Add library file: scripts/vendor/phaser.js
3. Add our game file: dist/bundle.js

Phaser.js v2.4.3
Type Files
Normal 2.8M phaser.js
726K phaser.min.js
Only need to 2,2M phaser-arcade-physics.js
754K phaser-arcade-physics.map
567K phaser-arcade-physics.min.js

Why not in modules?
• Throw an error: "PIXI is not deﬁned"
• webpack will have big ﬁle to manage
• Do I really need it?

Write ﬁrst lines of code
• Create a game object
// Create game object
this.game = new Phaser.Game(800, 400, Phaser.Canvas, 'game`)
• One for all game
• Available from the each of game state
01.
02.

My 10 days with Phaser.js - WarsawJS Meetup #13

Day II: Design (vol. 1)
157 LOC (126↑)
• Add states: MenuState - select character
// Add state to set
this.game.state.add(name, handler)
// Activate passed state
this.game.state.start(name)
01.
02.
03.
04.

• assets - directory contains everything except code,
e.g. graphics , sound
• Display ﬁrst in game background - simple image with game
dimension and position in point 0,0
// Load image file and put it to cache
this.load.image(key, path)
// Fetch from cache image and put to Canvas
this.add.image(x, y, key)
01.
02.
03.
04.

• scripts/models/ directory with characters definition, e.g. Son Goku
• Add states: FightState , SearchingState (screen with collected balls)
• scripts/configuration.js - file in isolated game configuration
• Create instance of player class
• Add some buttons
// Add button to Canvas
this.add.button(x, y, key, handler)
01.
02.

The ﬁrst big problem
• Sharing objects between states?
Ideas?
• Global variables?
• Never!
• Create custom game properties!

Day III: We are moving!
258 LOC (101↑)
• Create map with Tiled - cool tool for create game maps
this.load.tilemap(key, path, data, format)
// data: if `path` was passed, equals null
// format: Phaser.Tilemap.TILED_JSON
• Add tileset to map (our spritesheet)
this.load.spritesheet(key, path, width, height)
// width: tile width
// height: tile height
• Create layer on map and extend it to the whole game area
01.
02.
03.
01.
02.
03.

Balls positions
• Definition of positions dragon balls in separate files, for why?
• backend can generate that files
• separate configuration from business logic
• Loading JSON file
// Fetch file and put response into cache
this.load.json(key, path)
// Return parsed object
object = this.cache.getJSON(key)
01.
02.
03.
04.

Create the ﬁrst sprite - character
// Add sprite to game
this.add.sprite(x, y, key)
Add dragon balls
• Create group object for them, for better collision management
01.
02.

Simple message
• Create message
// Add label
message = this.add.text(x, y, text)
• Animation: fadeIn
message.alpha = 0
this.add.tween(message).to(config, time, type, true)
// config: { alpha: 1 }
// time: Phaser.Timer.SECOND
// type: Phaser.Easing.Linear.None
01.
02.
01.
02.
03.
04.
05.

Navigation vol. 1
if (keyboard.isDown(Phaser.Keyboard.LEFT) {
player.x -= 5
}
Warning!
If we would like to use collision detection,
we should update player.velocity.x not only player.x .
01.
02.
03.

Navigation vol. 2
// Update velocity of player
player.velocity.x -= 5
Remember to clear velocity before that process!
// Reset velocity
player.velocity.x = 0
01.
02.
“01.
02.

Collision - a very broad subject
• Player
// Enable arcade mode for our player
this.physics.arcade.enable(player)
• Map
map.setCollisionByIndex(1) // Start counting from 1
layer = map.createLayer(name)
this.physics.arcade.collide(player, layer)
Player will be collide with tile with index = 0 from now!
01.
02.
01.
02.
03.

Collected items - dragon balls
• Group of balls should have a body
balls = this.add.group()
balls.enableBody = true
• Group should have deﬁned a physics
// Add body to group of balls
this.physics.arcade.enable(balls)
// Start collide between player and group of balls
this.physics.arcade.collide(player, balls, handler)
01.
02.
01.
02.
03.
04.

Day IV: Time from clock
384 LOC (126↑)
• Create states: ShenronState , GameOverState ,
TrainingState
• Handle keyboard on MenuState
• Create countdown - measure time to GameOver
// Clock with reference to state
this.time.events.add(time, handler, context)
01.
02.

Day V: Music!
710 LOC (326↑)
• Create fake spritesheets for characters
• Add logo and sound
this.load.audio(key, path)
sound = this.add.audio(key)
sound.play()
• Create enemies on FightState
• Resize hitbox during ﬁght
• Create state MealState - regeneration state, HP will be reset
01.
02.
03.

Day VI: Display bars
858 LOC (148↑)
• Display player labels (HP and EXP),
and player avatars on FightState
• Disable sound globally (saved state in localStorage )
• Add everywhere we can DragonBallPlay logo

Day VII: Player collision
1028 LOC (170↑)
• Support mouse events on MenuState
// Support mouse over
button.events.onInputOver.add(handler, context)
• Check players collision
isOverlap() => {
return this.physics.arcade.overlap(player, enemy)
}
• Decrease HP of enemy when player hits him
01.
02.
01.
02.
03.

Day VIII: Create Artiﬁcial
Intelligence
1270 LOC (242↑)
• Create screen which create only message
• Display game control before main part of game
• Rename FightState to VersusState - better name
• FightState is base class with children VersusState and
TrainingState
• First idea for AI - create list of enemy moves

Day IX: Easter egg
1533 LOC (263↑)
• Fixed AI - choose random move from predefined list
• Create Utilities module with static methods
• Create state: LanguageState
• Detach all text to isolated JSON files
• Create DefinitionTyped.js
• Revert default player parameters on GameOverState
• Create Easter Egg : new character available on MenuState

Day X: Last day
1732 LOC (199↑)
• Rename SearchingState to CollectingState
• Choose randomly 1 map from 3 on CollectingState
• Add collision with 2 tiles: 1 and 3
// Upgrade collision
map.setCollision([1, 3])
• Converting all images to PNG - why is it a bad idea for backgrounds?
• Create states: PlayerPresentationState , EnemyPresentationState ,
WinnerState
01.
02.

Future plans
• Block players moves when someone dies on VersusState
• Add countdown on TrainingState
• Display app version somewhere with small font size
• Extend display time for MessageState
• Fixed players collision, that they can't enter on themselves
• Support shortcuts
• Fixed Konami code
• Support Gamepad API
• Support Notiﬁcation API
• Draw characters and create simple favicon

scripts/states/VersusState.es6.js

What I learned?
• Draw something when you are ﬁnish implementation
• Keyboard handler doesn't have to be in update method
• Each of state has his own clock , which is destroyed
when state is destroyed

My mistakes
• Duplicate code
Phaser.State#rnd.integerInRange(min, max)
instead of:
Utilities.random(min, max)
• I missed the manager to keep the storyline, so I decided to...
buy a couple of books about Phaser.js

Donation
patreon.com/photonstorm
(Richard Davey @photonstorm)

Links
• Slides: http://piecioshka.github.io/warsawjs-presentation-my-10-days-with-phaser-js
• My games:
• https://github.com/piecioshka/www.dragonballplay.com [COMPLETE]
• https://github.com/javascript-ninjas/game-fastest-joby [COMPLETE]
• https://github.com/piecioshka/ss15-dumplings [COMPLETE]
• https://github.com/piecioshka/game-electrode [WIP]
• https://github.com/piecioshka/game-snooker [WIP]
• ECMAScript 7: https://babeljs.io/docs/usage/experimental
• Special editor: http://phasereditor.boniatillo.com
• Font: http://www.dafont.com/saiyan-sans.font

See you next
month at
WarsawJS

My 10 days with Phaser.js - WarsawJS Meetup #13

More Related Content

What's hot (19)

Similar to My 10 days with Phaser.js - WarsawJS Meetup #13 (20)

Recently uploaded (20)

My 10 days with Phaser.js - WarsawJS Meetup #13