📅 Mon, Jul 10, 2023 ⏲️ ~ 2 minutes

Phaser, a 2D Game Engine for JavaScript

Phaser is an open-source JavaScript library for creating online games and interactive applications.

It was created by Photon Storm, an independent game development company, and has become extremely popular among game developers thanks to its ease of use and wide range of features.

One of the main advantages of Phaser is that it is built on technologies like WebGL and Canvas, allowing it to work seamlessly in most modern browsers.

It also includes a full set of development tools, such as support for physics, graphics, and sound effects. It also has a wealth of online resources and examples to help developers learn how to use the library.

How to Use Phaser

To use Phaser we can add the reference directly, either from our server or from a CDN.

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

Or we can add it with a package manager like npm using the command,

npm install phaser

And then import it with

import * as Phaser from 'phaser';

Phaser Example

Once all the graphics have been loaded, you can create a creation function that gives the app, and the properties necessary for the game to work correctly. For example:

index.html

<!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 src="app.js"></script>
</body>

</html>

app.js

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('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 ()
{
    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);
}

Result

With the above code, we would get this result

Phaser is Open Source, and all the code and documentation is available on the project page https://phaser.io/ and in the repository https://github.com/photonstorm/phaser