There is now one more place to put Spine animations to work. Stake Engine supports Spine through its PixiJS-based Web SDK. The integration uses our official spine-pixi-v8
Stake Engine provides the development tools and game infrastructure needed to build, test, and publish casino games. Studios can focus on how the game looks and plays rather than putting the surrounding platform together themselves.
Once a Spine asset has been added to the game's asset configuration, displaying it and playing an animation takes only two components:
svelte
<
Spine Provider key =
"character" >
<
Spine Track trackIndex ={
0 }
animationName =
"idle" loop />
</
Spine Provider >
SpineProvider adds the skeleton to the PixiJS scene, while SpineTrack selects the animation, track, and playback mode.
To get started, see Stake Engine's Spine integration documentation . Discuss this blog post on the forums !
この度、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" backend
– ドローコール
従来のspine-webglバックエンドも、必要なプロジェクトでは引き続き利用できます:
javascript
const spineObject =
this .
add .
spine (
400 ,
500 ,
"skeleton-data" ,
"skeleton-atlas" , {
renderer :
"spine-webgl" });
デフォルトのPhaserバックエンドでは、spine-pixi で利用できる機能と同様に、spine-phaser-v4 でもスロットオブジェクトを利用できるようになりました。
以下のようにしてPhaserゲームオブジェクトをSpineのスロットにアタッチできます:
javascript
const label =
this .
add .
text (
0 ,
0 ,
"Ready!" );
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またはプルリクエストを作成してください。
今回のSpine Tipsでは、キャラクターに片手または両手でさまざまなアイテムを持たせることができるリグの作成方法をご紹介します。
VIDEO IKおよびトランスフォーム・コンストレイントを使用してキャラクターの手の位置をアイテムに合わせる方法、アイテムを装備するアニメーションの作り方、そして「手がアイテムに追従する場合」と「アイテムが手に追従する場合」それぞれの追従動作の設定方法を学べます。
動画の説明欄からプロジェクトファイルをダウンロードすれば、動画を見ながら実践することができます。この動画の感想や今後取り上げてほしいトピックの提案は、Spineフォーラム までお寄せください！
spine-unityランタイムの新しいチュートリアル動画がリリースされました！ この新しい初心者向けのチュートリアル動画では、Spine 4.3でスケルトンデータをエクスポートし、Unity 6にインポートするまでのワークフローを解説しています！
VIDEO この動画では、セットアップやインポートの際に初心者がよく遭遇するエラーについても解説しています。Spine 4.3とUnityの連携を初めて行う方は、ぜひご覧ください。
このビデオは役に立ちましたか？ ぜひこのビデオについてのご意見、ご感想をSpineフォーラム でお聞かせください！
