パーツからスプライトアニメーションを作成する

Sprite Rigは、カットアウト方式の2Dキャラクター向けにPhotobunに搭載された、無料のスプライトアニメーション作成ツールです。頭、胴体、腕、脚などのパーツが分かれたシートを開くと、Photobunが各パーツを抽出。関節やポーズを設定し、アニメーションのフレームをゲーム用のスプライトシートとして書き出せます。

またはエディターを開く

パーツからスプライトアニメーションを作成する方法

「キャラクターのパーツシートを開く」をクリックすると、すべてのパーツが検出され、それぞれのアートボードに配置されます。
Sprite Rigで、各パーツが胴体とつながる位置にピボット（回転の中心）を設定します。
パーツにポーズを付けて、アニメーションをプレビューします。
フレームをスプライトシートのPNGとして書き出します。

スプライトシート分割と同じ仕組み

パーツはスプライトシート分割と同じ形状検出で切り分けられるので、ばらばらに描いた手足のシートも数秒でリグの準備が整います。

関節とピボット

各パーツは自分のピボットを中心に回転します。これが、動いても腕や脚、頭が体から外れない、カットアウトアニメーションの基本です。

スプライトシートで書き出し

フレームは透明背景付きの1枚のスプライトシート画像にレンダリングされます。どの2Dエンジンでも読み込める形式です。

パーツは本格エディターで修正

手を描き直す、服の色を変える、輪郭を整えるといった作業も、ブラシや色調補正を一通り使って行い、そのままリグに戻れます。

カットアウトアニメーションは、1セットのパーツからたくさんのフレームを作れるため、インディーゲームで人気があります。フレームごとにキャラクターを描き直す代わりにパーツを動かして回転させるだけなので、プロポーションが崩れず、作画の時間も大幅に減らせます。

よいパーツシートでは、胴体、頭、上腕と前腕、手、太ももとすね、足がそれぞれ別のパーツになっています。関節部分は丸く重なるように描くと回転してもすき間が見えず、パーツ同士に少し余白をあけておくと別々に検出されます。

書き出したスプライトシートは、Unity、Godot、GameMaker、Phaserなど、フレームサイズでシートを分割できるエンジンなら読み込めます。パーツは本格的な画像エディターの中にあるので、2Dキャラの衣装違いや色違いも、パーツを直して書き出し直すだけで作れます。

よくある質問

スプライトアニメーションとは？

複数の画像を順番に表示するもので、通常は1枚のスプライトシートに並べて保存されます。ゲームはこのフレームを順に再生して、キャラクターを歩かせたり、走らせたり、ジャンプさせたりします。

どんなイラストが向いていますか？

透明または単色の背景に、パーツごとに少し間隔をあけて描いたキャラクターです。重なる部分も省略せずに描いておくと、手足を回転させたときに欠けが出ません。

アニメーションの経験は必要ですか？

必要ありません。リグで決めるのは、各パーツをどこを中心に回すかと、どんなポーズにするかの2つだけ。結果はすぐにプレビューに表示されるので、見ながら調整できます。

Sprite Rigは無料ですか？

はい。Photobunの一部として、エディターのほかの機能と同じく、ブラウザ版でもデスクトップアプリでも無料で使えます。