LuisLlamas Logo
phaser

Phaser, a 2D Game Engine for JavaScript

  • 2 min

Phaser is an open-source JavaScript library for the creation of online video 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 run in most modern browsers without issues.

Furthermore, it includes a complete set of development tools, such as support for physics, graphics, and sound effects. It also has a large number 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/[email protected]/dist/phaser-arcade-physics.min.js"></script>
Copied!

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

npm install phaser

And then import it with

import * as Phaser from 'phaser';
Copied!

Phaser Example

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

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-arcade-physics.min.js"></script>
</head>

<body>
    <script src="app.js"></script>
</body>

</html>
Copied!
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);
}
Copied!

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

On this page