Phaser Workshop Internet World 2014
- 3. What we will cover - What Phaser is - What Pixi is - A (quick) overview - Get our hands dirty
- 4. What is Phaser ? An HTML5 game framework for 2D which takes care of all of the groundwork for you Unlike some others, is built for the mobile browsers One of the most feature-complete frameworks out there
- 5. What is Phaser ? Built by Richard Davey So Big Disclaimer It uses the amazing pixi.js as a renderer
- 6. What is Pixi.js then ? Really fast WebGL renderer for 2D Most importantly, it provides you with a canvas fallback if need be
- 7. WebGL + 2D = ? Because WebGL doesn’t necessarily means 3D
- 8. A (quick) overview What Phaser provides you with : - Standardised input - Full-featured audio support (uses Web Audio and can fall back to the <audio> tag - Mobile-friendly - Not one, not two, but three physics engine
- 9. Get our hands dirty https://github.com/photonstorm/phaser
- 10. To start with var game = new Phaser.Game(400, 550, Phaser.AUTO,'', { preload: preload, create: create, update: update});
- 11. Phaser’s core functions var game = new Phaser.Game(400, 550, Phaser.AUTO,'', { preload: preload, create: create, update: update, render: render }); function preload(){ } function create(){ } function update(){ } function render(){ }
- 12. Phaser’s core functions var game = new Phaser.Game(400, 550, Phaser.AUTO,'', { preload: preload, create: create, update: update, render: render }); function preload(){ // Don’t count your assets before they’re preloaded game.load.image('bird', 'assets/planeRed2.png'); } + Audio, spritesheets, Json, CSV, tilemap, etc
- 13. Phaser’s core functions var game = new Phaser.Game(400, 550, Phaser.AUTO,'', { preload: preload, create: create, update: update, render: render }); function create(){ // Finally display your image, using WebGL or Canvas var bird = game.add.sprite(100, 200, 'bird'); }
- 14. THANK YOU Coding time ! http://alvinsight.com/workshops/quacky/workshop.zip