Halo! Jika Anda seorang pengembang game yang ingin membuat game yang dihosting di blockchain komputer Internet, Anda beruntung.
Saya membuat proyek Unity sederhana untuk mendemonstrasikan integrasi dompet dan perolehan NFT - hanya untuk Anda, jadi sekarang Anda dapat mulai mengerjakan bagian permainan yang benar-benar "menyenangkan" tanpa harus khawatir tentang cara memanggil Javascript browser dari Unity C#.
Anda dapat melihat demo integrasi dompet ini di:
ti5gm-bqaaa-aaaai-ab7oa-cai.raw.ic0.app
Kode proyek terletak di:
github.com/tommygames/ic-unity-template
Catatan: Proyek ini mengintegrasikan modul npm yang disebut react-unity-webgl untuk memungkinkan Unity C# berkomunikasi dengan Javascript browser untuk integrasi Plug Wallet, jika Anda tidak memerlukan integrasi dompet atau interoperabilitas Javascript, jangan ikuti panduan ini, karena ada cara yang lebih mudah untuk menyebarkan game Unity sederhana ke IC.
Jika Anda ingin melihat bagaimana saya menyiapkan proyek dari awal, lewati ke bagian Membuat Proyek IC Unity dari Awal; jika Anda hanya ingin mengunduh dan menerapkan proyek Unity, lewati ke bagian Menyebarkan Proyek IC Unity jika Anda mau untuk melihat cara kerja kode, Silakan baca bagian "Cara kerjanya" di bawah.
cara kerjanya
Integrasi Plug Wallet memerlukan 2 fitur agar berfungsi:
Unity C# mengirimkan acara ke Javascript browser
Acara pengiriman Javascript browser ke Unity
Untuk keduanya, kami menggunakan modul npm bernama react-unity-webgl, yang dokumentasinya dapat ditemukan di sini:
npmjs.com/package/react-unity-webgl
Untuk fitur pertama, kami menggunakan plugin .jslib di Unity untuk menulis pseudo-Javascript (sering disebut UnityScript), baca lebih lanjut di sini:
docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html
Jika Anda sudah menginstal modul react-unity-webgl, plugin .jslib ini dapat mengirimkan event ke Javascript browser React dengan memanggil DispatchReactUnityEvent("EventName"), yang dapat Anda lihat diterapkan di file PlugUtils.jslib proyek Unity.
Untuk memanggil fungsi-fungsi ini Anda harus mengimpornya ke C#, contohnya dapat dilihat di kelas PlugUtilsInternal di file PlugUtils.cs.
Untuk fungsi kedua, kita memanggil unityContext.send("GameObjectName", "FunctionName", jsonData) dari kode javascript React, Anda dapat melihat implementasinya di kelas PlugUtils.js aplikasi React kita.
Ini akan memanggil fungsi yang ditentukan pada GameObject yang ditentukan, misalnya saya memiliki GameObject bernama ReactApi di MainScene dan skrip berisi fungsi yang disebut HandleCallback.
Karena saya ingin memiliki panggilan balik setiap kali Unity berbicara dengan Javascript browser, saya menyimpan kamus panggilan balik yang terkait dengan indeksnya di file ReactApi.cs, sehingga komunikasi apa pun antara Unity dan React harus melalui file ReactApi, dan panggilan balik tersebut akan menjadi dipicu ketika data JSON dikembalikan.
Setelah mengembalikan data JSON, saya menggunakan Json.NET untuk membatalkan serialisasi data menjadi objek, yang didefinisikan dalam file WalletDataTypes.cs.
Jika data JSON berhasil dideserialisasi, data tersebut akan ditampilkan ke UI, dan begitulah cara kerja semuanya.
Terapkan proyek IC Unity
1. Unduh file proyek dari:
github.com/tommygames/ic-unity-template
2. Pastikan Anda telah menginstal Dfinity Container Smart Contract SDK (Saya menggunakan versi 0.9.3 dalam proyek ini):
smartcontracts.org/docs/developers-guide/install-upgrade-remove.html
3. cd ke dalam folder di dalam proyek Unity ic_unity_template (yang berisi proyek dfx).
4. Jalankan npm install dan pastikan semua modul node terinstal dengan benar, Anda mungkin harus mengikuti instruksi khusus untuk memastikan modul node dab-js diinstal dengan benar, instruksi dapat ditemukan di sini:
docs.dab.ooo/nft-list/memulai
5. Jalankan dfx start --background di folder ic_unity_template untuk memulai lingkungan IC lokal di latar belakang, dan jalankan dfx deploy untuk menyebarkan wadah IC ke lingkungan IC lokal. Setelah penerapan selesai, ini akan memberi tahu Anda URL di mana Anda dapat mengakses proyek tersebut.
6. Untuk menyebarkan proyek ke jaringan blockchain publik mainnet, Anda perlu melakukan cd ke dalam folder ic_unity_template dan menjalankan dfx deploy --network=ic. Setelah penerapan, ini akan memberi tahu Anda ID kontainer dari wadah ic_unity_template_assets, yang dapat Anda akses. oleh Akses proyek di URL berikut:
https://.raw.ic0.app
CATATAN: Penting untuk menyertakan kata kunci "mentah" di URL karena file Unity sangat besar dan hanya dapat disajikan menggunakan kata kunci ini.
Jika Anda membuat perubahan pada proyek Unity dan membangunnya kembali, pastikan memberi nama build Anda unity_build.
Setelah pembangunan selesai, seret folder Build, TemplateData, dan StreamingAssets (jika ada) ke dalam folder src/ic_unity_template_assets/assets (Anda dapat mengabaikan file index.html), dan Anda dapat menerapkan ulang ke dalam kontainer.
Terima kasih telah membaca sejauh ini, ini adalah cara menerapkan contoh proyek Unity dengan integrasi react-unity-webgl untuk panggilan antara Javascript dan C#, saya harap Anda menikmati membaca dan semoga Anda beruntung dalam petualangan pengembangan game Anda, jangan ragu untuk Ikuti saya di Twitter (@tommyinvests) di mana saya adalah pengembang utama game Plethora.
Buat proyek IC Unity dari awal
1. Buat proyek Unity baru.
2. Unduh dan instal SDK kontrak pintar kontainer Dfinity:
smartcontracts.org/docs/developers-guide/install-upgrade-remove.html
3. dfx adalah alat baris perintah utama untuk memulai proyek Dfinity baru. Ini akan secara otomatis mengisi proyek dengan kode templat.
smartcontracts.org/docs/developers-guide/cli-reference.html
4. Buka baris perintah dan cd ke folder proyek Unity, lalu jalankan dfx new project-name-goes-here untuk membuat proyek template baru bernama "project-name-goes-here", yang akan ada di file proyek Unity Anda Buat proyek dfx baru di folder tersebut.
Catatan: Anda tidak harus membuat proyek dfx di folder proyek Unity, Anda juga dapat menempatkannya di folder terpisah.
5. Selanjutnya, Anda perlu memodifikasi proyek template dfx agar kompatibel dengan kerangka web React.
6. Kami akan menggunakan kerangka React sebagai pembungkus proyek Unity untuk memungkinkan pesan dikirim antara kode javascript React dan Unity C#, ini memungkinkan integrasi dompet dan juga memberi Anda kemampuan untuk mengintegrasikan komponen web (dalam React) ke dalam Fleksibilitas masa depan untuk melapisi game Anda jika Anda mau.
7. Saya mengikuti panduan Dfinity ini untuk membuat proyek saya kompatibel dengan React:
smartcontracts.org/docs/developers-guide/tutorials/custom-frontend.html
CATATAN: Anda tidak perlu mengikuti semua langkah dalam panduan ini, cukup yang berikut ini:
Di folder proyek Anda, jalankan npm install --save react react-dom
Jalankan npm install --save-dev TypeScript ts-loader di folder proyek Anda
Buka webpack.config.js dan tambahkan kode berikut di atas bagian plugins:
Buat file baru bernama tsconfig.json di direktori root proyek Anda dan tempelkan kode berikut ke dalamnya:
8. Setelah proyek dfx diatur agar kompatibel dengan React, Anda perlu membuat file proyek React. Saya memulai proyek React default menggunakan alat baris perintah “Buat Aplikasi React”:
reactjs.org/docs/create-a-new-react-app.html
9. Setelah proyek React dibuat, ubah Index.html, Index.js, Index.css, App.js, App.css di folder React Project scr dan file relevan lainnya ke folder srcdfxsrc/project_name_assets/src proyek Anda, di sinilah semua file pribadi Anda berada, Anda juga akan melihat bahwa ada folder src di sebelah folder aset, di sinilah semua file publik Anda berada lokasi, termasuk file build Unity Anda.
10. Setelah Anda menyalin file React ke proyek dfx Anda, Anda perlu memastikan bahwa Anda telah menginstal modul npm berikut untuk proyek Anda.
11. Modul react-unity-webgl sangat penting karena memungkinkan kita mengirim event antara React dan Unity, event ini akan memungkinkan Unity berinteraksi dengan Javascript browser dan terhubung ke Plug Wallet, Anda dapat menemukan dokumentasinya di sini:
npmjs.com/package/react-unity-webgl
Anda dapat menginstalnya dengan menjalankan perintah berikut di folder proyek dfx:
Setelah instalasi, ikuti instruksi dalam dokumentasi react-unity-webgl untuk memodifikasi file App.js Anda. Implementasi dasar App.js terlihat seperti ini:
12. Modul dab-js adalah perpustakaan yang dibuat oleh Psychedelic untuk membantu kita menanyakan database NFT mereka, yang memungkinkan kita mendapatkan semua NFT yang saat ini ada di dompet Plug pengguna.
Catatan: Proses instalasi modul npm ini agak rumit, Anda perlu membuat token akses Github dan login sebelum mengunduh modul, silakan ikuti petunjuk di sini:
docs.dab.ooo/nft-list/memulai
13. Terakhir, Anda perlu memastikan bahwa modul @dfinity/agent, @dfinity/principal, dan @dfinity/candidnpm Anda menggunakan versi 0.9.3 atau lebih rendah, karena modul dab-js saat ini hanya mendukung ini karena pengkodean ID utama mengubah versi atau lebih rendah, Anda dapat menjalankan perintah berikut untuk memastikan versi tersebut:
14. Sekarang Anda perlu membangun proyek Unity Anda, buka Unity dan buka File->Build Settings dan beralih ke platform WebGL.
15. Lalu pergi ke Edit->Pengaturan Proyek dan atur “Format Kompresi” ke Disabled. Wadah IC saat ini tidak mendukung format kompresi Gzip atau Brotli.
16. Terakhir, kembali ke pengaturan build dan klik tombol "Build". Nama build yang Anda tentukan juga akan mengubah awalan file build, sebut saja "BestGame" kami. TemplateData dan StreamingAssets (jika ada) Tarik folder tersebut ke folder src/project_name_assets/assets dfx di proyek Anda (Anda dapat mengabaikan file index.html), lalu Anda perlu kembali ke langkah 11 dan mengedit App.js Anda Untuk mendapatkan path file yang benar ke file build, jika nama build kita adalah "BestGame" maka file App.js kita akan terlihat seperti ini:
17. Setelah langkah ini selesai, Anda dapat mengunggah game Anda ke IC, cd ke folder proyek dfx Anda dan jalankan dfx start --background yang akan memulai lingkungan IC lokal di latar belakang, kemudian jalankan dfx deploy yang akan membawa IC Unity Anda game disebarkan ke lingkungan IC lokal, dan setelah disebarkan, ini akan memberi tahu Anda URL yang dapat digunakan untuk mengakses game Anda.
18. Untuk menyebarkan game IC Anda ke jaringan blockchain publik mainnet, Anda perlu melakukan cd ke folder proyek dfx dan menjalankan dfx deploy --network=ic.Setelah penerapan, ini akan memberi tahu Anda ID kontainer dari kontainer project_name_assets permainan dapat diakses dengan mengunjungi:
https://.raw.ic0.app
CATATAN: Penting untuk menyertakan kata kunci "mentah" di URL karena file Unity sangat besar dan hanya dapat disajikan menggunakan kata kunci ini.
Terima kasih telah membaca sejauh ini, ini adalah bagaimana Anda dapat membuat proyek Unity dengan integrasi react-unity-webgl dan menerapkannya ke wadah untuk panggilan antara Javascript dan C#, saya harap Anda menikmati membaca dan berharap yang terbaik dalam permainan Anda petualangan pengembangan Semoga berhasil dan jangan ragu untuk menghubungi saya di Twitter (@tommyinvests), saya adalah pengembang utama game Plethora.
Konten IC yang Anda minati
Kemajuan Teknologi |. Informasi Proyek |
Kumpulkan dan ikuti IC Binance Channel
Ikuti terus informasi terkini