Phaser desktop and mobile gaming HTML5 framework __html

Phaser is a popular 2D open source gaming framework that can be used to develop desktop or mobile browser HTML5 games for side-view or top-viewing styles:

automl framework

Phaser supports both the canvas and WebGL rendering engines, preset complete sprite animations, input management, tile maps, motion tweens, resource loaders, physical systems, particle systems, and so on, and can almost meet any requirement for you to develop a 2D game:

Phaser's most commendable is its plug-in mechanism, best automl framework and the resulting phaser ecological community. For example, with the help of the isometric plug-in, you can develop a game with a (pseudo) 3D effect:

The next version of Phaser is 3.0 (just released), so the current 2.x version of the maintenance is continued by the community, known as Phaser ce--community Edition.

Most of the features of the Phaser framework are packaged in a single phaser.js file. All we need to do is introduce this framework file into the hosting HTML file and start using Phaser:

<script src= "Lib/phaser.js" ></script>

Almost all of the framework APIs are defined under the Phaser namespace. For example, we start the framework by instantiating the Phaser.game class:

var game = new Phaser.game ()

The framework will create a canvas element of 800x600 pixel size in the document, using the default parameters, as the game's canvas.

√ Specify game size

Of course, we can specify the size of the game ourselves. For example, set the game size to 700x300 pixels:

var game = new Phaser.game (700,300)

√ Specify renderer

Phaser uses the modified Pixi library as the underlying rendering implementation, so it can support canvas and WebGL. By default, phaser will automatically choose, but we can specify the desired rendering engine when we start the framework. For example, the following code enables the canvas renderer:

var game = new Phaser.game (700,300,phaser.canvas)

The Phaser supported renderer options include:
Phaser.auto: Let the frame automatically select the renderer
Phaser.canvas: CANVAS renderer with Pixi
PHASER.WEBGL: WEBGL renderer with Pixi
Phaser.webgl_multi: Use the Pixi WEBGL renderer and enable the multi-texture support mode
Phaser.headless: Headless Rendering. Uses the Pixi canvas renderer, but does not add the canvas element to the DOM, nor does the actual rendering

√ Specify the game canvas parent element

By default, phaser inserts the canvas element that you create into the end of the BODY element of the document. However, we can explicitly specify its parent element.

For example, the following code creates a game canvas in a DOM element with a property ID of Ezgame:

var game = new Phaser.game (700,300,phaser.auto, ' ezgame ')

You can also pass in an HTML element to specify the parent element of the game canvas. For example:

var host=document.queryrselector (' #ezgame ')
var game=new phaser.game (700,300,phaser.auto,host)

If you specify an empty ID, the frame uses the BODY element as the parent element of the game canvas. For example:

New  Phaser.game (700,300,phaser.auto, "").

It should be noted that the parent element of the game canvas should set the padding to 0 or the frame will be biased when calculating the dimensions.

Wrote a phaser tutorial, Www.hubwiz.com/course, learning the screenshot of the page as shown below, to the friends who just play the game should have some help: