はじめに
ゲームエンジンなどでアニメーションを表示させたい場合、たびたびスプライトシートというものを使うことがあります。
AdobeのAnimateを使って動画からスプライトシートを作成する方法をご紹介いたします。
ちなみにスプライトシートってこういうののことを言います↓
スプライトシートについて
以下理想的な仕様です。
仕様はこの限りではなく入力ソフト側でカスタマイズすればある程度自由にできますが、シートの汎用性を求めるなら以下の仕様を遵守しましょう。
- スプライトシート全体の解像度は2のべき乗の正方形
- ゲームエンジンの場合は読み込める解像度が決まっています。スプライトシートも画像なので守りましょう。
- 縦横のグリッド数は同じにする
- 動画のフレーム数にルート計算して出てくる数字の小数点を繰り上げた値が良いでしょう。
例） 動画フレーム数=80 の場合
80のルートは "8.944..." なので9×9マスのグリッドを用意すればいい、という感じになります。
- 1フレームの解像度は自由
- ただし特別な理由がない限り上記2つを満たした上での最大値を選ぶのが良いでしょう。別に最大値じゃなくて盛大にスプライトシートの領域を残してもいいのですが、そんなのもったいないので普通は最大値で作るべきです。ピクセルは大切にしましょう。
例） 先ほどの9×9のスプライトシートの場合
スプライトシートの解像度は2のべき乗だから...
2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192... これらの中からスプライトシートの解像度をまず決めます。
8192pxを決めたとすると...
8192/9 = 910.222222222... なので小数点を切り捨てて答えは
910px
となりました。
AfterWffectsなどで動画を調整する
いきなりAnimateに動画を持っていきたいのは山々なのですが、まずは最終的なスプライトシートの仕様に合わせて動画を調整します。
ただし僕自身Animateはスプライトシートを作るためにしか使わないので全く詳しくないですが、もしかしてAnimateでできることもAEでやってしまってるかもしれません。
詳しくは書きませんが以下のようなことを行ってください
- 1フレームの解像度に合わせて画像サイズを調整する
- 前述した計算方法で動画から1フレーム分の解像度を割り出してください。
- アルファ付きの場合は背景色を埋める
- アルファはスプライトシートにした後で抜きます。
- h264で書き出す
- AnimateがH264しか対応してないためです。つまりアルファ付きHAPとかProresなんかが読めないわけです。しかし結局書き出したデータはただの画像なので後からアルファを抜くことは容易です。Animateでマスクやキーイングがありそうですが僕はもう書き出してからPhotoshopで抜いてます。
Animateのタイムラインに読み込む
こんな動画を作りました。
仕様は
- 248フレーム
- 512px × 512px (8192px 16×16グリッド想定で調整済み)
こちらをスプライトシート化するためにまずはAnimateに読み込むところから。
新規作成
Animateを開いてプロジェクトを作成します。
解像度は動画の解像度に合わせます。
###動画をタイムラインに読み込む
ヘッダメニューの ファイル＞読み込み＞ビデオの読み込み
を選択すると読み込みのポップアップが出るので、以下画像を参考にしてファイルパスを指定してください。
あとは次へを押すとタイムラインに動画が読み込まれます。
↓こんな感じです。右のライブラリタブに動画ファイルが配置されているのがわかります。
###シンボル化する
タイムラインの動画レイヤを右クリックしてレイヤーをシンボルに変換を選択します。
シンボル化できるとライブラリタブ内にシンボルが作成されます。
スプライトシートの設定をする
ライブラリ内のシンボルを右クリックしてスプライトシートを生成...を選択します。
するとスプライトシート生成ポップアップがあらわれます。
あとは解像度や画像形式などを選んで書き出しするとスプライトシートの完成です。
完成！
アルファを抜く場合はマスクで同一のスプライトシートを作って別のツールで抜くなどしてます。
注意点
スプライトシートは2のべき乗がマストですが、1フレームの解像度はその限りではありません。
ただ1フレームの解像度が指定のコマ数で配置して割り切れず切り捨てた場合はスプライトシートの右と下に不足解像度ぶんの余白が出ますので、Photoshopなどを用いてリサイズしてください。
以上スプライトシートの作り方でした！