Sprite Motion Lab【AEで動かそう編】

back to top

　　

スプライトシートにマウスカーソルを重ねると絵が動き出しますが、これは APNGという方法でアニメーションさせています。ではスプライトシートは APNGでないと動かないのか、ということではなく、AEの中でシートをアニメーション化させたものですから、AEからエンコードできるものでしたら、『.mov』でも『.mp4』の動画や『Gif』アニメーションでも変換することができます。ここではそれをもっとも気軽に動かすことができる APNGに変換しただけのことです。APNGに変換するとLINEでよく見かけるスタンプも作れますので、そのあたりも含めて【AEで作ろう 編】で説明します。

　スプライトシートの原理は簡単。
　シート状になったコマ割りの絵を、手作業で切り取って並べるとアニメーションは可能ですが、その工程を考えただけで、気力を失いそうになります。そこでコマ 1つが覗ける大きさの窓を作り、その下でシートを順に動かすと、その窓にはアニメーションされたキャラが見える、という方法を AEで自動化します。あるルールを守って作られたスプライトシートなら簡単に実現します。

　あるルールというのは……。

使用するスプライトシートが、正しく左上（0,0)を基準にして、幅、高さのサイズごとにキッチリ配置されて格子状になっているか、という点です。

フォトショップなどの "コンタクトシート II" などの自動配置機能は、キャンバス全体に対してアイテムを均等配置するため、きれいな格子状に並ばず、AEでスライスするとズレが発生します。
　ほかにも、同じスプライトシートのように見えるものの中には Atlas（アトラス）形式でトリミング加工済みのものがあります。これはゲームの軽量化のために "コマごとにサイズがバラバラで、余白が詰められて配置されたシート" や、位置座標データ（JSONやXML）がセットになっていますので、AEでは自動スライスができません。入手時には注意してください。


　工程を箇条書きにしました。順に詳しく説明していきます。

　1.シートを配置する

　2.エクスプレッションを書く

　3.表示窓（ビューポート）に合わせる

　4.完成。何に使う？

　本当の作業工程は 3つ、何に使うかは "ご自由に" と書きたいところですが、ここではホームページなどで使う APNGに利用する方法を説明します。

　1.シートを配置する

この工程に入る前に把握しておかないといけないことは、使用するスプライトシート全体のサイズと、コマ一つのサイズです。これが正しくないと AEがコマをスライスするときにズレが生じます。

　次に全体で何コマでできているのか、その数も知っておくべきです。スプライトシートを AE内のコンポジションとして利用するときはループ再生にするか、停止させるのかを設定するときに必要になります。

　今回の例では、全体のサイズが『4096×4096px』です。それを『6×6』の格子状に並べていますから、一コマは『682×682px』で、全部で『36』コマです。
　AEで使用することを考えていますので、かなり高画質です。APNGで使用する、かつ LINEのスタンプを作ろうとしているのでしたら、容量制限の範囲にまでダイエットしなければいけませんが、これに関しては【4.完成。何に使う？】で説明したいと思います。
　ひとまず、ここでは AEのアニメーションでも使用可能な高画質を目指します。ダイエットはあとでいくらでもできますので。

　では始めます。

　まず『4096×4096px』サイズで、フレームレート『30fps』のコンポジションを作ります。
　フレームレートに関してはダイエットのときに重要になりますが、いまは高画質で滑らかな動きを目指します。
　できたらそのど真ん中にスプライトシートを配置します。

　これで準備完了。

　2.エクスプレッションを書く

『位置』プロパティのストプウォッチアイコンを『Alt』キーを押しながらクリックすると、デフォルトのエクスプレッションが出ましたら、それを消して次のエクスプレッションを記載します（緑文字部分をコピペでも可能）。

　このエクスプレッションだと『ループ/停止』の設定ができますのでおすすめです。

---

// --- 【設定項目】素材に合わせて変更する ---
const cellWidth  = 682;  // 1コマの横幅 (px)
const cellHeight = 682;  // 1コマの縦幅 (px)
const cols       = 6;    // 横方向のコマ数（列）
const totalFrames = 36;  // 総コマ数（ループさせるフレーム数）
const isLoop     = true; // ループ再生するかどうか (true: ループする / false: 最後のコマで停止)

// --- 【計算処理】 ---
const currentFrame = timeToFrames(time);

// フレーム数の制御（ループまたは最終コマで保持）
let f;
if (isLoop) {
    f = currentFrame % totalFrames;
} else {
// フレームがコマ数を超えたら、最後のコマ番号を返す＝停止する
    f = Math.min(currentFrame, totalFrames - 1);
}

// 現在のコマの列(x)と行(y)の位置を算出
const col = f % cols;
const row = Math.floor(f / cols);

// 左上（0,0）を基準にシートをシフト移動
const xOffset = -col * cellWidth;
const yOffset = -row * cellHeight;

// 元の位置情報にオフセットを加算
[value[0] + xOffset, value[1] + yOffset]

---

エクスプレッションでエラーが出なければ、AEを再生してみてください。再生ヘッドがフレーム『0』から『35』に進むにごとにスプライトシートが、左へ、そして上へとスクロールされていけば、正常動作しています。そして『isLoop』を『true』にしていた場合は、最初に戻って再び上左へと、スクロールされていき、『false』にしている場合は、再生ヘッドが進んでも映像は最後のコマで停止します。


　これでほぼ完了ですが、このままでは全体が見えてしまい、少々使いにくいので、表示窓（ビューポート）に入れて、AEで使用できるコンポジションにします。

　3.表示窓（ビューポート）に合わせる

　次の映像をご覧いただければ、大体の工程がご理解できると思います。

最終的にフレームレート『30fps』の滑らかな動きで、『ブタの蚊取り線香入れ』が、ぴょんぴょん跳ねているアニメーションができ上ります。コンポジションのサイズも 682pxありますから、フルHD解像度の動画でも画質は耐えられると思います。

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

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

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


　次のページでは、左上端からコマの幅・高さ刻みで厳密に配置し、端数が出た場合は右端と下端に余白として捨てるというルールで、コマを格子状に並べるエクスプレッションを利用して、スプライトシートを AEで作る方法を伝授します。

【スプライトシートの入手先】

itch.io

インディーゲームや素材の巨大マーケット。検索画面で「Sprite Sheet」「2D Effects」と絞り込むと、有料・無料（パブリックドメイン含む）の高品質なスプライトシートが膨大に見つかります。

OpenGameArt.org

オープンソースやCC（クリエイティブ・コモンズ）ライセンスのゲーム素材が集まる老舗サイト。完全無料で利用できるスプライトシートが多数あります。

BOOTH

国内のクリエイターマーケット。VFXエフェクトやドット絵キャラの「連番画像・スプライトシート」が個人クリエイターから多数出品（無料配布～数百円程度）されています。サイトによってはスプライトをモブキャラクターと呼んでいるところもあります。それは、ゲーム内では、主人公以外の "街の通行人"、"村人"、"兵士"、"店主" などをまとめてモブキャラ素材、モブ NPCスプライト という名称で配布・販売しています。
　モブキャラのスプライトシートは、正面・背面・左右の "歩行アニメーション（3～4コマ）" が整然と並んだシートになっていることが多くて、AEで通行人の群衆（ガヤ）を作る際などの素材として非常に使いやすいです。

Unity Asset Store / Unreal Engine Marketplace

2Dゲーム用のVFXエフェクトやアニメーション素材の中に、PNGスプライトシートが同梱されているアセットが豊富にあります。

CLIP STUDIO ASSETS

イラスト・マンガ制作ソフトですが、ユーザーが投稿した2Dアニメーション用のスプライトシートや連番素材が多数共有されています。

Adobe Stock / PIXTA

この二つは説明の必要がないでしょう。巨大ストックサイトで有名です。