GTF - Tezos के लिए गेमिंग फ्रेमवर्क

Apr 24 2023

ट्यूटोरियल और सेटअप गाइड

ट्यूटोरियल की यह श्रृंखला जीटीएफ के कामकाज में एक गहरा गोता लगाएगी - टीज़ोस के लिए ओपन-सोर्स गेमिंग फ्रेमवर्क। घटक कैसे काम करते हैं, इसकी आपको गहरी समझ होगी।

ट्यूटोरियल्स की यह श्रृंखला GTF के कामकाज - Tezos के लिए ओपन-सोर्स गेमिंग फ्रेमवर्क - में एक गहरा गोता लगाएगी । घटक कैसे काम करते हैं, इसकी आपको गहरी समझ होगी। इन ट्यूटोरियल्स के बाद आप किसी भी गेम के लिए GFT को एक्सटेंड और कस्टमाइज कर पाएंगे और इसे बेसिक Tezos ब्लॉकचेन फंक्शनलिटी के साथ डिप्लॉय कर पाएंगे।

एमआईटी लाइसेंस के तहत जीएफटी मुफ्त है। इस ट्यूटोरियल में आप जो कुछ भी देखते हैं वह गिटहब रेपो में शामिल है !

सेटअप / पूर्व-आवश्यकताएँ

स्थापित करना

स्थापित करने के लिए दो आसान घटक हैं:

वेब कंपोनेंट - यह फ्रेमवर्क का नोड.जेएस, रिएक्शन, टाइपस्क्रिप्ट वेब बेस है, यह बहुत सारे ऑन-चेन ट्रांजेक्शन करता है, और यूनिटी वेबजीएल कंपोनेंट की भी सेवा करता है। वेब घटक के लिए सेटअप/डाउनलोड निर्देश यहां जीथब रीडमी में मिल सकते हैं ।
एकता घटक - यह खेल घटक है। हमने मूल बातें प्रदर्शित करने के लिए एक नमूना मेनू शामिल किया है। एकता घटक यहां एक रिलीज के रूप में एकता संपत्ति पैकेज के माध्यम से उपलब्ध है ।

जेएस, यूनिटी, नोड और प्रतिक्रिया के ज्ञान की सिफारिश की जाती है। ये ट्यूटोरियल आपको पूर्ण कार्यशील डेमो के माध्यम से चरण-दर-चरण ले जाते हैं, पूर्व-अपेक्षित ज्ञान होने से रूपरेखा को समझने में मदद मिलेगी, लेकिन GFT को सेटअप या उपयोग करने के लिए इसकी आवश्यकता नहीं है।

थोड़ी पृष्ठभूमि — NFTs क्या हैं?

एनएफटी-आधारित सदस्यता क्लब, 1687 क्लब में विकास के प्रमुख, राज कल्लेम कहते हैं, "एनएफटी एक ब्लॉकचैन पर संग्रहीत अपूरणीय टोकन हैं, जो डिजिटल लेज़र का एक रूप है, जो होने वाले प्रत्येक लेनदेन का रिकॉर्ड संग्रहीत करता है।" ]

ट्यूटोरियल 1: टोकन-गेटिंग

टोकन गेटिंग क्या है

टोकन गेटिंग "डिजिटल टोकन के अलावा एक समुदाय, सामग्री, या यहां तक कि भौतिक उत्पादों तक विशेष पहुंच की अनुमति देकर एनएफटी में अधिक मूल्य जोड़ने का एक तरीका है," कैलेम कहते हैं। [1]

GFT में टोकन गेटिंग कैसे काम करता है?

जीएफटी में, हम एनएफटी के स्वामित्व के लिए खिलाड़ी के बटुए की जांच करते हैं। कन्फर्म ओनरशिप गेम मैकेनिक्स जैसे गेटेड एंट्री, अनलॉक करने योग्य और इन्वेंट्री आइटम को ट्रिगर कर सकता है। डेमो में हम मार्केट को अनलॉक करने और गेम शुरू करने की कार्यक्षमता के लिए टोकन-गेटिंग का उपयोग दिखाएंगे।

आएँ शुरू करें!

आरंभ करने से पहले, कृपया सुनिश्चित करें कि आप GFT सेट अप करने के चरणों का पालन करते हैं

हम गेम शुरू करने के लिए टोकन (जैसे एनएफटी) की आवश्यकता के बुनियादी मैकेनिक पर जाएंगे।

इस प्रक्रिया के तीन भाग हैं।

वॉलेट कनेक्ट करें
यूनिटी को वॉलेट स्थिति भेजें
एकता को टोकन स्वामित्व भेजें

यह जांचने के लिए कि उपयोगकर्ता के पास टोकन है या नहीं, हमें उपयोगकर्ता के वॉलेट पते की आवश्यकता है। हम इसे अजीब/कठिन तरीके से कर सकते हैं और उन्हें अपने आप में 30+ वर्ण का पता टाइप कर सकते हैं, या सहज/आसान तरीके से और उन्हें अपने बटुए से हस्ताक्षर करने को कह सकते हैं।

प्रतिक्रिया के साथ इसे आसानी से पूरा करने के लिए हम टैक्विटो और बीकन फ्रेमवर्क लागू करेंगे।
नोट: GFT रेपो ने इसे आपके लिए बनाया है।


import { useWallet } from 'contexts/WalletProvider';

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

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

रेंडर यूनिटी वेबजीएल और जेएस संदेश भेजें [जेएस में] हम
जेफरी लालटेन रिएक्ट-यूनिटी-वेबजीएल फ्रेमवर्क का उपयोग करके प्रतिक्रिया में एकता घटक प्रस्तुत करेंगे । हम वॉलेट को यूनिटी वेबजीएल कंपोनेंट में भेजने के लिए ब्राउजर स्क्रिप्टिंग के साथ यूनिटी के इंटरेक्शन का उपयोग करेंगे।
नोट: GFT रेपो ने इसे आपके लिए बनाया है।

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

टोकन स्वामित्व भेजें

यहां हम बुनियादी चरणों को दोहराते हैं और यूनिटी वेबजीएल कंपोनेंट टोकन (एनएफटी) के स्वामित्व की जानकारी देते हैं।

क्वेरी आरपीसी नोड और जेएस संदेश भेजें [जेएस में]
उपयोगकर्ता के वॉलेट पते के लिए स्वामित्व खाता बही को क्वेरी करके टोकन के लिए उपयोगकर्ता की वॉलेट इन्वेंट्री की जांच करने का सबसे तेज़ तरीका।
नोट: GFT रेपो ने इसे आपके लिए बनाया है।

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

    }

यहाँ हमारे पास Tezos पर NFT गेम के बिल्डिंग ब्लॉक्स हैं। हम, इस मूल कोड के साथ, उपयोगकर्ता के वॉलेट को उपयोगकर्ता प्रबंधन साइन-इन और संपत्ति के स्वामित्व के प्रश्न के रूप में विश्वसनीय रूप से प्राप्त कर सकते हैं। यह कोड बुनियादी है, और अधिक सुरक्षा और कार्यक्षमता के लिए इसे बढ़ाया जा सकता है। एक उदाहरण हमारा मेटावर्स एंटी-चीट फ्रेमवर्क है जो जेएस इंजेक्शन को रोकता है।

ट्यूटोरियल 2 - बाजार लेनदेन

यहां हम एक टोकन के बाजार मूल्य प्राप्त करने और बाजार अनुबंध के साथ लेनदेन करने के बुनियादी तंत्र पर जाएंगे। इस प्रक्रिया के तीन मूल भाग हैं:

एकता को बाजार मूल्य भेजें
एकता से बाजार लेनदेन भेजें
एकता को पुष्टि भेजें

यहां हम मार्केट लेज़र से पूछताछ करते हैं, जो टैक्विटो और प्रतिक्रिया का उपयोग करके मार्केट डेटा रखता है। हम इस डेटा को सॉर्ट और पार्स करते हैं, इसे एक json फ़ाइल में बनाते हैं। हम फिर इसे एकता घटक को पास करते हैं।

मार्केट डेटा प्राप्त करें और यूनिटी को भेजें [जेएस में]
हम सभी लेजर डेटा के लिए आरपीसी नोड से पूछताछ करते हैं जो अनियंत्रित आता है, हम इस डेटा को आइटम और कीमत से पार्स करते हैं, परिणामी डेटा को प्रदर्शित करने के लिए यूनिटी को भेजते हैं।
नोट: GFT रेपो ने इसे आपके लिए बनाया है।

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

यह कदम कुछ जटिलता जोड़ता है क्योंकि हम पहली बार एकता से बाहर डेटा भेजते हैं। इसके लिए हमें /Plugins/डायरेक्टरी में एक अतिरिक्त फाइल की आवश्यकता होगी। यह एकता को डेटा बाहर भेजने की अनुमति देता है। हम यहां मार्केट ऑर्डर भेजेंगे।

.jslib फ़ाइल जोड़ें [एकता में] इस GFT.jslib फ़ाइल को निर्देशिका
में रखने की आवश्यकता है । नोट: शामिल एकता पैकेज ने इसे आपके लिए बनाया और रखा है।/Plugins/WebGL/

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

अब हमें यह पुष्टि करने की आवश्यकता है कि लेन-देन पूरा हो गया है और यूनिटी को नई खरीदारी के साथ खिलाड़ी की इन्वेंट्री को अपडेट करने के बारे में बताना है।

लेन-देन की पुष्टि भेजें [जेएस में]
प्रतिक्रिया घटक लेनदेन की पुष्टि या विफलता के लिए सुनता है और एकता घटक को जानकारी भेजता है।
नोट: GFT रेपो ने इसे आपके लिए बनाया है।

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

यह ट्यूटोरियल दिखाता है कि Tezos-आधारित तत्वों को गेम मैकेनिक में एक सरल, फिर भी कार्यात्मक संदर्भ के रूप में कैसे एकीकृत किया जाए कि Tezos पर बड़े पैमाने पर गेम कैसे बनाए जाएंगे।

हमारी प्रगति का अनुसरण करें क्योंकि हम Tezos पर अधिक ओपन-सोर्स गेम बनाते हैं। हम अपने खेलों में जीएफटी को शामिल करते हैं ताकि इसका वास्तविक दुनिया में उपयोग हो, जिससे हम इसे अपडेट कर सकें, और समुदाय के लिए इसे अनुकूलित रख सकें। हम लेखों और ट्यूटोरियल्स के साथ अपने अगले गेम WWXTZ का दस्तावेजीकरण करेंगे - जिससे आपको इन घटकों की आंतरिक कार्यप्रणाली के बारे में जानकारी मिलेगी।

कार्रवाई में GFT देखें:

हमने GFT का उपयोग करके एक गेम बनाया है जिसे आप खेल सकते हैं, इसे यहाँ आज़माएँ:
https://tac-man.netlify.app/