Building a decentralized application (dApp) on Tezos involves a series of steps, ranging from setting up the development environment to deploying and interacting with the dApp. In this tutorial, we’ll cover the entire process of building a dApp on Tezos.

Unlike everything else you see out there, this tutorial is approachable and fun, using GRAT — a No-Code Editor, and GFT — a Simple Unity SDK that we developed as open source here at Blockchain Alchemy!

Note: This tutorial assumes you have a super basic understanding of blockchain technology and smart contracts and Unity.

Table of Contents:

1. Using GRAT to Code, Convert & Deploy the smart contract
2. Integrating with GRAT

Create and deploy Smart Contract using GRAT

Use GRAT

GRAT is a no-code editor - so you simply follow the recipe for market contract. Drag and drop all components to build the smart contract, then click convert and deploy.

Use GFT

GFT already has functionality to interact with smart contracts. We’ll use this.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Runtime.InteropServices;


public class TransactionManager : MonoBehaviour
{
    public MarketData market_data;
    
    public OrderData order_data;
    public GameObject StartGameButton;
    public GameObject SendTezButton;

    // We Register the External Call Here
    [DllImport("__Internal")]
    private static extern void SendTransaction(float tez_amount);

    [SerializeField]
    UIManager UI_Manager;

    public void ClickInsertCoin(){
        SendTransaction(0.25f);
    }
    //Here we send the transaction.
   
    //Here we recieve the transaction results.
    public void TransactionResult(string result)
    {
                
    }

    public void TransactionComplete(){
        StartGameButton.SetActive(true);
        SendTezButton.SetActive(false);
    }
    public void TransactionFailed(){

    }

}

Get Your Quarters Ready

Retro gamers have such fond memories of coin-operated cabinets (coin-op) where countless quarters were spent - to enjoy a childhood of accessible gaming.

This micro-transaction of 25 cents per play - created an economy, and incredible innovation in gaming - you could say it launched gaming as we know it. So, what’s more fitting a way to launch Tezos Gaming, than with an ode to the classics? Here we will re-create the coin-op mechanic using Unity and the GFT. All steps are documented and all code is open-source under MIT License - so you can follow along and begin your own Blockchain Gaming journey on Tezos with ease.

Let’s Go

This tutorial will cover the implementation of the GFT into a Classic Arcade Game. The final output product is a Unity WebGL game that can be deployed on a server such as Netlify.

With GFT, this game becomes a Decentralized Application (dApp) — that allows players to pay the developer a quarter for every play. This opens the floodgates for game development, just as the coin-op revolution did in 1990’s America.

You’ll learn step-by-step:

1. Install GFT

2. Customize Unity

3. Customize React

4. Deploy to Web with Netlify

1. Install GFT

What You’ll Need

1. Unity LTS Version Unity LTS version 2020.3 [Download]
2. The GFT by Blockchain Alchemy [Download]

Install Unity

Once you have Unity LTS version 2020.3 installed, just open the latest release on the GFT Github [Link] and it will open in Unity.

Install GFT-Web (React)

With the GFT repo cloned locally, type:

npm install

Installing GFT-Web (React) is covered in more detail in the Github readme and GFT Medium article.

2. Customize Unity

Add Transaction Manager

Let’s add a New Empty GameObject called “GFT” and drop the Transaction Manager into it.

Delete (Almost) Everything

We’re only using a small fraction of GFT’s capabilities, to keep things clean, we open the Transaction Manager and delete everything except:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Runtime.InteropServices;

public class TransactionManager : MonoBehaviour
{
    // We Register the External Call Here
    [DllImport("__Internal")]
    private static extern void SendTransaction(float tez_amount);
}

Add Insert Coin Function

Since we’re not using the UI Manager, we reference the Send Tez and Start Game Buttons. Next , adding a function that sends 0.20 Tezos - ClickInsertCoin(). Then, if the transaction is successful , the TransactionComplete() function shows the Start Game Button.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Runtime.InteropServices;

public class TransactionManager : MonoBehaviour
{
    public GameObject StartGameButton;
    public GameObject SendTezButton;

    // We Register the External Call Here
    [DllImport("__Internal")]
    private static extern void SendTransaction(float tez_amount);
    public void ClickInsertCoin(){
        SendTransaction(0.2f);
    }
    public void TransactionComplete(){
        StartGameButton.SetActive(true);
        SendTezButton.SetActive(false);
    } 
}

Hint: This is already done for you in the TACMAN Repo Unity Release [Link], just download it for guidance.

3. Customize React

Change Contract

The demo contract included with GFT does more complex market transactions. For TACMAN, we only need to send some Tezos, so we point to different simpler contract. In src/pages/Home/Player/index.tsx

// Event Listener for transaction
const onSendTransaction = useCallback(
  async (amount: number) => {
    try {
      // Start connecting wallet
      await connectWallet();

      // Fix sending amount number
      amount = Number(amount.toFixed(4));

      // Request transaction
      const op = await tezos.wallet
        .transfer({ to: "tz1M2hCvF5AhhbQAkn3LcZ8DTNBggyAKTCvo", amount })
        .send();

      // Wait for transaction confirmation
      await op.confirmation();

      sendMessage("GFT", "TransactionComplete");
      toast.success("Transaction Success");
      return;
    } catch (err) {
      console.error(err);
      toast.error("Something went wrong");
      sendMessage("GFT", "TransactionFailed");
    }
  },
  [tezos, connectWallet, sendMessage]
);

Look out for future tutorials where we’ll teach you how to create Tezos smart contracts.

Update Event Listeners

We renamed the Unity function so let’s update the Event Listeners. In src/pages/Home/Player/index.tsx

const eventListeners = useMemo((): UnityEventListener[] => {
  return [
    { eventName: "SendTransaction", callback: onSendTransaction },
  ];
}, [onSendTransaction]);

Hint: This is already done for you in the TACMAN Repo [Link], just download it for guidance.

4. Deploy to Web with Netlify

Run Build

We need to compile the Unity so build to WebGL and enter the name public.

Take the output and find the Build directory — move it to the public folder of the GFT-Web (React).

Then we run build. In console:

npm run build

Drag and Drop the build directory to Netlify

Now we simply take the build directory and drag-drop it onto Netlify manual deploy. https://www.netlify.com/

Done!

That’s It! Your game is now deployed as a fully functional dApp on the Tezos blockchain.

Where Do We Go from Here?

Download Full TACMAN Source Code [Link]

Check out the GFT Full Source Code [Link]

Check out the GFT Medium Article [Link]

Learn More about Tezos [Link]

Follow Lex [Link] on Medium, more tutorials coming soon.

Tutorial and Setup Guide

This series of tutorials will give a deep-dive into the workings of GFT — the open-source Gaming Framework for Tezos. You will have a deeper understanding of how the components work. After these tutorials you’ll be able to extend and customize the GFT for any game and deploy it with basic Tezos blockchain functionality.

GFT is free under MIT license. Everything you see in this tutorial is included in the GitHub Repo!

Setup / Pre-Requisites

Setup

There are two easy to install components:

1. Web Component — This is node.js, react, typescript web base of the framework, it does much of the on-chain transactions, and also serves the Unity WebGL component. The setup/download instructions for the web component can be found in the github readme here.
2. Unity Component — This is the game component. We have included a sample menu to demonstrate the basics. The unity component is available through a Unity Asset Package as a release here.

Pre-Requisites

Knowledge of JS, Unity, node and react are recommended. These tutorials take you step-by-step through the completed working demo, having the pre-requisite knowledge will help understand the framework, but it’s not required to setup or use GFT.

A little background — what are NFTs?

“NFTs are non-fungible tokens stored on a blockchain, a form of digital ledger that stores a record of each transaction that takes place,” says Raj Kallem, Head of Development at the 1687 Club, an NFT-based membership club.[1]

Tutorial 1: Token-Gating

What is Token Gating

Token gating is “a way of adding more value to an NFT by allowing the holder exclusive access to a community, content, or even physical products in addition to the digital token,” Kallem says.[1]

How does token gating work in GFT?

In GFT, we check the player’s wallet for ownership of an NFT. Confirmed ownership can trigger game mechanics such as gated entry, unlockables and inventory items. In the demo we’ll show use the token-gating to unlock the Market and Start Game functionality.

Let’s get started!

Before you begin, please make sure you follow the steps to Set up the GFT

We’ll go over the basic mechanic of requiring a token (such as NFT) to start the game.

There are three parts to this process.

1. Connect Wallet
2. Send Wallet Status to Unity
3. Send Token Ownership to Unity

Connect Wallet

In order to check if the user has a token, we need the user’s wallet address. We can do this the awkward/hard way and have them type the 30+ character address in themselves, or the smooth/easy way and have them sign with their wallet.

We’ll implement taquito and the beacon framework to accomplish this easily with react.
Note: The GFT repo has this created for you.

import { useWallet } from 'contexts/WalletProvider';

const { address, connectWallet, disconnectWallet } = useWallet();

const handleConnect = () => {
  if (!address) {
    connectWallet();
  } else {
    disconnectWallet();
  }
};

Send Wallet Status to Unity

Render Unity WebGL and Send JS Message [ In JS ]
We’ll render the unity component in react using Jeffrey Lanterns React-Unity-WebGL framework. We’ll use Unity’s Interaction with Browser Scripting to send the wallet to the Unity WebGL Component.
Note: The GFT repo has this created for you.

// Send WalletConnected to Unity
import { useWallet } from 'contexts/WalletProvider';

const { address } = useWallet();
const { isLoaded, sendMessage } = unityContext;

sendMessage('GFT', 'WalletConnected', address);

Receive Wallet Status [ In Unity ]
In the Unity editor we’ll Create an empty GameObject called GFT and create a script inside of it called AccessManager.cs. We’ll create a function that will be called by the browser [js] and will let Unity know that a wallet was connected and receives wallet address.
Note: The included demo scene has this created for you.

 // AccessManager.cs
 //This function is called externally when the user connects wallet.
    public void WalletConnected(string walletAddressConnected)
    {
        if (walletAddressConnected == "error")
        {
            //Return Error
        } else {
            walletState = true;
            walletAddress = walletAddressConnected;
        }
        // Update UI
        if (UI_Manager == null){
            return;   
        } else {
            UI_Manager.UpdateUI();
        }
    }

Now the user has completed a web3 sign-in using their Tezos wallet, that triggers the next part, where we query the user’s wallet address for a token.

Send Token Ownership

Here we repeat the basic steps and give the Unity WebGL Component token (NFT) ownership info.

Query RPC node and Send JS Message [ In JS ]
The fastest way to check the user’s wallet inventory for the token by querying the ownership ledger for the user’s wallet address.
Note: The GFT repo has this created for you.

// src/hooks/useToken.ts
import { useCallback } from 'react';
import { useWallet } from 'contexts/WalletProvider';

const useToken = () => {
  const { tezos } = useWallet();

  const getGateToken = useCallback(
    async (address: string) => {
      try {
        const contract = await tezos.contract.at(
          'KT1SGdop74rGobKAETcBPnz9yQkH38hZnpBh'
        );
        const storage: any = await contract.storage();
        const values = await storage.ledger.get({
          0: address,
          1: 1,
        });
        return values ? values.toNumber() : 0;
      } catch (error) {
        console.error(error);
      }
    },
    [tezos]
  );

  return { getGateToken };
};

export default useToken;

Receive Ownership Status [ In Unity ]
In the Unity editor we’ll add another function to the AccessManager.cs script
Note: The included demo scene has this created for you.

 // AccessManager.cs
 // This function is called externally when the user has required token.
    public void TokenFound(string tokenNameConnected)
    {

        #if UNITY_WEBGL == true && UNITY_EDITOR == false
            // TokenFound( );
        #endif
         if (tokenNameConnected == "error")
        {
            //Return Error
        } else {
            tokenState = true;
            tokenName = tokenNameConnected;
        }

         // Update UI
        if (UI_Manager == null){
            return;   
        } else {
            UI_Manager.UpdateUI();
        }

    }

Tutorial 1 — Conclusion

Here we have the building blocks of an NFT game on Tezos. We can, with this basic code, reliably receive the user’s wallet as a form of user management sign-in and query ownership of assets. This code is basic, and can be extended for greater security and functionality. One example is our Metaverse Anti-Cheat Framework that prevents JS injection.

Tutorial 2 — Market Transaction

Here we’ll go over the basic mechanic of getting market prices of a token, and transacting with the market contract. There are three basic parts of this process:

1. Send Market Prices to Unity
2. Send Market Transaction from Unity
3. Send Confirmation to Unity

Send Market Prices to Unity

Here we query the market ledger, that holds the market data using taquito and react. We sort and parse this data, forming it into a json file. We then pass it to the Unity component.

Get Market Data and Send to Unity [ In JS ]
We query the RPC node for all ledger data which comes unordered, we parse this data by item and price, sending the resulting data to Unity to be displayed.
Note: The GFT repo has this created for you.

// src/hooks/useMarket.ts
import { useCallback } from 'react';
import { useWallet } from 'contexts/WalletProvider';
import { useNetwork } from 'contexts/NetworkProvider';

export type MarketItem = {
  owner: string;
  token_id: number;
  price: number;
  amount: number;
};

const useMarket = () => {
  const { config } = useNetwork();
  const { tezos } = useWallet();

  const getMarketItems = useCallback(
    async (address: string): Promise<MarketItem[] | undefined> => {
      try {
        const contract = await tezos.contract.at(config.Market);
        const storage: any = await contract.storage();
        return storage.items
          .filter((i) => i.owner === address)
          .map((i) => {
            return {
              owner: i.owner,
              token_id: i.token_id.toNumber(),
              price: i.price.toNumber(),
              amount: i.amount.toNumber(),
            } as MarketItem;
          });
      } catch (error) {
        console.error(error);
      }
    },
    [tezos, config]
  );

Receive Market Data [ In Unity ]
Unity will receive the data as a json file, parse it into items and prices for the player to make a purchase.
Note: The included demo scene has this created for you.

//TransactionManager.cs
//This function is called externally when the market prices are sent to Unity.
    public void LoadPrices(string jsonString){
        // We parse the json into the market_data object
        market_data = MarketData.CreateFromJSON(jsonString);
        // We create the architecture for the order_data manually 
        string orderData = "{\"items\":[{\"name\":\"Ammo\",\"price\":0.01,\"amount\":0},{\"name\":\"Water\",\"price\":0.02,\"amount\":0},{\"name\":\"Fuel\",\"price\":0.015,\"amount\":0},{\"name\":\"Intel\",\"price\":0.1,\"amount\":0}]}"; 
        if (order_data == null) order_data = OrderData.CreateFromJSON(orderData);    
        // Update UI
        if (UI_Manager == null){
            return;   
        } else {
            UI_Manager.UpdateUI();
        }
    }

Send Market Transaction from Unity

This step adds some complexity as we for the first time send data out of Unity. For this, we’ll need an extra file in the /Plugins/directory. This allows Unity to send data out. We'll send the market order here.

Add the .jslib file [ In Unity ]
This GFT.jslib file needs to be placed in the/Plugins/WebGL/ directory.
Note: The included unity package has this created and placed for you.

//Plugins/WebGL/GFT.jslib
mergeInto(LibraryManager.library, {
  SendTransaction: function (jsonString) {
    try {
      window.dispatchReactUnityEvent("SendTransaction", jsonString);
    } catch (e) {
      console.warn("Failed to dispatch event");
    }
  },
});

Send Market Transaction [ In Unity ]
We take the user’s selection and send it as a json file.
Note: The included demo scene has this created for you.

//TransactionManager.cs
//Here we send the transaction.
    public void DoSendTransaction()
    {
        string jsonString = JsonUtility.ToJson(order_data);
        #if UNITY_WEBGL == true && UNITY_EDITOR == false
            SendTransaction(jsonString);
        #endif
    }

Receive Market Order and Initiate Wallet Transaction [ In JS ]
Now the JS takes the order and composes a market transaction to be signed by the user’s wallet via beacon.
Note: The GFT repo has this created for you.

// src/hooks/useMarket.ts
 const buyMarketItems = useCallback(
    async (items: MarketItem[]) => {
      try {
        const contract = await tezos.wallet.at(config.Market);
        const op = await contract.methods.buy_items(items).send();
        const tx = await op.confirmation(1);
        return tx;
      } catch (error) {
        console.error(error);
      }
    },
    [tezos, config]
  );

Confirm Market Transaction

Now we need to confirm that the transaction went through and let Unity know to update player’s inventory with new purchases.

Send Transaction Confirmation [ In JS ]
The react component listens for a transaction confirmation or failure and send the information up to the Unity component.
Note: The GFT repo has this created for you.

// src/hooks/useMarket.ts
 const buyMarketItems = useCallback(
    async (items: MarketItem[]) => {
      try {
        const contract = await tezos.wallet.at(config.Market);
        const op = await contract.methods.buy_items(items).send();
        const tx = await op.confirmation(1);
// Returns response
        return tx;
      } catch (error) {
        console.error(error);
      }
    },
    [tezos, config]
  );

Receive Confirmation [ In Unity ]
Now Unity receives the confirmation and it’s Game-time!
Note: The included demo scene has this created for you.

    //TransactionManager.cs
    //Here we recieve the transaction results.
    public void TransactionResult(string result)
    {
         if (UI_Manager == null){
            return;   
        } else {
            UI_Manager.DisplayTransactionResults(result);
        }
    }

Conclusion

This tutorial shows how to integrate Tezos-based elements into a game mechanic as a simple, yet functional, reference on how larger scale games would be build on Tezos.

Follow our progress as we build more open-source games on Tezos. We incorporate GFT into our games so it has real-world use, that lets us update it, and keep it optimized — for the community. We’ll be documenting our next game WWXTZ, with articles and tutorials — giving you insight into the inner workings of these components.

Check out GFT in Action:

We created a game using the GFT that you can play, try it here:
https://tac-man.netlify.app/

Read the Medium article on how GFT was implemented in TACMAN: Making a Classic Coin-Op Arcade Game on Tezos Using GFT by Blockchain Alchemy

Upcoming Articles:

• dApp for Brains(intel) Market : WWXTZ
• Dynamic NFTs: Tezoscale

References:

1. Token Gating and NFTs for Retailers: 2022 Guide, Ana Cvetkovic — https://www.shopify.com/retail/token-gating