フォロースルーとアクションのオーバラップ - 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 フォーラム に飛んでください!

エクスポート用シェルスクリプトを公開しました

February 15th, 2024

エクスポート作業の効率化

たくさんのSpineプロジェクトを一括でエクスポートすることが可能な新しいシェルスクリプトを公開しました!このスクリプトは .spine プロジェクトファイルを検索し、見つかった各プロジェクトをエクスポートします。また、プロジェクトファイルの隣にエクスポート設定ファイルを置いておけば、プロジェクトごとに異なるエクスポート設定を使用することができます。

スクリプトを利用してのエクスポートには、多くの利点があります:

  • 任意の数のプロジェクトファイルを一括でエクスポートできます。
  • エクスポートに必ず正しい設定を利用できます。これにより、他のアニメーターに正しい設定を都度共有する必要がなくなります。
  • 開発しているソフトウェアのビルドプロセスの中でエクスポートスクリプトを実行すれば、各ビルドが常に最新のエクスポートファイルを使用していることを確実にできます。これにより、各アニメーターはプロジェクトファイルに変更を加えるたびにエクスポートを実行する必要がなくなります。
  • 新しいSpineバージョンにアップデートする際、全てのプロジェクトを再エクスポートする必要がありますが、このスクリプトの設定だけしておけばとても簡単に行えるようになります!

はじめに

このスクリプトの使い方は以下のビデオで紹介しています。

また、詳細な手順については以降のセクションで紹介しています。


スクリプトのダウンロード

お使いのOS(オペレーティングシステム)に合わせたスクリプトをダウンロードしてください:

スクリプトに関する詳細はspine-scripts GitHubリポジトリにて確認できます。

スクリプトの設定

スクリプトを任意のテキストエディターで開くと、冒頭にCustomization Sectionを確認できます。以下はspine-export.batからの抜粋です。(spine-export.shでもほぼ同じような内容になっています):

最初の3つの設定についてはスクリプトを実行する前に確認してください:

  1. SPINE_EXE Spineの実行ファイルのパスです。もしここに設定されているパスでSpineが見つからなかった場合、スクリプトは他の一般的なインストール先を検索します。

  2. VERSION エクスポートを実行する際に使用するSpineエディターのバージョンです。Spineエディターとランタイムのバージョンは必ず一致させる必要があることに注意してください。

  3. DEFAULT_EXPORT このスクリプトは発見したSpineプロジェクトと同フォルダ内にエクスポート設定JSONファイルがあるかどうかを探します。見つからなかった場合、ここで指定された設定に従ってエクスポートが実行されます。一般的なデフォルト設定のために、jsonjson+packbinarybinary+pack4つのショートカットが用意されているので、これらを使用するか、または任意のエクスポート設定ファイルへのパスを指定することもできます。(詳しくは後のセクションをご覧ください。)

スクリプトの実行

Windows

Windowsではスクリプトを実行するにあたって様々な方法があり、お好きな方法を選べます:

  1. ファイルの上にフォルダをドラッグアンドドロップする。
  2. spine-export.batファイルをダブルクリックしてCMD(コマンドライン)ウィンドウを開き、フォルダのパスを打ち込むか、貼り付けるか、またはフォルダ自体を直接CMDウィンドウ上にドラッグアンドドロップする等して入力する。
  3. コマンドプロンプトからspine-export.batファイルを実行して、フォルダのパスを打ち込むか、貼り付けるか、またはフォルダ自体を直接CMDウィンドウ上にドラッグアンドドロップする等して入力する。
  4. コマンドプロンプトからspine-export.batファイルを実行して、以下のようにフォルダのパスを第一引数として渡して実行する。
spine-export.bat path\to\spine\project\folder

上のいずれかの方法で実行すると、スクリプトは指定されたフォルダを全てのサブフォルダまで含めて検索し、見つかった.spineファイルのエクスポートを実行します。


macOS または Linux

macOSまたはLinuxの場合、spine-export.shを実行する前に実行権限(execute permission)を付与する必要があります。Terminalを開いて、スクリプトが配置されているディレクトリまで移動し、以下のコマンドを使って実行権限を付与してください。

chmod +x spine-export.sh

スクリプトを実行するには、./spine-export.shとエクスポートしたいSpineプロジェクトを含んでいるディレクトリのパスを指定してください。例えば以下のように指定します:

./spine-export.sh /path/to/spine/projects/directory/

スクリプトの実行時にパスを指定しなかった場合は、スクリプトがパスを入力するように促すメッセージを出力します。

実行すると、スクリプトは指定されたディレクトリを全てのサブディレクトリまで含めて検索し、見つかった.spineファイルのエクスポートを実行します。


エクスポート設定

詳細なエクスポート設定を指定するには、エクスポート設定JSONファイルを用意する必要があります。

エクスポート設定の保存

Spineエディター内のエクスポートダイアログの左下に、現在のエクスポート設定をJSONファイルとして保存するためのSave(保存)ボタンがあります。

保存されたエクスポート設定ファイルは".export.json"という拡張子を持ちます。

もしエクスポート設定の中でPack(パック)がチェックされていた場合、テクスチャパッカーの設定もこの.export.jsonファイル内に保存されます。


デフォルトのエクスポート設定

任意のテキストエディターでスクリプトを開いて、DEFAULT_EXPORTの値をご自身の.export.jsonファイルへのパスに変更することで、デフォルトのエクスポート設定を変更できます。例えば以下のように指定できます:

DEFAULT_EXPORT=/path/to/default.export.json

この設定は、見つかったプロジェクトファイルと同階層に .export.json が見つからなかった場合に使用されます。

ただし、出力先については、.export.json ファイルで指定されたパスではなく、Customization Section内のDEFAULT_OUTPUT_DIRに指定された値が使用されることに注意してください。

プロジェクト毎のエクスポート設定

特定のSpineプロジェクトを異なる設定でエクスポートするには、.export.json ファイルを用意してそれをそのSpineプロジェクトと同じフォルダ内に置いてください。例えば、ファイルシステムでの階層は以下のようになります:

<あなたがスクリプトを実行する時にパスを指定するフォルダ>
      ├── 01
      │ ├── skeleton1.spine
      │ ├── skeleton1.export.json
      │ ├── images
      ├── 02
      │ ├── skeleton2.spine
      │ ├── skeleton2.export.json
      │ ├── images
      └── 03
         ├── skeleton3.spine
         ├── skeleton3.export.json
         └── images

.export.jsonファイルの名前はプロジェクトファイルの名前と一致させる必要はありません。

同じプロジェクトを複数の設定でエクスポートする

特定のプロジェクトを異なるエクスポート設定で複数回エクスポートするには、実行したいエクスポートの分だけ .export.jsonファイルを用意してください。例えば、バイナリ形式でのスケルトンデータとPNGシーケンスの両方をエクスポートしたい場合、ファイルシステムの階層は以下のようになります:

<あなたがスクリプトを実行する時にパスを指定するフォルダ>
      ├── 01
      │ ├── skeleton1.spine
      │ ├── skeleton1_Binary.export.json
      │ ├── skeleton1_PNG.export.json
      │ ├── images
      ├── 02
      │ ├── skeleton2.spine
      │ ├── skeleton2_Binary.export.json
      │ ├── skeleton2_PNG.export.json
      │ ├── images
      └── 03
         ├── skeleton3.spine
         ├── skeleton3_Binary.export.json
         ├── skeleton3_PNG.export.json
         └── images

デフォルト設定とカスタム設定を混合する

同フォルダ内に.export.jsonファイルが存在しないプロジェクトは、デフォルト設定でエクスポートされます:

<あなたがスクリプトを実行する時にパスを指定するフォルダ>
      ├── 01
      │ ├── skeleton1.spine
      │ ├── skeleton1_Binary.export.json
      │ ├── skeleton1_PNG.export.json
      │ ├── images
      ├── 02
      │ ├── skeleton2.spine <このスケルトンはデフォルト設定でエクスポートされます>
      │ ├── images
      └── 03
         ├── skeleton3.spine
         ├── skeleton3_Binary.export.json
         ├── skeleton3_PNG.export.json
         └── images

スクリプトの改造

これらのスクリプトは、Spineのコマンドラインインターフェースを使用するなどしてどうぞお好きに改造していただいて結構です。 分かりやすいようにこのスクリプト内の全ての処理には細かくコメントが記述されていますが、 READMEファイル にてさらに詳しくこのスクリプトがどのように動いているかが解説されています。


このチュートリアルはお役に立ちましたか?ぜひあなたのフィードバックをSpineフォーラムでお聞かせください!