Добро пожаловать в команду веб-разработчиков Futu,несоответствие
Оригинальная ссылка:Проверить
В чем разница между мини-играми и мини-программами?
Мини-игры — это категория мини-программ.Мини-игры — это дополнительные возможности, которые WeChat открыл для мини-программ, предоставив разработчикам мини-программ возможность разрабатывать игры. В мини-игре нет WXSS, WXML, многостраничного и прочего контента, но добавлены некоторые функции рендеринга, файловой системы и фоновой многопоточности.
Рабочая среда мини-игры является расширением среды мини-программы.Основная идея состоит в том, чтобы инкапсулировать необходимый веб-интерфейс и предоставить его пользователю, чтобы максимально использовать тот же опыт разработки, что и веб-интерфейс. . Mini Games обеспечивает инкапсуляцию интерфейса WebGL на основе среды Mini Program, что значительно улучшает возможности рендеринга и производительность. Однако, поскольку эти интерфейсы инкапсулированы командой WeChat с помощью собственных собственных реализаций, они не могут быть эквивалентны среде браузера.
Средой запуска мини-игры является JavaScriptCore (Примечание. Важной частью webkit является в основном анализ JS и предоставление среды выполнения.), V8 на Android (само собой разумеется, что Node.js в настоящее время использует V8). Но у обоих нет среды выполнения BOM и DOM, нет глобальногоdocumentа такжеwindowобъект.
Сравнительная таблица программ Mini Game VS H5 Game VS Mini
Адаптация стороннего кода (Адаптер)
Основная цель — предоставить среду выполнения для BOM и DOM.
Как видно из приведенного выше рисунка, поскольку нет рабочей среды BOM и DOM, нет и глобальногоdocumentа такжеwindowобъект. Для того, чтобы сторонний код, основанный на среде браузера (игра H5 на картинке выше), быстрее адаптировался к среде запуска мини-игры, существует адаптер. Это библиотека, состоящая из кода, который имитирует BOM и DOM с помощью WeChat API, Слой абстрактного кода может реализовывать связанные методы в соответствии с вашими потребностями.
Например, простая реализацияdocument.creatElementметод:
var document = {
createElement: function (tagName) {
tagName = tagName.toLowerCase()
if (tagName === 'canvas') {
return wx.createCanvas()
}
else if (tagName === 'image') {
return wx.createImage()
}
}
}
Разработчик должен решить, использовать ли адаптер. Когда адаптер не используется, соответствующие методы можно реализовать через API, предоставляемый WeChat, но API DOM нельзя использовать для создания таких элементов, как Canvas и Image.
Некоторые игровые движки напрямую вызывают DOM API и получают доступ к свойствам DOM, поэтому не забудьте использовать адаптер для адаптации игрового движка к рабочей среде мини-игры, чтобы гарантировать, что игровой движок не будет генерировать ошибки при вызове DOM API и доступе к свойства ДОМ.
WeChat официально внедрилweapp-adapterАдаптер мини-игры, но только имитирует свойства и методы, к которым может обращаться игровой движок, и не гарантирует, что все игровые движки могут беспрепятственно получать доступ к мини-играм через weapp-adapter. Здесь разработчикам предоставляется адаптер weapp-adapter, который больше предназначен для использования разработчиками в качестве справочного материала, чтобы разработчики могли расширяться на основе weapp-adapter по мере необходимости для адаптации к игровому движку, используемому в их собственных проектах. weapp-adapter будет вызываться заранееwx.createCanvas()Создайте холст на экране и выставьте его как глобальную переменнуюcanvas.
require('./weapp-adapter');
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(0, 0, 100, 100);
Адаптер weapp-adapter предоставляет следующие объекты и методы:
- document.createElement
- canvas.addEventListener
- localStorage
- Audio
- Image
- WebSocket
- XMLHttpRequest
На самом деле официальных документов гораздо больше, если интересно, можете посмотреть официальныеДокументация API.
Модульность мини-игр
Mini Games предоставляет API модуля в стиле CommonJS, доступ к которому можно получить черезmodule.exportsа такжеexportsэкспортировать модуль черезrequireмодуль импорта. Здесь нет необходимости объяснять больше, на самом деле каждый может кодировать в соответствии с обычными привычками кодирования.
module.exports = function (canvas, x, y) {
var image = new Image()
image.onload = function () {
var context = canvas.getContext('2d')
context.drawImage(image, x, y)
}
image.src = 'res/image/logo.png'
}
Таким образом, небольшая игра по-прежнему очень дружелюбна к базовым возможностям кодирования.
Маленькая игровая способность
Вот некоторые из предоставленных возможностей API, более подробные возможности и официальные примеры можно найтиДокументация API.
Для тех, кто не знаком с оптимизацией Canvas или внеэкранным холстом, вы можете прочитать эту статью.Рекомендации по Canvas (производительность).
маленький игровой движок
Игровой движок относится к основным компонентам некоторых предварительно написанных редактируемых компьютерных игровых систем или некоторых интерактивных графических приложений в реальном времени. Эти системы предоставляют разработчикам игр все инструменты, необходимые для написания игр, и их цель — позволить разработчикам игр легко и быстро программировать игры, не начиная с нуля.
Cocos, Egret и Laya завершили адаптацию и поддержку собственных движков и инструментов для небольших игр:
- Cocos
- Цапля (цапля)
- LayaBox
- Three.js — это 3D-движок, работающий в браузере, вы можете использовать его для создания различных 3D-сцен, включая камеры, источники света, материалы и другие объекты.
Поддержка 2D, 3D, VR
представление
Судя по отзывам разработчиков, Layabox изначально является игровым движком H5 для масштабных игр, и преимущество в производительности несомненно.
Концепция дизайна и позиционирование
Поддержка рабочего процесса
Положение и поддержку набора инструментов также является дополнительной функцией потребления, такими как редактор пользовательского интерфейса, редактор частиц, редактор костей, редактор сцены и многое другое, если двигатель напрямую предоставляется или поддерживается, то он увеличит R & D эффективность. Egret, Layabox, Cocos2D-JS Эти три двигателя предлагают достаточную комплексную поддержку в наборе инструментов.
Широта применения двигателя
Egret прославился раньше, развивался быстрее, имеет больше ресурсов во всех аспектах и предоставляет полный набор инструментов для разработки.
Преимущества использования игрового движка: Быстрая разработка и высокая ремонтопригодность
Недостатки использования игрового движка: Пожертвовав некоторой производительностью, вы вряд ли почувствуете разницу в производительности с движком или без него для небольших игр. Большие игры обычно используют игровые движки для повышения эффективности разработки и удобства сопровождения.
Краткое изложение боя в небольшой игре
На этот раз основная реализация — небольшая игра в прыжки и прыжки. Игра примерно такая:
Вы можете обратиться к:эта статья
Иерархия
- Слой сцены: отвечает за рендеринг украшений листьев с обеих сторон, чтобы реализовать анимационный эффект скольжения бесконечного цикла;
- Слой лестницы: отвечает за рендеринг лестниц и роботов, для реализации случайной генерации лестниц и автоматического сброса кирпичей лестницы, а также для управления роботами;
- Фоновый слой: ответственный за рендеринг фонового фона цвета и запуск и конец рендеринга панели.
пройти черезrequestAnimationFrameЦикл вызывается определенное количество раз для достижения эффекта анимации. За логикой игры следит глобальныйcanvasРеализация объекта.
Слои накладываются друг на друга и рисуются на холсте по порядку.Сначала нарисуйте фон, рассчитайте положение шагов с помощью алгоритма и используйтеrequestAnimationFrameЧтобы реализовать сдвиг для создания нового шага, робот выдвигается отдельно, а не реализуется вместе с шагами.Посредством расчета положения получается положение робота, слово рисуется на шагах и, наконец, листья на верхнем слое нарисованы.
Трудности в разработке мини-игр
Во-первых, небольшая игра разработана на языке JavaScript, HTML и CSS отсутствуют, поэтому вам необходимо владеть языком JavaScript и работой с объектами Canvas.
Во-вторых, он мало чем отличается от H5-версии разработки игр, но в ней меньше библиотек, поддерживаемых небольшими играми, а большинство библиотек, используемых при разработке H5-версии, не поддерживаются.
Также реализация H5-версии игры более избирательна, например, исходная версия прыжка заключается в использованииcreatejsразработка, а версия мини-игры не поддерживает все движки и может быть адаптирована только путем преобразования вышеуказанных движков.
Небольшая оптимизация игры
Зачем оптимизировать?На самом деле, чтобы улучшить скорость загрузки страницы, уменьшить отставание в игре и сделать анимацию более плавной, плавность игры и экрана напрямую влияют на взаимодействие с пользователем.
Ниже приведены несколько вариантов оптимизации.
оптимизация сборщика мусора
В документе по оптимизации мини-игры не указано, что диспетчер производительности предоставляется в API. Получив диспетчер производительности, можно вызвать API для ускорения запуска GC. Время GC контролируется JavaScrpitCore / V8 , и нет никакой гарантии, что GC сработает сразу после вызова.
Оптимизация количества вызовов setData
Небольшая программа, официальная не рекомендует частые звонкиsetData, большие изображения и изображения с длинным списком могут привести к увеличению использования памяти клиентом iOS, что приведет к тому, что система перезапустит страницу апплета.
Уменьшить пакет кода
Попробуйте уменьшить размер кода для пакета кода пакета, непосредственно влияет на скорость загрузки, что влияет на опыт пользователя, впервые открывается.
Управление ресурсами изображения
Управляйте ресурсами изображения в пакете кода. После того, как пакет кода апплета скомпилирован, он будет помещен в CDN WeChat для загрузки пользователями. В CDN включено сжатие GZIP, поэтому пользователь загружает сжатый пакет GZIP, размер которого превышает исходный размер пакета кода будет меньше. Однако мы проанализировали данные и обнаружили, что коэффициент сжатия пакета кода между разными небольшими программами сильно различается: некоторые могут достигать 30%, а некоторые — всего 80% Одна из причин такой разницы — использование ресурсов изображений. GZIP лучше всего работает с текстовыми ресурсами, часто со сжатием до 70-80% для больших файлов и менее эффективным для уже сжатых ресурсов (таких как большинство форматов изображений).
Очистите бесполезные ресурсы
Своевременно очищайте неиспользуемый код и ресурсы.Упаковка мини-программы поместит все файлы проекта в пакет кода, то есть эти файлы библиотеки и ресурсы, которые фактически не используются, также будут помещены в пакет кода. , тем самым влияя на размер всего пакета кода.
настройка кадров в секунду
использоватьrequestAnimationFrameПри реализации анимации настройте соответствующий рендеринг fps (частоту кадров).
возникшие проблемы
Проблема с размером изображения?
Размер пары картинок в мини-игре ограничен 2048 пикселями, а длина и ширина должны быть меньше или равны 2048 пикселям.
открыт для публики?
Для мини-игр нет регистрационной записи.Теперь можно использовать категории игр, которые были открыты в мини-программе два дня назад.Установите категорию мини-программы в качестве категории игры для разработки мини-игр.Я не уверен, нужно ли регистрироваться в таким образом в будущем. , или откройте регистрацию входа в мини-игру отдельно, и в настоящее время между ними нет никакой разницы.
Официальный в настоящее время не предоставляет внешний релиз, вы можете щелкнуть, чтобы релиз после входа в фоновом режиме, но вам необходимо загрузить ряд сертификатов об авторских правах на программное обеспечение, поэтому это не было выполнено, и неясно, будет ли внешний релиз быть успешным.
Небольшой объем кода игры?
Что касается объема мини-игры, объем мини-игры не должен превышать 4 МБ, а объем кэш-памяти не должен превышать 50 МБ.Конкретное объяснение: локальный код и ресурсы не должны превышать 4M. Кэшированный файл одного проекта мини-игры не может превышать 50 М. В настоящее время, когда кеш превышает 50 М, последующие ресурсы не будут кэшироваться. В будущем новая версия AssetsManager позволит разработчикам настраивать механизм, для которого ресурсы должны быть кэшированным. Скачивание файлов скриптов с сервера запрещено.
Динамическое выполнение кода запрещено?
Возможность запретить выполнение динамического кода,eval,setTimeoutа такжеsetIntervalПервый параметр функции не может быть строкой,FunctionАргументы конструктора не могут быть строками.
проблема развития
Логика игры плохо обработана, анимация немного не плавная, есть проблема с задержкой.