Make Games with JavaScript and Phaser

Shared at ScotlandJS 2014 in Edinburgh.

Transcript

1. #sjsGabe So you want to make a game with HTML/JS...
2. #sjsGabe Load assets • Load files via AJAX • Check when everything's done and fire an event
3. #sjsGabe Draw things • Create a Canvas • Copy bits from loaded images onto 
 Canvas at appropriate coordinates
4. #sjsGabe Animate things • How much time has elapsed since the last screen draw? • Which frame we should be on? • Copy that frame's image from my loaded asset to the canvas
5. #sjsGabe Handle input • Keyboard events (just pressed? held down?) • Pointer events (tap? click? drag? multi-touch?) • Gamepad support?
6. #sjsGabe Check for collisions • Track the width, height, and position for each thing • Compare nearby things to each other and look for overlap
7. #sjsGabe Play sounds • Make a new WebAudioContext • Handle multiple sounds playing at once
8. #sjsGabe Manage states • Title screen (tap to start) • Gameplay (whee!) • Game over (your final score)
9. #sjsGabe Load assets • Load files via AJAX • Check when everything's done and fire an event Draw things • Create a Canvas • Copy bits from loaded images onto Canvas at appropriate coordinates Animate things • How much time has elapsed since the last screen draw? • Which frame we should be on? • Copy that frame's image from my loaded asset to the canvas Check for collisions • Track the width, height, and position for each thing • Compare nearby things to each other and look for overlap Handle input • Keyboard events (just pressed? held down?) • Pointer events (tap? click? drag? multi-touch?) Manage states • Title screen (tap to start) • Gameplay (whee!) • Game over (your final score) Play sounds • Make a new WebAudioContext • Handle multiple sounds playing at once Our Plan Of Attack
10. #sjsGabe None of this is hard. You can do it.
11. #sjsGabe Don’t.
12. #sjsGabe Make. Your. Game.
13. #sjsGabe • 2D Game framework • Open Source • HTML5 / JavaScript • For browser/desktop and mobile
14. #sjsGabe
15. #sjsGabe Built by Photon Storm • Hobbyist game devs since 2006 • Full-time on HTML5 games since 2012 • Richard Davey is lead dev (@photonstorm) • He was TD of Aardman Digital for 6 years • Phaser is what they use for all their games "[...] if you're saddled with a game framework that is maintained during someone's spare time or is on a slow release cycle, then it doesn't take long before things are very outdated." ! - Richard Davey (@photonstorm)
16. #sjsGabe Hello World
17. #sjsGabe “Sprite” Something we move around on the screen, usually on top of some sort of background.
18. #sjsGabe game = new Phaser.Game( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update })
19. #sjsGabe game = new Phaser.Game( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }) ! preload = -> game.load.image 'logo', 'phaser.png'
20. #sjsGabe game = new Phaser.Game( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }) ! preload = -> game.load.image 'logo', 'phaser.png' ! create = -> game.add.sprite(200, 200, 'logo')
21. #sjsGabe game = new Phaser.Game( 800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }) ! preload = -> game.load.image 'logo', 'phaser.png' ! create = -> game.add.sprite(200, 200, ‘logo') ! update = -> # things to do on each 'tick'
22. #sjsGabe Let's make a game!
23. #sjsGabe Disclaimer Obviously not really Plants vs Zombies (© 2009 PopCap Games) But I’m using some of their sprites.
24. #sjsGabe “Texture Atlas” Let you work with many related images (like animation frames) without making separate network requests for each image. • One large atlas image composed of many smaller images • Metadata about each small image inside the atlas image • File name • Width / Height • X/Y Position inside the atlas image
25. #sjsGabe Making a Texture Atlas Use Texture Packer (the basic version is free!)
26. #sjsGabe
27. #sjsGabe
28. #sjsGabe
29. #sjsGabe Using the Texture Atlas
30. #sjsGabe preload: -> this.game.load.atlasJSONHash 'sprites' 'assets/sprites.png' 'assets/sprites.json' !
31. #sjsGabe preload: -> this.game.load.atlasJSONHash 'sprites' 'assets/sprites.png' 'assets/sprites.json' ! create: -> this.game.add.image 0, 0, 'grass'
32. #sjsGabe preload: -> this.game.load.atlasJSONHash 'sprites' 'assets/sprites.png' 'assets/sprites.json' ! create: -> this.game.add.image 0, 0, 'grass' sprite = game.add.sprite( 400, 400, 'sprites', ‘zombie1.png') !
33. #sjsGabe preload: -> this.game.load.atlasJSONHash 'sprites' 'assets/sprites.png' 'assets/sprites.json' ! create: -> this.game.add.image 0, 0, 'grass' sprite = game.add.sprite( 400, 400, 'sprites', ‘zombie1.png') ! update: -> #nothing here yet...
34. #sjsGabe
35. #sjsGabe Spawning Zombies
36. #sjsGabe game.zombies = game.add.physicsGroup( Phaser.Physics.ARCADE, this.game.world, 'zombies') !
37. #sjsGabe game.zombies = game.add.physicsGroup( Phaser.Physics.ARCADE, this.game.world, 'zombies') ! ! sprite = game.zombies.create(x, y, 'sprites', 'zombie1.png') !
38. #sjsGabe game.zombies = game.add.physicsGroup( Phaser.Physics.ARCADE, this.game.world, 'zombies') ! x = game.world.width y = game.rnd.integerInRange(0, game.world.height) ! sprite = game.zombies.create(x, y, 'sprites', 'zombie1.png') !
39. #sjsGabe game.zombies = game.add.physicsGroup( Phaser.Physics.ARCADE, this.game.world, 'zombies') ! x = game.world.width y = game.rnd.integerInRange(0, game.world.height) ! sprite = game.zombies.create(x, y, 'sprites', 'zombie1.png') ! sprite.health = 5
40. #sjsGabe sprite.animations.add( 'walking', ["zombie1.png","zombie2.png", "zombie3.png"], 5, true, false) !
41. #sjsGabe sprite.animations.add( 'walking', ["zombie1.png","zombie2.png", "zombie3.png"], 5, true, false) ! sprite.animations.play 'walking' !
42. #sjsGabe sprite.animations.add( 'walking', ["zombie1.png","zombie2.png", "zombie3.png"], 5, true, false) ! sprite.animations.play 'walking' ! sprite.body.velocity.setTo -20, 0
43. #sjsGabe
44. #sjsGabe
45. #sjsGabe Planting Pea Shooters
46. #sjsGabe game.plants = game.add.physicsGroup( Phaser.Physics.ARCADE, this.game.world, 'plants') ! ! ! ! !
47. #sjsGabe game.plants = game.add.physicsGroup( Phaser.Physics.ARCADE, this.game.world, 'plants') ! game.input.onTap.add -> ! sprite = game.plants.create x, y, 'sprites', 'ps-idle01.png' ! ! !
48. #sjsGabe game.plants = game.add.physicsGroup( Phaser.Physics.ARCADE, this.game.world, 'plants') ! game.input.onTap.add -> x = game.input.activePointer.position.x y = game.input.activePointer.position.y ! sprite = game.plants.create x, y, 'sprites', 'ps-idle01.png' ! ! !
49. #sjsGabe game.plants = game.add.physicsGroup( Phaser.Physics.ARCADE, this.game.world, 'plants') ! game.input.onTap.add -> x = game.input.activePointer.position.x y = game.input.activePointer.position.y ! sprite = game.plants.create x, y, 'sprites', 'ps-idle01.png' ! idle = sprite.animations.add('idle', ["ps-idle01.png"], 1, false, false) ! ! sprite.animations.play 'idle'
50. #sjsGabe game.plants = game.add.physicsGroup( Phaser.Physics.ARCADE, this.game.world, 'plants') ! game.input.onTap.add -> x = game.input.activePointer.position.x y = game.input.activePointer.position.y ! sprite = game.plants.create x, y, 'sprites', 'ps-idle01.png' ! idle = sprite.animations.add('idle', ["ps-idle01.png"], 1, false, false) ! shoot = sprite.animations.add('shoot', ["ps-shoot1.png", "ps-shoot2.png"], 5, false, false) ! sprite.animations.play 'idle'
51. #sjsGabe game.plants = game.add.physicsGroup( Phaser.Physics.ARCADE, this.game.world, 'plants') ! game.input.onTap.add -> x = game.input.activePointer.position.x y = game.input.activePointer.position.y ! sprite = game.plants.create x, y, 'sprites', 'ps-idle01.png' ! idle = sprite.animations.add('idle', ["ps-idle01.png"], 1, false, false) ! shoot = sprite.animations.add('shoot', ["ps-shoot1.png", "ps-shoot2.png"], 5, false, false) shoot.onComplete.add (-> this.animations.play 'idle'), sprite ! sprite.animations.play 'idle'
52. #sjsGabe
53. #sjsGabe
54. #sjsGabe Shooting Zombies
55. #sjsGabe # Imagine we extracted a Plant 'class'... ! ! !
56. #sjsGabe # Imagine we extracted a Plant 'class'... ! update: -> this.shoot() if this.zombieAhead() and this.canShoot() ! !
57. #sjsGabe # Imagine we extracted a Plant 'class'... ! update: -> this.shoot() if this.zombieAhead() and this.canShoot() ! shoot: -> this.lastShotAt = new Date().getTime() this.animations.play 'shoot' !
58. #sjsGabe # Imagine we extracted a Plant 'class'... ! update: -> this.shoot() if this.zombieAhead() and this.canShoot() ! shoot: -> this.lastShotAt = new Date().getTime() this.animations.play 'shoot' ! peaSprite = game.projectiles.create( this.position.x, this.position.y, 'sprites', 'pea.png') peaSprite.body.velocity.setTo 150, 0
59. #sjsGabe # Imagine we extracted a Plant 'class'... ! update: -> this.shoot() if this.zombieAhead() and this.canShoot() ! shoot: -> this.lastShotAt = new Date().getTime() this.animations.play 'shoot' ! peaSprite = game.projectiles.create( this.position.x, this.position.y, 'sprites', 'pea.png') peaSprite.body.velocity.setTo 150, 0 peaSprite.checkWorldBounds = true peaSprite.outOfBoundsKill = true
60. #sjsGabe ! # Add more functions to plant 'class' ! !
61. #sjsGabe ! # Add more functions to plant 'class' zombieAhead: -> zombiesAhead = (sprite for sprite in game.zombies.children \ when sprite.zombie.row == plant.row \ and sprite.position.x > this.position.x) zombiesAhead.length > 0 ! !
62. #sjsGabe # An attribute on our plant 'class'... firingRate: 1 * 1000 ! # Add more functions to plant sprite zombieAhead: -> zombiesAhead = (sprite for sprite in game.zombies.children \ when sprite.zombie.row == plant.row \ and sprite.position.x > this.position.x) zombiesAhead.length > 0 ! canShoot: -> this.timeSinceLastShot() > this.firingRate !
63. #sjsGabe # An attribute on our plant 'class'... firingRate: 1 * 1000 ! # Add more functions to plant sprite zombieAhead: -> zombiesAhead = (sprite for sprite in game.zombies.children \ when sprite.zombie.row == plant.row \ and sprite.position.x > this.position.x) zombiesAhead.length > 0 ! canShoot: -> this.timeSinceLastShot() > this.firingRate ! timeSinceLastShot: -> new Date().getTime() - this.lastShotAt
64. #sjsGabe
65. #sjsGabe
66. #sjsGabe Loading and Playing Sounds
67. #sjsGabe game.load.audio 'peaShoot' [ 'assets/audio/effects/pea_shoot.mp3' 'assets/audio/effects/pea_shoot.ogg' ] ! !
68. #sjsGabe game.load.audio 'peaShoot' [ 'assets/audio/effects/pea_shoot.mp3' 'assets/audio/effects/pea_shoot.ogg' ] ! game.audio = {} game.audio.peaShoot = @game.add.audio('peaShoot') !
69. #sjsGabe game.load.audio 'peaShoot' [ 'assets/audio/effects/pea_shoot.mp3' 'assets/audio/effects/pea_shoot.ogg' ] ! game.audio = {} game.audio.peaShoot = @game.add.audio('peaShoot') ! game.audio.peaShoot.play()
70. #sjsGabe Hitting Zombies With Peas
71. #sjsGabe # Also in our game update function: game.physics.arcade.overlap( game.projectiles, game.zombies, handleZombieHit) !
72. #sjsGabe # Also in our game update function: game.physics.arcade.overlap( game.projectiles, game.zombies, handleZombieHit) ! handleZombieHit: (projectile, zombie) -> game.audio.splat.play()
73. #sjsGabe # Also in our game update function: game.physics.arcade.overlap( game.projectiles, game.zombies, handleZombieHit) ! handleZombieHit: (projectile, zombie) -> game.audio.splat.play() zombie.damage(1)
74. #sjsGabe # Also in our game update function: game.physics.arcade.overlap( game.projectiles, game.zombies, handleZombieHit) ! handleZombieHit: (projectile, zombie) -> game.audio.splat.play() zombie.damage(1) projectile.kill()
75. #sjsGabe
76. #sjsGabe
77. #sjsGabe Full Demo
78. #sjsGabe There's Lots More In Phaser • Camera Movement / Following • Tilemaps • Plugins • Particles • Complex Physics
79. #sjsGabe Where To Learn More • phaser.io • 300+ Official Examples • HTML5 Game Devs Forum
 html5gamedevs.com
80. #sjsGabe Thank You! @gabehollombe https://github.com/gabehollombe/phaser-pvz Singapore