Character Motion StudioPNG連番とは何か
PNG連番は、少しずつ違う透過PNGを順番に表示して動きに見せる方法です。例えば雲が膨らむ10枚、まばたきする5枚、腕を振る8枚を、frame_001.png、frame_002.png、frame_003.pngのように並べて再生します。
仕組み自体は単純ですが、実制作では「キャラクターがガタガタ揺れる」「サイズが微妙に変わる」「中心がずれる」といった問題が起こります。その多くは、各PNGの座標条件が揃っていないことから発生します。
コマ送りそのものとキーフレーム方式の違いは「コマ送りアニメーションとは？キーフレームとの違い」で整理しています。
PNG連番で揃えるのは「絵の大きさ」だけではない
最低限、キャンバスサイズ・透明余白・基準点の3つを揃えます。
| 項目 | 揃えるもの | 崩れると起きやすいこと |
|---|---|---|
| キャンバスサイズ | PNGそのものの縦横ピクセル数 | 画像中心や配置基準がフレームごとに変わる |
| 透明余白 | キャラクター周囲の座標空間 | 見た目の位置が跳ねる |
| 基準点 | 足元・肩・顔中心などの固定位置 | 動かしたくない場所まで揺れる |
例えばキャラクター本体が300×400px程度でも、各コマを本体ぎりぎりでトリミングせず、600×600pxなど同じキャンバスへ配置します。
1枚目600×600、2枚目580×610、3枚目620×590のように画像自体の大きさが変わると、同じ位置へ置いたつもりでも基準がずれる可能性があります。
透明余白は「不要な空白」ではない
透過PNGの周囲にある透明部分は、静止画では削りたくなる領域です。しかし連番では、「このキャラクターがキャンバスのどこにいるか」を保存する空間として意味を持ちます。
例えば600×600pxの中で足元をY=500px付近へ固定します。腕を上げて外接範囲が広がっても、キャンバスをトリミングしなければ足元座標は変わりません。
透過PNGの白フチや透明余白による位置ズレは「透過PNGの白フチ・位置ズレはなぜ起きる？」で詳しく扱っています。
基準点は「画像の中心」とは限らない
立っているキャラクターなら足元中央、顔差分なら顔中心や首、腕パーツなら肩、車輪なら回転中心というように、扱いやすい基準は用途によって変わります。
| 素材 | 基準にしやすい位置 |
|---|---|
| 立ちキャラクター | 足元中央・接地位置 |
| 顔差分 | 顔中心または首位置 |
| 腕パーツ | 肩関節 |
| 脚パーツ | 股関節または接地位置 |
| 車輪 | 回転中心 |
| 雲 | 雲の中心 |
| 飛行キャラクター | 胴体中心 |
動かしたくない場所を基準にすると考えると整理しやすくなります。
通常のAnimation Layerには、一般的な3D/2Dソフトのような任意Pivotを各レイヤーへ自由設定する専用フィールドはありません。現状では「基準点」は主に素材内の透明余白とレイヤー配置で維持する考え方です。パーツの回転中心を厳密に作る場合も、素材矩形と透明余白の設計が重要になります。
「連番内部で動かす」のか「アプリ側で動かす」のかを決める
歩行キャラクターを例にすると、PNGの中でキャラクター自体を少しずつ右へ進ませる方法と、全コマの足元位置を固定して歩行ポーズだけを変え、アプリ側のPositionで全体を移動させる方法があります。
| 方式 | PNG側 | アプリ側 |
|---|---|---|
| A：移動込み連番 | ポーズ＋画面内移動 | 固定 |
| B：その場歩き | ポーズだけ変更 | Positionで画面内移動 |
短いキャラクターアニメーションでは、歩行＝PNG連番、画面内移動＝Positionのように役割を分けると編集しやすくなります。両方で同じ移動を入れると、PNG内部でも進み、アプリ側でも進むため二重移動になります。
Positionを時間で動かす考え方はキーフレームの基本、移動軌道と形状変形の違いはモーションパスとパス変形の違いにつながります。
キャラクターが大きく変形する場合もキャンバスは固定する
通常→潰れる→大きく伸びる→元へ戻る、といったアニメーションでは外接サイズが大きく変わります。
各コマをキャラクターぎりぎりで保存すると、通常400×500、潰れ450×300、伸び350×650のように画像サイズまで変わり、位置合わせが難しくなります。
代わりに700×700pxなど十分な共通キャンバスを先に決め、その中でキャラクターだけを変形します。
「見えない共通キャンバス」を維持することが、連番の位置安定につながります。
複製して少しずつ変更するとズレにくい
新しいコマを毎回ゼロから作るより、1コマ目を作り、複製し、少しだけ変更して次のコマへ進む方が位置関係を維持しやすくなります。
現行Character Motion Studioのコマ送りでは、フレームを複製するとそのフレーム全体をdeep cloneして次へ追加するため、レイヤー構成・位置・サイズ・パーツ配置をそのまま引き継げます。また、選択中アイテムだけを「次のコマへ複製」する操作もあります。
これは単なる作業短縮ではなく、前コマの座標条件をそのまま次コマへ持ち越すためにも有効です。
連番制作では「固定するもの」と「変えるもの」を先に決める
| 例 | 固定するもの | 変えるもの |
|---|---|---|
| まばたき | 頭、顔位置、キャンバス、目の基準位置 | まぶた |
| 雲 | キャンバスサイズ、中心基準 | 輪郭、膨らみ、必要な位置変化 |
| 歩行 | キャンバス、胴体の基本サイズ、足元基準 | 腕、脚、上下動 |
| 潰し・伸ばし | キャンバス、接地点、中心軸 | 外形、縦横比、表情 |
どこまで動かし、どこを動かさないかを先に決めると、コマごとに判断がぶれにくくなります。
Character Motion StudioでPNG連番を作る場合
Character Motion Studioでは、コマ送りプロジェクトが共通のキャンバス幅・高さを持ち、その中に各フレームのレイヤーを配置します。フレームを複製すると現在状態を基準に次のコマを作れるため、「同じ座標空間の中で差分を作る」制作と相性があります。
書き出しにはPNG連番 ZIPがあり、最終出力サイズも現在のキャンバス、プリセット、カスタムから選べます。透明背景を保つ場合は「透明」「白背景（透過）」「黒背景（透過）」を使い、白・黒は輪郭確認用として表示しつつアルファを保持できます。
共通キャンバスを決める → 最初のコマを配置 → フレーム複製 → 必要部分だけ変更 → 白・黒背景で輪郭確認 → PNG連番ZIPで書き出す、という流れにすると座標条件を維持しやすくなります。
同じキャンバスの中で、差分だけを作る。
コマ送りでフレームを複製し、位置・レイヤー構成を引き継ぎながら必要な部分だけ変化させます。
書き出し前のチェック
- すべてのPNGで縦横サイズが同じか。
- 足元・顔中心・肩など、決めた基準位置が同じ座標にあるか。
- 透明余白を自動トリミングしていないか。
- 意図しない上下左右の揺れがないか。
- 歩行などの画面内移動を、PNG内部とPositionの両方へ重複して入れていないか。
- 背景が本当に透明か。白・黒背景で輪郭にフチが出ないか。
背景透過とエッジ確認は白フチ・位置ズレの記事、透明そのものの仕組みは背景透過の仕組みの記事へ続けて確認できます。
まとめ
PNG連番で揃えるべきなのは、キャラクターの外接サイズではありません。キャラクターが存在している座標空間を揃えることです。
キャンバスサイズ、透明余白、基準位置を固定し、その中で必要な部分だけを変える。連番内部の動きとアプリ側のPositionも役割を分ける。この考え方を持っておけば、複雑なイラストでもコマ送り時のガタつきを切り分けやすくなります。