Multiplayer game with angular and firebase

Multiplayer game with angular and firebase

• 1.
  MULTIPLAYER GAME WITH ANGULAR &FIREBASE MICHAEL HABERMAN FREELANCER
• 2.
  MULTIPLAYER GAME Browser (Angular) Game framework Realtime server DB
• 3.
  WHAT IS GAMEFRAMEWORK • Different UI element • Physics engine • Animations • Fast rendering • Handling asserts • Abstract browser rendering options (WebGL / Canvas)
• 4.
  GAME FRAMEWORK • Phaser •Unity • CreateJS • ImpactJS
• 5.
  GAME FRAMEWORK –LIFE CYCLE Preload Create RenderUpdate
• 6.
  PHASER CODE this.game =new Phaser.Game( window.innerWidth, window.innerHeight, Phaser.AUTO, 'game_canvas’, { preload: this.preload, create: this.create, update: this.update, render: this.render });
• 7.
  PRELOAD preload: function (){ this.game.load.spritesheet('me', 'assets/animals.png', 32, 32, 96); }
• 8.
  CREATE this.sprite = this.game.add.sprite(width,height, 'me'); this.game.physics.enable(this.sprite, Phaser.Physics.ARCADE); this.sprite.animations.add('down', [0, 1, 2], 10, true); this.sprite.animations.play(‘down', 5, true);
• 9.
  UPDATE if (this.cursors.left.isDown { this.sprite.animations.play('left',5, true); this.sprite.body.velocity.x -= 25; }
• 10.
  RENDER • Most objectrender automatically • Used for special objects • Called after game rendered and plugins completed rendering • Allow post render changes
• 11.
  LET SEE ITWORK
• 12.
  WHY DO INEED ANGULAR?
• 13.
  ANGULAR WITH PHASER •Phaser will handle game rendering & logic? • What about all the rest? • Login • Ads • Settings • Pre steps
• 14.
  COMBINE ANGULAR ANDPHASER • Phaser doesn’t export a module • It sets itself as global
• 15.
  WHAT WE HAVESO FAR Browser (Angular) Game framework Real time server DB
• 16.
  FIREBASE • Google product •Real Time Database (and more…) • Amazing for multiplayer game • Automatic synchronization
• 17.
  SYNC WITH FIREBASE •Initialize firebase • Get a list • Subscribe for changes Browser (Angular) Firebase SDK Firebase DB
• 18.
  Firebase FIREBASE Browser (Angular) Game framework Real timeserver DB
• 19.
  LET SEE ITWORK
• 20.
  Firebase FIREBASE Browser (Angular) Game framework Real timeserver DB
• 21.
  THANK YOU! @hab_mic michael@haberman.io