Spine 4.3

スライダー、トランスフォーム・コンストレイントでより賢くリグを構築。

ついにSpine 4.3を正式リリースしました!4.3ではスケルトンの動きをより細かく制御できる強力な新機能に加え、ワークフローを効率化する多数の改善が導入されました。

それでは、ハイライトを見ていきましょう!

スライダー

スライダーは、キーとして記録できるあらゆるプロパティに対してアニメーションを適用することができる新しいコンストレイントです。スライダーは手動で設定する他にも、ボーンを使って複雑な動きを自動化したり、ポーズを再利用したり、ブレンドシェイプをミックスしたり、モーフさせたりできます。以下のインタラクティブなチュートリアルでは、スライダーを4ステップで解説しています:

1 / 4 · スライダー導入前
2 / 4 · 手動でスライダー時間を制御する
3 / 4 · ボーンでスライダーを制御する
4 / 4 · フルアニメーション
従来では、アニメーションを再利用するには同じキーを複数のアニメーションにコピー&ペーストする必要がありました。
しかしスライダーを使用すれば、他のアニメーションを直接適用できます!
スライダーはアニメーションの特定のフレームを現在のポーズに適用できます。
下のオレンジ色の枠内をドラッグしてスライダーのフレームを設定し、スライダーアニメーションのタイムラインがどのように適用されるかを確認してみてください。
スライダーボーンによって制御することもできます。つまり、ボーンの回転、トランスレート、スケール、シアーによってスライダーのフレームを設定できます。
ドラッグして コントロールボーンの回転を設定するか、ダイヤモンドの上にあるボーンをドラッグしてみてください。
ボーンの回転がスライダーのフレームを決定し、スライダーアニメーションのタイムラインを適用するのが確認できます。
アニメーションでは、スライダーまたはそのコントロールボーンにキーを設定することで、基盤となるスライダーアニメーションをコピー&ペーストせずに再利用できます。
「スライダーを有効にする」のチェックボックスをクリックしてスライダーをオフにすると、スライダーが行っていた処理がより分かりやすくなるでしょう。
フレーム
0
コントロールボーンの回転
を、スライダーフレームにマッピング
フレーム
0
コントロールボーンの回転
を、スライダーフレームにマッピング
フレーム
0

では、スライダーを使った他の例も見てみましょう:

1つのスライダーでアニメーション全体を制御

単一のスライダーだけで、多数のタイムラインを含むアニメーション全体を適用できます。手をクリックしてドラッグしてみてください。ここでは腕の回転によってスライダーが制御されており、スライダーによってメッシュの変形、手の回転、筋肉のシェーディングや血管のフェードが行われています。

スライダー切り替え
手をドラッグしてみてください!

見回す

スライダーはマウスカーソルの動きを自然なキャラクターの動きに変換できます。顔や体を調整し、口の画像を切り替え、腕が体の前後を自然に通過するように表示順序を制御します。特別なロジックは不要です。

スライダー切り替え

カチカチ動く針

時計の針の動きはまずトランスフォーム・コンストレイントで制御されており、そこにスライダーが魔法を加えています:針が本物のアナログ時計のように前方へカチッと進む動作を作っています。速度を変更したりスライダーをオン/オフして、針が刻む効果や影の変化を確認してください。

スライダー切り替え
速度 1.0x

トランスフォーム・コンストレイント

4.3ではトランスフォーム・コンストレイントが大幅に刷新され、トランスフォームプロパティを異なるプロパティタイプにマッピングできるようになりました。たとえば、あるボーンのトランスレートが他のボーンの回転やスケールを変更するように設定できます。あらゆる組み合わせが可能です!また、制約された値を特定の範囲内にクランプ(制限)したり、ソースと制約するボーンそれぞれでワールド/ローカルどちらの値を利用するかを選べるようになりました。

Transform constraint properties in Spine 4.3

これらの変更により、向きに応じたスプライトの反転や機械的なリンク、最小限のアニメーション作業で構築できる複雑なリグなど、自動的に動作するスケルトンの可能性が大きく広がります。

この巻物は、新しいトランスフォーム・コンストレイントによってトランスレートを回転とスケールに変換しています。これにより、単一のボーンの動きが巻物全体を巻き上げたり解いたりしています。

巻物をドラッグしてみてください!

その他多数の変更

Spine 4.3には多数の改善が詰め込まれています。ここではいくつかのハイライトを紹介します:

より賢いメッシュトレース

同じ操作を繰り返す代わりに複数のメッシュを同時にトレースできます。プロセスは大幅に高速化され、トレース結果もより正確になりました。

メッシュトレースには「統一」スライダーも追加され、関節部でより自然に曲がるメッシュが生成できるようになりました。

複数メッシュの一括ウェイトペインティング

1つずつに限定されず、複数のメッシュアタッチメントに跨ってウェイトを設定できます。

複数のメッシュに対して一度にバインド、ウェルド、スムーズ、自動ウェイト、削減を適用することも可能です。

修正ボタン付き「問題」ビュー

新しく追加された「問題」ビューは、警告やプロジェクトの問題を一箇所に集約してくれます。これにより、ツリー内で警告アイコンを探す必要がなくなりました。表示されている問題を選択すれば、注意が必要な項目に直接移動できます。

さらに、多くの問題はワンクリックで自動的に修正できます!

HTMLエクスポート

Spineは、アニメーションを表示する準備が整ったHTMLページをエクスポートできるようになりました。組み込みで多機能なプレイヤーが欲しい場合は「Spine Player (プレーヤー)」を選び、ウェブページにアニメーションを自然に組み込みたい場合は「Spine Web Components (Webコンポーネント)」を選択してください。

HTMLエクスポートはスキンの組み合わせにも対応しており、カスタムコードを書かずにスキンの設定やプレビューを共有しやすくなっています。

表示順序フォルダのキー化

表示順序フォルダはメインの表示順序タイムラインとは別に独自のキーを持てるようになりました。これにより、スケルトンの他のキーと衝突することなく単一フォルダの内容をアニメーションさせることができます。

異なるフォルダを異なるトラックにキーとして記録して、複雑な表示順変更を重ねられます。

新しいクリッピングオプション

クリッピングアタッチメントは逆方向クリッピングをサポートするようになり、クリッピング形状の外側ではなく内側を隠すことができるようになりました。これによりオブジェクトが途中で現れたり隠れたりする効果が作りやすくなりました。

また、クリッピングのパフォーマンスはより効率的になりました。特に新しい「凸」オプションを有効にすると、CPU使用量も削減されます。

より柔軟なリンクメッシュ

リンクメッシュはソースメッシュと同じスロット内になくても使えるようになりました。リンクメッシュを別のスロットに配置しつつ、ソースメッシュのジオメトリとウェイトを共有できます。

これにより、異なるスキン間や表示順が異なるアタッチメント、別のリグ構造で同じメッシュ設定を複製せずに再利用しやすくなりました。

体積を保持したスケーリング

物理およびIKコンストレイントに、体積を保持するスケールY設定が追加されました。これを使うと、スケールYがスケールXと逆方向に増減するようになります。これにより、伸縮する四肢やカートゥーン的なリグ、またはちょっとしたバウンド効果に適したスクワッシュ&ストレッチが簡単に実現可能になります。

ドープシート中心の同期モード

Spineには以前から既にグラフ中心の同期モードがあり、グラフでキーを選択するとそのタイムラインがドープシートに表示されるように設定可能でした。4.3では逆方向の同期も可能になりました。

ドープシートでキーを選択すると、そのタイムラインがグラフに表示され、キーを一望しながらカーブに素早くアクセスできます。これにより、ドープシートが持つキーの一覧性を活用できます。

改善されたカーブ編集

キーの値が変わるとき、Spineはベジェハンドルをより賢く調整してカーブの形状を保つようになり、手動で整える必要性が大幅に減りました。

新しいデフォルトカーブオプション「最後に選択したもの」は、新しく作成したキーに最後に選んだカーブタイプを適用します。

キー化されたコンストレイント値

「Key Constrained」ホットキーにより、コンストレイントが適用された後の値をキーにすることができるようになりました。これは物理や他のコンストレイントによって作られた動きをキーに変換したい場合に便利です。

数値入力欄での数式

数値入力欄は数式を理解するようになり、値を入力する場所で直接計算式を入力できるようになりました。value または v で現在の値を参照できます。例:10 + v * 8

+=-=*=/= といった接頭辞は現在の値を変更します。boneLengthboneRotation のような定数や、randomclamp のような関数も使用できます。

以上は4.3の改善点の一部にすぎません。他にも多くの追加があり、それぞれは小さく見えるかもしれませんが、総合するとリギング、アニメーション、インポート、エクスポート作業を大幅に効率化しています。

スキンワークフローの改善

スキンはドラッグ&ドロップでマージできるようになり、スマートなフィルタリングや多くのQOL改善が加わりました。必要な他のボーンやコンストレイントを自動で追加する機能も含まれます。

プロジェクトをZIPとしてパッケージ

「プロジェクトをパッケージ化」コマンドは、プロジェクトとその画像を含むZIPファイルを作成します。チームメンバーやクライアント、サポートへ完全なプロジェクトを手早く共有したい時に大変便利です。

相対パスでのエクスポート

エクスポートで相対パスを利用できるようになり、異なるフォルダやコンピュータからでも正しい場所へファイルをエクスポートしやすくなりました。

「ピン留めされたスキンのみ」フィルター

「すべてのスキンアタッチメントを表示」に「ピン留めされたスキンのみ」オプションが追加され、多数のスキンがある場合でもスキンワークフローが整理されるようになりました。

イメージノードでのPSD管理

PSDファイルはイメージノードから直接管理できるようになり、PSD の再インポートや同期のワークフローが改善されました。各画像も元のPSDを表示するようになりました。

スキン毎のアトラスパッキング

テクスチャパッキングはスキンごとに別々のアトラスを作成できるようになりました。スキンを個別にパッケージ、ロード、ストリームするプロジェクトにおいては大変便利です。ランタイムもこのワークフローをサポートするよう更新されました。

洗練されたエディターUI

アイコン、スライダー、無効状態、警告、コンストレイントのビジュアルなどがエディター全体で改善されました。

改善されたエクスポート

画像、動画、データ、CLI経由のエクスポートはマルチスレッド化されて大幅に高速化されました。CLI自体も多くのインポート/エクスポートオプションを得て、自動化パイプラインがより簡単で柔軟になりました。

より多くのホットキー

新しいホットキーには、キーの選択、ホールド、反転、ナビゲーション、ズーム、ビューポートの反転、表示順操作、画像パス、シーケンス、メッシュ編集関係のホットキーなどが含まれています。

さらに詳細をご覧になりたい場合は、以下の変更履歴ハイライトを展開してください。

その他の変更履歴ハイライト:

  • ボーンアイコンのサイズと回転のコントロールを追加。
  • エディター選択のパンくずリストを追加。
  • パス、バウンディングボックス、クリッピングアタッチメント、および表示順フォルダにリセットボタンを追加。
  • ビューサイドバーのボタンアイコンを追加。
  • メッシュ画像がリサイズされたときに表示されるダイアログに「すべてチェック」オプションを追加。
  • テクスチャパッキングにブルートフォース設定を追加。
  • 「Sequence」と「Region - Mesh」のホットキーを追加。
  • ファイルダイアログと「Image Path」ホットキーで選択可能な画像パスを追加。
  • フォルダ複製(内容すべてを含む)を追加。
  • PSDインポートはスマートオブジェクトの再利用、ソースメッシュのマッチング、欠落しているPSDの警告、他スロットのリンクメッシュ、[rotate:degrees] タグ、出力パスのデフォルト、スケールとマージタグ、削除と上書きの挙動を改善。
  • プロジェクトファイルサイズの縮小。
  • ツリーパフォーマンス、ツリー注釈、選択挙動、スクロール/パンの改善。
  • プロジェクト警告、アタッチメント警告、欠落ファイル報告の改善。
  • メッシュ編集の安定性、頂点処理、無効なメッシュの復旧の改善。
  • 自動ウェイトとウェイトペイントワークフローの改善。
  • 物理演算の滑らかさ、応答性、および決定論的挙動の改善。
  • プレビューアニメーションのミキシングとエクスポートプレビューの応答性の改善。
  • JSONの可読性、サイズ、数値精度の改善。
  • コンストレイントのソート、アイコン、非アクティブ状態、およびコンストレイントの警告の改善。
  • ファイルダイアログ、ファイル監視、Windowsネットワークパスのセキュリティの改善。
  • 多くのクラッシュ修正、エクスポート修正、インポート修正、および元に戻す/やり直す修正。

Web Components

Spine 4.3では Spine Web Components を導入しました。これはSpineのアニメーションを任意のウェブページに直接埋め込むのを簡単にするカスタムHTML要素群です。JavaScriptの記述は不要で、HTMLにタグを追加するだけで動作します!

Web Componentsは非常に効率的です。ウェブページ上に多数のスケルトンを同時に置いてもパフォーマンスに問題は生じません。

<spine-skeleton> 要素はアトラス、スケルトンデータ、アニメーション、スキンのためのシンプルな HTML 属性で Spine スケルトンを表示・操作できます。読み込み、レンダリング、再生を自動で処理します。

<script
	src="/spine-webcomponents.min.js"
></script>

<spine-skeleton
	atlas="spineboy-pma.atlas"
	skeleton="spineboy-pro.json"
	animation="walk"
></spine-skeleton>

Web Componentsは、ランディングページ、ポートフォリオ、インタラクティブなドキュメント、そしてコードを書かずにウェブ上でSpineアニメーションを紹介したいあらゆる場所に最適です。実際、このページのインタラクティブな例はすべて Spine Web Components を使って表示しています!

spine-cpp、spine-c、下流ランタイムのための新しい基盤

Spine 4.3にはネイティブランタイムスタックの大規模なリファクタが含まれており、より多くの言語をより高品質にサポートできるようになりました。spine-cpp は今や全てのC系ランタイムの共有実装となり、spine-cspine-ios / SpineSwift、および spine-flutter はすべてその上に自動生成されたラッパーとして書き直されました。

spine-cppはこの新しいスタックをサポートするために拡張されました。ヘッダは spine-cpp/spine-cpp/include/spine/ から spine-cpp/include/spine/ に移動し、公開APIは4.3のモデルに合わせて再構成されました:ボーンのポーズと適用ポーズの分離、Pose / Posed / PosedActive の基底クラス、統一されたコンストレイントタイムライン階層、新しい Sequence モデル、凸および逆クリッピング、holdPrevious の代わりの加算合成、スライダーなど。軽量なRTTIシステムも追加され、他言語で慣用的なバインディングを生成できるようになりました。

spine-cは完全に書き直され、spine-cpp の自動生成されたCラッパーになりました。従来の手作業で維持されていた sp* API は廃止されました。新しい API は不透明な spine_xxx ハンドルを使い、生成されたキャスト関数を通じて C++ の型階層全体を公開し、生成ヘッダには nullability ヒント(/*@null*/)や Doxygen 風のドキュメントが含まれ、C++ と完全な機能互換を達成しています。これは spine-c ユーザーにとって破壊的な変更です。新しいAPI とドキュメントは esotericsoftware.com/spine-c にあります。

spine-ios / SpineSwiftspine-flutterは新しいCランタイム上に完全に自動生成されるようになりました。両者とも spine-cpp の型階層をSwiftとDartの実際のクラス(適切な継承を持つ)として公開します。例:Bone : PosedActive, Posed, Update、言語ネイティブのnull許容性(SwiftとDartの Bone?)は不透明ポインタの代わりになり、インラインのドックコメントは spine-cpp から引き継がれます。内部の書き換えは大規模ですが、典型的なアプリコードの移行は大半が機械的です:インポート名が変わり(Spine / SpineCppLiteSpineSwift / SpineiOS に)、いくつかのメソッド名が spine-cpp に合わせて変更され(setAnimationByNamesetAnimationsetToSetupPosesetupPoseparentMeshsourceMeshAnimationState.getCurrentgetTrack など)、Dartのゲッター/セッターの組み合わせは慣用的なプロパティになりました(例えば getData().setDefaultMix(0.2)data.defaultMix = 0.2 に)。4.3ブランチの更新されたサンプルアプリが移行面をすべて示しています。

このスタック上に構築されたその他のネイティブランタイム(spine-sfmlspine-sdlspine-glfwspine-godot、および spine-ue)も spine-cppspine-c APIに更新されました。これらを使用している場合は、アップグレード前に Spine Runtimes changelog のランタイム固有の記述を必ず読んでください。

spine-cocos2dx は4.3で削除されました。 Cocos2d-xは2020年のv4.0以降安定版リリースがなく、現在のXcodeや iOS SDKに対してパッチなしではビルドできません。まだcocos2d-xを使い続けている場合は、spine-cocos2dx の4.2ブランチに留まってください。

spine-libgdx に対するスナップショットテスト

Spine 4.3はコア言語ランタイムのためのスナップショットテストハーネスも導入しました。spine-libgdx は引き続きリファレンス実装であり、その公開APIに対するLSPベースの解析を使って他のランタイム向けの一致するシリアライザを自動生成します。各サポートランタイムにはスケルトンを読み込み、SkeletonAnimationState を構築し、アニメーションを適用してオブジェクトグラフ全体を決定論的なJSONにシリアライズする HeadlessTest が用意されています。ハーネスはその出力をバイト単位で spine-libgdx の出力と差分比較し、どのフィールドや計算が逸脱したのかを正確に特定できます。

4.3ではスナップショットハーネスが spine-cppspine-libgdx リファレンスと比較します。他のコア言語ランタイム(spine-cspine-tsspine-haxe、および spine-csharp)の組み込みは進行中です。Unity、Godot、Unrealのようなエンジン統合は直接ターゲットにしておらず、それらが構築されているコアランタイムを通じて間接的に検証されます。

ランタイムの変更

公式ランタイムはすべてSpine 4.3向けに更新され、新しいエディタ機能をサポートしています。最も重要なランタイムの変更点は以下です:

  • スライダーは新しい SliderSliderDataSliderTimeline、および SliderMixTimeline APIを通じてサポートされます。
  • トランスフォーム・コンストレイントは4.3のコンストレイントオーバーホールに合わせて更新され、プロパティマッピング、クランプ、オフセット、ローカル/ワールド空間の振る舞いなどをサポートします。
  • 新しいポーズモデルはセットアップ、未制約、制約済み、および適用状態を明示的に分離します。たとえばボーンはポーズと適用ポーズデータを公開し、スロットやコンストレイントはそれぞれのポーズオブジェクトを公開します。
  • AnimationStateの保持システムはクロスフェード時のディップを回避するよう改善され、holdPreviousinterruptAlpha を必要としなくなりました。タイムラインの apply メソッドは新しい fromSetupadd、および out パラメーターを使用し、トラックエントリは加算合成を直接公開します。
  • TrackEntry.mixInterpolation により AnimationStateのミックスで非線形補間が可能になり、クロスフェードを標準の線形ミックスよりも滑らかまたはよりスタイライズされた感触にできます。
  • 物理の挙動はより正確になり応答性が向上し、特に低いアップデートやレンダーレートで改善されています。ランタイムはスケルトンレベルの風と重力のコントロールや物理リセットタイムラインの改善された取り扱いも得ました。
  • クリッピングは凸および逆クリッピングをサポートするようになりました。また、クリッピング性能と逆クリッピングのエッジケースの修正も含みます。
  • 表示順フォルダは新しい DrawOrderFolderTimeline によりサポートされ、アニメーションで表示順フォルダの変更にキーが打てます。
  • スキンごとのアトラスを使用するワークフローはより直接的にサポートされました:AtlasAttachmentLoader は「スキンごとのアトラス」でエクスポートされたスケルトンで欠落する領域を許容でき、AttachmentLoader APIはスキンのプレースホルダと解決されたアタッチメント名の両方を受け取るようになりました。
  • リンクメッシュAPIはリンクメッシュが他のスロットのソースメッシュを使い、変形(deform)およびシーケンスタイムラインを正しく継承できるように更新されました。
  • シーケンスアタッチメントはフレームごとの領域、UV、オフセットを事前計算するようリファクタされ、正確性が向上し、ランタイム間でのシーケンス描画の安全性が高まりました。

通常通り、Spineランタイム4.3 を使う場合は Spineエディター4.3でスケルトンを再エクスポートする必要があります。詳細はSpineのバージョンに関するガイドを参照してください。

spine-ts:強化されたウェブランタイム

TypeScriptランタイムとそのウェブバックエンドは4.3で多くの実用的な改善を受けました:

  • WebGL、Three.js、Pixi、Phaser、Player、およびWeb Componentsは、PMAおよびストレートアルファテクスチャを自動的に扱えるようになりました。ストレートアルファテクスチャは必要に応じて PMAとしてアップロードされるため、WebPのような小さいフォーマットを使いつつPMAレンダリングの利点(正しいブレンドモードなど)を得ることができます。
  • 共有された SkeletonRendererCore はレンダラー間の重複を減らします。
  • Pixi、Phaser、Three.js は物理の位置と回転の継承設定を得ました。

spine-unity:マルチスレッド化とモジュール化

spine-unityランタイムはスレッド化されたアニメーションとメッシュ生成をサポートするようになり、設定を切り替えるだけで大幅なパフォーマンス向上が得られます!

やることは、Preferences -> Spine で設定を有効にするだけです。スケルトンイベントのコールバック内でメインスレッド専用の処理を行っている場合でも心配いりません。コールバックは自動的にメインスレッドで呼び出されます。また、アップデートサイクルで割り当てが発生しないようにしており、単純なスレッド実装で起きやすい問題を回避しています。既製のオプションではそれが実現できなかったため、自前のワークスティールングスケジューラを構築し、コア間で効率的に負荷を分散し、システムをチューニングするための設定も用意しています。

Multithreading

これは標準的なC#スレッド上に構築されているため、ECS や Job System のような新しいUnity機能は不要です。Unity 2017.1まで遡って互換性があります。

さらに、Skeletonコンポーネントをレンダリング用とアニメーション用のコンポーネントに分割し、SkeletonMecanim が初めて SkeletonGraphic UI要素をアニメーションできるようになりました。

SkeletonRendererSkeletonGraphic コンポーネントはレンダリングを担当し、SkeletonAnimationSkeletonMecanim がアニメーションを担当します。コンポーネントはシーンを開くと自動でアップグレードされるため、シーンごとに動作を確認できます。すべてが正しく動作することを確信したらワンクリックでプロジェクト全体をアップグレードできます。影響を受けるAPIにコードが触れている場合は、いくつかの調整が必要かもしれません。アップグレード手順を案内する完全なガイドが用意されてあります。spine-unity 4.3ランタイムをインストールすると関連情報をまとめたダイアログが表示されるので、あなたや同僚が変更を見落とすことは無いでしょう。

最新のUnity UI Toolkitの改善を活用して、Spine UI Toolkitの UPM パッケージはPMAアトラステクスチャ、すべてのブレンドモード、バックフェース三角形レンダリングをサポートするようになりました。SpineVisualElement の新しい Detect ボタンは適切なマテリアルを自動で選択しますので、ワンクリックで設定が完了します。

最後に、多くのQOL改善も追加しました。新規スケルトンをインポートするときにPMAとストレートアルファの不一致を自動検出する機能や、それを解決するためのダイアログが追加されました。また、Preferences内でPMA/ストレートアルファワークフロー切替がワンクリックでできるようになり、そしてスキンのリパッキングがブレンドモードも扱えるようになりました。

今後の展開

Spine 4.3はとても良い出来になりました!スライダーと新しくなったトランスフォーム・コンストレイントにより、より少ない労力で複雑なリグを構築する強力な方法が得られ、数多くのQOL改善がワークフローをより速くスムーズにします。

ベータ期間中、テスト、報告、提案やフィードバックを寄せてくれたコミュニティの皆さんに心から感謝しています。皆さんの意見は大変貴重です!

楽しいアニメーションライフを!
– Spineチームより

この投稿に関する話題はSpineフォーラムで話しましょう!