привет! Если вы разработчик игр и хотите создать игру, размещенную на блокчейне компьютеров в Интернете, вам повезло.

Я создал простой проект Unity, чтобы продемонстрировать интеграцию кошелька и получение NFT — специально для вас, так что теперь вы можете начать работать над действительно «забавными» частями игры, не беспокоясь о том, как вызвать Javascript браузера из Unity C#.

Вы можете просмотреть демо-версию интеграции этого кошелька по адресу:

  • ti5gm-bqaaa-aaaai-ab7oa-cai.raw.ic0.app

Код проекта находится по адресу:

  • github.com/tommygames/ic-unity-template

Демо-шаблон IC Unity

Примечание. В этот проект интегрирован модуль npm под названием response-unity-webgl, позволяющий Unity C# взаимодействовать с браузером Javascript для интеграции Plug Wallet. Если вам не нужна интеграция кошелька или совместимость Javascript, не следуйте этому руководству, поскольку есть более простые способы. для развертывания простых игр Unity на микросхемах.

Если вы хотите увидеть, как я настраивал проект с нуля, перейдите к разделу «Создание проекта IC Unity с нуля», если вы просто хотите загрузить и развернуть проект Unity, перейдите к разделу «Развертывание проекта IC Unity», если хотите; Чтобы увидеть, как работает код, прочтите раздел «Как он работает» ниже.

как это работает

Для работы интеграции Plug Wallet необходимы две функции:

  • Unity C# отправляет события в браузер Javascript

  • Браузерный Javascript отправляет события в Unity

В обоих случаях мы используем модуль npm под названием response-unity-webgl, документацию которого можно найти здесь:

  • npmjs.com/package/react-unity-webgl

В качестве первой функции мы используем плагин .jslib в Unity для написания псевдоJavascript (часто называемого UnityScript), подробнее об этом читайте здесь:

  • docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html

Если у вас установлен модуль response-unity-webgl, эти плагины .jslib могут отправлять события в Javascript браузера React, вызывая sendReactUnityEvent("EventName"), который вы можете увидеть реализованным в файле PlugUtils.jslib проекта Unity.

Для вызова этих функций необходимо импортировать их в C#. Пример этого можно увидеть в классе PlugUtilsInternal в файле PlugUtils.cs.

Для второй функции мы вызываем unityContext.send("GameObjectName", "FunctionName", jsonData) из кода JavaScript React, ее реализацию можно увидеть в классе PlugUtils.js нашего приложения React.

Это вызовет указанную функцию для указанного GameObject. В моем примере у меня есть GameObject под названием ReactApi в MainScene, а скрипт содержит функцию HandleCallback.

Поскольку я хочу иметь обратные вызовы всякий раз, когда Unity взаимодействует с Javascript браузера, я сохраняю словарь обратных вызовов, связанный с его индексом, в файле ReactApi.cs, так что любая связь между Unity и React должна проходить через файл ReactApi, и обратный вызов будет срабатывает, когда возвращаются данные JSON.

После возврата данных JSON я использую Json.NET для десериализации данных в объект, который определен в файле WalletDataTypes.cs.

Если данные JSON успешно десериализуются, они отображают их в пользовательском интерфейсе, и именно так все и работает.

Развертывание проекта IC Unity

1. Загрузите файлы проекта с:

  • github.com/tommygames/ic-unity-template

2. Убедитесь, что у вас установлен Dfinity Container Smart Contract SDK (в этом проекте я использую версию 0.9.3):

  • smartcontracts.org/docs/developers-guide/install-upgrade-remove.html

3. перейдите в папку внутри проекта Unity ic_unity_template (которая содержит проект dfx).

4. Запустите npm install и убедитесь, что все модули узлов установлены правильно. Возможно, вам придется следовать конкретным инструкциям, чтобы убедиться, что модуль узла dab-js установлен правильно. Инструкции можно найти здесь:

  • docs.dab.ooo/nft-list/начало работы

5. Запустите dfx start --background в папке ic_unity_template, чтобы запустить локальную среду IC в фоновом режиме, и запустите dfx Deploy, чтобы развернуть контейнер IC в локальной среде IC. После завершения развертывания вам будет сообщен URL-адрес, по которому вы можете разместить контейнер IC. вы можете получить доступ к проекту.

6. Чтобы развернуть проект в общедоступной сети блокчейна основной сети, вам необходимо перейти в папку ic_unity_template и запустить dfx Deploy --network=ic. После развертывания он сообщит вам идентификатор контейнера ic_unity_template_assets, к которому вы можете получить доступ. доступ к проекту по следующему URL-адресу:

  • https://.raw.ic0.app 

ПРИМЕЧАНИЕ. Важно включить ключевое слово «raw» в URL-адрес, поскольку файлы Unity очень велики и могут обслуживаться только с использованием этого ключевого слова.

Если вы вносите изменения в свой проект Unity и пересобираете его, обязательно назовите свою сборку unity_build.

После завершения сборки перетащите папки Build, TemplateData и StreamingAssets (если они есть) в папку src/ic_unity_template_assets/assets (файл index.html можно игнорировать), а затем можно выполнить повторное развертывание в контейнере.

Спасибо, что дочитали до этого момента, это как развернуть пример проекта Unity с интеграцией response-unity-webgl для вызовов между Javascript и C#. Надеюсь, вам понравилось чтение, и желаю вам удачи в вашем приключении по разработке игр, пожалуйста, не стесняйтесь Следуйте за мной в Твиттере (@tommyinvests), где я являюсь ведущим разработчиком игры Plethora.

Создайте проект IC Unity с нуля.

1. Создайте новый проект Unity.

2. Загрузите и установите SDK смарт-контракта контейнера Dfinity:

  • smartcontracts.org/docs/developers-guide/install-upgrade-remove.html

3. dfx — основной инструмент командной строки для запуска новых проектов Dfinity. Он автоматически заполняет проект кодом шаблона. Документацию можно найти здесь:

  • smartcontracts.org/docs/developers-guide/cli-reference.html

4. Откройте командную строку и перейдите в папку проекта Unity, затем запустите dfx new project-name-goes-here, чтобы создать новый шаблон проекта с именем «project-name-goes-here», который будет в вашем файле проекта Unity. Создайте в папке новый проект dfx.

Примечание. Вам не обязательно создавать проекты dfx в папке проекта Unity, вы также можете поместить их в отдельную папку.

5. Далее вам необходимо изменить шаблон проекта dfx, чтобы он был совместим с веб-инфраструктурой React.

6. Мы будем использовать среду React в качестве оболочки для проекта Unity, чтобы разрешить отправку сообщений между кодом JavaScript React и Unity C#. Это делает возможной интеграцию кошелька, а также дает вам возможность интегрировать веб-компоненты (в React) в будущее. Гибкость, позволяющая накладывать вашу игру, если хотите.

7. Я следовал этому руководству Dfinity, чтобы сделать свой проект совместимым с React:

  • smartcontracts.org/docs/developers-guide/tutorials/custom-frontend.html 

Примечание. Вам не обязательно выполнять все действия, описанные в руководстве, достаточно лишь следующих:

  • В папке вашего проекта запустите npm install --save реагируйте на реакцию-dom

  • Запустите npm install --save-dev typescript ts-loader в папке вашего проекта.

  • Откройте webpack.config.js и добавьте следующий код над разделом плагинов:

  • Создайте новый файл с именем tsconfig.json в корневом каталоге вашего проекта и вставьте в него следующий код:

8. После того, как проект dfx настроен на совместимость с React, вам необходимо создать файл проекта React. Я запустил проект React по умолчанию с помощью инструмента командной строки «Создать приложение React»:

  • реакцииjs.org/docs/create-a-new-react-app.html

9. После создания проекта React измените index.html, index.js, index.css, App.js, App.css в папке scr проекта React. и любые другие соответствующие файлы в папку srcdfxsrc/project_name_assets/src вашего проекта. Здесь хранятся все ваши личные файлы. Вы также заметите, что рядом с папкой ресурсов есть папка src, здесь находятся все ваши общедоступные файлы. расположение, включая файлы сборки Unity.

10. После того, как вы скопировали файлы React в свой проект dfx, вам необходимо убедиться, что для вашего проекта установлены следующие модули npm.

11. Модуль реагирования-unity-webgl очень важен, поскольку он позволяет нам отправлять события между React и Unity. Эти события позволят Unity взаимодействовать с Javascript браузера и подключаться к Plug Wallet. Его документацию можно найти здесь:

  • npmjs.com/package/react-unity-webgl

Вы можете установить его, выполнив следующую команду в папке проекта dfx:

После установки следуйте инструкциям в документации по реагированию на единство-webgl, чтобы изменить файл App.js. Базовая реализация App.js выглядит следующим образом:

12. Модуль dab-js — это библиотека, созданная Psychedelic, чтобы помочь нам запросить их базу данных NFT, что позволит нам получить все NFT, которые в настоящее время находятся в кошельке Plug пользователя.

Примечание. Процесс установки этого модуля npm немного сложен. Вам необходимо создать токен доступа Github и войти в систему перед загрузкой модуля. Следуйте инструкциям здесь:

  • docs.dab.ooo/nft-list/начало работы

13. Наконец, вам необходимо убедиться, что ваши модули @dfinity/agent, @dfinity/principal и @dfinity/candidnpm используют версию 0.9.3 или ниже, поскольку модуль dab-js в настоящее время поддерживает только их из-за кодирования идентификатора участника. меняет версию или более раннюю, вы можете запустить следующую команду, чтобы убедиться в этой версии:

14. Теперь вам нужно собрать проект Unity, открыть Unity, перейти в «Файл» -> «Настройки сборки» и переключиться на платформу WebGL.

15. Затем перейдите в «Правка» -> «Настройки проекта» и установите для параметра «Формат сжатия» значение «Отключено». Контейнеры IC в настоящее время не поддерживают форматы сжатия Gzip или Brotli.

16. Наконец, вернитесь к настройкам сборки и нажмите кнопку «Построить». Указанное вами имя сборки также изменит префикс файла сборки, назовем наш «BestGame». После завершения сборки добавьте сборку. TemplateData и StreamingAssets (если они существуют). Перетащите папку в папку src/project_name_assets/assets dfx вашего проекта (вы можете игнорировать файл index.html), затем вам нужно вернуться к шагу 11 и отредактировать свой App.js. Чтобы получить правильный путь к файлу сборки, если имя нашей сборки было «BestGame», тогда наш файл App.js будет выглядеть так:

17. После завершения этого шага вы можете загрузить свою игру на IC, перейти в папку проекта dfx и запустить dfx start --background, который запустит локальную среду IC в фоновом режиме, а затем запустить dfx Deploy, который вернет ваш IC Unity. игры развертываются в локальной среде IC, и после развертывания вам будет сообщен URL-адрес, по которому вы сможете получить доступ к своей игре.

18. Чтобы развернуть вашу IC-игру в общедоступной сети блокчейна основной сети, вам необходимо перейти в папку проекта dfx и запустить dfx Deploy --network=ic. После развертывания вам будет сообщен идентификатор контейнера project_name_assets. Доступ к игре можно получить, посетив:

  • https://.raw.ic0.app

ПРИМЕЧАНИЕ. Важно включить ключевое слово «raw» в URL-адрес, поскольку файлы Unity очень велики и могут обслуживаться только с использованием этого ключевого слова.

Спасибо, что дочитали до этого места. Вот как вы можете создать проект Unity с интеграцией response-unity-webgl и развернуть его в контейнере для вызовов между Javascript и C#. Надеюсь, вам понравилось читать, и желаю вам всего наилучшего в вашей игре. приключения в разработке. Удачи и не стесняйтесь писать мне в Твиттере (@tommyinvests), я ведущий разработчик игры Plethora.

IC-контент, который вам важен

Технологический прогресс | Информация о проекте Глобальные события |

Собирайте и следите за IC Binance Channel

Будьте в курсе самой последней информации