Практика разработки мини-игр WeChat и Egret Engine

canvas.addEventListener('click', (event)=>{
    获取event对象x,y

    获取 buttonA：x,y,width,height
    判断是否点击

    获取 buttonB：x,y,width,height
    判断是否点击
})

Нажата кнопка в верхней части всплывающего окна, но также нажата кнопка под всплывающим окном, что не соответствует ожиданиям.Чтобы решить эту проблему, нам также нужен менеджер иерархии, чтобы определить, кто должен срабатывать, а кто не должен срабатывать в зависимости от уровня. В настоящее время для обработки событий нам необходимо реализовать две основные функции: пул прослушивания событий и диспетчер иерархии объектов элементов, поскольку события могут быть привязаны только к холсту.После запуска события холста требуется пул прослушивания событий для просматривать объекты-элементы в пуле прослушивания и определять, кто срабатывает (пул мониторинга также будет увеличивать или уменьшать количество объектов мониторинга в любое время), пул мониторинга по-прежнему получает набор объектов, а иерархический менеджер определяет самый верхний элемент в объект настроен на запуск. Подумайте о функции, кажется, все более и более сложным. В настоящее время не считается совершенным не только проблема обработки событий, но и другие большие и малые проблемы. При использовании собственной разработки Canvas рабочая нагрузка может быть очень большой. Таким образом, кажется, что реализовывать их самостоятельно ненаучно, и вам нужно использовать сторонний движок для разработки. Поскольку я использовал движок Egret два года назад, я знаю, что движок Egret был реализован с точки зрения мониторинга событий и иерархического управления.Помимо событий, рисования графики, анимации и т. д., я помню, что Egret предоставляет это.Если вы использовать движок для разработки небольших игр для достижения значительного снижения затрат.

• Egret Engine2D
• Texture Merger
• Библиотека расширений цапли
• Egret Wing

Egret Engine2D

Основное развитие ядра API

Texture Merger

Texture Merger может объединять разбросанные текстуры в целые изображения, а также может анализировать анимацию SWF и GIF, создавать растровый текст Egret и экспортировать файлы конфигурации, которые могут использоваться Egret. Я в основном использую в нем функцию спрайта для сбора картинок в одну картинку, а также экспортирую конфигурационную информацию, такую ​​как расположение спрайта json на картинке.

Библиотека расширений цапли

2. EUI: EUI — это библиотека расширений пользовательского интерфейса, основанная на основном списке отображения Egret.Он инкапсулирует большое количество общих компонентов пользовательского интерфейса и может удовлетворить большинство требований к интерактивному интерфейсу.Даже для более сложных требований к компонентам вы также можете использовать существующие компоненты EUI , Комбинируйте или расширяйте, чтобы быстро реализовать требования.
3. Игра: Кажется, эта библиотека не имеет какого-либо специального определения, я в основном использую: вид прокрутки ScrollView. для обработки страниц, которые необходимо прокручивать
4. Tween: библиотека анимации Easing, аналогичная библиотеке GreenSock.

Egret Wing

начать разработку цапли

Вы можете быстро просмотреть официальное руководство, чтобы лучше понять следующее:developer.egret.com/talent/GitHub/ о…. Статья не является учебным пособием, поэтому учебные пособия на официальном сайте Egret будут опущены. Теперь мы используем пусковую установку egret для создания проекта инициализации.Инициализированная файловая структура показана ниже.Я расширил папки ресурсов и src, потому что нам в основном нужно работать с этими двумя папками.Папка ресурсов в основном хранит статические ресурсы.Мы код все в src, а Egret использует машинопись.

В инструменте крыла мы можем сразу начать отладку и предварительно просмотреть эффект в браузере или собственном контейнере. main.ts — это файл запуска. Основное использование await для предварительной загрузки ресурсов изображения, определенных в ресурсе, поэтому эффект загрузки появится после начала предварительного просмотра. Рисунок загрузки записывается в LoadingUI.ts в src. После того, как изображение загружена, страница, показанная на рисунке 2 ниже, создается непосредственно в главной, и добавляется кнопка, после нажатия которой появится всплывающее окно. Эффект показан ниже.

До сих пор демонстрируют демонстрационную демонстрацию, как нарисовать изображения и связывать события. Как показано на рисунке ниже, я только перехватил код кнопки кликов. Для рисования изображений нам сначала нужно создать соответствующую эмптую или EUI объект, Такие как eui.button, egret.textfield, egret.bitmap и т. Д., А затем установить соответствующие свойства на объект, такой как метка, координаты XY, ширина, высота и т. Д. Затем используйте Addchild Main, чтобы загрузить его в холст (следующее это главный объект, а главные наследования от EUI.UILAYER). Код в демонстрации использует это .stage.addchild при загрузке и может быть загружен в холст непосредственно на AddChild или с помощью Stage.addchild. Метод addeventListener, инкапсулированный Eget, такой же, как метод прослушивания родных js.

Демонстрационный код здесь для подведения итогов, мы можем использовать AddChild для загрузки объекта представления на холст в объекте MAIN, например текст, кнопки и т. д. Мы также можем добавить вью-контейнер А в Main, вью-контейнер A, также можем добавить текстовую кнопку, тогда мы добавляем addChild вью-контейнер B в view-контейнер A, тогда таким образом формируем иерархический вложенный main->A->B Если вы представляете, что элемент DOM — это div.main-> div.a-> div, мы используем код для сравнения:

class Main extends eui.UILayer {


    protected createChildren(): void {

        let A = new egret.DisplayObjectContainer();
        this.addChild(A);

        let textA = new egret.TextField();
        textA.text = 'text A Description';
        A.addChild(textA);

        let B = new egret.DisplayObjectContainer();
        A.addChild(B);
        
        let buttonB = new eui.Button();
        buttonB.label = 'button B';
        B.addChild(buttonB);
    }

}

вести переписку

<div class="main">
    <div class="A">
        <span>text A Description</span>
        <div class="B">
            <button value="button B"></button>
        </div>
    </div>
</div>

В соответствии с пониманием приведенного выше кода и потребностей, которые нам нужно сделать (для реализации пошаговой игры, эта игра также имеет много страниц, домашняя страница содержит много кнопок и всплывающих окон, которые могут появиться, также есть различные страницы списков и наиболее важные боевые страницы). Я написал в main метод initElement для создания контейнера базового уровня. Код показан на рисунке ниже. По умолчанию addChild определяет взаимосвязь между верхним и нижним слоями в соответствии с порядком, и первый загруженный находится в нижний слой. Сначала в нижнем слое создается фоновый слой, затем ScrollView и baseContent, в них будет загружен контейнер страницы, если страницу нужно прокрутить, то в SV будет загружен объект просмотра страницы, и он будет загружен в baseContent без прокрутки, слой и загрузка на верхнем уровне.

После того, как базовый контейнер готов, мы можем создать домашнюю страницу. Я бы создал 3 файла: base.ts, Index_ui.ts, Index.ts. Index наследует Index_ui, а Index_ui наследует базу. Все _ui наследует базу, которая определяет общие методы и свойства. Поскольку страница может закончиться большим количеством кода или даже беспорядком, поэтому мы разделяем страницу на страницу и page_ui, пишем код, связанный с представлением, в _ui, вызываем методы _ui в странице, обрабатываем запросы и пишем логику для достижения эффекта. разделения взглядов и логики. После того, как домашняя страница написана, вам нужно создать простой маршрут и использовать метод, предоставленный маршрутом, для добавления индекса в контейнер SV. Маршрут прописал прямо в главную, changePage — метод переключения страниц, код примерно такой:

Эффект переключения страниц достигается за счет удаления и добавления контейнеров представления. Давайте поговорим о правилах написания страниц _ui.Следующее является частью кода Index_ui.el_layout заранее определяет и управляет информацией о макете элементов страницы. Элементы, с которыми необходимо работать на логической странице Index, относятся к объекту $el для простоты вызова и работы. Единая информация о данных в $data. Перед созданием элемента просмотра страницы необходимо передать координату y первого элемента в $firstEleY. Это необходимо для того, чтобы метод pageContentCenter мог получить точную высоту содержимого страницы. pageContentCenter необходимо выполнить после создания всех элементов страницы, pageContentCenter будет основан на текущей странице, тогда высота будет соответствовать высоте текущего устройства для вертикального центрирования.

class Index_ui extends Base {
    public el_layout = {
        indexbg: {x:0, y:0, w:750, h:1665},
        gold: {x:300, y:100, w:300, h:39}
    };
    public constructor() {
        super();
        this.RES_index = RES.getRes('index');
        this.RES_common = RES.getRes('common');
    }
    public RES_index;
    public RES_common;
    public $el = {
        gold: Object(egret.TextField)
    }
    public $data = {
        gold: '0'
    }

    public async createView() {

        //顶部元素必传值
        this.$firstEleY = this.el_layout.gold.y;

        this.pageContentCenter(true);//根据内容计算处理居中
    }
}

Основной код простого пакета разработки создан, а затем нам нужно упаковать некоторые другие классы инструментов, как показано ниже: файл конфигурации ($config), перехватчик пакета ($api), фильтр ($filter), функция инструмента ( $util), пакет API WeChat (Wx). Platform.ts — это файл, автоматически сгенерированный Egret, согласно его правилам, он написал файл Wx.ts, поскольку формы интерфейса разных платформ различаются, Egret рекомендует разработчикам инкапсулировать логику платформы таким образом, чтобы обеспечить общую структуру. Стабильный, Egret рекомендует разработчикам инкапсулировать все интерфейсы в асинхронной форме на основе промисов.

Существует также папка текстуры на том же уровне, что и SRC, которая содержит связанные файлы TEXTUREMEGE с использованием SPRITES, которые помещаются на склад для облегчения более позднего управления.

Простая демонстрация Demo, я обновил до Github. egret-resource是源码，egret-resource_wxgame是白鹭打包后的文件夹，它在开发者工具里运行。 egret-resource_wxgame应该在ignore里忽略，这里没有忽略是方便下载源码的朋友直接在开发者工具里运行demo。当前程序使用白鹭引擎版本5.2.5。

яма

• Используйте инструменты для редактирования кода, Compile Debug Compabled Compabled будет храниться в папке Bin-Debug, я использую MAC, меню Project имеет три варианта для компиляции, отладки и очистки. Я добавил файл XX, но при отладке произошла ошибка, проверьте свой источник браузера там, где нет новых документов, Bin-Debug не сделали, долимся, подумал, что его код неверно, и, наконец, реализован компилятор Может быть проблемой, на этот раз я нажимаю на кнопку, чтобы убрать, новые документы появились в годы Bin-Debug. Должно быть ошибка, должна уделять больше внимания проверять, будь то Bin-Debug в обновлениях файла

• RES.getResByUrl это асинхронная загрузка сети.Заранее нужно addChild чтобы уровень был в норме.После выполнения запроса можно модифицировать свойство текстуры объекта.Также можно указать уровень через метод addChildAt.

• Размер шрифта TextField меньше 10 повлияет на макет, зависит ли перенос текста от установленной высоты элемента

• Режим webgl не может загружать изображения сетевых URL-адресов

• ScrollView имеет метод addChild, но код в методе напрямую выдает ошибку, указывающую на то, что этот интерфейс нельзя использовать. Его дочерние элементы будут признаны недействительными путем привязки touchStart move и других событий, поэтому в настоящее время добавляется baseContent для переключения родительского контейнера в соответствии с требованиями.

• Интерфейс измерения MeasurementHeight будет измерять только фактическую высоту самого верхнего и самого нижнего элементов, поэтому, если значение y первого элемента больше 0, обратите внимание на настройку $firstEleY.

• Все изображения сжаты инструментами, что уменьшит размер кода загрузки и улучшит скорость загрузки ресурса.

Узел

Когда все это готово, остальные - это физическая работа, и, конечно, самая важная основная реализация GamePlay, анимация и взаимодействие в последствиях игры, которая может быть самой сложной частью игры для реализации. Адрес склада:GitHub.com/letter-v/egret-….