pixi.js 開発ウィーチャットゲーム#
私が使用している pixi.js はバージョン 5.2.1 で、リソースの読み込み API はグローバルなシングルトンオブジェクト PIXI.Loader.shared に変更されました。
ウィーチャットゲームプロジェクトを実行する際、画像リソースの読み込みは以下のように記述されます：
let loader = PIXI.Loader.shared
loader.add('bg', 'static/textures/bg.png');
しかし、ウィーチャット開発者ツールは常に indexOf メソッドが存在しないというエラーを報告しています。そのため、エラーメッセージを追跡し、エラースタックの直前にある crossOrigin メソッドの呼び出し前に if 文の判定があることがわかりました。
source の型を判定し、HTMLImageElement を継承していない場合、source を文字列として扱い、後続のメソッドに入り、indexOf メソッドを呼び出してエラーが発生します。
しかし、問題は source が既に画像オブジェクトであるため、当然 indexOf メソッドは存在しないということです。そのため、エラーが発生します。
ではなぜ instanceof 判定が失敗するのでしょうか。そこで、ブラウザ環境でテストしてみます。
コンソールに入力すると、明らかに true が返されます。
では、ウィーチャット環境ではなぜ false が返されるのでしょうか。おそらくアダプタの問題だと思われます。
私が使用しているアダプタは他の人が修正した @iro/wechat-adapter です（ウィーチャットが提供する元のバージョンには多くの問題があります）。以下のコードの一部が問題があることに気づきました：
export class HTMLImageElement extends wx.createImage().constructor {
}
私のテストの結果、wx.createImage().construcotr そのものが HTMLImageElement であることがわかりました。ここで extends が追加されると、プロトタイプチェーンに余分なレイヤーが追加され、問題が発生します。
プロトタイプチェーンに詳しくない方は、次の図を見て簡単に理解してください（私の理解では、instanceof と extends は本質的にはプロトタイプチェーンの検索です）。
したがって、単純に等しい値に変更するだけで十分であり、extends は必要ありません。
export const HTMLImageElement = wx.createImage().constructor
コードを一時的に変更したい場合は、git clone してローカルに保存し、コードを変更してからプロジェクトの依存関係をローカルに指定するだけです。
"@iro/wechat-adapter": "file:/Users/rayepeng/Documents/OpenSource/MyFrontEndCode/wechat-adapter/src/",
これでプロジェクトは正常に実行されます。
注：修正後の wechat-adapter パッケージは既に公開されています：https://www.npmjs.com/package/@rayepeng/wechat-adapter