предисловие

в предыдущей статье«Создание мини-игр WeChat с нуля — Дэн Йию», я использовал чистый нативный Canvas с физическим движком Matter для создания мини-игры WeChat В конце статьи я упомянул, что в будущем напишу статью об использовании профессионального игрового движка для создания игр H5.

Эта статья для этой цели.В настоящее время в Китае есть два основных зрелых игровых движка H5, а именно Laya и Egret., из которых Egret вышла раньше, и она разработана очень зрело, и коммерческих игровых кейсов довольно много. Laya — это игровой движок H5, появившийся позже, который претендует на самую высокую производительность и имеет множество коммерческих игровых случаев. На самом деле в Интернете есть много статей о сравнении между ними, но на самом деле языки и функции, поддерживаемые этими двумя, похожи, независимо от того, какой из них вы выберете, вы можете

демо

Вы можете отсканировать код в браузере/WeChat, чтобы попробовать пробную игру, или вы можете посетить напрямуюChen Malicious Web.GitHub.IO/raya-hit мол…Играть в игру

двигатель

Эта статья выбирает Лайю, в основном, из следующих соображений.

LayaAir легче, и одна IDE покрывает почти все вспомогательные функции разработки игр H5.
Двигатель Laya был запущен поздно, учитывая конструктивные преимущества многих двигателей, общая конструкция API проста и эффективна.
Поддержка экспорта апплета WeChat одним щелчком мыши.
Официальные документы Laya подробные и исчерпывающие, форум очень активен, есть подробные видеоуроки.Кейс в этой статье основан на его видеоуроке "Официальное практическое обучение Laya Engine - версия JS Whack-a-Mole", декомпозиция, реконструкция. и восстановление

Двигатель и Родной

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

С самой простой точки зрения я объясню различия и преимущества использования разработки игрового движка по сравнению с нативной разработкой.

Визуальное изображение/звук/анимация/спецэффекты и другие загрузка и настройка ресурсов — это наиболее очевидное различие между использованием разработки игрового движка и традиционной собственной разработкой. Это позволяет разработчикам игр сосредоточиться на представлении игровых элементов, а не на том, как их загружать. в игре и использовании

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

Большое количество инкапсулированных API-интерфейсов циклической анимации, логических API и т. д. значительно сократило объем кода игры.В игре «Ударь крота», описанной в этой статье, фактический объем кода составляет всего около 200 строк, что очень мало. .

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

Чрезвычайно высокая эффективность разработки, мой собственный опыт использования разработки игрового движка, по сравнению с нативной разработкой, позволяет повысить эффективность более чем в десять раз, то есть всего лишь одну десятую времени разработки той же нативной игры

упражняться

На самом деле, практический процесс этой статьи написать сложно, потому что в отличие от моих предыдущих статей его можно постепенно реализовать через отображение и анализ кода. Разработка игрового движка тратит только 30% времени на кодирование, а остальное больше уходит на использование IDE для игрового дизайна, что является интересным моментом.

И на мой взгляд,Разработка игр — это еще и разработка, способная наилучшим образом реализовать идею объектно-ориентированного программирования., и такое мышление точно сложно описать словами, но несмотря ни на что, я постараюсь простым способом описать весь процесс использования игрового движка для создания игры

Кроме того, следует отметить, что в официальном туториале Laya JS-версия Whack-a-Mole написана на ES5, и код будет несколько избыточным и сложным, поэтому у меня всеРефакторинг с ES6, выглядит более лаконично и освежающе

Вход в игру

Любая игра имеет программу входа.Вход в игру Laya очень прост.Вам нужно только инициализировать движок,затем загрузить контроль версий и ресурсы,после чего можно запускать интерфейс игры. В демо-игре из этой статьи используется режим рендеринга WebGL, который имеет наилучшую производительность.Если он не поддерживается, Canvas будет автоматически переключен для получения наилучшей совместимости.

class LayaApp {
    constructor() {
        // 初始化引擎
        const WebGL = laya.webgl.WebGL
        Laya.init(800, 600, WebGL)
        //设置版本控制类型为使用文件名映射的方式
        Laya.ResourceVersion.type = Laya.ResourceVersion.FILENAME_VERSION
        //加载版本信息文件
        Laya.ResourceVersion.enable("version.json", Laya.Handler.create(this, this.beginLoad))
        // 设置stage属性
        Laya.stage.scaleMode = Laya.Stage.SCALE_SHOWALL
        Laya.stage.alignH = Laya.Stage.ALIGN_CENTER
        Laya.stage.alignW = Laya.Stage.ALIGN_CENTER
        Laya.stage.screenMode = Laya.Stage.SCREEN_NONE
        Laya.stage.bgColor = "#ffffff"
    }
    // 加载资源
    beginLoad() {
        Laya.loader.load("res/atlas/ui.atlas", Laya.Handler.create(this, this.onLoaded), null, Laya.Loader.ATLAS)
    }
    // 加载完成回调
    onLoaded() {
        // 启动游戏界面
        LayaApp.gameStartView = new GameStartView()
        Laya.stage.addChild(LayaApp.gameStartView)
    }
}

// 实例化游戏应用
new LayaApp()

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

Фактически, цель этой статьи состоит в том, чтобы дать новичкам общее представление об игровом движке H5, поэтому следующий контент больше посвящен объяснению некоторых мощных специальных эффектов игрового движка H5.После прочтения этой статьи перейдите к официальный видео-учебник Laya, может добиться эффекта получения двойного результата с половиной усилий

ссылка на ресурс

Менеджеру ресурсов Laya нужно только поместить файлы ресурсов в путь, связанный с ресурсами, и все файлы ресурсов могут быть легко загружены, закладывая основу для следующего шага визуального редактирования игрового интерфейса.Пожалуйста, обратитесь к конкретному методу работы IDE.LayaAir IDE—Проводник

реализация интерфейса

После введения файла ресурсов мы можем создать игровой интерфейс, который мы себе представляем, как мы хотим.Сначала создайте интерфейс пользовательского интерфейса, затем перетащите ресурсы на интерфейс пользовательского интерфейса, затем выложите или упорядочите иерархию и, наконец, установите свойства для элементы интерфейса, которые нам нужны. Этот последний шаг имеет решающее значение, потому что это мост между визуальным дизайном и программированием. С помощью атрибута var или атрибута name в коде можно использовать соответствующие элементы интерфейса, что очень удобно и просто.Это важный шаг для значительного повышения эффективности игрового движка.Точно так же, пожалуйста, обратитесь к конкретным Метод работы IDE.LayaAir IDE — Редактор сцен пользовательского интерфейса

/**
 * 启动界面类
 */
class GameStartView extends ui.GameStartUI {
    constructor() {
        super()
        // 居中显示
        this.centerX = 0
        this.centerY = 0
        // 启动事件
        this.startBtn.on(Laya.Event.CLICK, this, this.onStartGame)
    }
    onStartGame() {
        // 移除启动界面
        this.removeSelf()
        // 加载游戏界面
        if (!LayaApp.gameView) {
            LayaApp.gameView = new GameView()
        }
        LayaApp.gameView.gameStart()
        Laya.stage.addChild(LayaApp.gameView)
    }
}

Здесь следует упомянуть код, используемый вthis.startBtn, что мы видим, так это то, что он не определен в коде всего класса, но на самом деле мы можем использовать его напрямую!

Причина в том, что в панели дизайна Laya, когда мы создаем интерфейс запуска, мы установили атрибут var для кнопки запуска, поэтому мы можем использовать его прямо в коде, а Laya инкапсулирует API, мы можем в дальнейшем использовать событие кнопки ответ напрямую

Увидев это, вы должны понять, как игровые движки связывают элементы дизайна с логикой кодирования, и это только один пример.

реализация спрайта

Помимо статичных элементов интерфейса, в игре часто присутствует множество сложных элементов, таких как анимация и даже спецэффекты, которые можно визуально редактировать с помощью игрового движка. , мы переходим. Вы можете сделать простую анимацию кадра последовательности следующим образом, а затем, установив для нее свойства, вы можете ссылаться на нее в кодировании Более связанные методы работы IDE могут относиться кLayaAir IDE - страница пользовательского интерфейса, частицы, анимация, подробности новой панели скрипта

/**
 * 锤子类
 */
class Hammer extends ui.HammerUI {
    constructor() {
        super()
        this.visible = false
    }
    // 开始使用
    start() {
        this.visible = true
        Laya.Mouse.hide()
        Laya.stage.on(Laya.Event.MOUSE_DOWN, this, this.onMouseDown)
        Laya.stage.on(Laya.Event.MOUSE_MOVE, this, this.onMouseMove)
        this.onMouseMove()
    }
    // 结束使用
    end() {
        this.visible = false
        Laya.Mouse.show()
        Laya.stage.off(Laya.Event.MOUSE_DOWN, this, this.onMouseDown)
        Laya.stage.off(Laya.Event.MOUSE_MOVE, this, this.onMouseMove)
    }
    onMouseDown() {
        this.hit.play(0, false)
    }
    onMouseMove() {
        this.pos(Laya.stage.mouseX - this.width / 2, Laya.stage.mouseY - this.height / 2)
    }
}

Что я хочу здесь показать, так это инкапсуляцию API взаимодействия в игровом движке.В Laya все события взаимодействия имеют унифицированный API, очень лаконичный и понятный, и разработчикам почти больше не нужно беспокоиться об адаптации взаимодействия ПК или мобильных устройств. .

выпуск сборки

Наконец, когда игра написана и протестирована, всю игру можно легко упаковать с помощью функции публикации одним щелчком мыши в среде IDE.

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

Спасибо за прочтение, надеюсь, эта статья поможет вам :)

Автор: Чейни Сюй

Гитхаб:laya-hitmole

о:Официальный сайт XServer