This talk presents the HTML5 game development framework Phaser which focuses on Desktop and Mobile, shows common tools to improve the development workflow and to wrap the game into apps for the various mobile stores.

1. Making HTML5 Games with
Michel Wacker
CEO Gentle Troll Entertainment GmbH
@starnut
Image http://phaser.io

2. Topics of this talk
• What is Phaser?
• Who is it for?
• What does it have to offer?
• Examples
• Resources
• Tools & Workflow
• Distribution

3. What is Phaser?
„Desktop and
Mobile HTML5
game framework“
Created by
Inspired by

4. 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

5. Who is it for?
• Aspiring and experienced game developers
• JavaScript developers
• Great for learning game development (Code)

6. What we did with it
Gurkenflieger: http://www.fischer-konserven.de

7. What we did with it
Sensigame: http://postauto.ch/sensigame

8. „Yeah, but I hate code!“
Game Maker: Studio

9. What you‘ll need: Text Editor
Sublime

10. What you‘ll need: Local server
XAMPP
MAMP
(OSX only)

11. 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...

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

13. Game Mechanic Explorer

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

15. Workflow: Art
Flash:
Animation
Illustrator:
Design
Texture Atlas
Sprite Sheet
PNG sequence
Texture Packer
PNGGauntlet (Win)
ImageOptim (OSX)

16. Worflow Art: Bitmap Fonts
Free web tool: Littera
(buggy output for FireFox)
Bitmap Font
Generator
(Windows) bmGlyph (OSX)

17. Workflow: Code
• Copy
• Concat
• Uglify / Minify
• FTP deploy
• Zip
• ...
NodeJS Taskrunner

18. Distribution

19. CocoonJS
• HTML & JavaScript wrapper
• Simulated browser without DOM
• OpenGL accelerated Canvas
Screencanvas+
• WebGL and Canvas rendering

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

21. • 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

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

23. Phaser is awesome!
• Free
• Open Source
• Great community
• Simple and accessible
(high abstraction, examples)
• Sophisticated and maintainable
(OOP)

24. 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!

25. What are you waiting for?
http://phaser.io
Thanks!
Michel Wacker
@starnut

26. 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