Phaser desktop and mobile gaming HTML5 framework __html

Source: Internet
Author: User

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 class:

var game = new ()

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 (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 (700,300,phaser.canvas)

The Phaser supported renderer options include: 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 (700,300,, ' 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 (700,300,,host)

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

New (700,300,, "").

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,, learning the screenshot of the page as shown below, to the friends who just play the game should have some help:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.