Aprende a implementar un joystick táctil útil y gratuito en dispositivos móviles para Phaser.js

Implementación de un joystick táctil gratuito para tu juego en Phaser.js

Los joysticks son la forma favorita de controlar un personaje del juego, ya que es mucho más preciso y fácil de usar que los botones. De la misma manera que funciona el joystick en la vida real, la mayoría de los juegos móviles tienen su propia implementación de joystick para interfaces táctiles. No hay muchos complementos de joystick disponibles para Phaser.js y la mayoría de ellos son de pago, es decir, el complemento de joystick virtual de Phaser.

Pero no se preocupe, hay una solución gratuita si no desea implementar un Joystick usted mismo y aprenderá cómo implementarlo en este artículo.

Requisitos

Vamos a depender del plugin phaser-vjoy-plugin , este plugin es un plugin de Joystick virtual para Phaser.io. No todas las personas tienen la misma longitud de dedo, ni el mismo tamaño de pantalla. Los usuarios tienen una gran cantidad de dispositivos y configuraciones diferentes, y lidiar con todas estas posibilidades puede volvernos locos, por eso existe VJoy.

Puede obtener una copia del complemento usando bower:

bower install phaser-vjoy-plugin

O descargando un .ziparchivo del repositorio en Github o simplemente copiando el contenido del archivo vjoy.js en el repositorio aquí . Este complemento fue desarrollado por los chicos de Informal Penguins .

Nota: este complemento funciona bastante bien en dispositivos móviles, pero ese no es el caso del navegador de escritorio, así que úselo solo para sus juegos móviles.

Implementación

La implementación de VJoy es bastante fácil y muy sencilla, por lo que solo necesita seguir estos 4 pasos y estará listo para comenzar.

1. Cargue los archivos necesarios

Antes de continuar, proceda a agregar los archivos requeridos en su documento. Use una etiqueta de script para cargar Phaser y el complemento VJoy:

<!-- Add phaser from the cdn or a local source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<!-- Add the VJoy plugin -->
<script src="vjoy.js"></script>

¡Y continuemos con la configuración!

2. Registre el complemento en Phaser.js

Para usar el complemento VJoy, debemos decirle a phaser que lo estamos usando como complemento. Para registrar el complemento, use el game.plugins.addmétodo y como primer parámetro la instancia de Vjoy ( Phaser.Plugin.VJoy) y guarde el valor devuelto en una variable (en este caso game.vjoypara mayor accesibilidad).

Además, debe especificar el área del lienzo donde se debe habilitar el joystick usando el game.vjoy.inputEnablemétodo. Este método espera 4 parámetros que son equivalentes a las coordenadas respectivamente ( x1, y1, x2, y2) donde debe ubicarse el rectángulo que contiene el Joystick.

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-joystick', {
    create: function create() {
        // Registre el complemento VJoy
        game.vjoy = game.plugins.add(Phaser.Plugin.VJoy);

         // Seleccione un área del lienzo donde debería estar disponible el joystick
         // Dibuja un rectángulo usando Phaser.Rectangle
         // Toma como Argumentos 4 coordenadas (x1, y1, x2, y2)
         // Con un lienzo de 800x600, el siguiente código permitirá que el joystick
         // para moverse en el área izquierda de la pantalla
        game.vjoy.inputEnable(0, 0, 400, 600);
    }
});

Ahora que el plugin ha sido registrado (en este caso en el área media izquierda de la pantalla), necesitamos cargar los recursos del Joystick (imágenes).

3. Cargue previamente los activos del joystick

El plugin requerirá automáticamente usar los identificadores [vjoy_base,vjoy_body and vjoy_cap]para cargar las imágenes que componen el Joystick, por lo tanto debes buscarlas para cargarlas en la función de precarga de phaser como activo. Recuerda que las partes (imágenes) del Joystick están ubicadas en el directorio de activos del repositorio github de VJoy aquí .

var game = new Phaser.Game(800, 600, Phaser.AUTO, "phaser-joystick", {
    preload: function preload() {
        // Cargue los siguientes recursos [vjoy base, vjoy body, vjoy cap] con imágenes
        // Tenga en cuenta que puede personalizarlos como desee siempre que mantengan el
        // ancho de las imágenes predeterminadas
        game.load.image('vjoy_base', 'assets/base.png');
        game.load.image('vjoy_body', 'assets/body.png');
        game.load.image('vjoy_cap', 'assets/cap.png');
    }
});

Si no carga las imágenes, encontrará algunas advertencias en la consola como:

Phaser.Cache.getImage: La clave "vjoy_base" no se encuentra en la caché.

Phaser.Cache.getImage: La clave "vjoy_body" no se encuentra en la caché.

Phaser.Cache.getImage: La clave "vjoy_cap" no se encuentra en la caché.

4. Manejar acciones en la función Actualizar

Ahora que ha registrado los complementos y los activos están cargados, ahora debe manejar lo que sucederá cuando el usuario use el Joystick.

var game = new Phaser.Game(800, 600, Phaser.AUTO, "phaser-joystick", {
    update: function update() {
        // Recuperar el valor de los cursores
        var cursors = game.vjoy.cursors;
        
        if (cursors.left) {
            // Haz algo si arrastras hacia la izquierda
        } else if (cursors.right) {
            // Haz algo si arrastras hacia la derecha
        }

        if (cursors.up) {
            // Haz algo si arrastras hacia arriba
        } else if (cursors.down) {
            // Haz algo si arrastras hacia abajo
        }
    }
});

Depende de usted qué acciones deben ejecutarse de acuerdo con la dirección del Joystick. Tenga en cuenta que incluso puede modificar las instrucciones if para permitir movimientos perpendiculares.

Ejemplo

El siguiente documento html muestra un ejemplo que mueve una imagen en el lienzo según la dirección del Joystick:

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Free Touch Joystick for Phaser.js</title>
        <style>
            #phaser-joystick {
                margin: 0 auto;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <!-- Agregar un canvas -->
        <div id="phaser-joystick"></div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
        <script src="vjoy.js"></script>
        <script>
            /* Para que su código sea más fácil de mantener, agregue el código JS en archivos JS */
            (function (Phaser) {'use strict';

                var sprite;

                var GameConfig = {
                    preload: function preload() {
                        /**
                         * Load the images 
                         */
                        game.load.image('logo', 'assets/ourcodeworld-logo.png');
                        game.load.image('vjoy_base', 'assets/base.png');
                        game.load.image('vjoy_body', 'assets/body.png');
                        game.load.image('vjoy_cap', 'assets/cap.png');
                    },

                    create: function create() {
                        // Set a gray as background color
                        game.stage.backgroundColor = '#f7f7f7';

                        sprite = game.add.sprite(300, 300, 'logo');

                        game.vjoy = game.plugins.add(Phaser.Plugin.VJoy);
                        game.vjoy.inputEnable(0, 0, 400, 600);
                        game.vjoy.speed = {
                            x:500,
                            y:500
                        };
                    },

                    update: function update() {
                        /**
                         * Importante para obtener los cursores en la función de actualización
                         */
                        var cursors = game.vjoy.cursors;
                        
                        // Si a izquierda o derecha
                        if (cursors.left) {
                            sprite.x--;
                        } else if (cursors.right) {
                            sprite.x++;
                        }

                        // Si arriba o abajo
                        if (cursors.up) {
                            sprite.y--;
                        } else if (cursors.down) {
                            sprite.y++;
                        }
                    }
                };

                // Inicializar juego
                var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-joystick', GameConfig);
            }.call(this, Phaser));
        </script>
    </body>
</html>

Si ejecutas el ejemplo anterior con todos los recursos del joystick y el logo de Our Code World, debería obtener como resultado algo como:

Joystick Free Phaser.js

Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores