Перевод. Оригинальная статья: Launching HTML5 Games In The ARK Desktop Wallet Part Six
https://blog.ark.io/launching-html5-games-in-the-ark-desktop-wallet-part-six-ad887fd2e888Запуск HTML5 игр в ARK Desktop Wallet - часть шестая
Добро пожаловать в заключительную часть нашего учебного цикла, посвященного запуску игры HTML5 в ARK Desktop Wallet c ARK Core и
Construct 3! Мы прошли долгий путь от нашего первого урока. На данный момент мы создали целую блокчейн-игру, включающую лобби, ставки, всю игровую логику, выплату призов или возврат ставок.
Осталось настроить нашу игру для запуска в качестве плагина внутри ARK Desktop Wallet. Это повлечет за собой экспорт нашей игры в формате HTML5 и создание основного плагина для загрузки нашей игры в кошелек. Этот плагин не является тем плагином Core, который мы уже сделали, поскольку он уже завершен и работает на нашем сервере. Вместо этого мы создадим плагин Desktop Wallet, который появится в менеджере плагинов в ARK Desktop Wallet. Как только мы это сделаем, наша игра будет представлена совершенно новой аудитории, которая сможет скачать, установить и играть в нашу игру!
Оптимизация вашей игры для запуска в качестве плагина в ARK Desktop WalletВо-первых, нам нужно экспортировать законченную игру в виде страницы HTML5 и загрузить все на доступный Интернет HTTP-сервер. Для этого мы выбираем Project> Export в меню Construct 3.
Загрузка игры
Затем нам предоставляется ряд различных платформ, на которые мы можем экспортировать нашу игру, например HTML5, для Facebook, для Android, iOS или Windows Store. Кто знает, может быть, однажды появится возможность экспортировать напрямую в Менеджер плагинов ARK, но сейчас выберите Web (HTML5) и нажмите кнопку Далее.
Мы хотим экспортировать в веб (HTML5)
Это покажет нам другое диалоговое окно, чтобы выбрать наши параметры экспорта. Мы хотим обеспечить дедупликацию изображений, повторное сжатие изображений и использование режима простой минимизации. Это экономит место и уменьшает размер данных в нашей игре. Затем нажмите Next, и процесс экспорта начнется. Это может занять несколько минут, поэтому возьмите свой любимый напиток и сделайте заслуженный перерыв!
Наши выбранные варианты экспорта
Когда это будет сделано, вам будет представлена ссылка для загрузки завершенной игры в виде ZIP-архива. Распакуйте его и загрузите его содержимое на ваш доступный в Интернете сервер. Для целей данного руководства оно было загружено по адресу
https://www.arkfun.io/connect-4/.
Теперь, когда наша игра онлайн, пришло время сделать плагин Desktop Wallet. Для этого выполните действия, описанные в
ARK Learning Hub, чтобы настроить подключаемый модуль Desktop Wallet. Когда вы это сделаете, мы внесем необходимые изменения, чтобы запустить нашу игру.
Прежде всего, мы собираемся отредактировать наш файл package.json, чтобы изменить некоторые разрешения. Это связано с тем, что некоторые функции настольного кошелька требуют авторизации от конечного пользователя для обеспечения безопасности.
Файл шаблона package.json из начального проекта выглядит следующим образом:
"version": "0.0.1",
"description": "Testing my first plugin on Ark Desktop Wallet",
"main": "src/index.js",
"desktop-wallet": {
"title": "My First Plugin",
"permissions": [
"COMPONENTS",
"ROUTES",
"MENU_ITEMS"
]
}
}
Нам нужно добавить разрешение WEB FRAME в этот список, чтобы мы могли открывать внешние веб-страницы внутри нашего плагина. Добавьте его в новую строку сразу после пунктов меню, например:
"permissions": [
"COMPONENTS",
"ROUTES",
"MENU_ITEMS",
"WEBFRAME"
]
Мы также собираемся добавить пару новых разделов в наш файл package.json, в котором наш плагин будет отображаться в категории «Игры» ARK Desktop Wallet с некоторыми ключевыми словами, которые помогут людям найти нашу игру:
"desktop-wallet": {
"categories": [
"gaming"
]
},
"keywords": [
"@arkecosystem",
"desktop-wallet",
"plugin",
"game",
"games",
"gaming",
"connect 4",
"multiplayer",
"pvp"
]
Обратите внимание, что первые три ключевых слова выделены жирным шрифтом. Это потому, что они необходимы для того, чтобы наш плагин появлялся в менеджере плагинов после его публикации. Любые дополнительные ключевые слова будут использоваться в поисковой системе в менеджере плагинов, чтобы помочь другим найти ваш плагин. Также не забудьте изменить имя, версию, заголовок и описание, чтобы они соответствовали деталям вашего плагина, и когда вы закончите, вы можете сохранить и закрыть файл. Теперь откройте my-first-plugin.js, который является частью плагина Desktop Wallet. Замените все содержимое на (замените <your URL>, где будет размещаться ваша игра):
module.exports = {
template: '<div class="flex flex-1 bg-theme-feature rounded-lg overflow-y-auto"><WebFrame class="w-full rounded-lg" src="<your url>"></div>'
}
Вы, наверное, уже хорошо представляете, что этот код делает. Он визуализирует компонент WebFrame (помните, что ранее было разрешено WEBFRAME?) Внутри элемента <div>, стилизованного с использованием внутренних классов ARK Desktop Wallet, чтобы сделать компонент полноразмерным с округленными краями, чтобы он вписывался в общий эстетический стиль ARK Desktop Wallet.
Мы также установили источник WebFrame в место, куда мы загрузили нашу игру HTML5, поскольку именно это мы будем отображать в нашем компоненте WebFrame.
Сохраните наш файл, и, барабанная дробь, пожалуйста, мы внесли все необходимые изменения! Если вы перезапустите ARK Desktop Wallet и включите наш плагин из Менеджера плагинов, как описано в статье ARK Learning Hub ранее, вы должны увидеть запуск нашей игры изнутри кошелька.
Наша игра работает в ARK Desktop Wallet
Осталось только опубликовать нашу игру, чтобы другие могли ее найти и поиграть! Для этого потребуется бесплатный аккаунт на
https://www.npmjs.com. Если у вас уже есть, отлично, если нет, то
зарегистрируйтесь сейчас. Затем в командной строке внутри папки, в которой вы создали плагин Desktop Wallet, введите npm login и введите свои учетные данные для входа в свой аккаунт NPM. Запустите команду npm publish --access public, и вы увидите, как по экрану летят различные фрагменты текста. Когда он будет завершен, ваша работа будет завершена, и ваш готовый плагин теперь будет доступен по всему миру в Менеджере плагинов в
ARK Desktop Wallet.
Наша игра доступна в ARK Desktop Wallet
Следующие шагиПоздравляем, ваша игра теперь доступна в ARK Desktop Wallet! Мы надеемся, что вы нашли эту серию полезной. Это отличный способ для разработчиков добавить функциональность блокчейна в свои игры, получить дополнительный доход и представить свою игру новой аудитории!
Если вы застряли в какой-то момент, обязательно ознакомьтесь с нашими документами в центре
обучения ARK. Кроме того, наша команда и разработчики активны в
Slack , поэтому не стесняйтесь обращаться к нам!
Проверьте предыдущие статьи из этой серии здесь:
Часть первая:
Как импортировать адрес кошелька ARK в ваше приложение Часть вторая:
Создание бэкенда для вашего плагина Часть третья:
Как заставить вашу игру работать с системой ставок Часть четвертая:
Внедрение игровой логики в ваш плагин Часть пятая:
Реализация призовой логики