GTF — Framework de juego para Tezos

Apr 24 2023

Tutorial y guía de configuración

Esta serie de tutoriales profundizará en el funcionamiento de GTF, el marco de juego de código abierto para Tezos. Tendrá una comprensión más profunda de cómo funcionan los componentes.

Esta serie de tutoriales profundizará en el funcionamiento de GTF , el marco de juego de código abierto para Tezos . Tendrá una comprensión más profunda de cómo funcionan los componentes. Después de estos tutoriales, podrá ampliar y personalizar el GFT para cualquier juego e implementarlo con la funcionalidad básica de la cadena de bloques de Tezos .

GFT es gratuito bajo licencia MIT. ¡Todo lo que ve en este tutorial está incluido en GitHub Repo !

Configuración/Requisitos previos

Configuración

Hay dos componentes fáciles de instalar:

Componente web : se trata de node.js, react, base web mecanografiada del marco, realiza gran parte de las transacciones en cadena y también sirve al componente Unity WebGL. Las instrucciones de configuración/descarga para el componente web se pueden encontrar en el archivo Léame de github aquí .
Componente de Unity : este es el componente del juego. Hemos incluido un menú de muestra para demostrar los conceptos básicos. El componente de Unity está disponible a través de Unity Asset Package como versión aquí .

Se recomienda conocimiento de JS, Unity, node y react. Estos tutoriales lo guían paso a paso a través de la demostración de trabajo completa, tener el conocimiento previo requerido lo ayudará a comprender el marco, pero no es necesario para configurar o usar GFT.

Un poco de historia: ¿qué son las NFT?

“Los NFT son tokens no fungibles almacenados en una cadena de bloques, una forma de libro de contabilidad digital que almacena un registro de cada transacción que se lleva a cabo”, dice Raj Kallem, director de desarrollo del 1687 Club, un club de membresía basado en NFT.[1 ]

Tutorial 1: Token-Gating

¿Qué es la activación de tokens?

La activación de tokens es "una forma de agregar más valor a un NFT al permitirle al titular acceso exclusivo a una comunidad, contenido o incluso productos físicos además del token digital", dice Kallem.[1]

¿Cómo funciona la activación de tokens en GFT?

En GFT, verificamos la billetera del jugador para ver si posee un NFT. La propiedad confirmada puede activar la mecánica del juego, como la entrada privada, los elementos desbloqueables y los artículos de inventario. En la demostración, mostraremos el uso de token-gating para desbloquear la funcionalidad Market and Start Game .

¡Empecemos!

Antes de comenzar, asegúrese de seguir los pasos para configurar el GFT

Repasaremos la mecánica básica de requerir un token (como NFT) para comenzar el juego.

Hay tres partes en este proceso.

Conectar billetera
Enviar el estado de la billetera a Unity
Enviar propiedad de token a Unity

Para verificar si el usuario tiene un token, necesitamos la dirección de la billetera del usuario. Podemos hacer esto de la manera incómoda/difícil y hacer que escriban la dirección de más de 30 caracteres en sí mismos, o de la manera suave/fácil y hacer que firmen con su billetera.

Implementaremos taquito y el marco de baliza para lograr esto fácilmente con reaccionar.
Nota: El repositorio GFT tiene esto creado para usted.


import { useWallet } from 'contexts/WalletProvider';

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

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

Procesar Unity WebGL y enviar un mensaje JS [En JS]
Procesaremos el componente unity en reaccionar usando el marco Jeffrey Lanterns React-Unity-WebGL . Usaremos la interacción de Unity con secuencias de comandos del navegador para enviar la billetera al componente WebGL de Unity.
Nota: El repositorio GFT tiene esto creado para usted.

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

Enviar propiedad del token

Aquí repetimos los pasos básicos y proporcionamos la información de propiedad del token del componente WebGL (NFT) de Unity.

Consultar el nodo RPC y enviar un mensaje JS [En JS]
La forma más rápida de verificar el inventario de la billetera del usuario para el token consultando el libro mayor de propiedad para la dirección de la billetera del usuario.
Nota: El repositorio GFT tiene esto creado para usted.

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

    }

Aquí tenemos los componentes básicos de un juego NFT en Tezos. Podemos, con este código básico, recibir de manera confiable la billetera del usuario como una forma de inicio de sesión de administración de usuarios y consulta de propiedad de los activos. Este código es básico y puede ampliarse para una mayor seguridad y funcionalidad. Un ejemplo es nuestro Metaverse Anti-Cheat Framework que evita la inyección de JS.

Tutorial 2 — Transacción de mercado

Aquí repasaremos la mecánica básica para obtener los precios de mercado de un token y realizar transacciones con el contrato de mercado. Hay tres partes básicas de este proceso:

Enviar precios de mercado a Unity
Enviar transacción de mercado desde Unity
Enviar confirmación a Unity

Aquí consultamos el libro mayor del mercado, que contiene los datos del mercado usando taquito y reaccionar. Clasificamos y analizamos estos datos, formándolos en un archivo json. Luego lo pasamos al componente Unity.

Obtener datos de mercado y enviar a Unity [En JS]
Consultamos el nodo RPC para todos los datos del libro mayor que vienen desordenados, analizamos estos datos por artículo y precio, y enviamos los datos resultantes a Unity para que se muestren.
Nota: El repositorio GFT tiene esto creado para usted.

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

Este paso agrega algo de complejidad ya que por primera vez enviamos datos fuera de Unity. Para esto, necesitaremos un archivo extra en el /Plugins/directorio. Esto permite que Unity envíe datos. Enviaremos la orden de mercado aquí.

Agregue el archivo .jslib [en Unity]
Este archivo GFT.jslib debe colocarse en el /Plugins/WebGL/directorio.
Nota: El paquete de unidad incluido tiene esto creado y colocado para usted.

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

Ahora debemos confirmar que la transacción se realizó y avisar a Unity para que actualice el inventario del jugador con nuevas compras.

Enviar confirmación de transacción [en JS]
El componente de reacción escucha la confirmación o falla de una transacción y envía la información al componente de Unity.
Nota: El repositorio GFT tiene esto creado para usted.

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

Este tutorial muestra cómo integrar elementos basados en Tezos en una mecánica de juego como una referencia simple pero funcional sobre cómo se construirían juegos a mayor escala en Tezos.

Siga nuestro progreso a medida que construimos más juegos de código abierto en Tezos. Incorporamos GFT en nuestros juegos para que tenga un uso real, lo que nos permite actualizarlo y mantenerlo optimizado para la comunidad. Documentaremos nuestro próximo juego WWXTZ, con artículos y tutoriales, que le darán una idea del funcionamiento interno de estos componentes.