GTF – Gaming Framework für Tezos

Apr 24 2023

Tutorial und Einrichtungsanleitung

Diese Reihe von Tutorials gibt einen tiefen Einblick in die Funktionsweise von GTF – dem Open-Source-Gaming-Framework für Tezos. Sie erhalten ein tieferes Verständnis für die Funktionsweise der Komponenten.

Diese Reihe von Tutorials gibt einen tiefen Einblick in die Funktionsweise von GTF – dem Open-Source-Gaming-Framework für Tezos . Sie erhalten ein tieferes Verständnis für die Funktionsweise der Komponenten. Nach diesen Tutorials können Sie das GFT für jedes Spiel erweitern und anpassen und es mit grundlegenden Tezos- Blockchain-Funktionen bereitstellen.

GFT ist unter MIT-Lizenz kostenlos. Alles, was Sie in diesem Tutorial sehen, ist im GitHub Repo enthalten !

Einrichtung / Voraussetzungen

Aufstellen

Es gibt zwei einfach zu installierende Komponenten:

Webkomponente – Dies ist die node.js-, React- und Typescript-Webbasis des Frameworks. Sie erledigt einen Großteil der On-Chain-Transaktionen und dient auch der Unity-WebGL-Komponente. Die Setup-/Download-Anweisungen für die Webkomponente finden Sie hier in der Github-Readme-Datei .
Unity-Komponente – Dies ist die Spielkomponente. Zur Veranschaulichung der Grundlagen haben wir ein Beispielmenü beigefügt. Die Unity-Komponente ist über ein Unity Asset Package als Release hier verfügbar .

Kenntnisse in JS, Unity, Node und React werden empfohlen. Diese Tutorials führen Sie Schritt für Schritt durch die fertige, funktionsfähige Demo. Das Vorhandensein der erforderlichen Vorkenntnisse wird Ihnen helfen, das Framework zu verstehen, es ist jedoch nicht erforderlich, GFT einzurichten oder zu verwenden.

Ein kleiner Hintergrund – was sind NFTs?

„NFTs sind nicht fungible Token, die auf einer Blockchain gespeichert sind, einer Art digitalem Hauptbuch, das eine Aufzeichnung jeder stattfindenden Transaktion speichert“, sagt Raj Kallem, Entwicklungsleiter beim 1687 Club, einem NFT-basierten Mitgliederclub.[1] ]

Tutorial 1: Token-Gating

Was ist Token Gating?

Token-Gating ist „eine Möglichkeit, einem NFT mehr Wert zu verleihen, indem dem Inhaber zusätzlich zum digitalen Token exklusiver Zugriff auf eine Community, Inhalte oder sogar physische Produkte gewährt wird“, sagt Kallem.[1]

Wie funktioniert Token-Gating in GFT?

Bei GFT überprüfen wir das Wallet des Spielers auf den Besitz eines NFT. Ein bestätigter Besitz kann Spielmechanismen wie einen geschlossenen Zugang, freischaltbare Gegenstände und Inventargegenstände auslösen. In der Demo zeigen wir, wie Sie das Token-Gating verwenden, um die Market- und Start-Game- Funktionalität freizuschalten.

Lass uns anfangen!

Bevor Sie beginnen, stellen Sie bitte sicher, dass Sie die Schritte zum Einrichten des GFT befolgen

Wir gehen den grundlegenden Mechanismus durch, der erfordert, dass zum Starten des Spiels ein Token (z. B. NFT) erforderlich ist.

Dieser Prozess besteht aus drei Teilen.

Wallet verbinden
Senden Sie den Wallet-Status an Unity
Senden Sie den Token-Besitz an Unity

Um zu überprüfen, ob der Benutzer über einen Token verfügt, benötigen wir die Wallet-Adresse des Benutzers. Wir können dies auf die umständliche/schwierige Art und Weise tun und sie die mehr als 30 Zeichen lange Adresse selbst eingeben lassen, oder auf die unkomplizierte/einfache Art und sie mit ihrer Brieftasche unterschreiben lassen.

Wir werden Taquito und das Beacon-Framework implementieren , um dies mit React einfach zu erreichen.
Hinweis: Das GFT-Repo hat dies für Sie erstellt.


import { useWallet } from 'contexts/WalletProvider';

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

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

Unity WebGL rendern und JS-Nachricht senden [In JS]
Wir rendern die Unity-Komponente in React mithilfe des React-Unity-WebGL-Frameworks von Jeffrey Lanterns . Wir verwenden die Interaktion von Unity mit Browser-Skripten , um das Wallet an die Unity-WebGL-Komponente zu senden.
Hinweis: Das GFT-Repo hat dies für Sie erstellt.

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

Token-Besitz senden

Hier wiederholen wir die grundlegenden Schritte und geben die Eigentumsinformationen für den Unity WebGL Component Token (NFT) an.

RPC-Knoten abfragen und JS-Nachricht senden [In JS]
Der schnellste Weg, den Wallet-Bestand des Benutzers auf das Token zu überprüfen, indem das Eigentumsbuch nach der Wallet-Adresse des Benutzers abgefragt wird.
Hinweis: Das GFT-Repo hat dies für Sie erstellt.

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

    }

Hier haben wir die Bausteine eines NFT-Spiels auf Tezos. Mit diesem Basiscode können wir die Wallet des Benutzers zuverlässig als eine Form der Benutzerverwaltungsanmeldung empfangen und den Besitz von Vermögenswerten abfragen. Dieser Code ist einfach und kann für mehr Sicherheit und Funktionalität erweitert werden. Ein Beispiel ist unser Metaverse Anti-Cheat Framework , das die JS-Injection verhindert.

Tutorial 2 – Markttransaktion

Hier gehen wir auf den grundlegenden Mechanismus ein, wie man Marktpreise für einen Token erhält und Transaktionen mit dem Marktvertrag abwickelt. Es gibt drei grundlegende Teile dieses Prozesses:

Senden Sie Marktpreise an Unity
Markttransaktion von Unity senden
Senden Sie eine Bestätigung an Unity

Hier fragen wir mit Taquito das Marktbuch ab, das die Marktdaten enthält, und reagieren. Wir sortieren und analysieren diese Daten und formen sie in einer JSON-Datei. Anschließend übergeben wir es an die Unity-Komponente.

Marktdaten abrufen und an Unity senden [In JS]
Wir fragen den RPC-Knoten nach allen ungeordneten Hauptbuchdaten ab, analysieren diese Daten nach Artikel und Preis und senden die resultierenden Daten zur Anzeige an Unity.
Hinweis: Das GFT-Repo hat dies für Sie erstellt.

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

Dieser Schritt erhöht die Komplexität, da wir zum ersten Mal Daten aus Unity senden. Dazu benötigen wir eine zusätzliche Datei im /Plugins/Verzeichnis. Dadurch kann Unity Daten versenden. Wir senden die Marktorder hierher.

Fügen Sie die .jslib-Datei hinzu [In Unity]
Diese GFT.jslib-Datei muss im /Plugins/WebGL/Verzeichnis abgelegt werden.
Hinweis: Das mitgelieferte Unity-Paket hat dies für Sie erstellt und platziert.

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

Jetzt müssen wir bestätigen, dass die Transaktion erfolgreich war, und Unity informieren, um das Inventar des Spielers mit neuen Käufen zu aktualisieren.

Transaktionsbestätigung senden [In JS]
Die Reaktionskomponente wartet auf eine Transaktionsbestätigung oder einen Fehler und sendet die Informationen an die Unity-Komponente.
Hinweis: Das GFT-Repo hat dies für Sie erstellt.

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

Dieses Tutorial zeigt, wie man Tezos-basierte Elemente in eine Spielmechanik integriert, als einfache, aber funktionale Referenz, wie größere Spiele auf Tezos aufgebaut werden könnten.

Verfolgen Sie unsere Fortschritte, während wir weitere Open-Source-Spiele auf Tezos entwickeln. Wir integrieren GFT in unsere Spiele, damit es in der Praxis einsetzbar ist, wir es aktualisieren und optimieren können – für die Community. Wir werden unser nächstes Spiel WWXTZ mit Artikeln und Tutorials dokumentieren – und Ihnen Einblicke in das Innenleben dieser Komponenten geben.