Phaser – Interesting open source HTML5 gaming framework

Resource Number 45042 Last Updated 2025-02-24

Phaser is a fast, free and fun open source HTML5 gaming framework.

Phaser – Interesting open source HTML5 gaming framework插图

Phaser is a fast, free and fun open source HTML5 gaming framework that provides WebGL and Canvas rendering across desktop and mobile Web browsers. Games can be compiled into iOS, Android, and native apps using 3rd party tools. You can develop in JavaScript or TypeScript.

Installation use

< Installing the Web server

We would recommend WAMP Server or XAMPP, both of which have simple setup guides. WAMP specifically installs an icon into your system tray from which you can stop and restart services, as well as modify Apache Settings, such as creating new folder aliases for projects.

< Operating system

Being an essentially Unix environment, there are more options available on OS X than on Windows. However, if you want an “all-in-one” approach like WAMP, with a clean and easy to use interface, then we highly recommend MAMP.

Grunt connection

Grunt is a very powerful installation tool, whether you use it as a Web server or not. Essentially, it is a javascript-based task runner that allows you to automate tedious and time-consuming tasks. For example, we use it in Phaser to build our distribution scripts. But it can also be configured using the plug-in Connect to provide local files that act as a Web server.

Simple HTTP server using Python

If you need a fast Web server and don’t want to mess with setting up Apache or downloading applications, Python can help. Python comes with a simple built-in HTTP server that can serve files from any local folder.

< Select editor

You will need an editor to prepare your JavaScript code.

Example: Sublime Text This is the editor that the Phaser team uses to build frameworks and all projects. It’s even the editor that wrote this guide. Sublime should be thought of as a very powerful text editor, not an IDE.

Download Phaser

Phaser 3 available through GitHub, npm, and CDN:

Clone git repositories over https, ssh, or using GitHub Windows or Mac clients.
Download as zip
Download build files: phaser.js and phaser.min.js

Install via npm:

npm install phaser

Content Distribution network:

Phaser sits on jsDelivr, which is an “ultra-fast CDN for developers”. Include the following in your html:

< script src= "/ / cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js" < / span > & gt; < /script>

or smaller version:

< script src= "/ / cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js" < / span > & gt; < /script>

Hello World!

Once you’ve set up the editor, installed the Web server, and downloaded the Phaser, you can create something and check that everything works.

You need to discover where your “network root” is located on your machine. This is the folder where the server looks for files. If you use WAMP on Windows, you can find it by clicking the WAMP icon in the system tray and selecting “www Directory” from the pop-up menu. Other servers will have other ways to determine location, but from this point on, we’ll call it “webroot.”

Create a file inside webroot called index.html and paste the following code into it:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>

    <script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };

    var game = new Phaser.Game(config);

    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');

        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    }

    function create ()
    {
        this.add.image(400, 300, 'sky');

        var particles = this.add.particles('red');

        var emitter = particles.createEmitter({
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        var logo = this.physics.add.image(400, 100, 'logo');

        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        emitter.startFollow(logo);
    }
    </script>

</body>
< /html>

Open your web browser and load the index.html page. This could be as simple as typing localhost/ or typing in your browser. 127.0.0.1/ or you may also need to specify a port number, depending on the server setup method you use.

Phaser – Interesting open source HTML5 gaming framework插图1

API documentation

< Typescript definition

TypeScript definitions can be found in the file types folder. They are also referred to in package.json in the type entry in. Depending on your project, you may need to add the following to the tsconfig.json file:

"typeRoots": [
    "./node_modules/phaser/types"
],
"types": [
    "Phaser"
]

< Game status

Class	Pass	Description
StateManager	state	Create, manage, and exchange your game state.
State		Basic game state objects that you can extend.

Loader

Class	Pass	Description
Cache	cache	The cache is where all loaded assets are stored and retrieved.
Loader	load	Loads all external asset types (image, audio, json, xml, txt) and adds them to the cache. Automatically called by the Statespreload method.
LoaderParser		Static classes used by the loader to handle complex asset type resolution.

Text

Class	Description
Text	Displays text in a system or Web font with optional fill, shadow, and stroke.
BitmapText	Texture-based text objects using bitmap font files.
RetroFont	Similar to the BitmapText object, but using the classic Sprite table. Each character is of a fixed width.

Animation

Class	Pass	Description
AnimationManager	sprite.animations	Add, play, and update animations on Sprite game objects.
Animation		Base animation object created by animation manager.
AnimationParser		Phaser Loader uses it internally to parse animation data from external files.
FrameData		The collection of Frame objects that make up the animation.
Frame		Single frame of animation. Stored in a FrameData object.

< Time

Class	Pass	Description
Time	time	The kernel internal clock on which all Phaser time-related operations depend.
Timer	time.create	A custom Timer with one or more timerevents. It can be used once or set to be reused.
TimerEvent	time.add	A single time-dependent event object. Belongs to Phaser.Timer.

Tileset

Contains objects for the texture and data of the block rendered by TilemapLayer.

Tile

A single Tile object with associated properties. One of these is present in every block of the map.

TilemapParser

Static class for parsing externally loaded map data. Usually called directly by Phaser.Loader.

Phaser 3 Example

Create an index.html page locally and paste the following code into it:

<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser-arcade-physics.min.js"></script> </head> <body> <script></script> </body> </html>

This is a standard empty web page. You’ll notice there’s a script TAB pulling into the build of Phaser 3, but other than that, this web page hasn’t done anything yet. Now let’s set up the game configuration. < script> < /script> Paste the following between the labels:

var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 } } }, scene: { preload: preload, create: create } };

config is a very standard Phaser 3 game configuration object. If we can, we tell config to use the WebGL renderer, set the canvas to a size of 800×600 pixels, enable Arcade Physics, and finally call the preload and create functions. preload and create are not implemented yet, so if you run this JavaScript code, you will get an error. Add the following after config:

var game = new Phaser.Game(config); function preload () { this.load.setBaseURL('https://labs.phaser.io'); this.load.image('sky', 'assets/skies/space3.png'); this.load.image('logo', 'assets/sprites/phaser3-logo.png'); this.load.image('red', 'assets/particles/red.png'); } function create () { }

game is a Phaser Game instance config using our configuration object. preload We also added the function definition create for and. The preload feature helps you easily load assets into the game. In preload, we set the Base URL to the Phaser server and load 3 PNG files. The create function is empty, so it’s time to fill it in:

function create () { this.add.image(400, 300, 'sky'); var particles = this.add.particles('red'); var emitter = particles.createEmitter({ speed: 100, scale: { start: 1, end: 0 }, blendMode: 'ADD' }); var logo = this.physics.add.image(400, 100, 'logo'); logo.setVelocity(100, 200); logo.setBounce(1, 1); logo.setCollideWorldBounds(true); emitter.startFollow(logo); }

Here we add the sky image to the game and create the particle emitter. This scale value means that the particle will initially be large and will shrink to zero over its lifetime.

After creating the emitter, we add a name named logo. Since logos are physical images, logos are given physical bodies by default. We set some properties logo: speed, bounce (or recovery), and collision with world boundaries. These properties will make our logo bounce off the screen. Finally, we tell the particle emitter to follow the logo – so when the logo moves, the particles will flow out of it.

Run it in your browser and you will see the following: