アニメーション用アセットの切り出し方

March 6th, 2025

Spineで初めて2Dスケルタルアニメーションの世界に飛び込んだ方の多くは、まず「アニメーション用のアセットをどのように準備すれば良いか？」という問題に直面するでしょう。今回は、アニメーションの制作を始める前に注意すべき点と効率化のためのヒントをご紹介します。

アセットの隠れた部分も描く

アセットを作成するとき、通常は他のアセットで覆われている部分も描くことが重要です。例えば、一部が頭の後ろに隠れている髪を描く場合、見えている部分だけでなく、髪全体を描くようにしてください。この手間をかけることで、髪を回転させたり動かしたりして、隠れていた部分が見えるようになった際に隙間が発生してしまうことを防ぐことができ、可動域を最大化することができます。

両端に丸みを帯びさせる

スムーズで自然な手足の動きのためには、関節の描き方にこだわることが大切です。例えば上腕と前腕のような四肢のパーツを描くときは、関節が重なる部分をできるだけ円形に近い形で残すようにしましょう。

重なっている部分を丸くすることで、隙間ができず、回転の可動域が最大になります。一般的に、他のパーツと重なる部分をどのような形状にするか迷ったら、丸くしておくのが安全です。これは、肩や肘など、根本を中心に回転する必要があるパーツでは特に重要です。

曲げやすくするために真っ直ぐにする

湾曲させる必要のあるアセットをデザインするときは、まっすぐな画像を用意しましょう。まっすぐな画像は両方向に曲げることができ、より柔軟に変形できます。すでに曲がっている画像を反対方向に曲げようとすると、綺麗な結果が得られないことがよくあります。ウェーブのかかった髪など、常にカーブがあるべきものをまっすぐにする方法がわからない場合は、風の影響を受けていない、落ち着いた状態を想像してみてください。

また、画像を斜めに描くのは、効率が悪くなってしまうので避けましょう。斜めの画像は、ポリゴンパッキングを使っていない限り、同じ画像を縦や横に配置するよりも多くのアトラススペースを占有する可能性があります。また、生成(Generate)ボタンを使うと均一なグリッドを生成することができますが、画像に描かれているものが斜めになっていると役に立ちません。

分ければ分けるほど、可能性は広がる

Spineのアニメーションで重要なのは、各パーツを独立して動かせることです。これを実現するには、アニメーションさせたい各パーツを別々に描き、それぞれのレイヤーに配置します。分離の程度はあなた次第で、各パーツをどのようにアニメーションさせたいかによります。ただし、十分に分かれていないと、個々のパーツのアニメーションが難しくなり、クリエイティブな可能性が制限されてしまう場合があることを覚えておいてください。

前面と背面を別々のレイヤーにする

オブジェクトの前後に表示される要素を同じレイヤーに描画するのは避けましょう。例えば、マントを羽織ったキャラクターをアニメートする場合、マントのパーツが体の前後で別々のレイヤーに描かれるようにします。中間点で接続する必要がある場合は、その点を両方に描画し、Spine上で、両方の画像が 同じウェイト になるようにします。ウェルド(Weld)を使えば完璧に一致させることができます！

回転のための輪郭線

輪郭線があるアートスタイルの場合は、交差させる手足のパーツの上下にアウトラインを含めると便利です。こうすることで、四肢がどのように回転してもアウトラインが維持されます。たとえば以下のGIFでは、このテクニックが前腕と手の両方に使われています。これによって、前腕が上腕に合体することなく重なり、手も前腕との接続を保ちながらも大きな回転可動域を持つことができています。

レイヤー名にタグを使う

SpineはPSDファイルを直接インポートできるようになりました。これは従来のPhotoshopToSpineスクリプトよりもはるかに高速で、PSD形式で保存できる画像編集ソフトなら何でも使用できます。タグをPSDのレイヤーやグループに追加することで、Spineの外で効率的にアセットを管理し、お好みの画像編集ソフトウェアからSpineへの合理的なパイプラインを作成することができます。タグをレイヤーやグループ名に追加するだけで、PSDインポート時にSpineが自動的に処理します。

これを利用する際は、ドキュメントの色空間がCMYKではなくRGBに設定されていることを確認してください。また、新しいアセットを簡単に追加できるように、原点を追加することを忘れないように注意してください。

その他の参考資料

Spineでは、効果的なキャラクターの構成とアニメーションの方法を理解するための豊富な参考資料を提供しています。プロジェクト例ページでは、完成した様々なキャラクターの例をダウンロードできます。さらに、Twitchストリームファイルでは、ライブデモやアニメーションプロセスに関して深く掘り下げています。これらのサンプルは、プロのアニメーターがどのようにアセットを整理し、構成しているかを見る上で非常に貴重です。配信全体は長いので、興味のある情報を見つけるためにフィルターやチャプターを活用してください。

これらのガイドラインに従うことで、Spineを使用して洗練されたプロフェッショナルな2Dアニメーションを作成することができます。この投稿についての話題はぜひSpineフォーラムに投稿してください。それでは、楽しいアニメーションライフを！