基本の計算
1コマの縦横を D ピクセル、コマ数を N とすると、出力は 幅 = D × N、高さ = D です。フレームの間に余白や区切り線は入りません。
16×1 = 1616px・1コマ → 16×16px
32×4 = 12832px・4コマ → 128×32px
64×8 = 51264px・8コマ → 512×64px
| 1コマの寸法 | コマ数 | PNGの寸法 | 並び |
|---|---|---|---|
| 16×16px | 2 | 32×16px | 横に2枚 |
| 32×32px | 4 | 128×32px | 横に4枚 |
| 64×64px | 8 | 512×64px | 横に8枚 |
真ん中の例を実際に確認するなら、32pxのキャンバスで4コマを作りPNGを書き出します。ツールの完了メッセージにも出力寸法が表示されます。
何を基準にサイズを選ぶ？
最終的に読み込ませるゲームや制作工程が、1コマあたり何ピクセルを想定しているかに合わせます。このツールの選択肢は16・32・64pxです。たとえば読込側のセルが32×32pxなら32pxを選びます。必要な寸法が候補にない場合、拡大縮小して合わせる機能はこのツールにはありません。
サンプル計算
架空のUIアイコンを32px・4コマで作る場合、シートは128×32pxです。RGBAの未圧縮画素バッファなら128×32×4=16,384バイトですが、実際のPNGファイルサイズは画像内容と圧縮で変わります。
PNGに残る情報、残らない情報
- 残るもの:各画素の色と透明度、フレームが横に並んだ画像。
- 残らないもの:フレームごとの再生時間、ゲーム側のセル位置やアニメ設定。
この工房のプレビューではフレームごとの長さを調整できますが、PNGは画像なので再生時間を持ちません。時間を含む編集用データはJSONで保存します。PNGだけを保存した場合、元のフレーム時間や編集状態をそのPNGから復元する機能はありません。
順序と透明部分を確かめる
- タイムラインで確認したいフレームを左から順に並べます。
- 各フレームの中に、隣と見分けられる色の点を一つ置きます。
- 書き出したPNGの幅が「寸法×コマ数」、高さが選んだ寸法か確認します。
- 画像ビューアで背景が市松模様や背景色に見えても、透明度を表示している可能性があります。透明を扱える画像編集ソフトで確認するときは、各コマの端に置いた点が左から順に並ぶかも見ます。
このツールはPNG出力専用で、外部ゲームエンジンのインポート設定までは扱いません。出力後は利用先のセル寸法・原点・再生設定に合わせてください。