Buna ziua! Dacă ești un dezvoltator de jocuri care dorește să creeze un joc găzduit pe un blockchain de computere de pe internet, ai noroc.
Am creat un proiect Unity simplu pentru a demonstra integrarea portofelului și obținerea de NFT - doar pentru tine, așa că acum poți începe să lucrezi la părțile cu adevărat „distractive” ale jocului fără a fi nevoie să-ți faci griji despre cum să apelezi browserul Javascript din Unity C#.
Puteți vedea o demonstrație a integrării acestui portofel la:
ti5gm-bqaaa-aaaai-ab7oa-cai.raw.ic0.app
Codul proiectului se află la:
github.com/tommygames/ic-unity-template
Notă: Acest proiect integrează un modul npm numit react-unity-webgl pentru a permite Unity C# să comunice cu browserul Javascript pentru integrarea Plug Wallet, dacă nu aveți nevoie de integrare de portofel sau de interoperabilitate Javascript, nu urmați acest ghid, deoarece există modalități mai simple. pentru a implementa jocuri simple Unity pe IC-uri.
Dacă doriți să vedeți cum am configurat proiectul de la zero, treceți la secțiunea Crearea unui proiect IC Unity de la zero dacă doriți doar să descărcați și să implementați proiectul Unity, treceți la secțiunea Implementarea proiectului IC Unity; pentru a vedea cum funcționează codul, vă rugăm să citiți secțiunea „Cum funcționează” de mai jos.
cum functioneaza
Integrarea Plug Wallet necesită 2 funcții pentru a funcționa:
Unity C# trimite evenimente către browser Javascript
Browser Javascript trimite evenimente către Unity
Pentru ambele, folosim un modul npm numit react-unity-webgl, a cărui documentație poate fi găsită aici:
npmjs.com/package/react-unity-webgl
Pentru prima caracteristică, folosim pluginul .jslib în Unity pentru a scrie pseudo-Javascript (numit adesea UnityScript), citiți mai multe despre el aici:
docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html
Dacă aveți instalat modulul react-unity-webgl, aceste pluginuri .jslib pot trimite evenimente către browserul React Javascript apelând dispatchReactUnityEvent(„EventName”), pe care îl puteți vedea implementat în fișierul PlugUtils.jslib al proiectului Unity.
Pentru a apela aceste funcții trebuie să le importați în C#, un exemplu în acest sens poate fi văzut în clasa PlugUtilsInternal din fișierul PlugUtils.cs.
Pentru a doua funcție, numim unityContext.send("GameObjectName", "FunctionName", jsonData) din codul javascript React, puteți vedea implementarea sa în clasa PlugUtils.js a aplicației noastre React.
Aceasta va apela funcția specificată pe GameObject specificat, de exemplu, am un GameObject numit ReactApi în MainScene și scriptul conține o funcție numită HandleCallback.
Deoarece vreau să am apeluri ori de câte ori Unity vorbește cu browserul Javascript, stochez un dicționar de apeluri asociate cu indexul său în fișierul ReactApi.cs, astfel încât orice comunicare între Unity și React trebuie să treacă prin fișierul ReactApi, iar apelul invers va fi declanșat atunci când sunt returnate datele JSON.
După returnarea datelor JSON, folosesc Json.NET pentru a deserializa datele într-un obiect, care sunt definite în fișierul WalletDataTypes.cs.
Dacă datele JSON sunt deserializate cu succes, le afișează în interfața de utilizare și așa funcționează totul.
Implementați proiectul IC Unity
1. Descărcați fișierele de proiect de la:
github.com/tommygames/ic-unity-template
2. Asigurați-vă că aveți instalat SDK-ul Dfinity Container Smart Contract (folosesc versiunea 0.9.3 în acest proiect):
smartcontracts.org/docs/developers-guide/install-upgrade-remove.html
3. cd în folderul din proiectul ic_unity_template Unity (care conține proiectul dfx).
4. Rulați instalarea npm și asigurați-vă că toate modulele nod sunt instalate corect, poate fi necesar să urmați instrucțiuni specifice pentru a vă asigura că modulul nod dab-js este instalat corect, instrucțiunile pot fi găsite aici:
docs.dab.ooo/nft-list/getting-started
5. Rulați dfx start --background în folderul ic_unity_template pentru a porni mediul IC local în fundal și rulați dfx deploy pentru a implementa containerul IC în mediul IC local. După finalizarea implementării, vă va spune un URL unde poti accesa proiectul.
6. Pentru a implementa proiectul în rețeaua blockchain publică mainnet, trebuie să accesați folderul ic_unity_template și să rulați dfx deploy --network=ic După implementare, acesta vă va spune ID-ul containerului ic_unity_template_assets, pe care îl puteți accesa. de Accesați proiectul la următoarea adresă URL:
https://.raw.ic0.app
NOTĂ: Este important să includeți cuvântul cheie „brut” în adresa URL, deoarece fișierele Unity sunt foarte mari și pot fi difuzate numai folosind acest cuvânt cheie.
Dacă faceți modificări în proiectul dvs. Unity și îl reconstruiți, asigurați-vă că vă denumiți construcția unity_build.
Odată ce construirea este finalizată, trageți folderele Build, TemplateData și StreamingAssets (dacă sunt prezente) în folderul src/ic_unity_template_assets/assets (puteți ignora fișierul index.html), apoi puteți redistribui în container.
Vă mulțumim că ați citit până aici, iată cum să implementați un exemplu de proiect Unity cu integrarea react-unity-webgl pentru apeluri între Javascript și C#, sper că v-a plăcut să citiți și vă doresc mult succes în aventura de dezvoltare a jocului, vă rugăm să nu ezitați să Urmărește-mă pe Twitter (@tommyinvests), unde sunt dezvoltatorul principal al jocului Plethora.
Creați un proiect IC Unity de la zero
1. Creați un nou proiect Unity.
2. Descărcați și instalați SDK-ul contract inteligent pentru containere Dfinity:
smartcontracts.org/docs/developers-guide/install-upgrade-remove.html
3. dfx este instrumentul principal de linie de comandă pentru lansarea de noi proiecte Dfinity. Acesta va completa proiectul cu codul șablonului. Documentația poate fi găsită aici:
smartcontracts.org/docs/developers-guide/cli-reference.html
4. Deschideți linia de comandă și cd în folderul proiectului Unity, apoi rulați dfx new project-name-goes-here pentru a crea un nou proiect șablon numit „project-name-goes-here”, care va fi în fișierul dvs. de proiect Unity Creați un nou proiect dfx în folder.
Notă: nu trebuie să creați proiectele dfx în folderul de proiecte Unity, le puteți plasa și într-un folder separat.
5. În continuare, trebuie să modificați proiectul șablon dfx pentru a fi compatibil cu cadrul web React.
6. Vom folosi cadrul React ca un wrapper pentru proiectul Unity pentru a permite trimiterea mesajelor între codul javascript React și Unity C#, acest lucru face posibilă integrarea portofelului și vă oferă, de asemenea, posibilitatea de a integra componente web (în React) în viitorul Flexibilitatea de a vă suprapune jocul dacă doriți.
7. Am urmat acest ghid Dfinity pentru a-mi face proiectul compatibil cu React:
smartcontracts.org/docs/developers-guide/tutorials/custom-frontend.html
Notă: nu trebuie să urmați toți pașii din ghid, doar următorii:
În folderul proiectului, rulați npm install --save react react-dom
Rulați npm install --save-dev typescript ts-loader în folderul proiectului
Deschide webpack.config.js și adaugă următorul cod deasupra secțiunii de pluginuri:
Creați un fișier nou numit tsconfig.json în directorul rădăcină al proiectului și inserați următorul cod în el:
8. Odată ce proiectul dfx este configurat pentru a fi compatibil cu React, trebuie să creați fișierul de proiect React. Am început un proiect React implicit folosind instrumentul de linie de comandă „Creați aplicația React”.
reactjs.org/docs/create-a-new-react-app.html
9. Odată ce proiectul React este creat, copiați fișierul index.html, index.js, index.css, App.js, App.css și orice alte fișiere relevante din folderul scr al proiectului React în fișierul srcdfxsrc/project_name_assets/src al folderul proiectului, aici se duc toate fișierele tale private, vei observa și că lângă folderul assets există un folder src, aici merg toate fișierele tale publice, inclusiv fișierele de compilare Unity.
10. După ce ați copiat fișierele React în proiectul dumneavoastră dfx, trebuie să vă asigurați că aveți următoarele module npm instalate pentru proiectul dumneavoastră.
11. Modulul react-unity-webgl este foarte important deoarece ne permite să trimitem evenimente între React și Unity, aceste evenimente vor permite Unity să interacționeze cu browserul Javascript și să se conecteze la Plug Wallet, documentația acestuia o puteți găsi aici:
npmjs.com/package/react-unity-webgl
Îl puteți instala rulând următoarea comandă în folderul proiectului dfx:
După instalare, urmați instrucțiunile din documentația react-unity-webgl pentru a vă modifica fișierul App.js. Implementarea de bază a App.js arată astfel:
12. Modulul dab-js este o bibliotecă creată de Psychedelic pentru a ne ajuta să interogăm baza lor de date NFT, ceea ce ne va permite să obținem toate NFT-urile în prezent în portofelul Plug al utilizatorului.
Notă: Procesul de instalare pentru acest modul npm este puțin complicat, trebuie să creați un token de acces Github și să vă conectați înainte de a descărca modulul, vă rugăm să urmați instrucțiunile de aici:
docs.dab.ooo/nft-list/getting-started
13. În cele din urmă, trebuie să vă asigurați că modulele dvs. @dfinity/agent, @dfinity/principal și @dfinity/candidnpm folosesc versiunea 0.9.3 sau o versiune anterioară, deoarece modulul dab-js le acceptă în prezent numai din cauza modificărilor codificarii ID-ului principal versiune sau mai mică, puteți rula următoarea comandă pentru a vă asigura că versiunea respectivă:
14. Acum trebuie să vă construiți proiectul Unity, să deschideți Unity și să mergeți la File->Build Settings și să comutați la platforma WebGL.
15. Apoi accesați Editare->Setări proiect și setați „Format de compresie” la Dezactivat. Containerele IC nu acceptă formatele de compresie Gzip sau Brotli.
16. În cele din urmă, reveniți la setările de compilare și faceți clic pe butonul „Build” Numele de compilare pe care l-ați specificat va schimba, de asemenea, prefixul fișierului de compilare, să numim „BestGame” al nostru, adăugați Build-ul. Folderul TemplateData și StreamingAssets (dacă există) în folderul src/project_name_assets/assets dfx din proiectul dvs. (puteți ignora fișierul index.html), apoi trebuie să reveniți la pasul 11 și să editați App.js pentru a obține calea corectă a fișierului pentru fișierul dvs. de compilare, dacă numele nostru de construcție este „BestGame”, astfel încât fișierul nostru App.js va arăta astfel:
17. Odată ce acest pas este finalizat, sunteți gata să încărcați jocul în IC, CD-ul în folderul proiectului dfx și rulați dfx start --background care va porni mediul local IC în fundal, apoi rulați dfx deploy care vă va aduce Jocurile IC Unity sunt implementate în mediul local IC și, odată implementate, vă va spune o adresă URL prin care vă puteți accesa jocul.
18. Pentru a vă implementa jocul IC în rețeaua publică blockchain, trebuie să faceți un cd în folderul de proiect dfx și să rulați dfx deploy --network=ic. După implementare, acesta vă va spune ID-ul containerului project_name_assets jocul poate fi accesat vizitând:
https://.raw.ic0.app
NOTĂ: Este important să includeți cuvântul cheie „brut” în adresa URL, deoarece fișierele Unity sunt foarte mari și pot fi difuzate numai folosind acest cuvânt cheie.
Vă mulțumim că ați citit până aici, așa puteți crea un proiect Unity cu integrarea react-unity-webgl și îl puteți implementa într-un container pentru apeluri între Javascript și C#, sper că v-a plăcut să citiți și vă doresc tot ce este mai bun în jocul dvs. aventuri de dezvoltare Succes și nu ezitați să mă contactați pe Twitter (@tommyinvests), sunt dezvoltatorul principal al jocului Plethora.
Conținutul IC la care îți pasă
Progresul tehnologiei |. Informații despre proiect |
Colectați și urmăriți canalul IC Binance
Fiți la curent cu cele mai recente informații