Desarrolla juegos para WAX Blockchain con Phaser (JavaScript)

Categories Blog, Programación, WAXPosted on

Acerca de WAX Blockchain

WAX es una blockchain compatible con eosio cuyo token es WAX, aunque puede verse listado como WAXP. Algunas de las características más destacables de WAX Blockchain son:

  • Blockchain ecológica de bajas emisiones (PoS).
  • Programación de smart contracts: Es posible desarrollar smart contracts en lenguaje C++.
  • Creación y gestión de tokens comerciables (NFTs y FTs).
  • Completo soporte JavaScript gracias a librerías de uso público.
  • Token principal (WAX) listado en algunos de los exchanges más populares (Huobi, Bittrex, Kucoin, etc).
  • Transacciones libres de coste.
  • Alta velocidad en las transacciones.

Estas características hacen de WAX el ecosistema ideal para el desarrollo de proyectos basados en colecciones de assets o en videojuegos.

Web: https://on.wax.io/wax-io

Acerca de Phaser

Phaser es un framework libre y de código abierto para desarrollo de juegos HTML5. Algunas de sus características:

  • Lenguaje JavaScript y TypeScript.
  • Enorme librería de funciones.
  • Gran cantidad de documentación y ejemplos.
  • Gran comunidad de usuarios.

Es posible desarrollar juegos del lado cliente y también juegos cliente/servidor utilizando sockets.

Web: https://phaser.io

Acerca de UAL

Universal Authenticator Library (UAL) proporciona una interface universal para la autenticación de cuentas y firma de transacciones desde cualquier wallet de WAX que desarrolle una extensión para UAL. Algunas wallet que pueden utilizarse:

  • Anchor.
  • WAX Cloud Wallet.
  • Scatter.

Gracias a esta librería los usuarios podrán iniciar sesión en una aplicación JavaScrip desde su wallet favorito y podrán firmar transacciones sobre WAX blockchain.

Integración UAL-Phaser

En el presente artículo trataré de explicar cómo se conecta UAL con el código de nuestro juego en Phaser. Puedes descargar la plantilla Phaser + UAL en el siguiente enlace:

https://github.com/3dkrender/phaser3-WAX-template

UAL dispone de un botón HTML encargado de cargar la ventana de login con las opciones posibles según las librerías cargadas. Este botón debe ser anulado. En su lugar, crearemos un botón interactivo desde el canvas de Phaser con el aspecto que configuremos.

Cuando UAL es llamado para iniciar sesión o para firmar transacciones, crea una ventana en el cuerpo de un bloque DIV que deberemos tener preparado en la plantilla HTML de nuestro juego.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .ual-button-gen {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="ual-div"></div>
  </body>
</html>

En el método create de la escena de login de nuestro juego en Phaser crearemos el objeto UAL y lo asociaremos al elemento DIV y a una función callback que se ejecutará cuando se haya completado el proceso de login.

El botón que hemos añadido para hacer login reaccionará simulando el evento click sobre el botón del objeto UAL que hemos ocultado. Esto causará la ejecución de la función callback del objeto UAL.

La función callback se encargará de cargar la siguiente escena del juego y enviará como parámetros el objeto de usuario para el resto de interacciones con el wallet.

Interacción con el wallet

Podemos realizar operaciones de lectura o de escritura sobre la blockchain. Para las operaciones de lectura de datos de la blockchain no es necesario UAL ni tener una sesión de usuario iniciada. La librería eosjs nos permite crear una conexión con un servidro API público que nos permita realizar operaciones de lectura de las tablas que almacenan los smart contracts como si de una base de datos se tratara.

https://github.com/EOSIO/eosjs

En el código de ejemplo de la plantilla se muestra cómo leer la información de un usuario gracias a su nombre de cuenta.

async function readFunds(user) {
    const account = await rpc.get_account(user);
    if (account.account_name === undefined) 
        throw Error('Reading error!');
    return account.core_liquid_balance;
}

Es importante resaltar que las operaciones de lectura/escritura sobre la cadena de bloques son asíncronas.

En realidad, no es posible realizar operaciones de escritura sobre la cadena de bloques. En su lugar lo que haremos será llamar a las acciones de los smart contracts y serán esas acciones las que escriban o modifiquen la información de sus tablas.

Todas las operaciones de llamadas a una acción de un smart contract requieren ir firmadas por el usuario a través de su wallet.

En el ejemplo realizamos el pago de 1 token WAX para iniciar un juego. Esto supone una transacción de un token, es decir, el saldo de tokens del usuario se reducirá en 1 unidad y el saldo de la cuenta que recibe el token se incrementa en 1 unidad. Al ser una operación de modificación de datos deberemos llamar a una acción de un smart contract que nos realice esa operación y deberemos firmar la operación para garantizar que somos los legítimos dueños del token que se va a transferir.

El smart contract para la administración de los tokens WAX tiene el nombre de eosio.token y la acción a llamar será transfer. A esta acción necesitamos pasarle como parámetros el nombre de la cuenta de origen, la cuenta de destino, la cantidad de token que queremos enviar y un texto opcional como asunto o memo.

Esta acción requiere ser firmada con la clave activa del propietario del token que se va a enviar.

Para hacer una llamada a una acción y firmarla con el wallet escogido durante el proceso de login, UAL nos ofrece el método signTransaction:

await SceneA.loggedInuser.signTransaction(
    {
        actions: [{
            account: 'eosio.token',
            name: 'transfer',
            authorization: [{
                actor: SceneA.nameUser,
                permission: 'active'
            }],
            data: {
                from: SceneA.nameUser,
                to: '3dkrenderwax',
                quantity: '1.00000000 WAX',
                memo: 'This works!'
            }
        }]
    },
    {
        blocksBehind: 3,
        expireSeconds: 30
    }
);

Para saber más acerca de cómo interactuar con un smart contract con JavaScript visita:

Si la transacción finaliza con éxito podemos continuar con la lógica del juego.

Gracias a las operaciones de lectura de tablas y a las llamadas de las acciones de los smart contract podemos conocer el saldo de tokens de un jugador y facilitar las transacciones entre el jugador y la cuenta del juego.

Si queremos realizar transacciones desde el juego hacia el jugador deberemos hacerlo desde el lado del servidor para no exponer las claves privadas de la cuenta de juego.

Para saber más acerca de juegos cliente/servidor con Phaser + node.js + Socket.io visita:

Para saber más acerca de cómo llamar a las acciones de un smart contract desde el lado servidor con Node.js visita el siguiente enlace:

Testnet

Antes de lanzarse al desarrollo de juegos sobre la blockchain es recomendable practicar sobre la blockchain de pruebas (Testnet). Para que nuestra aplicación se comunique con una u otra blockchain deberemos indicar la URL de un servidor API a través del cual nos comunicaremos con dicha blockchain. Existen varios servidores públicos disponibles. Puedes empezar probando con nuestros servidores:

  • Testnet: https://testnet-wax.3dkrender.com
  • Mainnet: https://apiwax.3dkrender.com

Para crearse una cuenta de pruebas en la blockchain testnet puedes recurrir al servicio ofrecido por el Guild Waxsweeden:

En esa dirección encontrarás muchos recursos para comenzar a trabajar sobre la blockchain de pruebas.

Contacto

Si deseas conocer más información sobre el apasionante mundo del desarrollo de juegos sobre la blockchain de WAX o simplemente quieres saber más sobre esta blockchain, no dudes en suscribirte a nuestras redes sociales y participar en nuestro servidor de Discord.

Related Posts