Making HTML5 Games with Phaser

5,324 views

Published on

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.

Published in: Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,324
On SlideShare
0
From Embeds
0
Number of Embeds
978
Actions
Shares
0
Downloads
53
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Making HTML5 Games with Phaser

  1. 1. Making HTML5 Games with Michel Wacker CEO Gentle Troll Entertainment GmbH @starnut Image http://phaser.io
  2. 2. Topics of this talk • What is Phaser? • Who is it for? • What does it have to offer? • Examples • Resources • Tools & Workflow • Distribution
  3. 3. What is Phaser? „Desktop and Mobile HTML5 game framework“ Created by Inspired by
  4. 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. 5. Who is it for? • Aspiring and experienced game developers • JavaScript developers • Great for learning game development (Code)
  6. 6. What we did with it Gurkenflieger: http://www.fischer-konserven.de
  7. 7. What we did with it Sensigame: http://postauto.ch/sensigame
  8. 8. „Yeah, but I hate code!“ Game Maker: Studio
  9. 9. What you‘ll need: Text Editor Sublime
  10. 10. What you‘ll need: Local server XAMPP MAMP (OSX only)
  11. 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. 12. Resources • Detailed documentation • > 320 examples (community driven) • Large helpful community • Lots tutorials on the web • Even free books
  13. 13. Game Mechanic Explorer
  14. 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. 15. Workflow: Art Flash: Animation Illustrator: Design Texture Atlas Sprite Sheet PNG sequence Texture Packer PNGGauntlet (Win) ImageOptim (OSX)
  16. 16. Worflow Art: Bitmap Fonts Free web tool: Littera (buggy output for FireFox) Bitmap Font Generator (Windows) bmGlyph (OSX)
  17. 17. Workflow: Code • Copy • Concat • Uglify / Minify • FTP deploy • Zip • ... NodeJS Taskrunner
  18. 18. Distribution
  19. 19. CocoonJS • HTML & JavaScript wrapper • Simulated browser without DOM • OpenGL accelerated Canvas Screencanvas+ • WebGL and Canvas rendering
  20. 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. 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. 22. Ejecta • Free and open source • iOS only • Tailored for ImpactJS • One man show
  23. 23. Phaser is awesome! • Free • Open Source • Great community • Simple and accessible (high abstraction, examples) • Sophisticated and maintainable (OOP)
  24. 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. 25. What are you waiting for? http://phaser.io Thanks! Michel Wacker @starnut
  26. 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

×