August 21st, 2026
新しいTwitch配信シーズンで、Erikaと一緒に、ゲーム内のSpineアニメーションを最適化し、測定基準ビューや問題ビューを確認する方法を学びましょう！
配信への参加にご興味のある方は、配信開始の通知を受け取れるようにEsoteric SoftwareのTwitchチャンネル をフォローしてください。また、配信スケジュールもここで確認できます。
配信に参加できなくてもご心配なく！後日、録画がSpine Twitchストリーミングページにアップロードされます。
Spineフォーラムであなたのコメントやご意見をお聞かせください。
August 4th, 2026
Spineアニメーションを活用できる場所がまたひとつ増えました！Stake Engineが、PixiJSベースのWeb SDKを通じてSpineをサポートするようになりました。この連携には、Spineの公式 spine-pixi-v8 ランタイムが使用されているため、Spineからの既存のエクスポートデータをそのままプロジェクトに取り込むことができます。
Stake Engineは、カジノゲームの開発、テスト、公開に必要な開発ツールとゲームインフラを提供しています。そのため、周辺のプラットフォームを一から構築する必要がなく、ゲームの見た目やゲームプレイそのものに集中できます。
Spineアセットをゲームのアセット設定に追加した後は、以下のように2つのコンポーネントを使うだけで、アセットの表示およびアニメーションの再生ができます:
SpineProvider はスケルトンをPixiJSシーンに追加し、 SpineTrack は再生するアニメーション、トラック、再生モードを指定します。
導入方法について詳しくは、Stake EngineのSpine連携ドキュメントをご覧ください。このブログ記事についてのご意見・ご感想は、フォーラムでお聞かせください！
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-v4 では、spine-webgl が提供する独立したレンダラーを通して描画していました。PhaserとSpineは、それぞれ個別にWebGLのレンダリング状態を管理していました。PhaserのコンテンツとSpineのコンテンツの間でレンダリング対象が切り替わるたびに、Phaserは現在のバッチ処理を完了し、Spineレンダラーへ制御を渡した後、処理を再開する前に自身の状態を復元する必要がありました。
このような制御の受け渡しが繰り返されることでバッチ処理が中断され、追加の状態変更やレンダリング処理が発生していました。特に、表示リスト内でSpineとPhaserのゲームオブジェクトが交互に配置されている場合、その影響が大きくなっていました。
アップグレード後のランタイムでは、デフォルトでPhaserのMesh2D APIを使用してSpineアタッチメントをレンダリングします。互換性のあるSpineとPhaserのゲームオブジェクトを同じレンダリングシステムへ送信し、まとめてバッチ処理できるようになりました。これにより、従来存在していたレンダラー間の境界がなくなり、SpineスケルトンがPhaserネイティブのコンテンツに近い形で扱われるようになります。
以下のようにPhaserとSpineのペアを交互に追加または削除してみると、それぞれのバックエンドがドローコール数にどのような影響を与えるか確認できます。
従来のspine-webglバックエンドも、必要なプロジェクトでは引き続き利用できます:
デフォルトのPhaserバックエンドでは、spine-pixi で利用できる機能と同様に、spine-phaser-v4 でもスロットオブジェクトを利用できるようになりました。
以下のようにしてPhaserゲームオブジェクトをSpineのスロットにアタッチできます:
アタッチされたオブジェクトは、スロットのボーントランスフォームに従い、スケルトン内の表示順序において正しい位置に表示されます。スロットへのアタッチメントの前または後にレンダリングしたり、アタッチメントのタイムラインに追従させたり、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またはプルリクエストを作成してください。
June 17th, 2026
今回のSpine Tipsでは、キャラクターに片手または両手でさまざまなアイテムを持たせることができるリグの作成方法をご紹介します。
IKおよびトランスフォーム・コンストレイントを使用してキャラクターの手の位置をアイテムに合わせる方法、アイテムを装備するアニメーションの作り方、そして「手がアイテムに追従する場合」と「アイテムが手に追従する場合」それぞれの追従動作の設定方法を学べます。
動画の説明欄からプロジェクトファイルをダウンロードすれば、動画を見ながら実践することができます。この動画の感想や今後取り上げてほしいトピックの提案は、Spineフォーラムまでお寄せください！
