weixin minigame tutorial
1.0.0
Этот репозиторий содержит
Текущая демо-версия включает в себя следующие функции:
├───game.js : main entry point, Phaser. Game main function declared here
├───game.json : minigame configuration
├───images : static assets repository
└───js
├───game
│ ├───managers : each manager is a set of functions
│ │ ├───collisions.js : handles all collision events
│ │ ├───db.js : backend CRUD functions for leaderboard (based on Leancloud API)
│ │ ├───events.js : main events of the game functions
│ │ ├───generators.js : objects generators functions
│ │ ├───leaderboard.js : functions that handle leaderboard and ranking algorithms
│ │ ├───wechat.js : functions that handle WeChat-related API (getting user profile, user friends list etc...)
│ └───objects : Each object is a Class, with its separated file
│ ├───Background
│ ├───Bird
│ ├───Button
│ ├───Floor
│ ├───Pipe
│ ├───objects.js : singleton namespace window.objects where all the game objects live
│ ├───phases.js : different game phases (preload, create, update (called every frame), render (called every frame))
│ └───state.js : singleton namespace window.state where all the game states and parameters live
└───libs
└───lodash-modules
Общая архитектура: Почти как в веб-играх.
Мини-игры Wechat основаны на веб-технологиях, основной язык — Javascript. Система аналогична той, что есть в Интернете: доступен элемент холста, и мы можем рисовать на нем в каждом кадре. У нас есть доступ к API WebGL и, следовательно, мы можем использовать графический процессор для вычислений с использованием шейдеров (язык GLSL).
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
Но реализация имеет некоторые отличия
Однако реализация API WebGL и Canvas отличается от собственной веб-реализации, которую можно найти в большинстве веб-браузеров. Средой запуска мини-игры является JavaScriptCore на iOS и V8 на Android. Все они работают в средах без спецификации и DOM. Нет глобального документа и нет объекта окна. Итак, если вы хотите использовать DOM API для создания таких элементов, как Canvas и Image, это выдаст ошибку. Подробнее об официальной документации мини-игры (на китайском языке).
Веб-библиотеки можно адаптировать к среде мини-игр.
Чтобы преодолеть разрыв между Интернетом и мини-играми, команда мини-игр WeChat работает над специальной библиотекой — адаптером weapp. Цель состоит в том, чтобы сделать веб-библиотеки совместимыми с мини-играми. Однако текущая реализация библиотеки все еще несовершенна и неполна, и часто требуется дополнительная работа для исправления каждой сторонней библиотеки, с которой вы собираетесь работать.
Многие игровые движки уже портированы (официально и неофициально).
| Двигатель | Фокус | Статус |
|---|---|---|
| Какао | Китайский движок веб-игры на основе 2D-интерфейса | Официально поддерживается |
| Лайя | Китайский движок для 2D и 3D веб-игр | Официально поддерживается |
| цапля | Китайский движок веб-игры на основе 2D-интерфейса | Официально поддерживается |
| Единство | Игровой движок 3D/2D, отраслевой стандарт | Пока не поддерживается |
| Фазер (Интернет) | Движок 2D-веб-игр, отраслевой стандарт в веб-играх | Работаем через неофициальный порт |
| Триджс | Веб-движок 3D, отраслевой стандарт | Работаем через неофициальный порт |
Могу ли я уже написать свою собственную мини-игру? Да, вы уже можете написать свою собственную мини-игру! Все, что вам понадобится, от документации до инструментов разработчика, общедоступно.
Его уже можно выпустить? Нет, его пока нельзя опубликовать, но вы все равно можете просмотреть его на своем телефоне. (Подробнее о презентации IDE ниже)
Когда он будет выпущен? Мы еще не знаем.
Стили графики игр: возможны как 2D, так и 3D.
Благодаря доступу к WebGL мы также можем отображать 3D-игры с ускорением на графическом процессоре.
Производительность: система немного лучше оптимизирована, чем в веб-играх.
Система еще молода и находится на стадии бета-тестирования, но мы уже видим, что производительность очень похожа на то, на что способны веб-игры. На данный момент хорошее практическое правило — не ожидать большего, чем то, что может сделать веб-игра, с точки зрения ограничений.
Размер по-прежнему является основным ограничением.
Одним из самых больших ограничений мини-игры является ее размер. В настоящее время Wechat поддерживает только пакеты игр размером до 4 МБ. Ваша игра, вероятно, сможет загружать дополнительные ресурсы с внешнего сервера, но учтите, что их придется загружать при каждом запуске игры. Итак, игры должны быть достаточно легкими с точки зрения ресурсов, а 3D-игры должны использовать низкополигональные 3D-объекты и текстуры низкого качества.
Преобразование Интернет → Мини-игры: сильно зависит от базовой кодовой базы.
Веб-игры можно конвертировать в мини-игры. Однако, в зависимости от конкретных библиотек и используемого игрового движка, процесс разработки может занять от нескольких дней до месяцев. Требуется предварительный аудит исходного кода игры, чтобы оценить, сколько времени займет конкретная адаптация.
Мини-игра → Веб-преобразование: это быстро!
Если вы используете стандартную среду веб-игр для разработки мини-игр, например Phaser, ваш код в большинстве случаев уже будет веб-совместим, поэтому он будет работать в браузере без особых настроек.
IDE и инструменты отладки такие же, как и мини-приложения. Однако они чисто на китайском языке. Опыт отладки в целом очень хороший, хотя из-за молодости программы могут быть некоторые ошибки.
Для ясности весь интерфейс переведен на английский язык.
Одной из основных особенностей мини-игр является беспрепятственный доступ к социальным функциям, встроенным в платформу WeChat, которые повышают их жизнеспособность и уровень вовлеченности. Вот презентация основных механизмов и способов их использования.
Получить текущую информацию о пользователе
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
Другая личная информация, которую вы можете получить:
wx.getLocation() => user location
wx.getWeRunData() => get podometer data from werun
https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/authorize.html?t=201832
Получить список данных о друзьях, которые играли в игру
wx.getFriendCloudStorage()
Получить список данных о группе, которая играла в игру
wx.getGroupCloudStorage()
Мини-игры
Библиотека игр Фазера
Веб-сайт Фазера
Phaser: создайте свой первый учебник по игре
Примеры фазеров
Не доверяйте предварительному просмотру, всегда тестируйте на реальных устройствах.
Это пример фрагмента кода, работающего на эмуляторе, но не на реальном устройстве:
static preload(game) {
game.load.image('bg', 'js/game/objects/Background/bg.jpg') => working on both emulator + phone
// game.load.image('bg', './js/game/objects/Background/bg.jpg') => working only on emulator
}
Ограничьте использование сторонних библиотек, поскольку часто требуется дополнительная работа.
Такие библиотеки, как lodash, не работают «из коробки». Часто вам нужно зайти в исходный код и изменить часть в зависимости от API-интерфейсов DOM/BOM, чтобы фактически добиться их загрузки. В Lodash вы можете решить проблему, добавляя отдельные модули один за другим, а не всю библиотеку за один раз. Но это не всегда так просто!
npm install --save lodash.forEach
NOT
npm install --save lodash
Разбейте свой код на файлы меньшего размера, чтобы упростить отладку.
Текущая система отладки IDE работает иначе, чем аналоги в Chrome и Firefox. Один из самых больших источников разочарования, с которым я столкнулся, заключается в том, что многие проблемы в конечном итоге выдают очень расплывчатое, неконкретное сообщение об ошибке без какой-либо информации о том, откуда возникла проблема, за исключением файла, в котором произошел сбой. Поэтому очень важно делить код на более мелкие фрагменты, поскольку найти опечатку в файле длиной в тысячу строк без единой подсказки гораздо сложнее, чем найти опечатку в файле из 50 строк.
