フォロースルーとアクションのオーバラップ - Spineを使ったアニメーション #8

May 15th, 2024

「Spineを使ったアニメーション」シリーズの最新動画で、フォロースルーとアクションのオーバーラップについて詳しく見ていきましょう!

動画で使用している画像とSpineプロジェクトは以下にあります: https://esotericsoftware.com/files/projects/follow-through-and-overlapping-action-project.zip

フォーラム

Spine 4.2: 物理演算が登場

April 27th, 2024

新しくSpine 4.2をリリースしました!今回新しく追加された機能は、10年以上前にSpineを最初にリリースした時以来、長年に渡り私たちが夢見てきたものばかりです。ついに今、ここに実現しました!

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

物理演算

Spineの物理演算は革命的です!現実世界の物理をシミュレートしてボーンを自動的に動かすことができるようになり、アニメーション作成がより簡単になりました。よりクオリティの高いアニメーションを実現しながらもあなたの作業時間を大幅に削減できます!

クリックまたはタップして自由にドラッグしてみてください!

髪や服、その他のアイテムのセカンダリモーションを丹念にアニメーションさせる必要はもうありません。自然法則に従って動くものはすべて、物理を使って自動的に動かすことができます。

時間の節約だけでなく、物理はダイナミックな動きも実現します。アニメーション間だけでなく、ゲーム世界の中でのキャラクターの動きに対しても、流動的かつリアルに反応します。

PSDインポート

SpineでPSDファイルを直接読み込んでアートを取り込むことができるようになりました。これにより、Adobe Photoshopを使わなくてはいけないという制限から解放され、PSDファイルを保存できる画像エディターであれば何でもお好きなものを使用できるようになりました。

その上、なんとPhotoshopToSpineスクリプトよりも約10倍高速に処理できます!

ピクセルモード

Spineでピクセルアート(ドット絵)を使用する場合、新しく追加された Pixels(ピクセル) モードを使用すれば、領域アタッチメントを画面ピクセルに合わせてトランスレート(移動)できるようになりました。これにより、アタッチメントの位置が半端なピクセル単位でずれてぼやけてしまうことを防ぎやすくなりました。

Tまた、画面ピクセルと一致しないアタッチメントをハイライトする、 Highlight Pixels ホットキーも追加されました。これを使えばアタッチメントがぼやける箇所を簡単に特定し、修正することができます。

コンストレイントの管理

4.2では、たくさんのコンストレイントを持つプロジェクトのために様々な改善が行われました:

  • コンストレイントを複製する際、制約対象のボーンも複製するかどうか尋ねるようになりました。これにより、例えば手足をセットアップするときなど、かなりの時間を節約できます。
  • 複数のコンストレイントが選択されている時に、それらを一括で調整できるようになりました。
  • コンストレイントの設定をコピーして、別のコンストレイントにペーストできるようになりました。
  • コンストレイントから制約対象のボーンを個別に追加または削除できるようになりました。
  • ミックスを変更することなく、表示ドットを介してコンストレイントをオフにできるようになりました。

ウェイトツール

新機能 Weld(ウェルド) は、メッシュ間のウェイトを一致させ、メッシュを溶接したような効果をもたらします。これにより、複数のメッシュをあたかも一枚の画像であるかのように同じように変形させることができます。

ウェルドは特に分離しているメッシュをシームレスに繋ぎ合わせるのに最適ですが、他にも、衣装差分、表情差分、クリッピングアタッチメントなどにも既存のウェイトを使用できるため、時間の節約に大きく貢献します。

また、他のメッシュからであっても、ウェイトをコピーして他の頂点にペーストできるようになりました。

カーブのループ

ループアニメーションの最初と最後のキーのカーブハンドルが同期するようになりました。小さなことかもしれませんが、大きな時間の節約になることもあるでしょう!

フォルダ

表示順序でフォルダを作成できるようになり、複雑なスケルトンのスロットを整理することができるようになりました。また、個々のスロットではなく、フォルダをドラッグすることで表示順序を調整できるようになりました。

また、コンストレイントでもフォルダが作成できるようになり、複雑なスケルトンがより管理しやすくなりました。フォルダは、マウスのホイールボタンでクリックすると、すべての子要素を選択できます。

ルートモーション

spine-unityランタイムで、ルートモーションを実行できるようになりました!

キャラクターを歩行させるには、歩行サイクルを所定の位置でアニメーションさせ、ランタイムのコードでゲーム世界を適切な速度で移動させるのが一般的ですが、足を引きずって歩くゾンビのように動きが複雑な場合、コードでアニメーションを合わせるのは非常に困難です。

ルートモーションを使用する場合、歩行サイクルを移動とともにアニメーションさせ、実行時にアニメーションから移動を取り除き、ゲーム世界の位置に適用します。その結果、ゲーム内での移動量をアニメーションと完全に一致させることができます。

さらに一歩進んで、ルートモーションデルタ補正を使用して、ジャンプアニメーションの距離をシームレスに調整し、目的地まで移動させることもできます。こうすることで、アニメーターはSpineでジャンプの動きを綿密にデザインすることができ、プログラマーはゲームの世界でそのジャンプが実際にどこまで動くかをコントロールすることができます。

新しいランタイム

4.1のリリース以来、様々なランタイムを追加してきました!

spine-godotでは、現在最も人気のあるオープンソースゲームエンジン用のランタイムを実装しました。

より直接的なアプローチを好む人のために、spine-c または spine-cpp ランタイムで使用できるspine-sdlを作成しました。

spine-flutterにより、私たちはモバイルアプリへの進出を開始しました!モバイルアプリ用ランタイムは近々もっと増える予定です。

当社のspine-phaserランタイムは、古い Phaser Spine Plugin を完全に置き換えるもので、タイムリーな公式アップデートを保証し、Phaser チームの負担を軽減します。

つい最近、spine-haxeを追加しました。これはOpenFL/Lime上でStarlingと 一緒に使うことができます。HaxeFlixelのようなOpenFL上の他のフレームワークもサポートする予定です。

新しいランタイムの最後のエントリーはspine-pixiで、これはPixiJSの公式ランタイムです。spine-phaser と同様、私たちはユーザーがタイムリーなアップデートを受けられるようにし、PixiJS チームの負担を減らしたいと考えています。


これらのランタイムは実運用に耐えうるもので、すでに多くのコード例が用意されています。現在、それぞれのドキュメントの完成に取り組んでおり、数週間以内に完成する予定です。

Unreal Engine 5.3 サポート

Unreal Engine 5.3 から、Epic はアセットの処理方法を変更しました。これにより、たとえ異なる種類であっても、同じ名前のアセットを同じフォルダに2つ置くことができなくなりました。

そのため、スケルトンファイル (.skel.json) とアトラスファイルの接頭辞が異なることを確認する必要があります。例:skeleton-data.skelskeleton.atlas のように。または、スケルトンデータファイルとアトラスファイルを別々のフォルダに入れることもできます。

spine-ue ランタイムは、古いバージョンのUnreal Engineで作成されたアセットに適切にアクセスできないため、残念ながら自動アップグレードパスを提供することはできません。プロジェクトを Unreal Engine 5.3 に移行する場合は、手動でアセットを再作成して設定し直す必要がありますのでご注意ください。

Unity

Unityでは、デフォルトでTransformの動きがスケルトンの物理コンストレイントと自然に統合されます。つまり、スケルトンを動かすだけで物理が適切に反応します。デフォルトの設定で不十分な場合は、Physics Inheritance 設定を少し変更してみてください。また、新しい Physics Constraints サンプルシーンもお見逃しなく!スケルトンを思いっきり揺すってみてください。

SkeletonGraphicコンポーネントにも新機能が追加されました。新しく追加された Layout Scale Mode を設定するだけで、スケルトンを RectTransform の境界に自動的にフィットさせることができます。ところで、今までSkeletonGraphicが正しく表示されなかったり、正しいInspector設定やマテリアル設定を見つけるのに苦労したことはありませんか?新しい自動検出ボタンのおかげで、そんな時代は終わりました!新しく拡張されたマテリアルセットから正しいマテリアルを自動的に割り当てる Detect Material ボタンもあります。

そして、シェーダーの改善なくしてリリースはありません。すべてのSpine URPシェーダーと Spine/SpriteTint Black をサポートし、URPブレンドモードシェーダーを追加して、今回のアップデートを完成させました。

その他のランタイムの変更

現在、すべての公式ランタイムが新しいエディター機能をサポートしています!各ゲームエンジンおよび各言語固有の変更については、 Spineランタイムの変更履歴を参照してください。

物理演算の追加に伴い、以下のようにいくつかのAPIを変更する必要がありました:

  • Skeleton.updateWorldTransform() が追加のパラメーター physics を受け取るようになりました。このパラメーターは、物理やその他の非決定的な更新を適用する方法を定義します。ほとんどの場合、物理を更新してスケルトンに適用する Physics.update を使用することになるでしょう。
  • 物理演算を駆動するためには、物理のコードは時間の経過を知る必要があります。この情報は各 Skeleton に保存されます。フレーム時間が進んだ場合は、 Skeleton.update(deltaTime) を呼び出してスケルトンに知らせるようにしてください。
  • TransformModeInherit に命名変更しました。トランスフォームモードを手動で設定していない限り、この変更はあなたのコードベースに影響することはないでしょう。
  • TrackEntry.attachmentThresholdTrackEntry.mixAttachmentThreshold に、 TrackEntry.drawOrderThresholdTrackEntry.mixDrawOrderThreshold に命名変更しました。

これらのAPIの変更に加えて、Spineランタイム 4.2を使用したい場合は、Spineエディターバージョン4.2でスケルトンを再エクスポートする必要があります。詳しくはSpineのバージョンについてのガイドをご覧ください。

今後の展開

Spine 4.2にはとても満足しています!新機能は使いやすく、とてもパワフルです。物理はまさにゲームチェンジャーで、ダイナミックな動きでアニメーションの見栄えをより良いものにしながらも、作業時間を大幅に節約できます。

このような大きなリリースの後は、改良とクオリティ・オブ・ライフの向上のための小さなリリースを行いたいと考えています。4.3では、ワークフローの合理化に焦点を当てます。目標は、一般的なタスクを実行するのに必要な労力を減らすことで、さらなる効率化を図ることです。

私たちの新機能を完成させるまでに、様々な問題の報告や、ベータ版のテストへのご協力、提案やフィードバックをしてくださったコミュニティの皆さんに感謝します。皆様のご意見は本当に貴重なものです!

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

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

PSDの直接インポートが出来るようになりました!Photoshopスクリプトはもう必要ありません

February 24th, 2024

新たにSpine4.2.10-betaをリリースし、Spineエディター上でPSDを直接処理できるようになりました!:

  • もはやPhotoshopの使用を強制されることはありません -- PSD形式で保存できる画像エディターなら何でもお好きなツールを使用できます。
  • この機能ではPhotoshopToSpineスクリプトで利用できるすべてのタグがサポートされています。
  • 処理もより高速になっています!大きなPSD(200MB、215レイヤー)では、PhotoshopToSpineスクリプトと比較して、約25%の時間(23秒かかっていたものが6秒)で終了します。
  • PSDの処理とSpineへのインポートをワンステップで行えます。

この機能を試すには、Import Data(データインポート)でPSDファイルを選択してください:

4.2.10-betaの変更内容には他にも素晴らしいアップデートがあります:

  • コンストレイントノードでフォルダを作成できるようになりました!大量のコンストレイントがあっても使いやすく、整理しやすくなりました。
  • 描画順序ノードでフォルダを作成できるようになりました!スロットの描画順序が整理しやすくなりました。
  • 他にもたくさんの重要な修正と改善があります。

新しいPSDインポート機能と、スロットとコンストレイントのフォルダー機能の概要ビデオはこちら:

この投稿について議論するには、Spine フォーラム に飛んでください!