Xin chào! Nếu bạn là nhà phát triển trò chơi đang tìm cách tạo một trò chơi được lưu trữ trên chuỗi khối của máy tính Internet thì bạn thật may mắn.
Tôi đã tạo một dự án Unity đơn giản để chứng minh khả năng tích hợp ví và nhận NFT - chỉ dành cho bạn, vì vậy bây giờ bạn có thể bắt đầu làm việc trên các phần thực sự "thú vị" của trò chơi mà không phải lo lắng về cách gọi trình duyệt Javascript từ Unity C#.
Bạn có thể xem bản demo về tích hợp ví này tại:
ti5gm-bqaaa-aaai-ab7oa-cai.raw.ic0.app
Mã dự án được đặt tại:
github.com/tommygames/ic-unity-template
Lưu ý: Dự án này tích hợp mô-đun npm có tên Reac-unity-webgl để cho phép Unity C# giao tiếp với trình duyệt Javascript để tích hợp Plug Wallet, nếu bạn không cần tích hợp ví hoặc khả năng tương tác Javascript, đừng làm theo hướng dẫn này, vì có nhiều cách dễ dàng hơn để triển khai các trò chơi Unity đơn giản tới IC.
Nếu bạn muốn xem cách tôi thiết lập dự án từ đầu, hãy bỏ qua phần Tạo dự án IC Unity từ Scratch; nếu bạn chỉ muốn tải xuống và triển khai dự án Unity, hãy chuyển sang phần Triển khai dự án IC Unity nếu bạn muốn; để xem mã hoạt động như thế nào, vui lòng đọc phần "Cách hoạt động" bên dưới.
nó hoạt động như thế nào
Việc tích hợp Plug Wallet yêu cầu 2 tính năng để hoạt động:
Unity C# gửi sự kiện tới trình duyệt Javascript
Trình duyệt gửi các sự kiện Javascript tới Unity
Đối với cả hai, chúng tôi sử dụng mô-đun npm có tên Reac-unity-webgl, có thể tìm thấy tài liệu ở đây:
npmjs.com/package/react-unity-webgl
Đối với tính năng đầu tiên, chúng tôi sử dụng plugin .jslib trong Unity để viết pseudo-Javascript (thường được gọi là UnityScript), đọc thêm về nó tại đây:
docs.unity3d.com/Manual/webgl-interactivewithbrowserscripting.html
Nếu bạn đã cài đặt mô-đun Reac-unity-webgl, các plugin .jslib này có thể gửi các sự kiện tới Javascript của trình duyệt React bằng cách gọi ClarkReactUnityEvent("EventName") mà bạn có thể thấy được triển khai trong tệp PlugUtils.jslib của dự án Unity.
Để gọi các hàm này, bạn phải nhập chúng vào C#, có thể xem ví dụ về điều này trong lớp PlugUtilsInternal trong tệp PlugUtils.cs.
Đối với hàm thứ hai, chúng tôi gọi unityContext.send("GameObjectName", "FunctionName", jsonData) từ mã javascript React, bạn có thể thấy cách triển khai nó trong lớp PlugUtils.js của ứng dụng React của chúng tôi.
Điều này sẽ gọi hàm được chỉ định trên GameObject đã chỉ định, ví dụ của tôi là tôi có một GameObject có tên là ReactApi trong MainScene và tập lệnh chứa một hàm có tên là HandleCallback.
Vì tôi muốn có các cuộc gọi lại bất cứ khi nào Unity nói chuyện với Javascript của trình duyệt, tôi lưu trữ một từ điển các cuộc gọi lại được liên kết với chỉ mục của nó trong tệp ReactApi.cs, để mọi giao tiếp giữa Unity và React đều phải thông qua tệp ReactApi và Cuộc gọi lại sẽ là được kích hoạt khi dữ liệu JSON được trả về.
Sau khi trả về dữ liệu JSON, tôi sử dụng Json.NET để giải tuần tự hóa dữ liệu thành một đối tượng được xác định trong tệp WalletDataTypes.cs.
Nếu dữ liệu JSON được giải tuần tự hóa thành công, nó sẽ hiển thị dữ liệu đó trên giao diện người dùng và đó là cách mọi thứ hoạt động.
Triển khai dự án IC Unity
1. Tải xuống các tệp dự án từ:
github.com/tommygames/ic-unity-template
2. Đảm bảo bạn đã cài đặt SDK hợp đồng thông minh vùng chứa Dfinity (Tôi đang sử dụng phiên bản 0.9.3 trong dự án này):
smartcontracts.org/docs/developers-guide/install-upgrade-remove.html
3. cd vào thư mục trong dự án Unity ic_unity_template (chứa dự án dfx).
4. Chạy npm install và đảm bảo tất cả các mô-đun nút được cài đặt chính xác, bạn có thể phải làm theo các hướng dẫn cụ thể để đảm bảo mô-đun nút dab-js được cài đặt chính xác, bạn có thể tìm thấy hướng dẫn tại đây:
docs.dab.ooo/nft-list/getting-started
5. Chạy dfx start --background trong thư mục ic_unity_template để khởi động môi trường IC cục bộ ở chế độ nền và chạy dfx triển khai để triển khai bộ chứa IC đến môi trường IC cục bộ. Sau khi quá trình triển khai hoàn tất, nó sẽ cho bạn biết một URL ở đâu. bạn có thể truy cập dự án.
6. Để triển khai dự án lên mạng blockchain công cộng mainnet, bạn cần cd vào thư mục ic_unity_template và chạy dfx triển khai --network=ic. Sau khi triển khai, nó sẽ cho bạn biết ID vùng chứa của vùng chứa ic_unity_template_assets mà bạn có thể truy cập. bằng cách truy cập dự án tại URL sau:
https://raw.ic0.app
LƯU Ý: Điều quan trọng là phải bao gồm từ khóa "thô" trong URL vì tệp Unity rất lớn và chỉ có thể được phân phát bằng từ khóa này.
Nếu bạn thực hiện các thay đổi đối với dự án Unity của mình và xây dựng lại dự án đó, hãy nhớ đặt tên cho bản dựng của bạn unity_build.
Sau khi quá trình xây dựng hoàn tất, hãy kéo các thư mục Build, TemplateData và StreamingAssets (nếu có) vào thư mục src/ic_unity_template_assets/assets của bạn (bạn có thể bỏ qua tệp index.html), sau đó bạn có thể triển khai lại vào vùng chứa.
Cảm ơn bạn đã đọc đến đây, đây là cách triển khai một dự án Unity mẫu có tích hợp Reac-unity-webgl để gọi giữa Javascript và C#, tôi hy vọng bạn thích đọc và chúc bạn may mắn trong cuộc phiêu lưu phát triển trò chơi của mình, xin vui lòng Theo dõi tôi trên Twitter (@tommyinvests), nơi tôi là nhà phát triển chính của trò chơi Plethora.
Tạo dự án IC Unity từ đầu
1. Tạo dự án Unity mới.
2. Tải xuống và cài đặt SDK hợp đồng thông minh vùng chứa Dfinity:
smartcontracts.org/docs/developers-guide/install-upgrade-remove.html
3. dfx là công cụ dòng lệnh chính để bắt đầu các dự án Dfinity mới. Nó sẽ tự động điền mã mẫu vào dự án. Bạn có thể tìm thấy tài liệu tại đây:
smartcontracts.org/docs/developers-guide/cli-reference.html
4. Mở dòng lệnh và cd vào thư mục dự án Unity, sau đó chạy dfx new project-name-goes-here để tạo một dự án mẫu mới có tên "project-name-goes-here", dự án này sẽ có trong tệp dự án Unity của bạn Tạo một dự án dfx mới trong thư mục.
Lưu ý: Bạn không phải tạo các dự án dfx trong thư mục dự án Unity, bạn cũng có thể đặt chúng vào một thư mục riêng.
5. Tiếp theo, bạn cần sửa đổi dự án dfx mẫu để tương thích với khung web React.
6. Chúng tôi sẽ sử dụng khung React làm trình bao bọc cho dự án Unity để cho phép gửi tin nhắn giữa mã javascript React và Unity C#, điều này giúp có thể tích hợp ví và cũng cung cấp cho bạn khả năng tích hợp các thành phần web (trong React) trong tính linh hoạt trong tương lai để phủ lên trò chơi của bạn nếu bạn muốn.
7. Tôi đã làm theo hướng dẫn Dfinity này để làm cho dự án của tôi tương thích với React:
smartcontracts.org/docs/developers-guide/tutorials/custom-frontend.html
Lưu ý: Bạn không cần phải làm theo tất cả các bước trong hướng dẫn, chỉ cần làm như sau:
Trong thư mục dự án của bạn chạy npm install --save Reac Reac-dom
Chạy npm install --save-dev Typescript ts-loader trong thư mục dự án của bạn
Mở webpack.config.js và thêm đoạn mã sau phía trên phần plugin:
Tạo một tệp mới có tên tsconfig.json trong thư mục gốc của dự án của bạn và dán đoạn mã sau vào đó:
8. Sau khi dự án dfx được thiết lập để tương thích với React, bạn cần tạo tệp dự án React. Tôi đã bắt đầu một dự án React mặc định bằng cách sử dụng công cụ dòng lệnh “Tạo ứng dụng React”:
Reacjs.org/docs/create-a-new-react-app.html
9. Sau khi dự án React được tạo, hãy sao chép index.html, index.js, index.css, App.js, App.css và bất kỳ tệp nào có liên quan khác trong thư mục scr của dự án React vào tệp srcdfxsrc/project_name_assets/src của thư mục dự án, đây là nơi chứa tất cả các tệp riêng tư của bạn, bạn cũng sẽ nhận thấy rằng bên cạnh thư mục nội dung có một thư mục src, đây là nơi chứa tất cả các tệp công khai của bạn, bao gồm cả các tệp bản dựng Unity của bạn.
10. Khi bạn đã sao chép các tệp React vào dự án dfx của mình, bạn cần đảm bảo rằng bạn đã cài đặt các mô-đun npm sau cho dự án của mình.
11. Mô-đun Reac-unity-webgl rất quan trọng vì nó cho phép chúng ta gửi các sự kiện giữa React và Unity, những sự kiện này sẽ cho phép Unity tương tác với Javascript của trình duyệt và kết nối với Plug Wallet, bạn có thể tìm tài liệu của nó tại đây:
npmjs.com/package/react-unity-webgl
Bạn có thể cài đặt nó bằng cách chạy lệnh sau trong thư mục dự án dfx:
Sau khi cài đặt, hãy làm theo hướng dẫn trong tài liệu Reac-unity-webgl để sửa đổi tệp App.js của bạn. Cách triển khai cơ bản của App.js trông như sau:
12. Mô-đun dab-js là một thư viện do Psychedelic tạo ra để giúp chúng tôi truy vấn cơ sở dữ liệu NFT của họ, điều này sẽ cho phép chúng tôi lấy tất cả các NFT hiện có trong ví Plug của người dùng.
Lưu ý: Quá trình cài đặt module npm này hơi phức tạp, bạn cần tạo access token Github và đăng nhập trước khi tải module, vui lòng làm theo hướng dẫn tại đây:
docs.dab.ooo/nft-list/getting-started
13. Cuối cùng, bạn cần đảm bảo rằng các mô-đun @dfinity/agent, @dfinity/principal và @dfinity/candidnpm của bạn đang sử dụng phiên bản 0.9.3 trở xuống, vì mô-đun dab-js hiện chỉ hỗ trợ những mô-đun này do mã hóa ID chính thay đổi phiên bản hoặc thấp hơn, bạn có thể chạy lệnh sau để đảm bảo phiên bản đó:
14. Bây giờ bạn cần xây dựng dự án Unity của mình, mở Unity và đi tới Tệp->Cài đặt bản dựng và chuyển sang nền tảng WebGL.
15. Sau đó, đi tới Chỉnh sửa-> Cài đặt dự án và đặt “Định dạng nén” thành Tắt. Các bộ chứa IC hiện không hỗ trợ các định dạng nén Gzip hoặc Brotli.
16. Cuối cùng, quay lại cài đặt bản dựng và nhấp vào nút "Bản dựng". Tên bản dựng bạn đã chỉ định cũng sẽ thay đổi tiền tố của tệp bản dựng, hãy gọi "BestGame" của chúng tôi. Sau khi bản dựng hoàn tất, hãy thêm Bản dựng, Thư mục templateData và StreamingAssets (nếu chúng tồn tại) vào thư mục dfx src/project_name_assets/assets trong dự án của bạn (bạn có thể bỏ qua tệp index.html), sau đó bạn cần quay lại bước 11 và chỉnh sửa App.js của mình để lấy đường dẫn tệp chính xác cho tệp bản dựng của bạn, nếu tên bản dựng của chúng tôi là "BestGame", thì tệp App.js của chúng tôi sẽ trông như thế này:
17. Sau khi hoàn tất bước này, bạn có thể tải trò chơi của mình lên IC, cd vào thư mục dự án dfx của bạn và chạy dfx start --background để khởi động môi trường IC cục bộ ở chế độ nền, sau đó chạy dfx triển khai sẽ mang lại IC Unity của bạn trò chơi được triển khai vào môi trường IC cục bộ và sau khi được triển khai, nó sẽ cho bạn biết URL mà qua đó bạn có thể truy cập trò chơi của mình.
18. Để triển khai trò chơi IC của bạn lên mạng blockchain công cộng mainnet, bạn cần cd vào thư mục dự án dfx và chạy dfx triển khai --network=ic. Sau khi triển khai, nó sẽ cho bạn biết ID vùng chứa của vùng chứa project_name_assets. trò chơi có thể được truy cập bằng cách truy cập:
https://raw.ic0.app
LƯU Ý: Điều quan trọng là phải bao gồm từ khóa "thô" trong URL vì tệp Unity rất lớn và chỉ có thể được phân phát bằng từ khóa này.
Cảm ơn bạn đã đọc đến đây, đây là cách bạn có thể tạo một dự án Unity có tích hợp Reac-unity-webgl và triển khai nó vào một vùng chứa để gọi giữa Javascript và C#, tôi hy vọng bạn thích đọc và tôi chúc bạn những điều tốt đẹp nhất trong trò chơi của mình cuộc phiêu lưu phát triển Chúc may mắn và vui lòng liên hệ với tôi trên Twitter (@tommyinvests), tôi là nhà phát triển chính của trò chơi Plethora.
Nội dung IC bạn quan tâm
Tiến độ Công nghệ Thông tin Dự án |
Thu thập và theo dõi Kênh IC Binance
Luôn cập nhật những thông tin mới nhất