spine-phaser-v4が、Phaser Mesh2Dに対応しました
July 14th, 2026
この度、spine-phaser-v4 の大規模なアップグレードを行いました！
SpineゲームオブジェクトがPhaserの正式な構成要素として扱われるようになり、レンダリングパフォーマンスが向上するとともに、スロットオブジェクトなど、要望の多かった機能が利用可能になりました。これにより、PhaserゲームオブジェクトをSpineのスロットにアタッチし、Spineのクリッピングアタッチメントでクリッピングできるようになりました。
このアップグレードは、Mesh2D API、新しいステンシルAPI、2色ティントカラーのサポートが導入されたPhaser 4.2を基盤としています。今回の対応にあたっては、PhaserチームのRichard Davey氏とBenjamin Richards氏にご協力いただき、新しいAPIの利用方法について助言を受けながら、ランタイム統合の検証を行いました。
新しいspine-phaserレンダリングバックエンド
以前の spine-phaser-v4 では、spine-webgl が提供する独立したレンダラーを通して描画していました。PhaserとSpineは、それぞれ個別にWebGLのレンダリング状態を管理していました。PhaserのコンテンツとSpineのコンテンツの間でレンダリング対象が切り替わるたびに、Phaserは現在のバッチ処理を完了し、Spineレンダラーへ制御を渡した後、処理を再開する前に自身の状態を復元する必要がありました。
このような制御の受け渡しが繰り返されることでバッチ処理が中断され、追加の状態変更やレンダリング処理が発生していました。特に、表示リスト内でSpineとPhaserのゲームオブジェクトが交互に配置されている場合、その影響が大きくなっていました。
アップグレード後のランタイムでは、デフォルトでPhaserのMesh2D APIを使用してSpineアタッチメントをレンダリングします。互換性のあるSpineとPhaserのゲームオブジェクトを同じレンダリングシステムへ送信し、まとめてバッチ処理できるようになりました。これにより、従来存在していたレンダラー間の境界がなくなり、SpineスケルトンがPhaserネイティブのコンテンツに近い形で扱われるようになります。
以下のようにPhaserとSpineのペアを交互に追加または削除してみると、それぞれのバックエンドがドローコール数にどのような影響を与えるか確認できます。
従来のspine-webglバックエンドも、必要なプロジェクトでは引き続き利用できます:
renderer: "spine-webgl"
});
Spineスロット内のPhaserゲームオブジェクト
デフォルトのPhaserバックエンドでは、spine-pixi で利用できる機能と同様に、spine-phaser-v4 でもスロットオブジェクトを利用できるようになりました。
以下のようにしてPhaserゲームオブジェクトをSpineのスロットにアタッチできます:
spineObject.addSlotObject("label-slot", label);
アタッチされたオブジェクトは、スロットのボーントランスフォームに従い、スケルトン内の表示順序において正しい位置に表示されます。スロットへのアタッチメントの前または後にレンダリングしたり、アタッチメントのタイムラインに追従させたり、Phaserコンテナを使用してローカル位置を調整したりできます。
Phaser 4.2のステンシルAPIにより、Spineのクリッピングアタッチメントで、アタッチされたPhaserゲームオブジェクトもクリッピングされます。これにより、SpineアニメーションとPhaserのテキスト、スプライト、その他のゲームオブジェクトを簡単に組み合わせることができます。
以下の例では、Spineboyのポータルアニメーションをスローモーションで再生しています。Phaserロゴは後ろ足のスロットにアタッチされており、緑色で境界が示されているポータルのクリッピングアタッチメントによってクリッピングされています:
デフォルトのPhaserバックエンドは、以下を含むすべてのSpine機能に対応しています:
- メッシュアタッチメントおよびウェイト付きメッシュ
- クリッピングアタッチメント
- ブレンドモード
- 乗算済みアルファテクスチャおよびストレートアルファテクスチャ
- ティントブラック
このアップグレードは spine-phaser-v4 のバージョン4.3.11で利用でき、Phaser 4.2.1以降が必要です。インストール方法とAPIの詳細についてはspine-phaserドキュメントを参照してください。また、spine-phaser-v4のサンプルでは、レンダリングバックエンド、スロットオブジェクト、クリッピング、バッチ処理、その他の機能が実際に動作する様子を確認できます。
ご不明な点がある場合は、これまでどおりSpineフォーラムへご投稿ください。不具合を発見した場合や、開発への貢献をご希望の場合は、spine-runtimesのGitHubリポジトリでissueまたはプルリクエストを作成してください。