Making HTML5 Games with

Michel WackerCEO Gentle Troll Entertainment GmbH

@starnutImage http://phaser.io

Topics of this talk

• What is Phaser?• Who is it for?• What does it have to offer?• Examples• Resources• Tools & Workflow• Distribution

What is Phaser?

„Desktop andMobile HTML5game framework“

Created by

Inspired by

What is Phaser?

• 2D framework• Based on Pixi.js (rendering)• WebGL with Canvas fallback• Tailored for mobile web games• Open Source <3• Home: phaser.io

Who is it for?

• Aspiring and experienced game developers• JavaScript developers• Great for learning game development (Code)

What we did with it

Gurkenflieger: http://www.fischer-konserven.de

What we did with it

Sensigame: http://postauto.ch/sensigame

„Yeah, but I hate code!“

Game Maker: Studio

What you‘ll need: Text Editor

Sublime

What you‘ll need: Local server

XAMPP

MAMP(OSX only)

Features

• Boiled down setup & preload mechanism• Common game objects: image, sprite, group• Sprite sheets & texture atlases• TileSprites & collision maps• Bitmap fonts• Physics: P2 (polygons), Arcade (AABB) a.o.• Particles, tinting, WebGL shaders...

Resources

• Detailed documentation• > 320 examples (community driven)• Large helpful community• Lots tutorials on the web• Even free books

Game Mechanic Explorer

Load and display image// create the gamevar game = new Phaser.Game( 800, 600, Phaser.CANVAS, 'phaser-example‘, { preload: preload, create: create });// preload all assets herefunction preload() { game.load.image('einstein', 'assets/pics/ra_einstein.png');}// attach everything to the stage herefunction create() { game.add.image(0, 0, 'einstein');}

Workflow: Art

Flash:Animation

Illustrator:Design

Texture AtlasSprite Sheet

PNG sequence

Texture Packer

PNGGauntlet (Win)

ImageOptim (OSX)

Worflow Art: Bitmap Fonts

Free web tool: Littera(buggy output for FireFox)

Bitmap FontGenerator(Windows) bmGlyph (OSX)

Workflow: Code

• Copy• Concat• Uglify / Minify• FTP deploy• Zip• ...

NodeJS Taskrunner

Distribution

CocoonJS

• HTML & JavaScript wrapper• Simulated browser without DOM• OpenGL accelerated Canvas

Screencanvas+• WebGL and Canvas rendering

• iOS, Android, Amazon, OUYA & more• Launcher app for testing• Simple setup and build process• Extensions e.g. for Facebook sharing• Demos

CocoonJS pros

• Bleeding edge• Lack of documentation and support• Buggy Phaser integration

(improvements coming with Phaser 2.0.6)• Cloud compilation dependency (US server)• Pricing model to be expected• Costs for splash screen removal

CocoonJS cons

Ejecta

• Free and open source• iOS only• Tailored for ImpactJS• One man show

Phaser is awesome!

• Free• Open Source• Great community• Simple and accessible

(high abstraction, examples)• Sophisticated and maintainable

(OOP)

Less pain – more fun!

• Takes the pain out of mobile web game dev:– Scaling– Audio– Auto pausing– Device rotation detection

• Thorough concept• Quick result• Development is fun!

What are you waiting for?

http://phaser.io

Thanks!

Michel Wacker@starnut

Links- Phaser: http://phaser.io - Construct 2: https://www.scirra.com/construct2 - Game Maker: Studio https://www.yoyogames.com/studio - Sublime: http://www.sublimetext.com/ - WebStorm: http://www.jetbrains.com/webstorm/ - XAMPP: https://www.apachefriends.org/de/index.html - MAMP: http://www.mamp.info/ - Phaser docs: http://docs.phaser.io/index.html - Phaser examples: http://examples.phaser.io/ - HTML5 Game Devs Forum: http://www.html5gamedevs.com/ - Game Mechanic Explorer: http://gamemechanicexplorer.com/ - Free Phaser Book: https://leanpub.com/html5shootemupinanafternoon - TexturePacker: http://impactjs.com/ejecta - ImageOptim (OSX): https://imageoptim.com/ - PNGGauntlet (Windows): http://pnggauntlet.com/ - Bitmap Font Generator: http://www.angelcode.com/products/bmfont/ - bmGlyph (OSX): http://www.bmglyph.com/ - NodeJS: http://nodejs.org - Littera (Web): http://kvazars.com/littera/ - Grunt: http://gruntjs.com/ - gulp.js: http://gulpjs.com/ - CocoonJS: https://www.ludei.com/cocoonjs/ - Ejecta: http://impactjs.com/ejecta