Egret Egret H5 Development - Обнесенный стеной нейронный кот

предисловие

В сентябре этого года я перешел с Android на разработку front-end веб-страниц H5 и мини-игр H5.Сначала я научился использовать Canvas для создания головоломок, змеиных сражений и других мини-игр.Я написал распознавание жестов мини-игра с использованием фазера во время обучения в компании., Сейчас компания хочет попробовать трансформировать движок Egret Egret для разработки H5.Так случилось, что был небольшой игровой проект H5, похожий на Neural Cat, поэтому я использовал Neural Cat учиться и практиковаться.

На самом деле, несколько месяцев назад, когда появилась мини-игра WeChat, я использовал себя, чтобы немного изучить Egret, и скачал ее по официальной простой демоверсии.

Возможно, у меня хорошие способности к обучению, поэтому я быстро начинаю работу, а Egret использует для разработки TypeScript, что немного похоже на java и kotlin, и я раньше занимался разработкой для Android, так что начать можно относительно быстро. , и стоимость обучения значительно снизилась.

На разработку этой игры ушло больше суток до и после, а фотоматериал и аудиоматериал были найдены в интернете (есть несколько кнопок, которые сделал сам в фотошопе), только для обучения. Узнай об этом утром, а днём начинай разрабатывать.Если в игре что-то не так написано, надеюсь, Бог подскажет~

В окружении игры Nervous Cat H5, написанной на движке Egret Egret

адрес демо и исходного кода

онлайн демо

(Если вы просматриваете на ПК, включите режим разработчика и переключите мобильный режим)game.codebear.cn/nervecat

Адрес источника

GitHub.com/CB-early-month/game…

Оригинальная ссылка (мой блог)

код медвежонка.можно/статья?ID=…

цапля цапля двигатель

Ссылка на официальный сайт:www.egret.com/Проще говоря, Egret Engine — это набор решений для разработки игр H5 со следующими продуктами, ядром которых являетсяEgret Engine, другие - некоторые средства разработки. Для получения дополнительной информации о них, пожалуйста, нажмите на ссылку выше.

Узнайте об игре вокруг Нервного кота

игровой интерфейс

Игровая анимация

Введение в игровой процесс

Нажимайте на белые квадраты на экране, чтобы окружить нейронного кота.Не дайте коту добежать до четырех границ верхней,нижней,левой и правой.В конце концов коту некуда деться и игрок побеждает , Если кошка бежит к границе, кошка побеждает.

создать новый проект

Ниже приведены шаги по установке и созданию проекта, см.Учебник на официальном сайтеЯ использую систему Mac OSX, поэтому ниже приведен пример установки программного обеспечения Mac.

Установите инструмент управления библиотекой движка (Egret Launcher)

Непосредственно загрузите установочный пакет версии для Mac и установите его.После завершения установки откройте Egret Launcher.app.Появится следующий интерфейс.Вы можете выбрать версию движка для загрузки.Я скачал последнюю версию 5.2.11 здесь.

Затем нажмите на инструмент, чтобы установить Egret Wing 3, который представляет собой IDE, разработанную проектом Egret egret, которую можно использовать для разработки проекта, отладки и компиляции, что более удобно.

Создать проект

Щелкните параметр проекта непосредственно в Egret Launcher, чтобы создать проект.

• Тип проекта здесьИгровой проект «Цапля»
• режим масштабирования[Официальная документация]Здесь я выбираю fixedWide, ширина и высота сцены равна ширине и высоте экрана, фоновое изображение нужно обработать, а окружающую область можно обрезать.

Структура проекта

После того, как вышеуказанные параметры выбраны и заполнены, нажмите «Создать», а затем щелкните проект здесь, вы можете использовать Egret Wing 3, чтобы открыть проект.

Структура проекта следующая:

• bin-debug: при отладке проекта сгенерированные файлы сохраняются в этом каталоге.
• libs: файлы библиотек, включая основную библиотеку Egret и другие библиотеки расширений, размещаются в этом каталоге.
• ресурс: в этом каталоге хранятся файлы ресурсов проекта, такие как изображения, аудио и т. д.
• scripts: в этом каталоге хранятся файлы сценариев, необходимые для сборки и публикации проекта.
• src: файлы кода проекта хранятся в этом каталоге.
• template: в этом каталоге хранятся файлы шаблонов проектов.
• egretProperties.json: файл конфигурации для проекта. Для получения конкретных инструкций по настройке см.:ЦапляСвойстваОписание
• index.html: файл входа. Для получения конкретных инструкций по настройке см.:описание файла записи
• manifest.json: файл манифеста веб-страницы.
• tsconfig.json: файл конфигурации компиляции машинописного текста.

запустить проект

Откройте проект с помощью Egret Wing 3. После открытия проекта щелкните непосредственно на панели инструментов.компилироватькнопка:

После завершения компиляции нажмите кнопку http server в правом нижнем углу, нажмите ссылку во всплывающем окне, и вы сможете просмотреть результат в браузере (или после завершения компиляции нажмите Project-Debug):

Эффект (по умолчанию для проекта цапля):

На данный момент проект завершен и успешно запущен, а затем я приступлю к реализации собственной игры.

Разработка нейронной игры с кошками

Архитектура проекта

У меня есть привычка извлекать и инкапсулировать как можно больше общего кода при написании проекта, поэтому каждый раз, когда я пишу новый проект, я сначала думаю о том, как его структурировать. Так как это был первый раз, когда я использовал Egret для написания полного игрового проекта, я действительно не знал, как управлять переходом между сценами, поэтому я посмотрел видео и подумал, что оно довольно хорошее, поэтому мой проект также структурирован следующим образом:

1. Игра разделена на три сцены: начало, игра и конец.
2. Класс контроллера сцены для управления отображаемыми сценами (глобально вызываемый)
3. Один для сохранения игровых данных (доступен глобально для прямого использования в каждой сцене)
4. Класс инструмента (получение ширины и высоты, изображений и т. д.)
5. ...

Итак, структура проекта такова:

┗ src
  ┣ common // 存放一些共用的类
  ┃ ┗ GameUtil.ts // 游戏工具类，获取图片、舞台宽高等
  ┣ game // 游戏相关
  ┃ ┣ bean // 一些bean，比如猫类、普通圆点
  ┃ ┃ ┣ Cat.ts // 猫（有坐标，状态，搜索路径方法等）
  ┃ ┃ ┣ GridNode.ts // 格子节点（x，y，状态等）
  ┃ ┃ ┣ Point.ts // 圆点（x，y）
  ┃ ┣ scene // 游戏场景
  ┃ ┃ ┣ BaseScene.ts // base场景，所有场景继承这个
  ┃ ┃ ┣ EndScene.ts // 结束场景
  ┃ ┃ ┣ PlayScene.ts // 游戏场景
  ┃ ┃ ┗ StartScene.ts // 开始场景
  ┃ ┣ GameData.ts // 存放游戏数据
  ┃ ┗ SceneControlloer.ts // 场景控制器
  ┣ LoadingUI.ts // 加载页
  ┣ Main.ts // 游戏主类（入口，所有场景都放在这个上面显示）
  ┗ Platform.ts // 可用于定义一些window上的对象，接口（比如微信登录等），暂时用不到

написать игру

Создать каталог

Сначала создайте каждый файл каталога в соответствии с приведенной выше структурой проекта (содержимое временно пусто, а затем напишите его позже)

Изменить Main.ts

Удаляем содержимое метода createGameScene в Main.ts, удаляем метод createBitmapByName (написанный позже в классе GameUtil) и метод startAnimation (не требуется), main.ts после удаления выглядит следующим образом:

реализовать класс инструментов

Напишите класс GameUtil в common/GameUtil.ts, добавьте методы getStageHeight (получение высоты сцены), getStageWidth (получение ширины сцены), createBitmapByName (создание Bitmap в соответствии с входящим именем), createMovieClipByName (создание MovieClip в соответствии с входящим именем) для реализации следующее:

Изменить LoadingUI.ts

Измените LoadingUI.ts, чтобы центрировать индикатор выполнения.

Реализовать класс BaseScene

Реализуйте класс BaseScene, наследуйте класс egret.DisplayObjectContainer и используйте метод initView Все последующие сцены наследуются от этого класса, просто реализуйте метод initView.

Добавить фоновое изображение

Добавьте фоновое изображение в метод createGameScene файла Main.ts. Два предложения в красном поле используются для установки и инициализации сцены. Пока не обращайте на это внимания.

Реализуйте класс управления игрой SceneController.ts.

Напишите класс SceneController.ts (управление сценой), который является синглтоном с initGame (инициализация игры, отображение стартовой игровой сцены), showPlayScene (отображение игровой сцены), showLevelTip (анимация, подсказывающая уровень при запуске игры) , showEndScene (показать конец игры) Сцены)

Реализация стартового сценария 1

Сначала напишите стартовую сцену StartScene.ts, которая очень проста, просто картинка и кнопка. Метод GameUtil.bitmapToBtn() здесь предназначен для добавления эффекта масштабирования щелчка (аналогично кнопке) к компоненту. Конкретная реализация следующее

Реализация стартового сценария 2

Стартовая сцена отображается в методе initGame в классе управления сценой, код и эффект следующие:

Реализовать игровую сцену

Игровая сцена PlayScene.ts, игровая сцена имеет несколько сеток и кота посередине, сетки хранятся в двумерном массиве, а gridNode.ts реализован сам по себе, он наследуется от egret.Sprite для представления сетки узлы и могут быть добавлены на сцену (со статусом узла (может ходить), не может ходить, есть кот), индекс в массиве, координаты на сцене, размер сетки, фоновое изображение сетки , интерфейс мониторинга игры (PlayScene.ts реализует этот интерфейс и передает его при создании сетки. Он используется для уведомления пользователя, по какой сетке щелкнуть, по какой сетке ходит кошка, кто выигрывает и т. д.)), а затем реализовать спрайт кота Cat.ts наследовать egret.Sprite (со статусом (есть путь, он окружен, но есть места, чтобы пройти, просто не могу выбраться), индекс в массиве, размер, фон, интерфейс мониторинга игры, узел сетки, на котором он сидит), и у кота также есть такие методы, как поиск пути (подробнее об этом позже). В классе управления игрой управляйте отображением игровой сцены.

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

Инициализировать, чтобы создать некоторые препятствия

Создайте узел кошки (в середине массива)

На данный момент эффект следующий

Основной метод GridNode.ts прослушивает события касания и определяет, можно ли его щелкнуть.

Метод playerRun реализован в PlayScene.ts, чтобы указать, что игрок щелкает по сетке, метод catRun — это сетка, по которой ходит кошка, а метод canRun возвращает, закончил ли текущий кот ходить (все еще думает, тогда игрок не может нажмите на сетку)

Реализация алгоритма пути поиска кота

На этом игровая сцена в основном завершена.Теперь давайте напишем самый важный момент-алгоритм пути поиска кота.Проанализируем его.Если кот хочет выбежать,первым шагом будет выбор кратчайшего пути.Это очень просто.Используйте алгоритм bfs для поиска (только выкладывайте основной код, остальные можно посмотреть на github):

Если пути для выхода нет, то в результате получается пустой массив, тогда надо судить, есть ли сетка для выхода.Если пути нет, значит кот проиграл.Просто идем рандомно)

Если есть выход, то выберите путь наугад.

оптимизацияПриведенный выше алгоритм находит кратчайший путь слева и справа, но если вы идете случайным образом, это может быть не оптимальный путь, потому что для некоторых путей может быть только один путь, который легко заблокировать, поэтому вам нужно реализовать другой алгоритм для фильтрации Существуют пути с несколькими конечными точками, поскольку на предыдущем шаге сохраняется первая сетка, которую должны пройти все пути, затем алгоритм может выбрать, оценивая количество путей с одной и той же сеткой на первом шаге, и может быть должен быть только один путь (если их несколько, то вы можете выбрать путь случайным образом)

Это еще не оптимальный алгоритм! ! ! Этот алгоритм имеет тупик, который также будет выбран (несколько путей должны появиться после второго шага, но первый шаг может быть заблокирован, у меня нет суждений в этом случае, вы можете реализовать его самостоятельно, если вам интересно), в кроме того, если есть другие лучшие алгоритмы, пожалуйста, порекомендуйте их в области комментариев~

Реализовать финальную сцену

Конечная сцена EndScene.ts

Конечная сцена очень проста: по глобальным игровым данным, сохраненным в GameData.ts, судят, отображать успешное всплывающее окно или неудачное всплывающее окно. Успешное всплывающее окно:

Неудачное всплывающее окно:

напиши в конце

Шаги и часть кода реализации игры написаны выше, конкретный код можно посмотреть на github:GitHub.com/CB-early-month/game…Это первый проект, который я написал с цаплей, возможно, некоторые части написаны недостаточно хорошо, надеюсь, вы подскажете~