Phaser workshop

Alvin@alvinsight

HTML5 game developer

WHO AM I ?

What we will cover

- What Phaser is

- What Pixi is

- A (quick) overview

- Get our hands dirty

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

What is Phaser ?

Built by Richard Davey

So Big Disclaimer

It uses the amazing pixi.js as a renderer

What is Pixi.js then ?

Really fast WebGL renderer for 2D

Most importantly, it provides you with a canvas fallback if need be

WebGL + 2D = ?

Because WebGL doesn’t necessarily means 3D

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

Get our hands dirty

https://github.com/photonstorm/phaser

To start with

var game = new Phaser.Game(400, 550, Phaser.AUTO,'', { preload: preload, create: create, update: update});

Phaser’s core functionsvar game = new Phaser.Game(400, 550, Phaser.AUTO,'', { preload: preload, create: create, update: update, render: render });

function preload(){

}

function create(){

}

function update(){

}

function render(){

}

Phaser’s core functionsvar 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

Phaser’s core functionsvar 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');

}

THANK YOU

Coding time !

http://alvinsight.com/workshops/quacky/workshop.zip