Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Phaser Workshop Internet World 2014

885 views

Published on

Phaser workshop at the Internet World 2014 in London, the session was run by the wonderful people at BeMyApp (http://events.bemyapp.com)

  • Be the first to comment

Phaser Workshop Internet World 2014

  1. 1. Phaser workshop
  2. 2. Alvin @alvinsight HTML5 game developer WHO AM I ?
  3. 3. What we will cover - What Phaser is - What Pixi is - A (quick) overview - Get our hands dirty
  4. 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. 5. What is Phaser ? Built by Richard Davey So Big Disclaimer It uses the amazing pixi.js as a renderer
  6. 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. 7. WebGL + 2D = ? Because WebGL doesn’t necessarily means 3D
  8. 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. 9. Get our hands dirty https://github.com/photonstorm/phaser
  10. 10. To start with var game = new Phaser.Game(400, 550, Phaser.AUTO,'', { preload: preload, create: create, update: update});
  11. 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. 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. 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. 14. THANK YOU Coding time ! http://alvinsight.com/workshops/quacky/workshop.zip

×