weixin minigame tutorial
1.0.0
Ce référentiel contient
La démo actuelle comprend les fonctionnalités suivantes :
├───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
Architecture globale : Presque comme les jeux web
Les mini-jeux Wechat sont basés sur les technologies web, le principal langage utilisé est Javascript. Le système est similaire à celui du web : un élément canevas est accessible et on peut dessiner dessus à chaque image. Nous avons accès à l'API WebGL, et ainsi pouvoir utiliser le GPU pour des calculs utilisant des Shaders (langage GLSL).
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
Mais la mise en œuvre présente quelques différences
Cependant, l'implémentation des API WebGL et Canvas diffère de l'implémentation Web native que vous pouvez trouver sur la plupart des navigateurs Web. L'environnement d'exécution du mini-jeu est JavaScriptCore sur iOS et V8 sur Android. Tous exécutent des environnements sans BOM ni DOM. Il n’y a pas de document global ni d’objet fenêtre. Ainsi, si vous souhaitez utiliser l'API DOM pour créer des éléments tels que Canvas et Image, une erreur sera générée. En savoir plus sur la documentation officielle du mini-jeu (chinois).
Les bibliothèques Web peuvent s'adapter à l'environnement des mini-jeux
Pour combler le fossé entre le Web et les mini-jeux, l'équipe des mini-jeux WeChat a travaillé sur une bibliothèque spéciale, weapp-adapter. Le but est de rendre les bibliothèques web compatibles avec les Minigames. Cependant, l'implémentation actuelle de la bibliothèque est encore imparfaite et incomplète, et un travail supplémentaire est souvent nécessaire pour réparer chaque bibliothèque tierce avec laquelle vous avez l'intention de travailler.
De nombreux moteurs de jeux web ont déjà été portés (Officiellement et officieusement)
| Moteur | Se concentrer | Statut |
|---|---|---|
| Cacao | Moteur de jeu Web chinois basé sur une interface utilisateur 2D | Officiellement pris en charge |
| Laïa | Moteur de jeu Web chinois 2D et 3D | Officiellement pris en charge |
| Aigrette | Moteur de jeu Web chinois basé sur une interface utilisateur 2D | Officiellement pris en charge |
| Unité | Moteur de jeu 3D/2D, standard de l'industrie | Pas encore pris en charge |
| Phaser (Internet) | Moteur de jeu Web 2D, standard de l'industrie du jeu Web | Travailler via un port non officiel |
| Troisjs | Moteur Web 3D, standard de l'industrie | Travailler via un port non officiel |
Puis-je déjà coder mon propre mini-jeu ? Oui, vous pouvez déjà coder votre propre mini-jeu ! Tout ce dont vous aurez besoin, de la documentation aux outils de développement, est accessible au public.
Peut-il déjà être publié ? Non, il ne peut pas encore être publié, mais vous pouvez toujours le prévisualiser sur votre téléphone. (En savoir plus sur la présentation de l'IDE ci-dessous)
Quand sortira-t-il ? Nous ne le savons pas encore.
Styles graphiques des jeux : 2D et 3D sont possibles.
Grâce à l'accès à WebGL, nous pouvons également afficher des jeux 3D, qui seront accélérés par GPU.
Performances : un système légèrement mieux optimisé que les jeux Web
Le système est encore jeune et en phase de test bêta, mais nous pouvons déjà constater que les performances sont très similaires à celles dont sont capables les jeux Web. Une bonne règle de base, pour le moment, est de ne pas attendre plus que ce qu'un jeu Web peut faire, en termes de limitations.
La taille reste la principale contrainte.
L'une des plus grandes limitations d'un mini-jeu vient de sa taille. Wechat n'autorise actuellement que des jeux d'une taille maximale de 4 Mo. Votre jeu pourra probablement télécharger des ressources supplémentaires à partir d'un serveur externe, mais tenez compte du fait que celles-ci devront être récupérées à chaque démarrage du jeu. Ainsi, les jeux devraient être plutôt légers en termes d'actifs, et les jeux 3D devraient utiliser des objets 3D low-poly et des textures de faible qualité.
Conversion Web → Mini-jeu : dépend fortement de la base de code sous-jacente
Il est possible de convertir des jeux Web en mini-jeux. Cependant, selon les bibliothèques spécifiques et le moteur de jeu utilisés, le processus pourrait prendre de quelques jours à plusieurs mois de développement. Un audit préalable du code source du jeu est nécessaire pour estimer le temps que prendra une adaptation particulière.
Mini-jeu → Conversion Web : c'est rapide !
Si vous utilisez un framework de jeu Web standard pour le développement de mini-jeux, comme Phaser, votre code sera pour la plupart déjà compatible avec le Web, il fonctionnera donc sur un navigateur sans trop de modifications.
L'IDE et les outils de débogage sont les mêmes que les mini-applications. Ceux-ci sont cependant uniquement en chinois. L'expérience de débogage est globalement très bonne, même si elle peut être quelque peu boguée en raison de sa jeunesse.
L'ensemble de l'interface a été traduit en anglais ici, pour plus de clarté.
L’un des principaux points d’intérêt des mini-jeux est l’accès transparent aux fonctionnalités sociales intégrées à la plateforme WeChat, qui augmentent leur vitalité et leurs taux d’engagement. Voici une présentation des principaux mécanismes et comment les utiliser.
Obtenir les informations actuelles sur l'utilisateur
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
Autres informations personnelles que vous pouvez obtenir :
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
Obtenir la liste des données des amis qui ont joué au jeu
wx.getFriendCloudStorage()
Obtenir la liste des données du groupe qui a joué au jeu
wx.getGroupCloudStorage()
Mini-jeux
Bibliothèque de jeux Phaser
Site Web de Phaser
Phaser : Créez votre premier tutoriel de jeu
Exemples de phaseurs
Ne vous fiez pas à l'aperçu, testez toujours sur de vrais appareils.
Ceci est un exemple de morceau de code fonctionnant sur un émulateur, mais pas sur un appareil réel :
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
}
Limitez l’utilisation de bibliothèques tierces, car un travail supplémentaire est souvent nécessaire
Les bibliothèques comme Lodash ne fonctionnent pas directement. Vous devez souvent accéder au code source et modifier la pièce en fonction des API DOM/BOM pour pouvoir réellement les charger. Sur Lodash, vous pouvez résoudre le problème en ajoutant les modules spécifiques un par un, et non toute la bibliothèque en une seule fois. Mais ce n'est pas toujours aussi simple !
npm install --save lodash.forEach
NOT
npm install --save lodash
Divisez votre code en fichiers plus petits pour faciliter le débogage
Le système de débogage IDE actuel fonctionne différemment de ses homologues sur Chrome et Firefox. L'une des plus grandes sources de frustration que j'ai rencontrée est que de nombreux problèmes finissent par générer un message d'erreur très vague et non spécifique, sans aucune information sur l'origine du problème, à l'exception du fichier sur lequel il échoue. Diviser votre code en morceaux plus petits est donc très important, car trouver une faute de frappe dans un fichier de mille lignes, sans un seul indice , est beaucoup plus difficile que de trouver une faute de frappe sur un fichier de 50 lignes.
