domingo, 26 de agosto de 2018

Phaser 3: Un potente framework para videojuegos en Javascript.

Phaser 3 vs. CraftyJS

En el pasado podíais leer en este blog unos pequeños tutoriales para CraftyJS. No os engañéis, Crafty me encanta, me parece sencillo y bien documentado pero no tiene tecnología WebGL.

La tecnología WebGL permite al navegador usar las capacidades de la tarjeta gráfica para mover el juego y hace que sea mucho más rápido, sobretodo si mueves cientos de objetos a la vez.

Es por eso que me he decido a cambiar a Phaser.

Phaser 2 está muy consolidado y tiene sobrada documentación. Phaser 3 es totalmente diferente a Phaser 2 y en momento de escribir estas líneas la documentación es muy escasa. Aquí entra este blog. Para facilitaros la vida y que no tengáis que pegaros para cualquier tontería.

Instalación de Phaser 3

Por temas de seguridad, los navegadores modernos ya no ejecutan JavaScript en local, con lo que necesitaremos instalar un servidor web. No os asustéis. Yo uso XAMPP. Se baja, se le da a instalar y ya. No necesitáis hacer nada. AQUÍ tenéis un pequeño tutorial para su instalación.

Ahora la cosa es bajarse el PHASER 3 que lo podéis hacer desde AQUÍ.

En este punto os preguntaréis... ¿y qué me bajo?


Pues tenéis el ZIP con el framework y ejemplos y demás. Luego tenéis la opción de sólo bajaros sólo el framework. Tenéis la opción de js y la min.js.  ¿Diferencia?  Ninguna. La cosa es si lo editáis en uno está el fuente estructurado y en el otro todo el código arrebujiñao con el objeto de que ocupe lo mínimo posible. Si no pensáis meterle mano al fuente con el min.js os vale.

Si habéis instalado el XAMPP y habéis seguido el magnífico tutorial al que os referencié en el principio de este artículo, bastará con copiarlo en la carpeta htdocs de XAMPP. Si además, cosa que me consta, sois personas pulcras, lo meteréis en una carpeta.

Luego sólo será necesario llamarlo tal que asín en un archivo HTML:

<script src="phaser3/phaser.min.js"></script>

 Como el ávido lector habrá inferido he creado dentro de mi carpeta htdocs otra llamada phaser3.

Perdone Ud. Sr. Furniman... es que yo soy muy xul@ y paso de bajármelo...

 Hay otra opción, y es llamarlo directamente de jsDelivr. La instrucción la encontraréis en la página de descargas dentro del apartado CDN.

En el momento de escribir estas líneas es:

<script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.min.js"></script>

Bajarnos el framework permite actualizar la versión de Phaser 3 cambiando el fichero. Llamar al framework de jsDelivr obligará a cambiar el código si queremos actualizar la versión de Phaser. En todo caso sólo sería una línea en un único fichero.

1,2,3... Probando...

Phaser 3 no es un IDE es decir, no tiene herramientas de edición y depuración de código. Debéis utiliza uno de los miles de editores de texto, algunos muy potentes y muy orientados a código o el Bloc de notas. A medio camino entre los dos se encuentra el que uso yo el Notepad++ que te asistirá poniendo colorines a las palabras reservadas y demás.

Así que tomaremos para probar el mismo código que trae Phaser en su página. Con un editor de texto plano crearemos una página llamada index.html y pegaremos el siguiente código:


<!DOCTYPE html>
<html>
<head>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.0.0/dist/phaser.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>

Lo guardaremos en la carpeta htdocs de XAMPP y ya...

Para llamarlo sólo tenemos que poner en nuestro navegador con XAMPP arrancado (os remito de nuevo a su tutorial) lo siguiente:

http://localhost

Y ya... podréis ver algo parecido a ESTO.

Si os fijáis en la cuarta línea del código, se está llamando a la versión 3.11 de Phaser desde jsDelivr. Si hemos optado por tener el framework en local, sólo tenemos que cambiarlo por la ruta en la que está algo así como:

<script src="phaser3/phaser.min.js"></script>

Y con esto y un bizcocho ya hemos terminado...

Os dejo con un enlace a una página de bailes tradicionales... ¿Que no os interesa el tema?  Bueno... hay que promocionarlo... ¿no?

furnitube.es/danzasdelmundo
Etiquetas:
Vallekas Vallekas

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)