Develop games for WAX Blockchain with Phaser (JavaScript)

Categories TutorialsPosted on

About WAX Blockchain

WAX is an eosium-compatible blockchain whose token is WAX, although it can be listed as WAXP. Some of the most noteworthy features of WAX Blockchain are:

  • Low Emissions Ecological Blockchain (PoS).
  • Smart contract programming: It is possible to develop smart contracts in C++ language.
  • Creation and management of tradable tokens (NFTs and FTs).
  • Complete JavaScript support thanks to public libraries.
  • Main token (WAX) listed in some of the most popular exchanges (Huobi, Bittrex, Kucoin, etc).
  • Free transactions.
  • High speed in transactions.

These features make WAX the ideal ecosystem for developing projects based on asset collections or video games.

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

About Phaser

Phaser is a free, open source framework for HTML5 game development. Some of its features:

  • JavaScript and TypeScript language.
  • Huge function library.
  • Lots of documentation and examples.
  • Large community of users.

It is possible to develop client-side games and also client/server games using sockets.

Web: https://phaser.io

About UAL

Universal Authenticator Library (UAL) provides a universal interface for account authentication and transaction signing from any WAX wallet that develops an extension for UAL. Some wallets that can be used:

  • Anchor.
  • WAX Cloud Wallet.
  • Scatter.

Thanks to this library users will be able to log in to a JavaScrip application from their favorite wallet and will be able to sign transactions on WAX blockchain.

UAL-Phaser integration

In this article I will try to explain how UAL connects with our game code in Phaser. You can download the Phaser + UAL template at the following link:

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

UAL has an HTML button responsible for loading the login window with the possible options according to the loaded libraries. This button must be overridden. Instead, we’ll create an interactive button from the Phaser canvas with the look we set up.

When UAL is called to log in or to sign transactions, it creates a window in the body of a DIV block that we must have prepared in the HTML template of our game.

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

In the create method of our game login scene in Phaser we will create the UAL object and associate it with the DIV element and a callback function that will run when the login process is complete.

The button we added to log in will react by simulating the click event on the button of the UAL object that we have hidden. This will cause the CALLBACK function of the UAL object to execute.

The callback function will load the next scene in the game and send the user object as parameters for all other interactions with the wallet.

Interaction with the wallet

We can perform read or write operations on the blockchain. For blockchain data reading operations you do not need UAL or have a user session logged in. The eosjs library allows us to create a connection with a public API service that allows us to perform read operations of the tables that store smart contracts as if it were a database.

https://github.com/EOSIO/eosjs

The template sample code shows how to read a user’s information using their account name.

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

It is important to note that read/write operations on the blockchain are asynchronous.

Actually, it is not possible to perform write operations on the blockchain. Instead what we will do is call the actions of the smart contracts and it will be those actions that write or modify the information in their tables.

All call-to-action operations of a smart contract require user-signed through their wallet.

In the example we paid 1 WAX token to start a game. This implies a transaction of a token, that is, the user’s token balance will be reduced by 1 unit and the balance of the account receiving the token is increased by 1 unit. Being a data modification operation we will have to call an action of a smart contract that performs that operation and we will have to sign the operation to ensure that we are the legitimate owners of the token to be transferred.

The smart contract for wax token management has the name eosio.token and the action to call will be transfer. To this action we need to pass as parameters the name of the source account, the target account, the amount of token that we want to send and an optional text such as subject or memo.

This action requires being signed with the active key of the token owner to be sent.

To make a call to an action and sign it with the wallet chosen during the login process, UAL offers us the signTransaction method:

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

To learn more about interacting with a smart contract with JavaScript visit:

If the transaction completes successfully we can continue with the game logic.

Thanks to table reading operations and smart contract action calls we can know a player’s token balance and facilitate transactions between the player and the game account.

If we want to transact from the game to the player we must do so from the server side so as not to expose the private keys of the game account.

To learn more about client/server games with Phaser + node.js + Socket.io visit:

To learn more about calling the actions of a smart contract from the server side with Node.js visit the following link:

Testnet

Before launching into the development of games on the blockchain it is advisable to practice on the test blockchain (Testnet). For our application to communicate with one or the other blockchain we must indicate the URL of an API server through which we will communicate with that blockchain. Several public servers are available. You can start by testing with our servers:

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

To create a test account on the testnet blockchain you can use the service offered by the Guild Waxsweeden:

In that direction you will find many resources to start working on the test blockchain.

Contact

If you want to know more about the exciting world of game development on the WAX blockchain or just want to know more about this blockchain, feel free to subscribe to our social networks and participate in our Discord server.

Related Posts