Phaser.js - Game Development Made Easy

An introduction into Phaser.js, a lightweight JS framework that helps you build HTML5 games for web, tablet and mobile.

Transcript

1. PHASER.JS GAME DEVELOPMENT MADE EASY
2. INTRODUCTION React Node.js Ruby SM/PM
3. WHAT DO YOU LIKE? INTRODUCTION
4. INTRODUCTION
5. INTRODUCTION MANY TOOLS TO CHOOSE FROM
6. ABOUT PHASER WHY PHASER? ▸ Use and improve your JavaScript skills ▸ Everyone can play your game ▸ Focus on building the game ▸ No compiling :) ▸ Extensive documentation ▸ Friendly community ▸ Backed by a Mozilla grant
7. ABOUT PHASER WHAT IS PHASER? ▸ Desktop and Mobile HTML5 framework ▸ Open source ▸ Canvas or WebGL
8. BUILD A GAME LET’S BUILD A GAME!
9. BUILD A GAME - INITIALIZE PHASER const config = { type: Phaser.AUTO, parent: 'id-of-container', width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 100 }, } }, scene: { preload: preload, create: create, update: update } } const game = new Phaser.Game(config); Code
10. BUILD A GAME - LIFECYCLES PRELOAD CREATE UPDATE RENDER
11. BUILD A GAME - LOADING AND DRAWING TILESPRITES function preload () { this.load.image('background', 'assets/background'); } function create () { this.background = this.add.tileSprite( 0, 0, this.game.config.width, this.game.config.height, 'background' ).setOrigin(0,0); } Code Browser
12. BUILD A GAME - LOADING AND DRAWING TILESPRITES function update () { const tileX = this.background.tilePositionX -= 0.50; this.background.setTilePosition(tileX, 0); } Code Browser
13. BUILD A GAME - LOADING AND DRAWING TILESPRITES - PARALLAX SCROLLING
14. BUILD A GAME - ADD A SPRITE function preload () { this.load.image('redballoon', 'redballoon.png'); } function create () { const centerX = this.game.config.width / 2; const centerY = this.game.config.height / 2; this.balloon = this.physics.add.sprite(centerX, centerY, 'redballoon'); } Code Browser
15. BUILD A GAME - CHANGE SPRITE PROPERTY function create () { this.balloon.body.setGravityY(-200); } Code Browser
16. BUILD A GAME - SCALE SPRITE function create () { const scaleRatio = window.devicePixelRatio / 3; this.balloon.setScale(scaleRatio, scaleRatio); } Code Browser
17. BUILD A GAME - CONTROLS function create () { this.balloon.setInteractive(); this.balloon.on('pointerdown', (pointer) => { this.destroy(); }); } Code Browser
18. BUILD A GAME - CONTROLS function create () { this.cursors = this.game.input.keyboard.createCursorKeys(); } function update () { if (this.cursors.left.isDown) { this.player.body.setVelocityX(-250); this.player.scale.x = 1; } else if (this.cursors.right.isDown) { this.player.body.setVelocityX(250); this.player.scale.x = -1; } else { this.player.body.setVelocityX(0); } } Code
19. BUILD A GAME - CONTROLS
20. BUILD A GAME - SPRITE ANIMATIONS
21. BUILD A GAME - SPRITE ANIMATIONS function create () { this.player.animations.add(‘walk', [8, 9, 10, 11]); this.player.animations.add(‘stand', [0]); } function update () { if (Math.abs(this.player.body.velocity.x) > 0) { this.player.animations.play(‘walk', 10, true); } else { this.player.animations.play(‘stand', 10, true); } } Code
22. BUILD A GAME - CONTROLS
23. BUILD A GAME - TIMER USAGE function create () { this.spawnBalloonTimer = this.time.addEvent({ delay: 500, callback: spawnBalloon, callbackScope: this, loop: true }); } function spawnBalloon () { .. } Code Browser
24. BUILD A GAME - GROUPS function spawnBalloon () { .. this.balloons.add(balloon); } function create () { this.balloons = this.add.group({}); this.input.on('pointerdown', (pointer) => { const touchX = pointer.x; const touchY = pointer.y; this.balloons.children.each((child) => { if (child.getBounds().contains(touchX, touchY)) { this.balloons.remove(child, true); } }); }); } Code Browser
25. BUILD A GAME - ADD UI ELEMENTS function create () { this.countdownText = this.add.text( 0, 0, secondsToNextColor(), { fontSize: '64px', fill: '#333' } ); } function update () { this.countdownText.setText(secondsToNextColor()); } Code Browser
26. BUILD A GAME - GAME OVER function update () { this.balloons.children.each((child) => { if (child.y < 0) { if (child.texture.key == this.currentBalloon) { this.scene.restart(); } this.balloons.remove(child, true); } }); } Code
27. BUILD A GAME - FINISHED GAME http://tinyurl.com/utrechtjs-meetup
28. BUILD A GAME - ROOM EDITOR - GAMEMAKER
29. BUILD A GAME - TILEMAPS
30. ONE DAY PROTOTYPES BOB - THE SEARCH FOR HAPPINESS
31. ONE DAY PROTOTYPES WOLLY - THE SHEEP THAT DOESN’T WANTS TO GET WET
32. ONE DAY PROTOTYPES NINJA PHYSICS + TILEMAPS + PARALLAX SCROLLING
33. OUTRO RESOURCES ▸ The source code: https://github.com/Joralf/Balloons ▸ Phaser forum: https://phaser.discourse.group/ ▸ Tutorial: https://phaser.io/tutorials/making-your-first-phaser-3-game ▸ Josh Morony: https://www.joshmorony.com/tag/phaser ▸ Tiled: https://www.mapeditor.org/
34. OUTRO QUESTION TIME….