Sprite Motion Lab【AEでスプライトシートを作ろう編】

ここでは After Effects を AEと書きます。

このページでは AEでスプライトシートを作る方法を説明します。

　まずは何らかのアニメーションを作る必要があります。スプライトシートを利用する側の立場と真逆になりますので、ここは頭を切り替えないと混乱してきますからご用心ください。

　今回は Cinema 4D Liteで作った "ブタの蚊取り線香入れ" がこちらに向かってぴょんぴょんしている 30fps、36コマの 3Dアニメーションを作ってみました。この試作素材は無料配布しています。使ってみたい方はページの最後をご確認ください。

　それでは始めます。
　自分で作った動画アニメーションのキャラをスプライトシートにするには、二つの工程といくつかの決めごとがあります。

　【工程 1】　動画アニメーションを連番PNGにする

動画のフレームレートとコマ数に合わせてレンダーキューで連番PNGにします。

　【工程 2】　連番PNGを格子状に並べて、1枚の PNG静止画にする

エクスプレッションで、たくさんの連番PNGをレイヤー順に格子状に並べます。すべてのレイヤーに同じエクスプレッションをコピペするという手間が掛りますが、手作業でコンポジションビューの左上端から順に並べていくことを考えたら、ほぼ一瞬で終わります。

　やるべき工程はこれだけです。

　次にスプライトシートを作るうえでの決めごとです。ルールに沿って作らないとうまくいきません。

・ 動画は何コマで完結させるか
　スプライトシートにする動画のフレームレートから換算するのが最も自然になります。例えばフレームレート 24fpsなら 24コマで 1秒、48コマで2秒といった具合です。
　しかし何秒でもいいといってもスプライトシートのコマ数が多すぎるのは本末転倒です。何のための軽量素材なのかの枠をはみ出てしまいます。たしかに AEで使用するためのスプライトシートなら上限は無いのも同然ですが、Unityや Unreal Engineなどのゲームエンジン向けにするのか、あるいは別のツールで汎用アニメーション素材として使うのか、などの枠組みを考えると、20～40コマ程度に収めるのが実用的です（LINEスタンプ等の素材として利用する場合も最大20コマの制約があります）。

　当 Labで配布した試作動画は 30fpsのアニメーションにしましたので、同じ30コマにしようと考えたのですが、1秒では 3Dの描写が再現しきれませんでした。そこで 6×6の格子状にすると計算しやすいこともあり、36コマ、1.2秒にしました。

・ 1コマを何ピクセルにするか
　4096×4096pxの正方形サイズの中に、横方向 6コマで、縦 6段組みにします。すると 1コマは682pxです。4px余りますが、それはエクスプレッションが自動的に捨ててくれます。

　スプライトシートのサイズを 4096×4096pxにした理由は、Unityや Unreal Engineでの使用も考えたからで、このサイズが実用的なメモリ上限（VRAM消費）や読み込み速度のバランスが取れた "最も扱いやすい最大サイズ" だったからです。
　実際 8192×8192サイズのものを Unityで使用してみましたら、動くことは動いたのですが、シーンビューでの読み込みがフリーズ状態（ぐるぐるアイコンが出たまま）になってしまいました。

　しかし AEに限定すれば、サイズの上限はメモリ次第です。例えば 8192×8192サイズで、一コマ 682pxなら 12×12グリッドで 144コマのアニメーションだって可能になります。

《注意》

　LINEのスタンプを対象にする場合は 1コマの大きさが 320×270pxで、ファイルの総容量が 300KBの制限があります。そのような理由から 15fps、20コマぐらいがギリギリだと思われます。

・ 1コマのサイズの 2倍寸でアニメーションを作る
　アニメーションのコンポジションサイズは 682pxの倍、1364pxで作ります。これは素材を 2倍サイズで作成してスプライトシートに展開するときに 50%に縮小して作成すると、ダウンサンプリングの際にジャギー（素材の縁に出るギザギザ）が抑えられ、輪郭や微細なディテールが滑らかで綺麗な画質になるからです。
　当 Labの配布素材は Cinema 4D Liteのファイルを 1364px、36コマ、30fps の ProRes4444フォーマット『.mov』にエンコード済みですから、タイムラインの 0フレームをスタートに配置して、ワークエリアを 35フレームに設置するだけです。

【ここが意外と重要】

　この段階でループ再生をしてアニメーションに飛びが無いか、動きは正しいか、見切れる部分はないかを確認します。

　できましたら、ワークエリアが 0から 35フレームまでになっているか確認して（0～35フレームで 36コマ）、それを連番PNGでエンコードします。
　AEのレンダーキューで、【形式】にPNGシーケンスを選び、【コンポのフレーム番号を使用】にチェックを入れておきますと、自動的にファイル名の後ろに番号が振られて、
『***_00.png』～『***_35.png』という連番PNGが作られます。

　その工程は次の映像を参考にどうぞ。

配布素材は上記のものを『.mov』にエンコードしてあります（作業方法も同じです）

　36枚の連番PNGができたところで、【工程 1】は完了です。ここから【工程 2】に移ります。
【工程 1】のプロジェクトは保存して終了させてください。代わりに新規プロジェクトを立ち上げます。

　ここからスプライトシート完成までを映像にしました。ご覧ください。

【注意点】

　すべての連番PNGは、レイヤー番号『1』から、最も若い連番『***_00.png』を入れて、あとは順番に並ぶようにすること

そのためにはプロジェクトパネルに並んだ先頭の『***_00.png』から選択して、続いて "Shift" キーを押しながら、最後の連番素材『***_35.png』を選択してからレイヤーパネルにドラッグアンドドロップしないと、逆に並んでしまうことがあります。

　素材をレイヤー順に並べたり、すべてのレイヤーの【位置】プロパティだけを選択したり、または一つのレイヤーのエクスプレッションをコピーして、一度に全部のレイヤーへ貼り付けたりする方法は、時短処理のノウハウですので、覚えておくとどこかで役に立つことがあります。

　また、特定のプロパティだけを選択するときは、一つずつを "Shift"キーか、"Ctrl"キーを押しながら選択していく方法もありますが、映像のようにプロパティの左側から入り込んで一気にすべてのプロパティをドラッグする方法が最も速く選択できます。コツは、レイヤー名をドラッグするのではなく、プロパティの左から入り込む感じでドラッグします。

　『位置』プロパティに記載するエクスプレッション


cols = 6;   // 横に並べる枚数
w = 682;    // 横の間隔(px)
h = 682;    // 縦の間隔(px)
startX = 341; // 左端の開始位置
startY = 341; // 上端の開始位置

// -1するのはindexが 1から始まっているから（indexはレイヤー番号）
idx = index - 1; 
x = startX + (idx % cols) * w;
y = startY + Math.floor(idx / cols) * h;
[x, y]

読み込まれた連番PNG素材のアンカーポイントが 682×682pxの素材のセンターになっていること前提で、以下のように設定しています。

　startX = 341; // 左端の開始位置
　startY = 341; // 上端の開始位置

この部分で最初のコマの位置を決めています。アンカーポイントがセンターでないときや、682px以外のサイズのときは調整してください。（もちろん『W』と『h』の数値も変えてください）

　ワークエリアは 1フレームだけにすること

最後に、4096×4096の領域に並べられた 1フレームの映像をスプライトシートとして、レンダーキューに送って、PNGファイルで書き出すと完成です。
　補足ですが、スプライトシートは 1枚ですから、ワークエリアを 1フレームだけにするのを忘れないでください。忘れていると、とんでもない数の PNGができあがりますので注視してください。

　使用しましたエクスプレッションでは、対応できるスプライトシートの大きさに上限はありません。コマ一つの『幅』『高さ』のpx数と、横に並べるコマの『数』、一つ目のコマの中心位置、そして『コマの総数』を、エクスプレッションコードの最初のほうで、書き換えればいいだけです。それから全体の大きさがコマ数で割り切れずに端数が出ても問題ありません。なんなら正方形でなくても可能です。あくまでも Unityでは 2の累乗（4,8,16,32,64……1024,2048,4096,8192）でないとうまくスライスされませんから、4096サイズとした、ただそれだけです。

　さてここまでお読みになって、【工程 2】を AEで行う必要があるのか、という疑問を持たれた方がおられると思います。
　実はワタシもそのうちの一人でして、最初はフォトショップの "コンタクトシート II" を使って配置しようと考えましたが、この機能では余白や間隔の制御が厳しく、ゲーム用の完璧なドット単位のスプライト化には向きませんでした。そこで Illustratorでも考えましたが、手動整列ぐらいしかなく、これならフォトショップと同じで、スプライトを作るたびに何十コマもの素材を並べるのは手間が掛りすぎです。かといって自動化をするには外部スクリプトが必須でした。

　しかし、AEを使用すると、

　【工程 1】『アニメーションを作成』→『動きの確認』→『連番PNGに書き出し』

　【工程 2】『連番PNG読み込み』→『エクスプレッションで自動配置』→『スプライトシートに書き出し』

という流れで、すべて同一ツール内で完結する効率の良さは圧倒的に有利です。しかもアニメーションを修正して連番PNGを上書き出力すれば、あとは【工程 2】のプロジェクトを開くだけで自動的に最新の状態で配置が完了し、すぐに新しいスプライトシートが書き出せます。もしこれを手動で左上から並べていたら、と思うだけで寒気がします。
　もちろん工程を分けず、1つのプロジェクト内で全てを自動連携させることも可能です。ただ、一気に説明すると内容が複雑になってしまうため、それは次の効率化へのヒントとして、お伝えしておきます。

　次のページは応用編です。スプライトシートから APNGを作る過程を AEと APNG Assemblerを使って実現します。
　補足として、LINEスタンプに使用する APNGを作るときの注意点なども掲載する予定です。

【AEでスプライトシートを作ろう】の説明で使用した試作素材を利用してみたい方は、こちらのダウンロードページをお読みになって、ダウンロードしてください（Googleドライブが開きます）。

《ご注意》

※配布用の素材は約 33MBの .mov ファイル（圧縮ZIP形式）です。ファイル容量が大きいため、モバイル通信（スマホ等）でのダウンロードは通信量にご注意ください。また、練習作業を行う PC環境でのダウンロードを強く推奨いたします。