machinelearningmastery.ru

Машинное обучение, нейронные сети, искусственный интеллект
Header decor

Home

Создание собственных HTML5-игр в приложениях Ionic Capacitor с использованием Phaser

Дата публикации Oct 3, 2019

В этом посте вы узнаете, как создавать HTML5-игры с использованием Phaser в приложениях Capacitor Ionic. Мы создадим Zombie Walker и игру Space Invader, в которую вы можете играть как в приложении, так и в браузере. Space Invader была первой игрой, которую я разработал еще в школе, в JAVA, так что для меня это «Привет мир»!

Space Invaders, встроенный в ионный конденсатор с каркасом Phaser

HTML5-игры могут быть сделаны с использованием инфраструктуры Phaser, которая является отличной средой для разработки 2D-игр. Конденсатор - это последнее новшество в мире гибридных приложений. Он создан, чтобы заменить и улучшить Cordova. Мы узнаем больше об этом в следующих разделах.

Эта демонстрация поддерживаетсяIonic 4 Full App Стартериз Enappd. Полный исходный код этого урока доступен в репозитории Github -Ионные-4-фазер(Ветвь ZMB_capacitor и ветка SI_capacitor)

Давайте посмотрим краткое введение в каждую из включенных структур:

  1. ионный
  2. Конденсатор
  3. фазовращатель

Ionic Framework

Вы, наверное, уже знаете об Ionic, но я выкладываю его сюда только для начинающих.ионныйSDK для разработки гибридных мобильных приложений. Он предоставляет инструменты и услуги для разработки гибридных мобильных приложений с использованием веб-технологий, таких как CSS, HTML5 и Sass. Приложения могут создаваться с использованием этих веб-технологий, а затем распространяться через собственные магазины приложений. Эти приложения могут быть установлены на устройствах, используяКордоваили конденсаторная среда.

Итак, другими словами - если вы создаете собственные приложения в Android, вы создаете код на Java. Если вы создаете собственные приложения в iOS, вы пишете код в Obj-C или Swift. Оба они мощные, но сложные языки.С помощью Cordova (и Ionic) вы можете написать один фрагмент кода для своего приложения, который может работать как на iOS, так и на Android.(и Windows!), это тоже с простотой HTML, CSS и JS.

Важно отметить вклад Cordova / Capacitor в это. Ionic - это всего лишь оболочка пользовательского интерфейса, состоящая из HTML, CSS и JS. Таким образом, по умолчанию Ionic не может работать как приложение на устройстве iOS или Android. Cordova / Capacitor - это среда сборки, которая заключает в себе это веб-приложение Ionic и преобразует его в приложение, устанавливаемое на устройстве, наряду с предоставлением этому приложению доступа к собственным API, таким как Camera и т. Д.

Phaser Game Framework

Phaser, впервые выпущенный в 2013 году, является средой разработки 2D-игр на HTML5. Теперь это стало громким именем в 2D HTML5 играх. Основанный на javascript, он может быть легко интегрирован в различные структуры javascript. 👾 👾 👾

Так зачем объединять Phaser и Ionic? 🚀 👾

В то время как Ionic дает вам возможность создавать приложения и PWA с молниеносной скоростью, вы не можете создавать игры с его помощью. Phaser, хотя и хорош в создании игр, на самом деле не имеет отношения к созданию структурированного мобильного или веб-приложения. Следовательно, для создания аккуратного игрового приложения или PWA с помощью Phaser требуется оболочка HTML + CSS, пустота, которую Ionic прекрасно заполняет.

Что такое конденсатор?

Cordova помогает встроить Ionic веб-приложение в приложение, устанавливаемое на устройстве. Но есть некоторые ограничения Cordova, которые Capacitor пытается преодолеть с помощью нового рабочего процесса приложения.

Capacitor - это кроссплатформенная среда выполнения приложений, которая позволяет легко создавать веб-приложения, которые изначально работают на iOS, Android, Electron,а такжепаутина. Ионные люди называют эти приложения «родными прогрессивными веб-приложениями», и они представляют собой следующую эволюцию после гибридных приложений. Он был построен для Ionic, но может работать и с другими фреймворками. Это просто система времени выполнения, которая «контейнерирует» ваше веб-приложение и позволяет ему работать в нескольких местах. С конденсатором вы можете запустить свою игру в

  • Android-приложение
  • приложение для iOS
  • В браузере в качестве прогрессивного веб-приложения и
  • В настольном приложении используется Electron

По сути, Capacitor - это свежая, более гибкая версия Cordova. Это делает работу по запуску гибридных приложений на различных платформах очень простой.

Структура Почты

Мы будем следовать пошаговому подходу к созданию игры на базе Phaser в нашем приложении Ionic 4 Capacitor. Ниже приведены шаги

  • Шаг 1 - Создать базовыйIonic 4 Angularприложение
  • Шаг 2 - Включите Phaser в проект
  • Шаг 3. Интеграция конденсатора в приложение
  • Шаг 4 - Реализация игры Phaser
  • Шаг 5. Соберите игру в мобильное приложение.

Это то, что мы собираемся построить в этом уроке.

Ходьба зомби - Использование Phaser в конденсаторном приложении

Так что давайте погрузимся прямо в!

Шаг 1. Создание базового приложения Ionic 4 Angular

Я подробно рассмотрел эту тему вэтот блог,

Короче говоря, шаги, которые вы должны предпринять здесь

  • Убедитесь, что в системе установлен узел (V10.0.0 на момент публикации этого блога)
  • устанавливатьионный клииспользуя npm (моя ионная версия ^ 4.7.1)
  • Создать приложение Ionic с помощьюionic start

Вы можете создатьsidemenuстартер ради этого урока. На бегуionic start ioniser sidemenu, узлы модули будут установлены. После завершения установки запустите приложение в браузере, используя

$ ionic serve

и проверить все работает нормально Для меня это выглядит следующим образом. Скопируйте код из прилагаемого репозитория Github, чтобы превратить его в игру.

Шаг 2: Включите Phaser в проект

Phaser очень легко включить в проект. По сути, это просто файл Javascript, который нужно включить в ваш проект HTML5. Есть два способа сделать это

# 1 - Крутой способ "просто сделай это" (быстрее)

Скачатьphaser.min.jsотОфициальные загрузки Phaserи связать его с вашим проектом. Для демонстрации я буду хранить этот файл вassetsпапку, но вы также можете связать ее с CDN.

Включите файл phaser.js вindex.htmlфайлы следующим образом

<script src="assets/phaser.min.js"></script>

Теперь вы можете включить фазер в свой компонент.tsфайлы, использующие

declare var Phaser;

(Чтобы проверить чтоPhaserсодержит, попробуйте утешить переменную или ееdefaultStateсохранено вthisи вы получите представление о построении Phaser.)

№ 2 - Комплексный способ «Я-кодирующий ботаник»

Загрузите пакет npm от phaser с помощью

npm install phaser-ce

ПодготовитьWebPackскомпилировать пакет phaser, чтобы вы моглиimportпакет в файле .ts. Возможно, вам придется подготовить свой собственный webpack-config для этого и установить дополнительные модули. После этого вы можете импортировать переменные как

import "pixi";
import "p2";
import * as Phaser from "phaser-ce";

Подробности даныВот(Последнее, что я пробовал, у этого метода были различные ошибки в Ionic, поэтому я буду придерживаться метода # 1)

Шаг 3. Интеграция конденсатора в приложение

Конденсатор также можно подключить к существующему приложению Ionic. Чтобы подключить Capacitor к существующему приложению Ionic, запустите

$ ionic integrations enable capacitor

Это прикрепит конденсатор к вашему ионному приложению. После этого вы должныinitприложение конденсатора с

$ npx cap init YOUR_APP_NAME YOUR_APP_ID

Шаг 4: внедрить игру Phaser

Вы можете найти полный код вIonic 4 Phaser Starter(Ветвь ZMB_capacitor)

Для примера мы будем использовать простойПример фазерагде мы сделаемЖивой мертвецходить.

Мы сосредоточимся наhomeкомпонент, который поставляется вместе со стартером. Таким образом, весь соответствующий код JavaScript будет идти вhome.page.tsфайл. Заменить весь контент вhome.page.htmlфайл со следующим

<ion-content>
<div id="phaser-example"></div>
</ion-content>

Мы определимphaser-exampleв нашей логике JavaScript и создать экземпляр игры в этом div.

Базовая игра Phaser имеет три функции по умолчанию - preload (), create () и update ()

Преднатяги ()

Как следует из названия, предварительная загрузка ресурсов и т. Д. В нашем случае эта функция будет загружать изображения зомби и фона.

preload() {this.game.load.image('lazur', 'assets/thorn_lazur.png');this.game.load.spritesheet('mummy', 'assets/metalslug_mummy37x45.png', 37, 45, 18);}

Создайте()

Создает экземпляр игры и загружает состояние игры. В нашей игре эта функция будет устанавливать изображения на сцене. Мы также создадим и настроим слушателей анимации здесь.

create() {// Set backgroundthis.back = this.game.add.image(0, -400, 'lazur');this.back.scale.set(2);this.back.smoothed = false;// Set mummy from a spritethis.mummy = this.game.add.sprite(200, 360, 'mummy', 5);this.mummy.scale.set(4);this.mummy.smoothed = false;// Set mummy animationthis.anim = this.mummy.animations.add('walk');this.anim.onStart.add(that.animationStarted, this);this.anim.onLoop.add(that.animationLooped, this);this.anim.onComplete.add(that.animationStopped, this);this.anim.play(10, true);}

Обновить()

Обновите состояние игры по циклам, действиям, физическим взаимодействиям и т. Д. Для нашей игры это обновит анимацию, перемещая фон, чтобы создать эффект «прогулки».

update() {if (this.anim.isPlaying) { this.back.x -= 1;}}

и тада !!! Game 🎉🎉 Наша игра работает вобслуживатьокно

Основная игра Phaser в браузерном приложении Capacitor

Таким же образом вы можете запустить любую игру Phaser с Ionic. Поверьте мне, есть некоторые невероятно выглядящиеигры сделанные в Phaser, Мы сделали копию Mario некоторое время назад, а также Space Invader!

⭐️️️️⭐️️️️⭐️️️️ Важно️️ ⭐️️️️⭐️️️️⭐️️️️

Реализация Phaser может сбить вас с толку с реализациейthis, Короче говоря, после инициализации сцены Phaser,thisсодержит состояние игры по умолчанию. Как разработчик Ionic, или если вы будете следовать документации Ionic, вы будете использоватьthisссылаться на класс компонента. Таким образом, вы в конечном итоге использовать конфликтующиеthis, Для быстрого обхода, я назначаю Ionicthisв другую переменнуюthat(😅), а затем используйте его, чтобы указать на функции класса.

Распространенной ошибкой является объявлениеthat = this, Да, это ссылкаthisс помощьюthat, но как толькоthisизменения,thatтакже меняется, и, следовательно, нет смысла делать это. Вы могли бы сделатьthat = Object.assign({},this)который является хорошим стандартным кодом. Но вы обнаружите, что это также не приводит к тому, что мы хотим. Потому что в ионикеthisсодержит классфункциивнутри_prototype, чтобы скопировать эти функции вthatвы должны определить это как

that = Object.create(this.constructor.prototype);

А потом использоватьthatна местеthisвызывать функции

Например.that.animationStartedуказывает на функциюanimationStarted, С помощьюthisздесь выкинет ошибку, потому чтоcreate()Функция по умолчанию Phaser и содержит состояние сцены по умолчанию внутриthis

Если вас не устраиваетthisконцепция, вы можете прочитать больше об этомВот,

(В качестве другого обходного пути вы можете поместить полный код javascript вне реализации класса Ionic, или, что еще хуже, в<script></script>отметить вindex.html, но это слишком много взломать. Вы не сможете писать огромные игровые коды таким образом)

Шаг 5: встроить игру в мобильное приложение

Создание приложения Capacitor с помощью Phaser точно такое же, как создание обычного приложения Capacitor. Для тех, кто не знаком с процессом в Ionic 4, сначала создайте ионные веб-ресурсы

$ ionic build

Затем добавьте платформу в приложение, используя любую из этих команд

$ npx cap add android
$ npx cap add ios

После добавления платформы вы можете открыть собственную IDE этой платформы и запустить приложение на устройстве или в симуляторе.

$ npx cap open android // opens Android Studio
$ npx cap open ios // opens Xcode

Вы можете настроитьcanvasразмер в соответствии с размером устройства с помощьюwindow.innerWidthа такжеwindow.innerHeight, С этим вы можете настроить игровой холст для всех мобильных устройств размеров

Зомби ходьба - игра Phaser на ионном конденсаторе, работающая на устройстве Android

С этими настройками игра выглядит как выше. Не плохо, да 👻

Классная вещь, вы все еще можете иметьsidemenu, иливкладкикак мобильное приложение, и включите в игру все обычные функции приложения (или наоборот), такие как вход в систему, регистрация и т. д. с использованием плагинов Ionic.

Космические захватчики ?

Думаете о создании собственной игры PUBG или космического захватчика на Ionic? У нас есть кое-что для вас! Мы включили игру Space Invader в репозиторий Ionic Capacitor Github -Ионные-4-фазер(Ветвь SI_capacitor)

Space Invaders в Ionic + Phaser - Использование конденсатора в браузере

Запустите код изSI_capacitorфилиал репо, и вы получите классное игровое приложение Space Invader! Похоже, это на устройстве Android

Space Invaders в Ionic + Phaser - Использование конденсатора в Android

Вывод

Ionic очень быстро создает мобильные приложения, а Phaser отлично подходит для создания 2D HTML5-игр. Capacitor - это отличная среда выполнения, позволяющая контейнировать веб-приложения для работы на различных платформах. Комбинируя Ionic, Capacitor и Phaser, вы можете создать несколько классных игровых приложений. Вы всегда можете включить игру в обычное приложение Ionic Capacitor, что делает ее намного более универсальной.

Эта демонстрация поддерживаетсяIonic 4 Full App Стартериз Enappd. Полный исходный код этого урока доступен в репозитории Github -Ионные-4-фазер(Ветвь ZMB_capacitor и ветка SI_capacitor)

Мы делаем больше таких забавных вещей наEnappdна регулярной основе. Не стесняйтесь просматривать нашиинтересные приложения для начинающих,

Следующие шаги

Теперь, когда вы узнали о реализации воспроизведения музыки в приложении Ionic Capacitor, вы также можете попробовать следующие блоги дляИонные приложения

Ионный реактор

Если вам нужна база, чтобы начать следующийПриложение Ionic 4 React Capacitor, вы можете сделать свое следующее удивительное приложение, используяIonic React Full App

Ionic 4 React Full App с огромным количеством макетов и функций

Ионный Угловой

Если вам нужна база, чтобы начать следующийIonic 4 Angular приложение, вы можете сделать свое следующее удивительное приложение, используяIonic 4 Full App

Ionic 4 Full App с огромным количеством макетов и функций

Оригинальная статья

Footer decor

© machinelearningmastery.ru | Ссылки на оригиналы и авторов сохранены. | map