weixin minigame tutorial
1.0.0
Este repositório contém
A demonstração atual inclui as seguintes 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
Arquitetura geral: quase como jogos da web
Os Minijogos Wechat são baseados em tecnologias web, a principal linguagem utilizada é Javascript. O sistema é semelhante ao da web: um elemento canvas é acessível e podemos desenhar nele em cada quadro. Temos acesso à API WebGL, e assim podemos utilizar a GPU para cálculos utilizando Shaders (linguagem GLSL).
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
Mas a implementação tem algumas diferenças
No entanto, a implementação da API WebGL e Canvas difere da implementação web nativa que você pode encontrar na maioria dos navegadores web. O ambiente de execução do minijogo é JavaScriptCore no iOS e V8 no Android. Todos eles estão executando ambientes sem BOM e DOM. Não há documento global e nenhum objeto de janela. Portanto, se você quiser usar a API DOM para criar elementos como Canvas e Image, ocorrerá um erro. Mais sobre a documentação oficial do Minigame (chinês).
Bibliotecas da Web podem ser adaptadas ao ambiente do Minigame
Para preencher a lacuna entre a web e o minijogo, a equipe de minijogos do WeChat tem trabalhado em uma biblioteca especial, o weapp-adapter. O objetivo é tornar as bibliotecas web compatíveis com Minigames. A implementação atual da biblioteca, no entanto, ainda é imperfeita e incompleta, e muitas vezes é necessário trabalho extra para consertar cada biblioteca de terceiros com a qual você pretende trabalhar.
Muitos mecanismos de jogos na web já foram portados (oficialmente e não oficialmente)
| Motor | Foco | Status |
|---|---|---|
| Cacau | Mecanismo de jogo da Web baseado em UI 2D chinês | Oficialmente suportado |
| Laya | Mecanismo de jogo web 2D e 3D chinês | Oficialmente suportado |
| Garça | Mecanismo de jogo da Web baseado em UI 2D chinês | Oficialmente suportado |
| Unidade | Mecanismo de jogo 3D/2D, padrão da indústria | Ainda não suportado |
| Phaser (Web) | Mecanismo de jogo web 2D, padrão da indústria em jogos web | Trabalhando através de porta não oficial |
| Três js | Mecanismo Web 3D, padrão da indústria | Trabalhando através de porta não oficial |
Já posso codificar meu próprio minijogo? Sim, você já pode codificar seu próprio minijogo! Tudo que você precisa, desde documentação até ferramentas de desenvolvedor, está disponível publicamente.
Já pode ser lançado? Não, ainda não pode ser publicado, mas você ainda pode visualizá-lo em seu telefone. (Mais sobre a apresentação do IDE a seguir)
Quando será lançado? Ainda não sabemos.
Estilos gráficos de jogos: 2D e 3D são possíveis.
Graças ao acesso ao WebGL, também poderemos exibir jogos 3D, que serão acelerados por GPU.
Desempenho: Um sistema ligeiramente melhor otimizado que os jogos da Web
O sistema ainda é jovem e está em fase de testes beta, mas já podemos perceber que o desempenho é muito semelhante ao que os jogos web são capazes. Uma boa regra, no momento, é não esperar mais do que um jogo web pode fazer, em termos de limitações.
O tamanho ainda é a principal restrição.
Uma das maiores limitações de um minijogo vem do seu tamanho. Atualmente, o Wechat permite apenas jogos com pacotes de até 4 MB. Seu jogo provavelmente será capaz de baixar recursos extras de um servidor externo, mas leve em consideração que eles deverão ser buscados sempre que o jogo for iniciado. Portanto, os jogos devem ser bastante leves em termos de recursos, e os jogos 3D devem usar objetos 3D de baixo polígono e texturas de baixa qualidade.
Web → Conversão de minijogo: depende muito da base de código subjacente
É possível converter jogos da web em minijogos. Porém, de acordo com as bibliotecas específicas e o motor de jogo utilizado, o processo pode levar de dias a meses de desenvolvimento. É necessária uma auditoria prévia do código-fonte do jogo para estimar quanto tempo levará a adaptação específica.
Minijogo → Conversão Web: é rápido!
Se estiver usando uma estrutura padrão de jogos na web para desenvolvimento de minijogos, como o Phaser, seu código já será compatível com a web, portanto funcionará em um navegador sem muitos ajustes.
O IDE e as ferramentas de depuração são iguais aos miniaplicativos. Estes são, no entanto, puramente em chinês. A experiência de depuração é, em geral, muito boa, embora possa apresentar alguns bugs devido à sua juventude.
Toda a interface foi traduzida para o inglês aqui, para maior clareza.
Um dos principais pontos de interesse dos minijogos é o acesso contínuo aos recursos sociais incorporados na plataforma WeChat, que aumentam sua vitalidade e taxas de engajamento. Aqui está uma apresentação dos principais mecanismos e como utilizá-los.
Obtenha informações atuais do usuário
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
Outras informações pessoais que você pode obter:
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
Obtenha a lista de dados de amigos que jogaram o jogo
wx.getFriendCloudStorage()
Obtenha a lista de dados do grupo que jogou o jogo
wx.getGroupCloudStorage()
Minijogos
Biblioteca de jogos Phaser
Site da Phaser
Phaser: Crie seu primeiro tutorial de jogo
Exemplos de phaser
Não confie na visualização, teste sempre em dispositivos reais.
Este é um exemplo de código funcionando em um emulador, mas não em um 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 o uso de bibliotecas de terceiros, pois muitas vezes é necessário trabalho extra
Bibliotecas como o lodash não funcionam imediatamente. Freqüentemente, você precisa acessar o código-fonte e modificar a parte dependendo das APIs DOM/BOM para realmente conseguir carregá-los. No Lodash, você poderia resolver o problema adicionando módulos específicos um por um, e não a biblioteca inteira de uma só vez. Mas nem sempre é tão fácil!
npm install --save lodash.forEach
NOT
npm install --save lodash
Divida seu código em arquivos menores para facilitar a depuração
O atual sistema de depuração IDE está funcionando de maneira diferente de seus equivalentes no Chrome e no Firefox. Uma das maiores fontes de frustração que encontrei é que muitos problemas acabarão gerando uma mensagem de erro muito vaga e inespecífica, sem qualquer informação sobre a origem do problema, exceto o arquivo no qual está falhando. Dividir seu código em pedaços menores é, portanto, muito importante, pois encontrar um erro de digitação em um arquivo de mil linhas, sem uma única dica , é muito mais difícil do que encontrar um erro de digitação em um arquivo de 50 linhas.
