weixin minigame tutorial
1.0.0
Este repositorio contiene
La demostración actual incluye las siguientes funcionalidades:
├───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
Arquitectura general: casi como juegos web
Los Minijuegos de Wechat están basados en tecnologías web, el lenguaje principal utilizado es Javascript. El sistema es similar al de la web: se puede acceder a un elemento de lienzo y podemos dibujar sobre él en cada cuadro. Tenemos acceso a la API WebGL y, por lo tanto, podemos usar la GPU para realizar cálculos usando Shaders (lenguaje GLSL).
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
Pero la implementación tiene algunas diferencias.
Sin embargo, la implementación de WebGL y Canvas API difiere de la implementación web nativa que puede encontrar en la mayoría de los navegadores web. El entorno de ejecución del minijuego es JavaScriptCore en iOS y V8 en Android. Todos ellos ejecutan entornos sin BOM ni DOM. No hay ningún documento global ni objeto de ventana. Entonces, si desea utilizar la API DOM para crear elementos como Canvas e Image, generará un error. Más sobre la documentación oficial de minijuegos (chino).
Las bibliotecas web pueden adaptarse al entorno de minijuegos.
Para cerrar la brecha entre la web y el minijuego, el equipo de minijuegos de WeChat ha estado trabajando en una biblioteca especial, weapp-adapter. El objetivo es hacer que las bibliotecas web sean compatibles con los minijuegos. Sin embargo, la implementación actual de la biblioteca aún es imperfecta e incompleta, y a menudo se necesita trabajo adicional para arreglar cada biblioteca de terceros con la que desea trabajar.
Muchos motores de juegos web ya han sido portados (oficial y extraoficialmente)
| Motor | Enfocar | Estado |
|---|---|---|
| Cacao | Motor de juego web chino basado en UI 2D | Apoyado oficialmente |
| laya | Motor de juegos web chino 2D y 3D | Apoyado oficialmente |
| Garceta | Motor de juego web chino basado en UI 2D | Apoyado oficialmente |
| Unidad | Motor de juego 3D/2D, estándar de la industria | Aún no es compatible |
| Fáser (Web) | Motor de juegos web 2D, estándar de la industria en juegos web | Trabajando a través de puerto no oficial |
| tresjs | Motor web 3D, estándar de la industria | Trabajando a través de puerto no oficial |
¿Ya puedo codificar mi propio minijuego? ¡Sí, ya puedes codificar tu propio minijuego! Todo lo que necesita, desde documentación hasta herramientas para desarrolladores, está disponible públicamente.
¿Se puede lanzar todavía? No, aún no se puede publicar, pero aún puedes obtener una vista previa en tu teléfono. (Más información sobre la presentación IDE a continuación)
¿Cuándo se lanzará? No lo sabemos todavía.
Estilos de gráficos de juegos: son posibles tanto 2D como 3D.
Gracias al acceso a WebGL, también podremos visualizar juegos en 3D, que serán acelerados por GPU.
Rendimiento: un sistema ligeramente mejor optimizado que los juegos web
El sistema aún es joven y está en fase de prueba beta, pero ya podemos ver que el rendimiento es muy similar al que son capaces de ofrecer los juegos web. Una buena regla general, por el momento, es no esperar más de lo que puede hacer un juego web, en términos de limitaciones.
El tamaño sigue siendo la principal limitación.
Una de las mayores limitaciones de un minijuego proviene de su tamaño. Actualmente, Wechat sólo permite juegos en paquetes de hasta 4 MB. Es probable que tu juego pueda descargar recursos adicionales desde un servidor externo, pero ten en cuenta que tendrás que recuperarlos cada vez que inicies el juego. Por lo tanto, los juegos deberían ser bastante livianos en términos de recursos, y los juegos 3D deberían usar objetos 3D de baja poli y texturas de baja calidad.
Web → Conversión de minijuegos: depende en gran medida del código base subyacente
Es posible convertir juegos web en minijuegos. Sin embargo, según las bibliotecas específicas y el motor de juego utilizado, el proceso podría llevar desde días hasta meses de desarrollo. Se requiere una auditoría previa del código fuente del juego para estimar cuánto tiempo llevará la adaptación particular.
Minijuego → Conversión web: ¡es rápido!
Si utiliza un marco de juego web estándar para el desarrollo de minijuegos, como Phaser, su código ya será compatible con la web, por lo que funcionará en un navegador sin muchos ajustes.
El IDE y las herramientas de depuración son los mismos que las miniaplicaciones. Sin embargo, están exclusivamente en chino. La experiencia de depuración es en general muy buena, aunque puede tener algunos errores debido a su juventud.
Toda la interfaz ha sido traducida al inglés aquí para mayor claridad.
Uno de los principales puntos de interés de los minijuegos es el acceso perfecto a las funciones sociales integradas dentro de la plataforma WeChat, que aumentan su vitalidad y sus tasas de participación. A continuación se presenta una presentación de los principales mecanismos y cómo utilizarlos.
Obtener información actual del usuario
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
Otra información personal que puede obtener:
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
Obtener la lista de datos de amigos que jugaron el juego
wx.getFriendCloudStorage()
Obtener la lista de datos del grupo que jugó el juego
wx.getGroupCloudStorage()
Minijuegos
Biblioteca de juegos Phaser
Sitio web de Phaser
Phaser: crea tu primer tutorial de juego
Ejemplos de fáser
No confíes en la vista previa, prueba siempre en dispositivos reales.
Este es un ejemplo de un fragmento de código que funciona en un emulador, pero no en un dispositivo real:
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
}
Limite el uso de bibliotecas de terceros, ya que a menudo se necesita trabajo adicional
Las bibliotecas como lodash no funcionan de inmediato. A menudo es necesario acceder al código fuente y modificar la parte según las API DOM/BOM para lograr cargarlas. En Lodash, puedes resolver el problema agregando los módulos específicos uno por uno, y no toda la biblioteca de una sola vez. ¡Pero no siempre es tan fácil!
npm install --save lodash.forEach
NOT
npm install --save lodash
Divide tu código en archivos más pequeños para facilitar la depuración
El sistema de depuración IDE actual funciona de manera diferente a sus contrapartes en Chrome y Firefox. Una de las mayores fuentes de frustración que he encontrado es que muchos problemas terminarán arrojando un mensaje de error muy vago y no específico, sin ninguna información sobre de dónde viene el problema, excepto el archivo en el que falla. Por lo tanto, dividir el código en fragmentos más pequeños es muy importante, ya que encontrar un error tipográfico en un archivo de mil líneas, sin una sola pista , es mucho más difícil que encontrar un error tipográfico en un archivo de 50 líneas.
