Downloaded 65 times
Uploaded byIndieOutpost
Making HTML5 Games with Phaser
The document discusses using Phaser, an open-source HTML5 game framework tailored for both aspiring and experienced game developers. It highlights features such as a simple setup process, community-driven documentation, and tools for game development. The talk also compares distribution options like CocoonJS and Ejecta, emphasizing the benefits and drawbacks of each platform.
More Related Content
Similar to Making HTML5 Games with Phaser
Making HTML5 Games with Phaser
- 1. Making HTML5 Gameswith Michel Wacker CEO Gentle Troll Entertainment GmbH @starnut Image http://phaser.io
- 2. Topics of thistalk • What is Phaser? • Who is it for? • What does it have to offer? • Examples • Resources • Tools & Workflow • Distribution
- 3. What is Phaser? „Desktopand 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 itfor? • Aspiring and experienced game developers • JavaScript developers • Great for learning game development (Code)
- 6. What we didwith it Gurkenflieger: http://www.fischer-konserven.de
- 7. What we didwith it Sensigame: http://postauto.ch/sensigame
- 8. „Yeah, but Ihate 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 downsetup & 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.
- 14. Load and displayimage // 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 SpriteSheet PNG sequence Texture Packer PNGGauntlet (Win) ImageOptim (OSX)
- 16. Worflow Art: BitmapFonts 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.
- 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 andopen 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 youwaiting 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