The document outlines a Phaser workshop led by developer Alvin, focusing on the Phaser framework for HTML5 game development. It highlights Phaser's features, including its use of Pixi.js as a renderer, mobile-friendliness, and built-in physics engines. The document also provides sample code snippets for creating a basic game structure using Phaser.

1. Phaser workshop

2. Alvin
@alvinsight
HTML5 game developer
WHO AM I ?

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');
}

14. THANK YOU
Coding time !
http://alvinsight.com/workshops/quacky/workshop.zip