Sprite Motion Lab【APNGを作ろう】

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

このページでは、スプライトシートを利用する手段の一つとして、APNGをご紹介します。

　APNGとは Animated PNG（アニメーテッドPNG）と呼ばれる画像フォーマットです。Web上で気軽に扱え、高画質かつフルカラーの透過処理（アルファチャンネル）にも対応しているため、従来の GIFアニメーションに代わる形式として広く利用されています。
　ただし、AEから直接 APNGは書き出せません。専用の変換ツールが必要で、ここでは APNG Assembler を使用して APNGファイルを作成します。

　APNGはLINEのアニメーションスタンプなどでも標準的に採用されているフォーマットですので、当 Labの【AEでスプライトシートを動かそう】の工程をマスターすることで、スプライトシートからもスタンプを作成できるようになります。

《補足》

当 Labでは、規格に合わせた APNGにも使えるスプライトシートを AEで出力するまでを解説していますが、LINEスタンプ等への組み込みや審査提出は、用途に応じた公式ガイドや規定に沿ってご活用ください。

　AEで APNGを作るには、アニメーションが必要です。映像の尺（デュレーション）は Webでの使用が基本の APNGですから 1～4秒もあればじゅうぶんです。それ以上の長編動画は別のフォーマットにまかせればいいことになります。

　手元にスプライトシートは持っているという方は、"【AEでスプライトシートを動かそう】"で説明している方法で、まずアニメーション動画を先に作成してください。

　スプライトシートは持っていないけど、とりあえず APNGを試したい方 は、"【AEでスプライトシートを作ろう】" の末尾にある試作素材ダウンロードページからアニメーション動画をダウンロードしていただくのが早道だと思います。

　ひとまず、アニメーション用の動画が準備できましたら、次に APNG Assemblerを入手する方法を説明します。

　ここからは、APNG Assemblerのダウンロードと簡単な使い方を説明します。すでに使ったことのある方は飛ばしてください。

　それでは、必要不可欠な APNG Assemblerを手に入れるところからです。
　公式プロジェクトページ（SourceForge）https://apngasm.sourceforge.net/ からダウンロードします。

GUIバージョンと書かれた下の画像ををクリックします。

　すぐにダウンロードが始まって、ピンク矢印のカウントが動き出します。

　カウントが『0』になってしばらく待つと、

『ダウンロードしてくれてありがとう』というメッセージが出たら、パソコンのダウンロードフォルダを開いてください。

【apngasm_gui-2.91-bin-win32.zip】というZIPファイルがありますので、それを解凍すると【apngasm_gui-2.91-bin-win32】というフォルダが作成されます。

フォルダの中には、【apngasm_gui.exe】と【readme.txt】という 2つのファイルがあります。【readme.txt】は英文のバージョン履歴やコマンドラインなどの説明が書かれています。
【apngasm_gui.exe】これが本体です。

　補足しますと、APNG Assemblerには GUIバージョンと CLIがありますが、GUIのほうが使いやすいです。
　また、インストール的なものはありません。【apngasm_gui.exe】を Wクリックするとプログラムが起動します。どこでも好きなフォルダに移動して、使いたいときに Wクリックして起動する軽いプログラムです。

【apngasm_gui.exe】を Wクリックして起動させます。

小さなウィンドウのソフトが立ち上がります。各ボタンや入力欄の説明は以下のとおりです。

　① 連番PNGのファイルをここにまとめてドロップします

連番PNGはあとから追加できないようですので、全部まとめて入れるようにします。追加が出た場合は一度すべて選択（Ctrl+A）して削除します。
　ドロップした連番PNGは、Frame（フレーム）欄に番号の若い順に並びます。

　② ここでループ設定をします

【Play indefinitely】にチェックを入れるとループ再生になります。チェックを外して、【loops】に数値を入れるとその数値だけループして止まります。
【Skip the first frame】にチェックを入れると、1コマ目（最初の画像）がアニメーションのループから除外されます。
　これは、1コマ目を「APNG非対応の古いブラウザなどで表示される静止画プレビュー（表紙画像）」として設定し、APNG対応環境で再生するときは2コマ目以降だけをアニメーションさせたい場合に利用します。
　通常はチェックを入れることはありません。

　③ ここでファイル圧縮に関する設定をします

【Compression Method】は上から順に圧縮率が高くなって、ファイルサイズは小さくなりますが、ここでの変換速度は遅くなります。
　真ん中の【7zip】が処理速度とファイルサイズのバランスがいいのでデフォルトとなっています。

【Optimize palette】は、使用されている色数を自動判別し、カラーパレット情報を最小限に圧縮します。
【Optimize color type】は、アルファチャンネル（透明情報）が、すべてのコマで使われていない場合は RGB形式に変換する、など、最適な形式に自動変換して容量を削減します。
　基本的に両方チェックを入れておきます。

　④ 書き出した APNGファイルの保存場所と名前をここに入力します

右端の【...】アイコンを押してフォルダの選択もできます。

　続いて……。
　フレーム欄に連番PNGが入りますと、フレームレートの設定ができます。

二つのボタンがアクティブになりますが、まず上の【Delays - All Frames】は、すべてのコマに対しての表示時間を設定します。これはフレームレートと同等のことを意味していまして、デフォルトの『1/10』は 1コマを 1/10秒だけ表示したら次へ切り替わるということで、1÷10＝0.1秒 表示になります。つまり 1秒間に 10コマ表示することになり、これは 10fpsということになります。1/30だと 30fpsになります。

　下の【Delays - Selected Frames】は、どれか一つのフレーム（コマ：連番PNG）を選んでから設定すると、その絵だけ別の表示時間に設定できるようになります。どのようなシチュエーションでこれを利用するのかといいますと、例えば、『最後の 1コマだけ 3秒表示させたい』などのときに、フレーム欄の最後のコマを選択しておいて【Delays - Selected Frames】で、『3/1 』と入力します。分数に小数点が使えませんので、分母を 1 にすると 3秒になります。
　この状態で、フレーム列の最後、【Delay,Sec】に並んだ分数値が、ラストのフレームだけ 3/1となっていれば成功です。

《注意》

例えば【Delays - Selected Frames】を『5/1』と変更した後に【Delays - All Frames】を押すと、そこにも 5/1と、最後に入れた数値が入っていますが、これはバグではなくて仕様のようです。フレーム列の【Delay,Sec】を確認するようにしてください。

　さて、これですべての設定が完了しました。APNGの出力先と出力名を確認してから、一番下の【Make Animated PNG】ボタンを押してください。進捗バーが伸びていき、『DONE』と出たら完了です。

　指定したフォルダに指定した名前で APNGファイルができていると思います。
　しかし、初めてのときは「おや？」と思われるかもしれません。ただの PNGファイルがそこにあるからです。ファイルエクスプローラーにも『PNG』としか出ていません。もちろん Wクリックしても "スンッ" とも動きません。

　この理由は、Windowsのフォトや標準ビュワーが APNGに対応していないからです。でも焦らないでください。もともと APNGは Webブラウザ上で GIFよりも高品質なアニメーションを表示できるようにするのが目的でした。ですので、Chromeや Edgeなど、ブラウザのアドレス入力欄にドラッグ＆ドロップして Enterキーを押すと動いた絵が見られます。ぜひ試してみてください。

　APNGのいいところは、htmlの中ではただの PNGファイルと扱われるところです。つまり imgタグで画像として扱えば、そこにアニメーションされた絵が現れるという手軽な方法で入れ替えができます。
　具体的には、静止画に "mouseover" や "onclick" イベントが発生たら、その場所をAPNGと入れ替える、という方法です。ホームページ作成では定番の方法で、APNGも JPGも扱い方が何も変わらないのは、実にエレガントで使い勝手が良いポイントです。

　さて話を AEに戻して動画を連番PNGに書き出すまでの工程の説明をします。

　まず、コンポジションサイズ（画像サイズ）をいくつにするかです。最近はネットワークも高速になってきて、昔より制限は緩くなっていますが、APNGを Webのアニメーション素材に使用するとしても、あまりに大きなものは重くなりがちで敬遠されます。そのような大規模なものは『mp4』など、それ専用のフォーマットにまかせるべきです。
　しかし、GIFアニメーションと比べると格段に画質が良いため、つい緩く見積もってしまって、「ああ、重い……」となることがしばしばあります。

　当 Labの Sprite Motion Galleryに並んでいる APNGコンテンツは、『18コマ』で、画像サイズは『512×512px』、ファイルサイズは約1MBほどです。少々ファイルが大きいのは透過処理と重なるグラデーション（薄い色の文字）が原因ではと考えています。

　それでもパソコンなら初期ロードのときにほんの少し引っかかる程度で、あとはキャッシュで動きますのでサクサクです。しかし、スマートフォンなどのモバイルで閲覧すると瞬間固まります。見ていて、『あれ？』と思われるかもしれません。

　そのあたりも踏まえまして、コマ数は『20～40』、画像サイズは『300～600px』、ファイルサイズは『500KB～1MB』ぐらいが目安ではないでしょうか。

　もちろん手動で奇数番号の連番PNGを間引いてもいいのですが、きれいに1/2にならないようなコマ調整、例えば 36コマから 24コマにすると割り切れません。そのようなときは AEでフレームレートを調整すれば自動的にコマを間引いてくれます。ただし、割り切れなかった計算誤差が出ることがあり、コマ数が 0 または+1になることがあります。これは APNGとしては問題ないですが、コマ数に制限のあるときは、それを超えない範囲に調整する必要があります。

《補足》

フレームレートを調整してコマ数を間引くときは、【フレームブレンド】を『OFF』にして書き出さないと、半透明のコマが書き出されたりすることがあります。

　次は、動画素材を APNGに変換する目的で連番PNGを書き出すときの、コマの間引きを説明する動画です。

【フレームレートを変えても再生時間は変わらない実験】

映像のように、フレームレートを減らすとコマ数も少なくなっていくのですが、動画の再生時間はほとんど変わりません。
　ちなみに、フレームレートによる動画の再生時間の計算方法ですが、例えば 30fpsで 36コマだと、1コマ＝1/30秒なので、36/30＝1.2秒です。1/30＝0.033として計算すると、『36×0.033＝1.188』秒となって、小数点の丸め誤差が出ます。このような計算は必ず分数を使ってください。

　また AEのプレビュー表示時間の 1秒未満の数値はコマ数（フレーム数）です。つまりラストのコマの頭に再生ヘッドがあるときは 36コマ目がまだ完了していませんので、表示は『01:05』（1秒と5コマ）と出ていますが、実際はあと 1コマ消化していませんから、表示上の『35/30秒』に未消化の 1/30を加えた、36/30秒となり、答えは 1.2秒です。

　また、この理屈はスプライトシートを AEでスライスして連番PNGを書き出すときも同じで、親のコンポジションのキーフレームを調整すれば自動的にコマが間引かれます（エクスプレッションが書かれた下層のコンポジションのフレームレートは触りません）。

　フレームレートを調整してコマ数が決まれば、あとは連番PNGを少しでも小さくするために今度は色深度を 8bitで書き出します。

　そして……。
　フレームレートを 15にして書き出された連番PNGは『512×512px』サイズのコマが 18個、トータルで 1.81MBです。これを APNG Assemblerで APNGに書き出したアニメーションがこれです。

512×512pxサイズは Webアイコンとしてはすこし大きいです。しかも APNG変換後のサイズも『1.5MB』となっています。そこでさらにリサイズしてみました。画像サイズを 200×200px、フレームレートを 9まで減らして、11コマまでにしたのがこれです。

ここまで落としてようやく、ファイルサイズが 231KBに落ち着きました。Webにもゲームにも手頃なサイズではないでしょか。

《注意》

APNG Assemblerでの『Delay,sec』設定をするのをお忘れなく。この場合はフレームレート 9ですから『1/9』です。コマ数『11』を入れるのではありませんので、混乱しないでください。

　他にも、書き出した連番PNGを減色させてさらにサイズダウンするツールに、PNGooと呼ばれるものもあります。

　さてここまではゲームエンジン（Unityなど）や Webサイトでの使用を目的として説明してきました。もし、LINEのスタンプを対象にするのでしたらさらに制約が厳しくなり、動画を作成する段階から条件に合ったものを考える必要があります。その条件を一覧にしてみました。

◦ 画像サイズ: W320 × H270 px 以内（コマすべて同一サイズであること）
◦ ファイルサイズ: 1ファイルあたり 1MB 以下
◦ 再生時間: 1本あたり最大 4 秒（1～4秒の整数秒）
◦ フレーム数: 5～20 フレーム（コマ数）
◦ ループ回数: 1～4 回（再生時間の合計が 4秒以内に収まること）
◦ カラーモード: RGB
◦ 背景: 透過（透明）にするのが必須

ファイルサイズ 1MB以下はありがたいですが、最大コマ数が 20というのはかなり厳しいです。もし入手したスプライトシートのコマがそれ以上あるときはコマの間引きをする必要があります。これに関しては後述していますので、そこをお読みください。

　また、再生時間が整数秒で 1～4秒となっていますので、簡単に計算するのなら、フレームレートを固定にしておいて、コマ数＝フレームレート × 秒数（1～4）とするのが手っ取り早い方法です。例えば 5fpsにすれば 5コマで 1秒のアニメーションになります。

◦ 1秒で5コマ
◦ 2秒で10コマ
◦ 3秒で15コマ
◦ 4秒で20コマ

となります。

　ほかにもコマ数を固定にしておいて、フレームレートを変える。

＜20コマに固定＞
◦ 20コマ ÷ 20 fps ＝ 1秒
◦ 20コマ ÷ 10 fps ＝ 2秒
◦ 20コマ ÷ 5 fps ＝ 4秒

＜15コマに固定＞
◦ 15コマ ÷ 15 fps ＝ 1秒
◦ 15コマ ÷ 5 fps ＝ 3秒

などです。

　背景の透過が必須というのは、"暗闇の演出" としてキャラの背景を黒く塗りたい場合でも、コマ全部をベタ塗りにすると NG（リジェクト）となるようです。そのようなときは角を丸くしたり、円形にしたりして、外側に透過の余白を残せば、透過ありとみなされて OKとなるらしいです。

　当 Labで配布している試作素材は 30fpsで、36フレーム、1.2秒の動画ですので、LINEのスタンプを対象にするには、どうしてもこの 0.2秒がジャマになります。その理由は、フレームレートの調整だけでは、制約の条件にある "整数秒にすること" ができないからです。制約を守るには、最初に作る動画の段階で 20コマを超えないこと、そして整数秒になることを意識して、20fpsで 20コマ（1秒）とか、5fpsで 15コマ（3秒）などでアニメーションを作るのがベストです。でもあきらめないでください。AEならまだできます。

【AEで整数秒にする方法】

　方法はいくつかあると思いますが、先の実験のとおりフレームレートをいくら変えても再生時間が変わらないという性質を利用して、手動間引きと自動間引きを考えてみました。

　① 手動間引き

フレームレートを20コマ以下の適度なフレームレートにして、整数秒ではないままで連番PNGを書き出し、その中から影響の出ない部分を手動で間引いてそのフレームレートと同じコマ数にします。
　具体的な方法は、連番PNGを書き出したフレームレートと同じフレームレートにした新規コンポジションに、全部の連番PNGをインポートします。そしてすべてを 1フレームだけのレイヤーにカットします。

　それができたら、【アニメーション】→【キーフレーム補助】→【シーケンスレイヤー】で階段状に並べて、再生しつつ影響の出ないコマを探して手動で間引きます。間引いてタイムラインに隙間ができたら、後ろのコマを前へ詰めます。これをフレームレートと同じコマ数になるまで繰り返して、もう一度、連番PNGに書き出します。するとフレームレートと同じコマ数、例えば 9fpsで 9コマ＝ 1秒のアニメーションになります。1秒以上にしたければ、再度連番PNGを書き出すときにフレームレートを小さくします。すると、再生スピードは遅くなりますが、再生時間は長くなります。これはコマ数を変えずに、1コマあたりの表示時間を延ばしているためスローになるのが理由です。

　② AEのタイムリマップを利用して自動的に間引く

①は強制的にコマを削除する力技で整数秒にしていますが、②はもうちょっと進歩的な方法です。

　①と同じようにフレームレートを調整して 20コマ以内にします。

　ここでは 9fpsにしました。そうすると 11コマで 1.2222秒となります。これにタイムリマップを掛けて、タイムリマップの終点キーフレームを時間的に過去へずらし（左へ1～2フレーム）1秒で終わる位置にワークエリアのアウト点（終わり）を持ってきます。
　それが次の画像ですが、注意することがあります。

再生ヘッド（ピンク矢印）と時間表示（ピンク枠内）は 8フレーム目、『00:00:08』を指しています。これは 0フレーム目から数えているため、これでちょうど 9コマ目（0～8 で合計 9枚）となります。
　AEでは、この 8フレーム目の再生時間（約0.11秒）が終わった段階でちょうど 1秒となるため、ワークエリアのアウト点（終わり）は 1秒00 ではなく、この 8フレーム目に合わせる必要があります。再生ヘッドの位置が『00:01:00』ではない点に注意してください。

　この状態で連番PNGを書き出すと 9個のPNGファイルができます。APNG Assemblerの『Delay,sec』を 1/9としてやると 9fps 9コマで、ちょうど 1秒になります。その結果が次の APNGです。

これで、『30fps 1364×1364px 1.5MB 36コマ』のアニメーションが、『9fps 200×200px 190KB 9コマ』にまでリサイズできました。ここまでファイルサイズを絞ることはないですが、逆にこんなに小さくできるという検証結果になりました。

　①は手動で強制的にフレームレートとコマ数を合わせましたので、再生速度の変化はないと思いますが、絵が飛ぶのが気になるかもしれません。
　②は自動で間引きますから、絵が飛ぶようなことはないと思いますが、再生時間がほんのわずかに少なくなった分、再生スピードが速くなります。でもキャラがキャラですから、そのあたりは許容内でしょう。

　当然ですが、スタンプアニメーションを作る段階でフレームレートとコマ数を合わせていたら、このような調整をすることはありません。

【スプライトシートから動画へ、そしてAPNGへ】

かつて Webサイトを彩っていた Flashアニメーションの楽しさは、今や APNGをはじめとする現代の技術へとしっかり受け継がれています。
　アイデア次第で表現の可能性は無限大です。ぜひ魅力的なアニメーションを作って、Webサイトを賑やかにしてください。