GTF — Framework di gioco per Tezos

Apr 24 2023

Tutorial e guida all'installazione

Questa serie di tutorial approfondirà il funzionamento di GTF, il framework di gioco open source per Tezos. Avrai una comprensione più profonda di come funzionano i componenti.

Questa serie di tutorial approfondirà il funzionamento di GTF , il framework di gioco open source per Tezos . Avrai una comprensione più profonda di come funzionano i componenti. Dopo questi tutorial sarai in grado di estendere e personalizzare il GFT per qualsiasi gioco e distribuirlo con le funzionalità blockchain di base di Tezos .

GFT è gratuito con licenza MIT. Tutto ciò che vedi in questo tutorial è incluso nel GitHub Repo !

Configurazione/Prerequisiti

Impostare

Ci sono due componenti facili da installare:

Componente Web : si tratta di node.js, react, dattiloscritto web base del framework, esegue gran parte delle transazioni on-chain e serve anche il componente Unity WebGL. Le istruzioni di installazione/download per il componente Web sono disponibili nel file Leggimi di github qui .
Componente Unity — Questo è il componente del gioco. Abbiamo incluso un menu di esempio per dimostrare le basi. Il componente Unity è disponibile tramite un Unity Asset Package come release qui .

Si consiglia la conoscenza di JS, Unity, node e react. Questi tutorial ti guidano passo dopo passo attraverso la demo funzionante completata, avere le conoscenze prerequisite ti aiuterà a comprendere il framework, ma non è necessario configurare o utilizzare GFT.

Un piccolo background: cosa sono gli NFT?

"Gli NFT sono token non fungibili memorizzati su una blockchain, una forma di libro mastro digitale che memorizza un record di ogni transazione che ha luogo", afferma Raj Kallem, Head of Development presso il 1687 Club, un club di appartenenza basato su NFT.[1 ]

Tutorial 1: token-gating

Cos'è il Token Gating

Il token gating è "un modo per aggiungere più valore a un NFT consentendo al titolare l'accesso esclusivo a una comunità, contenuti o persino prodotti fisici oltre al token digitale", afferma Kallem.[1]

Come funziona il token gating in GFT?

In GFT, controlliamo il portafoglio del giocatore per la proprietà di un NFT. La proprietà confermata può attivare meccaniche di gioco come ingresso protetto, sbloccabili e oggetti di inventario. Nella demo mostreremo l'utilizzo del token-gating per sbloccare la funzionalità Market e Start Game .

Iniziamo!

Prima di iniziare, assicurati di seguire i passaggi per configurare il GFT

Esamineremo la meccanica di base della richiesta di un token (come NFT) per iniziare il gioco.

Ci sono tre parti in questo processo.

Connetti Portafoglio
Invia lo stato del portafoglio a Unity
Invia la proprietà del token a Unity

Per verificare se l'utente ha un token, abbiamo bisogno dell'indirizzo del portafoglio dell'utente. Possiamo farlo in modo scomodo/difficile e chiedere loro di digitare l'indirizzo di oltre 30 caratteri da soli, o in modo agevole/facile e fargli firmare con il portafoglio.

Implementeremo taquito e il framework beacon per ottenere questo risultato facilmente con react.
Nota: il repository GFT ha creato questo per te.


import { useWallet } from 'contexts/WalletProvider';

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

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

Render Unity WebGL e Send JS Message [In JS]
Renderemo il componente unity in react utilizzando il framework React-Unity-WebGL di Jeffrey Lanterns . Useremo l'interazione di Unity con lo scripting del browser per inviare il portafoglio al componente Unity WebGL.
Nota: il repository GFT ha creato questo per te.

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

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

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

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

Invia proprietà token

Qui ripetiamo i passaggi di base e forniamo le informazioni sulla proprietà del token del componente Unity WebGL (NFT).

Interroga nodo RPC e invia messaggio JS [In JS]
Il modo più veloce per controllare l'inventario del portafoglio dell'utente per il token interrogando il libro mastro della proprietà per l'indirizzo del portafoglio dell'utente.
Nota: il repository GFT ha creato questo per te.

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

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

    }

Qui abbiamo gli elementi costitutivi di un gioco NFT su Tezos. Possiamo, con questo codice di base, ricevere in modo affidabile il portafoglio dell'utente come forma di accesso alla gestione degli utenti e richiedere la proprietà delle risorse. Questo codice è di base e può essere esteso per una maggiore sicurezza e funzionalità. Un esempio è il nostro Metaverse Anti-Cheat Framework che impedisce l'iniezione di JS.

Tutorial 2 — Transazione di mercato

Qui esamineremo il meccanismo di base per ottenere i prezzi di mercato di un token e effettuare transazioni con il contratto di mercato. Ci sono tre parti fondamentali di questo processo:

Invia i prezzi di mercato a Unity
Invia transazione di mercato da Unity
Invia conferma a Unity

Qui interroghiamo il registro di mercato, che contiene i dati di mercato utilizzando taquito e reagiamo. Ordiniamo e analizziamo questi dati, formandoli in un file json. Lo passiamo quindi al componente Unity.

Ottieni dati di mercato e invia a Unity [In JS]
Interroghiamo il nodo RPC per tutti i dati del libro mastro non ordinati, analizziamo questi dati per articolo e prezzo, inviando i dati risultanti a Unity per la visualizzazione.
Nota: il repository GFT ha creato questo per te.

// 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]
  );

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

Questo passaggio aggiunge una certa complessità poiché per la prima volta inviamo dati da Unity. Per questo, avremo bisogno di un file aggiuntivo nella /Plugins/directory. Ciò consente a Unity di inviare dati. Invieremo qui l'ordine di mercato.

Aggiungere il file .jslib [In Unity]
Questo file GFT.jslib deve essere inserito nella /Plugins/WebGL/directory.
Nota: il pacchetto di unità incluso ha questo creato e posizionato per te.

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

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

// 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]
  );

Ora dobbiamo confermare che la transazione è andata a buon fine e far sapere a Unity di aggiornare l'inventario del giocatore con nuovi acquisti.

Invia conferma transazione [In JS]
Il componente di reazione attende una conferma o un errore di transazione e invia le informazioni al componente Unity.
Nota: il repository GFT ha creato questo per te.

// 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]
  );

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

Questo tutorial mostra come integrare gli elementi basati su Tezos in una meccanica di gioco come riferimento semplice, ma funzionale, su come i giochi su scala più ampia sarebbero costruiti su Tezos.

Segui i nostri progressi mentre creiamo altri giochi open source su Tezos. Incorporiamo GFT nei nostri giochi in modo che abbia un utilizzo nel mondo reale, che ci consenta di aggiornarlo e mantenerlo ottimizzato, per la community. Documenteremo il nostro prossimo gioco WWXTZ, con articoli e tutorial, che ti forniranno informazioni sul funzionamento interno di questi componenti.