Post on 19-Aug-2014
description
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)
„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