3. What we will cover
- What Phaser is
- What Pixi is
- A (quick) overview
- Get our hands dirty
4. What is Phaser ?
An HTML5 game framework for 2D which
takes care of all of the groundwork for you
Unlike some others, is built for the mobile
browsers
One of the most feature-complete
frameworks out there
5. What is Phaser ?
Built by Richard Davey
So Big Disclaimer
It uses the amazing pixi.js as a renderer
6. What is Pixi.js then ?
Really fast WebGL renderer for 2D
Most importantly, it provides you with a
canvas fallback if need be
7. WebGL + 2D = ?
Because WebGL doesn’t necessarily means 3D
8. A (quick) overview
What Phaser provides you with :
- Standardised input
- Full-featured audio support (uses Web Audio and
can fall back to the <audio> tag
- Mobile-friendly
- Not one, not two, but three physics engine
9. Get our hands dirty
https://github.com/photonstorm/phaser
10. To start with
var game = new Phaser.Game(400, 550, Phaser.AUTO,'', {
preload: preload, create: create, update: update});
11. Phaser’s core functions
var game = new Phaser.Game(400, 550, Phaser.AUTO,'',
{ preload: preload, create: create, update: update, render:
render });
function preload(){
}
function create(){
}
function update(){
}
function render(){
}
12. Phaser’s core functions
var game = new Phaser.Game(400, 550, Phaser.AUTO,'',
{ preload: preload, create: create, update: update,
render: render });
function preload(){
// Don’t count your assets before they’re preloaded
game.load.image('bird', 'assets/planeRed2.png');
}
+ Audio, spritesheets, Json, CSV, tilemap, etc
13. Phaser’s core functions
var game = new Phaser.Game(400, 550, Phaser.AUTO,'',
{ preload: preload, create: create, update: update,
render: render });
function create(){
// Finally display your image, using WebGL or Canvas
var bird = game.add.sprite(100, 200, 'bird');
}