📅 Lun, 10 Jul 2023 ⏲️ ~ 2 minutos

Phaser, un motor de videojuegos 2D para JavaScript

Phaser es una biblioteca de código abierto de JavaScript para la creación de videojuegos en línea y aplicaciones interactivas.

Fue creada por Photon Storm, una empresa de desarrollo de juegos independiente, y se ha vuelto extremadamente popular entre los desarrolladores de juegos gracias a su facilidad de uso y su amplia gama de características.

Una de las principales ventajas de Phaser es que está construida sobre tecnologías como WebGL y Canvas, lo que le permite funcionar en la mayoría de los navegadores modernos sin problemas.

Además, incluye un conjunto completo de herramientas de desarrollo, como soporte para físicas, gráficos y efectos de sonido. También tiene una gran cantidad de recursos y ejemplos en línea para ayudar a los desarrolladores a aprender a usar la librería.

Cómo usar Phaser

Para usar Phaser podemos añadir la referencia directamente, bien desde nuestro servidor o desde un CDN.

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

O podemos añadirlo con un gestor de paquetes como npm mediante el comando,

npm install phaser

Y luego importarlo con

import * as Phaser from 'phaser';

Ejemplo Phaser

Una vez que se han cargado todos los gráficos, se puede crear una función de creación que de la app, y las propiedades necesarias para que el juego funcione correctamente. Por ejemplo:

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);
}

Resultado

Con el código anterior obtendríamos este resultado

Phaser es Open Source, y todo el código y documentación está disponible en la página del proyecto https://phaser.io/ y en el repositorio https://github.com/photonstorm/phaser