What is a Phaser?

Phaser is a fast, free and open source HTML5 game framework that supports both WebGL and Canvas rendering modes and can run in any Web browser environment. Games can be converted to iOS and Android Native apps using third-party tools. Allows development using JavaScript and TypeScript. There are three versions of Phaser: Phaser 2, Community Phaser CE, and the latest Phaser 3.

About the Phaser 3

Phaser 2 has been phased out of the original version 1.0 and has been updated to the current version 2.6.2 over the years since Richard Davey first published Phaser in his blog in April 2013. The resulting version is called community Phaser CE.

Phaser 2 was stopped by moving the battlefield to the new Phaser 3 version. It’s been quite a while since Phaser 3 was released on February 13, 2018. It’s still under development and has yet to be officially released. Officials have been working hard to fix the engine’s problems. Has been able to meet the needs of game development.

How is Phaser 3 an improvement over Phaser 2? Phaser 2 has been using the open source version of Pixi 2 (stable version V4) as its 2D rendering engine, and Phaser 3 has moved away from relying on Pixi because it has its own specific requirements. Therefore spent a lot of time to develop their own renderer, the renderer on the working principle of the Phaser 3 building, officials say performance has significantly faster than a Phaser 2 many aspects, although the official temporarily gave no specific performance testing contrast, the official said that in the future will pay more attention to improve performance and compatibility.

Concepts in Phaser

Physics Physics engine Word scene scene cameras

How to create a game

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
      // debug: true,
    },
  },
  scene: [Menu, Game, Over],
  parent: 'container',
}

const game = new Phaser.Game(config)
Copy the code

type :

  • Phaser.AUTO Automatically selects the rendering method based on the browser, using WebGL if it is supported
  • Phaser.CANVAS uses CANVAS rendering
  • Phaser.WEBGL uses WEBGL rendering

physics :

  • Default engine type: Arcade, P2, Ninja, Box2D, and can use other engine plugins
  • Debug mode: Add debug: true to the engine to enable the debug mode

Scene:

  • Scenarios, you can add multiple scenarios. The first scenario is executed by default and only the scene class added to the scene can be called

In a game, there are two front scenes, the first is called the curtain scene and the second is called the resource loading scene. The first scene mainly loads the progress bar and background, and the second scene mainly loads the public resources required by the game. The game scene methods mainly include three: This.scene. start(key) The scene in which the key is switched this.scene.pause() The scene in which the current game is paused this.scene.run(key) The scene in which the key is run

export default class Game extends Phaser.Scene {
  preload(){
  }
  create() {
  }
  update(){
  }
}
Copy the code
  • Preload Executed before loading
  • Create Create scenario execution
  • Update is called once per pin

Parent:

  • Mount the node

Load resources

this.load.type(key, url)
this.load.image(key, url)
this.load.audio('place', [
  'key.ogg',
  'key.m4a',
])
this.load.spritesheet(key, url, {
  frameWidth: width,
  frameHeight: height,
})
Copy the code

Add the object

this.physics.add.sprite(400, 300, 'player')
this.physics.add.image(150, 450, 'reticle')
Copy the code

The anchor point of the object is the center point by default

  • Set anchor position setOrigin(0.5)
  • Set whether to display setVisible(true/false)
  • SetImmovable (true/false) Not moved after collision
  • SetBounce coefficient setBounce(0.9)
  • SetFriction coefficient setFriction(0.9)
  • SetCollideWorldBounds (true/false)
  • Set object size setDisplaySize(15,15)

Add event

this.input.keyboard.addKeys({
  up: Phaser.Input.Keyboard.KeyCodes.W,
  down: Phaser.Input.Keyboard.KeyCodes.S,
  left: Phaser.Input.Keyboard.KeyCodes.A,
  right: Phaser.Idsnput.Keyboard.KeyCodes.D,
})

this.input.on()
this.input.once()
this.input.activePointer()
Copy the code

Adding a timer

this.time.addEvent({
  delay: 1000,
  callback: () => {
  },
  callbackScope: this,
  loop: true,
})
Copy the code

Add a collision

Add. Collider (object1, object2, doSomething) only checks if a collision has occurred. Physics. Add. Overlap (object1, Object2, doSomething)Copy the code

Add animation

Create animation this. Anims. Create ({key: 'leftdown, frames, enclosing anims. GenerateFrameNumbers (' zombie' {start: 256, end: 263,}), frameRate: 10, repeat: -1,}) Frames are played from the lower 256 of the multi-image resource to 263, every 10 pins. Sprite.anim. play(key,true)Copy the code

Add movement

this.tweens.add(options)
Copy the code

The official case

phaser.io/examples

Gun game code (including tutorial)

Github.com/gudepeng/ga…

Map editing tool Tiled

You can import snowflake image resources through the red box on the right, and then edit the map in the left main panel.