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
全体的なアーキテクチャ : Web ゲームに近い
Wechat ミニゲームは Web テクノロジーに基づいており、主に使用される言語は Javascript です。このシステムは Web 上のシステムと似ています。キャンバス要素にアクセスでき、フレームごとにその上に描画できます。 WebGL API にアクセスできるため、シェーダー (GLSL 言語) を使用した計算に GPU を使用できます。
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
ただし、実装にはいくつかの違いがあります
ただし、WebGL および Canvas API の実装は、ほとんどの Web ブラウザーで見られるネイティブ Web 実装とは異なります。ミニゲームの実行環境は、iOS では JavaScriptCore、Android では V8 です。これらはすべて、BOM と DOM の両方を持たない実行環境です。グローバル ドキュメントもウィンドウ オブジェクトもありません。したがって、DOM API を使用して Canvas や Image などの要素を作成しようとすると、エラーがスローされます。詳細については、公式ミニゲーム ドキュメント (中国語) をご覧ください。
Web ライブラリはミニゲーム環境に適応できます
Web とミニゲームの間のギャップを埋めるために、WeChat ミニゲーム チームは特別なライブラリである weapp-adapter の開発に取り組んできました。目標は、Web ライブラリをミニゲームと互換性のあるものにすることです。ただし、ライブラリの現在の実装はまだ不完全で不完全であり、使用する予定の各サードパーティ ライブラリを修正するために追加の作業が必要になることがよくあります。
すでに多くの Web ゲーム エンジンが移植されています (公式および非公式)。
| エンジン | 集中 | 状態 |
|---|---|---|
| ココア | 中国の 2D UI ベースの Web ゲーム エンジン | 正式にサポートされています |
| ラヤ | 中国の 2D & 3D Web ゲーム エンジン | 正式にサポートされています |
| 白鷺 | 中国の 2D UI ベースの Web ゲーム エンジン | 正式にサポートされています |
| 団結 | 3D/2D ゲームエンジン、業界標準 | まだサポートされていません |
| フェイザー (Web) | 2D Web ゲーム エンジン、Web ゲームの業界標準 | 非公式ポートを介して作業する |
| スリージェス | 業界標準の 3D Web エンジン | 非公式ポートを介して作業する |
すでに独自のミニゲームをコーディングできますか?はい、すでに独自のミニゲームをコーディングできます。ドキュメントから開発者ツールに至るまで、必要なものはすべて公開されています。
まだ発売できるでしょうか？いいえ、まだ公開できませんが、携帯電話でプレビューすることはできます。 (IDE プレゼンテーションの詳細は次のとおりです)
いつ発売されますか？まだわかりません。
ゲームのグラフィック スタイル: 2D と 3D の両方が可能です。
WebGL へのアクセスのおかげで、GPU アクセラレーションで 3D ゲームを表示することもできます。
パフォーマンス: Web ゲームよりもわずかに最適化されたシステム
このシステムはまだ新しく、ベータ テスト段階にありますが、パフォーマンスが Web ゲームの能力と非常に似ていることがすでにわかります。経験則としては、現時点では、制限の観点から、Web ゲームでできること以上のことは期待しないほうがよいでしょう。
サイズが依然として主な制約です。
ミニゲームの最大の制限の 1 つは、そのサイズにあります。 Wechat では現在、最大 4MB パッケージのゲームのみが許可されています。ゲームではおそらく外部サーバーから追加のアセットをダウンロードできますが、ゲームを開始するたびにそれらのアセットを取得する必要があることを考慮してください。したがって、ゲームはアセットの点でかなり軽量である必要があり、3D ゲームでは低ポリ 3D オブジェクトと低品質のテクスチャを使用する必要があります。
Web → ミニゲーム変換: 基盤となるコードベースに大きく依存します。
Webゲームをミニゲーム化することが可能です。ただし、使用される特定のライブラリとゲーム エンジンによっては、このプロセスの開発に数日から数か月かかる場合があります。特定の適応にどれくらいの時間がかかるかを見積もるために、ゲームのソース コードを事前に監査する必要があります。
ミニゲーム→Web変換：早い！
Phaser などのミニゲーム開発に標準的な Web ゲーム フレームワークを使用している場合、コードのほとんどはすでに Web 互換になっているため、あまり調整せずにブラウザ上で動作します。
IDE とデバッグ ツールはミニアプリと同じです。ただし、これらは純粋に中国語です。デバッグ エクスペリエンスは全体的に非常に優れていますが、まだ若いため多少バグがあるかもしれません。
ここでは、わかりやすくするためにインターフェイス全体を英語に翻訳しています。
ミニゲームの重要な関心点の 1 つは、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 のようなライブラリは、そのままでは機能しません。多くの場合、実際にロードするためには、ソース コードにアクセスして、DOM/BOM API に応じた部分を変更する必要があります。 Lodash では、ライブラリ全体を一度に追加するのではなく、特定のモジュールを 1 つずつ追加することで問題を解決できます。しかし、それは必ずしも簡単なことではありません。
npm install --save lodash.forEach
NOT
npm install --save lodash
デバッグを容易にするためにコードを小さなファイルに分割します
現在の IDE デバッグ システムは、Chrome や Firefox のデバッグ システムとは動作が異なります。私が遭遇した最大のフラストレーションの原因の 1 つは、多くの問題が、フェール先のファイル以外に問題の原因に関する情報がまったくなく、非常に曖昧で具体的でないエラー メッセージをスローすることです。したがって、コードを小さなチャンクに分割することは非常に重要です。1,000行相当のファイル内で 1 つのヒントもなしにタイプミスを見つけることは、50 行のファイルでタイプミスを見つけるよりもはるかに難しいからです。
