weixin minigame tutorial
1.0.0
Dieses Repository enthält
Die aktuelle Demo beinhaltet folgende Funktionalitäten:
├───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
Gesamtarchitektur: Fast wie Webspiele
Wechat-Minispiele basieren auf Webtechnologien, die Hauptsprache ist Javascript. Das System ähnelt dem im Web: Ein Canvas-Element ist zugänglich und wir können in jedem Frame darauf zeichnen. Wir haben Zugriff auf die WebGL-API und können somit die GPU für Berechnungen mithilfe von Shadern (GLSL-Sprache) verwenden.
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
Bei der Umsetzung gibt es jedoch einige Unterschiede
Allerdings unterscheiden sich die WebGL- und Canvas-API-Implementierung von der nativen Web-Implementierung, die Sie in den meisten Webbrowsern finden. Die Laufumgebung des Minispiels ist JavaScriptCore auf iOS und V8 auf Android. Bei allen handelt es sich um laufende Umgebungen ohne BOM und DOM. Es gibt kein globales Dokument und kein Fensterobjekt. Wenn Sie also die DOM-API zum Erstellen von Elementen wie Canvas und Image verwenden möchten, wird ein Fehler ausgegeben. Mehr zur offiziellen Minispieldokumentation (Chinesisch).
Webbibliotheken können an die Minispielumgebung angepasst werden
Um die Lücke zwischen Web und Minispiel zu schließen, hat das WeChat-Minispielteam an einer speziellen Bibliothek gearbeitet, dem Weapp-Adapter. Ziel ist es, Webbibliotheken mit Minispielen kompatibel zu machen. Die aktuelle Implementierung der Bibliothek ist jedoch immer noch unvollkommen und unvollständig, und es ist oft zusätzliche Arbeit erforderlich, um jede Drittanbieter-Bibliothek zu reparieren, mit der Sie arbeiten möchten.
Viele Web-Gaming-Engines wurden bereits portiert (offiziell und inoffiziell)
| Motor | Fokus | Status |
|---|---|---|
| Kakao | Chinesische 2D-UI-basierte Web-Game-Engine | Offiziell unterstützt |
| Laya | Chinesische 2D- und 3D-Webspiel-Engine | Offiziell unterstützt |
| Reiher | Chinesische 2D-UI-basierte Web-Game-Engine | Offiziell unterstützt |
| Einheit | 3D/2D-Game-Engine, Industriestandard | Noch nicht unterstützt |
| Phaser (Web) | 2D-Web-Game-Engine, Industriestandard im Web-Gaming | Arbeitet über einen inoffiziellen Port |
| Threejs | 3D-Web-Engine, Industriestandard | Arbeitet über einen inoffiziellen Port |
Kann ich bereits mein eigenes Minispiel programmieren? Ja, Sie können bereits Ihr eigenes Minispiel programmieren! Alles, was Sie benötigen, von der Dokumentation bis hin zu Entwicklertools, ist öffentlich verfügbar.
Kann es schon veröffentlicht werden? Nein, es kann noch nicht veröffentlicht werden, aber Sie können es trotzdem auf Ihrem Telefon in der Vorschau ansehen. (Mehr zur IDE-Präsentation folgt)
Wann wird es veröffentlicht? Wir wissen es noch nicht.
Grafikstile für Spiele: Sowohl 2D als auch 3D sind möglich.
Dank des Zugriffs auf WebGL können wir auch 3D-Spiele darstellen, die GPU-beschleunigt sein werden.
Leistung: Ein etwas besser optimiertes System als Web-Spiele
Das System ist noch jung und befindet sich in der Beta-Testphase, aber wir können bereits erkennen, dass die Leistung der Leistung von Web-Spielen sehr ähnlich ist. Eine gute Faustregel ist im Moment, nicht mehr als das zu erwarten, was ein Webspiel in Bezug auf Einschränkungen leisten kann.
Die Größe ist immer noch das Haupthindernis.
Eine der größten Einschränkungen eines Minispiels ergibt sich aus seiner Größe. Wechat erlaubt derzeit nur Spiele mit Paketen bis zu 4 MB. Ihr Spiel wird wahrscheinlich in der Lage sein, zusätzliche Assets von einem externen Server herunterzuladen. Bedenken Sie jedoch, dass diese bei jedem Start des Spiels abgerufen werden müssen. Daher sollten Spiele hinsichtlich der Assets eher leicht sein und 3D-Spiele sollten Low-Poly-3D-Objekte und Texturen von geringer Qualität verwenden.
Web → Minispiel-Konvertierung: hängt stark von der zugrunde liegenden Codebasis ab
Es ist möglich, Webspiele in Minispiele umzuwandeln. Abhängig von den spezifischen Bibliotheken und der verwendeten Spiel-Engine kann der Entwicklungsprozess jedoch Tage bis Monate dauern. Eine vorherige Prüfung des Quellcodes des Spiels ist erforderlich, um abzuschätzen, wie viel Zeit die jeweilige Anpassung in Anspruch nehmen wird.
Minispiel → Web-Konvertierung: Es ist schnell!
Wenn Sie für die Entwicklung von Minispielen ein Standard-Web-Gaming-Framework wie Phaser verwenden, ist Ihr Code größtenteils bereits webkompatibel, sodass er ohne große Anpassungen in einem Browser funktioniert.
Die IDE- und Debugging-Tools sind die gleichen wie bei Mini-Apps. Diese sind jedoch ausschließlich auf Chinesisch. Das Debugging-Erlebnis ist insgesamt sehr gut, obwohl es aufgrund seiner Jugend möglicherweise etwas fehlerhaft ist.
Aus Gründen der Übersichtlichkeit wurde die gesamte Benutzeroberfläche hier ins Englische übersetzt.
Einer der Hauptinteressenpunkte von Minispielen ist der nahtlose Zugriff auf soziale Funktionen, die in die WeChat-Plattform eingebettet sind und deren Vitalität und Engagement-Raten erhöhen. Hier finden Sie eine Darstellung der wichtigsten Mechanismen und deren Verwendung.
Erhalten Sie aktuelle Benutzerinformationen
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
Weitere persönliche Informationen, die Sie erhalten können:
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
Rufen Sie die Datenliste der Freunde ab, die das Spiel gespielt haben
wx.getFriendCloudStorage()
Rufen Sie die Datenliste der Gruppe ab, die das Spiel gespielt hat
wx.getGroupCloudStorage()
Minispiele
Phaser-Spielebibliothek
Phaser-Website
Phaser: Erstellen Sie Ihr erstes Spiel-Tutorial
Phaser-Beispiele
Vertrauen Sie nicht der Vorschau, testen Sie immer auf echten Geräten.
Dies ist ein Beispiel für einen Code, der auf einem Emulator, aber nicht auf einem echten Gerät funktioniert:
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
}
Beschränken Sie die Nutzung von Bibliotheken von Drittanbietern, da häufig zusätzlicher Aufwand erforderlich ist
Bibliotheken wie lodash funktionieren nicht sofort. Sie müssen oft in den Quellcode gehen und den Teil je nach DOM/BOM-APIs ändern, um das Laden tatsächlich zu erreichen. Auf Lodash könnten Sie das Problem lösen, indem Sie die spezifischen Module einzeln und nicht die gesamte Bibliothek auf einmal hinzufügen. Aber es ist nicht immer so einfach!
npm install --save lodash.forEach
NOT
npm install --save lodash
Teilen Sie Ihren Code in kleinere Dateien auf, um das Debuggen zu vereinfachen
Das aktuelle IDE-Debugging-System funktioniert anders als seine Gegenstücke in Chrome und Firefox. Eine der größten Ursachen für Frustration, auf die ich gestoßen bin, ist, dass bei vielen Problemen am Ende eine sehr vage, unspezifische Fehlermeldung ausgegeben wird, ohne Informationen darüber, woher das Problem kommt, mit Ausnahme der Datei, auf die es fehlschlägt. Daher ist es sehr wichtig, Ihren Code in kleinere Teile aufzuteilen, da es viel schwieriger ist, einen Tippfehler in einer Datei mit tausend Zeilen ohne einen einzigen Hinweis zu finden , als einen Tippfehler in einer Datei mit 50 Zeilen zu finden.
