GTF — platforma gier dla Tezos

Apr 24 2023

Podręcznik samouczka i konfiguracji

W tej serii samouczków dogłębnie poznasz działanie GTF — open source Gaming Framework dla Tezos. Będziesz miał głębsze zrozumienie działania komponentów.

W tej serii samouczków dogłębnie poznasz działanie GTF — open source Gaming Framework dla Tezos . Będziesz miał głębsze zrozumienie działania komponentów. Po tych samouczkach będziesz w stanie rozszerzyć i dostosować GFT do dowolnej gry oraz wdrożyć go z podstawową funkcjonalnością blockchain Tezos .

GFT jest darmowy na licencji MIT. Wszystko, co widzisz w tym samouczku, jest zawarte w repozytorium GitHub !

Konfiguracja / wymagania wstępne

Organizować coś

Istnieją dwa łatwe w instalacji komponenty:

Web Component — To jest node.js, reagowanie, baza maszynopisów frameworka, wykonuje większość transakcji w łańcuchu, a także obsługuje komponent Unity WebGL. Instrukcje dotyczące konfiguracji/pobierania komponentu sieciowego można znaleźć w pliku readme github tutaj .
Unity Component — To jest komponent gry. Dołączyliśmy przykładowe menu, aby zademonstrować podstawy. Komponent Unity jest dostępny w pakiecie Unity Asset jako wydanie tutaj .

Zalecana jest znajomość JS, Unity, node i reagowanie. Te samouczki przeprowadzą Cię krok po kroku przez ukończoną działającą wersję demonstracyjną, posiadanie wymaganej wiedzy pomoże zrozumieć framework, ale nie jest wymagane do konfiguracji lub używania GFT.

Trochę tła — czym są NFT?

„NFT to niezamienne tokeny przechowywane w łańcuchu blokowym, formie cyfrowej księgi, w której przechowywany jest zapis każdej przeprowadzonej transakcji” — mówi Raj Kallem, szef ds. rozwoju w klubie 1687 Club, opartym na NFT.[1 ]

Samouczek 1: Bramkowanie tokenów

Co to jest bramkowanie tokenów

Bramkowanie tokenów to „sposób na zwiększenie wartości NFT poprzez umożliwienie posiadaczowi wyłącznego dostępu do społeczności, treści, a nawet produktów fizycznych oprócz tokena cyfrowego” – mówi Kallem.[1]

Jak działa bramkowanie tokenów w GFT?

W GFT sprawdzamy portfel gracza pod kątem posiadania NFT. Potwierdzona własność może uruchomić mechanikę gry, taką jak wejście przez bramę, przedmioty do odblokowania i przedmioty z ekwipunku. W wersji demonstracyjnej pokażemy, jak używać token-gating, aby odblokować funkcje Market i Start Game .

Zacznijmy!

Zanim zaczniesz, upewnij się, że postępujesz zgodnie z instrukcjami konfiguracji GFT

Omówimy podstawową mechanikę wymagania żetonu (takiego jak NFT) do rozpoczęcia gry.

Ten proces składa się z trzech części.

Połącz portfel
Wyślij stan portfela do Unity
Wyślij własność tokena do Unity

Aby sprawdzić, czy użytkownik posiada token, potrzebujemy adresu portfela użytkownika. Możemy to zrobić w niezręczny/trudny sposób i poprosić ich o wpisanie adresu zawierającego ponad 30 znaków lub w płynny/łatwy sposób i poprosić ich o podpisanie portfelem.

Zaimplementujemy platformę taquito i beacon , aby łatwo to osiągnąć za pomocą reagowania. Uwaga: Repozytorium GFT stworzyło to dla Ciebie.


import { useWallet } from 'contexts/WalletProvider';

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

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

Wyrenderuj Unity WebGL i wyślij wiadomość JS [w JS]
Komponent unity wyrenderujemy w React, używając frameworka React-Unity-WebGL Jeffreya Lanternsa . Użyjemy interakcji Unity ze skryptami przeglądarki, aby wysłać portfel do komponentu Unity WebGL.
Uwaga: Repozytorium GFT stworzyło to dla Ciebie.

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

Wyślij własność tokena

Tutaj powtarzamy podstawowe kroki i podajemy informacje o właścicielu tokena Unity WebGL Component (NFT).

Zapytanie o węzeł RPC i wysłanie wiadomości JS [ W JS ]
Najszybszy sposób sprawdzenia zasobów portfela użytkownika pod kątem tokena poprzez zapytanie księgi własności o adres portfela użytkownika.
Uwaga: Repozytorium GFT stworzyło to dla Ciebie.

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

    }

Oto elementy składowe gry NFT na Tezos. Za pomocą tego podstawowego kodu możemy niezawodnie otrzymywać portfel użytkownika jako formę logowania do zarządzania użytkownikami i zapytań o własność zasobów. Ten kod jest podstawowy i można go rozszerzyć w celu zwiększenia bezpieczeństwa i funkcjonalności. Jednym z przykładów jest nasza Metaverse Anti-Cheat Framework , która zapobiega wstrzykiwaniu JS.

Samouczek 2 — Transakcja na rynku

Tutaj omówimy podstawową mechanikę uzyskiwania cen rynkowych tokena i zawierania transakcji z kontraktem rynkowym. Istnieją trzy podstawowe części tego procesu:

Wyślij ceny rynkowe do Unity
Wyślij transakcję rynkową z Unity
Wyślij potwierdzenie do Unity

Tutaj sprawdzamy księgę rynku, która przechowuje dane rynkowe za pomocą taquito i reagujemy. Sortujemy i analizujemy te dane, tworząc z nich plik json. Następnie przekazujemy go do komponentu Unity.

Uzyskaj dane rynkowe i wyślij do Unity [w JS]
Odpytujemy węzeł RPC o wszystkie dane księgi, które nie są uporządkowane, analizujemy te dane według pozycji i ceny, wysyłając wynikowe dane do Unity w celu wyświetlenia.
Uwaga: Repozytorium GFT stworzyło to dla Ciebie.

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

Ten krok dodaje trochę złożoności, ponieważ po raz pierwszy wysyłamy dane z Unity. W tym celu będziemy potrzebować dodatkowego pliku w /Plugins/katalogu. Dzięki temu Unity może wysyłać dane. Zlecenie rynkowe wyślemy tutaj.

Dodaj plik .jslib [ In Unity ]
Ten plik GFT.jslib należy umieścić w /Plugins/WebGL/katalogu.
Uwaga: Dołączony pakiet Unity został utworzony i umieszczony dla Ciebie.

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

Teraz musimy potwierdzić, że transakcja przebiegła pomyślnie i poinformować Unity o konieczności aktualizacji ekwipunku gracza o nowe zakupy.

Wyślij potwierdzenie transakcji [w JS]
Komponent reagujący nasłuchuje potwierdzenia transakcji lub niepowodzenia i wysyła informacje do komponentu Unity.
Uwaga: Repozytorium GFT stworzyło to dla Ciebie.

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

Ten samouczek pokazuje, jak zintegrować elementy oparte na Tezos z mechaniką gry jako proste, ale funkcjonalne odniesienie do tego, jak gry na większą skalę byłyby budowane na Tezos.

Śledź nasze postępy w tworzeniu kolejnych gier typu open source na Tezos. Włączamy GFT do naszych gier, aby można go było używać w świecie rzeczywistym, co pozwala nam go aktualizować i optymalizować — dla społeczności. Będziemy dokumentować naszą następną grę WWXTZ za pomocą artykułów i samouczków — dających wgląd w wewnętrzne działanie tych komponentów.