実践的な制作ワークフロー
スプライトのフレーム時間：保存したGIFを確認する
4フレームだからといって、4枚を同じ時間だけ表示する必要はありません。点滅するランタンは半閉じより開いた状態を長く保つべきです。等間隔にすると、短いまばたきがゆっくりした明滅に変わることがあります。
Ciyoで架空の4フレームのランタンを作り、ダウンロード後のGIFを確認しました。開く、半閉じ、閉じる、半閉じの表示時間は600、100、200、100ミリ秒で、1周は1秒です。コードで作った時間設定の例であり、動画モデルの比較ではありません。
フレームの順序と表示時間を分ける
順序と表示時間を一緒に書きます。PNGの画像列は順序を見せられますが、各フレームの表示時間までは証明しません。ツールを移るときは、絵と時間の一覧を一緒に保管してください。
この例では半閉じの状態を意図して繰り返しています。二つの半閉じは見た目が同じでも、並びの位置が違います。保存したファイルの検査でも、その順序を保ちます。
| フレーム | 状態 | 表示時間 | 累計終了時刻 |
|---|---|---|---|
| 0 | 開く | 600 ms | 600 ms |
| 1 | 半閉じ | 100 ms | 700 ms |
| 2 | 閉じる | 200 ms | 900 ms |
| 3 | 半閉じ | 100 ms | 1,000 ms |
元のループと観察用コピーを作る
新しいCiyoプロジェクトで、32×32のGIF、128×32の4フレーム画像列、最近傍補間による256×256のプレビューを頼みます。パレットと図形の固定位置をそろえてください。拡大版は画素を確認するためのものです。元のゲーム素材を黙って置き換えるものではありません。
保存後にGIFを開き直し、符号化されたフレーム数、表示時間、ループ設定を報告するようエージェントに頼みます。正しく見える静止画像列だけでは分からない書き出しの挙動を確認できます。
コードだけを使い、透明な32x32ピクセルアートで架空の点滅ランタンの4フレームアニメーションを作成してください。図形の固定位置とパレットをそろえ、順序は開く、半閉じ、閉じる、半閉じです。表示時間は[600,100,200,100]ミリ秒で無限ループ、1周期は合計1000msにしてください。元のGIF、4フレームのPNG画像列、最近傍補間で8xにしたGIFプレビューを納品してください。画像列とプレビューをキャンバスへ置き、ダウンロードリンクを示し、時間の一覧を返信にも記載してください。GIFを保存した後で、符号化された各フレームの表示時間、寸法、loop=0、1周期の合計を検査してください。静止画像列から時間を推測しないでください。有料の画像・動画生成は使わないでください。実際のCiyoでコード生成する説明用データであり、モデル品質のベンチマークではありません。枚数ではなく書き出したファイルを確認する
実際のCiyo出力には画像列、元のGIF、拡大GIFが含まれます。元のGIFファイルをダウンロードし、別途開き直して調べました。どちらも4フレームで、符号化された表示時間は[600,100,200,100]、合計は1,000 ms、loop=0でした。
元のファイルは32×32、確認用コピーは256×256です。これらは二つのファイルの測定結果です。すべてのブラウザの再生精度、エンジン側の時間管理、あらゆる用途でのアニメーション品質を証明するものではありません。
形式を変えても時間設定を残す
PillowのGIFドキュメントにはフレームごとの表示時間とループの指定があり、この例の検査に使いました。別の形式やインポーターは時間を異なる方法で表す場合があります。スプライトシートが自動的に時間を含むと考えず、表示時間の一覧も渡してください。
受け取り側のアニメーションシステムで時間を設定する
エンジンが画像だけを取り込むなら、そのアニメーションシステムで4つの表示時間を設定します。同じフレームを統合したり、固定レートに変換したりするインポーターでは、結果を予定の1秒のリズムと比べます。原因の分からない時間情報の欠落を、絵を変えて補おうとしないでください。
予定の表示サイズで1周を確認する
使用予定の場所でアニメーションを見ます。開いた状態の長い保持と短い切り替えが読み取れるか確認してください。拡大コピーで固定位置と画素の一貫性を調べ、元の表示サイズに戻ってリズムを判断します。
ゲームの動作では時間設定が音、効果、衝突の変化の発生時刻も決めます。このまばたきの例に攻撃やダメージの処理はありません。それらのイベントには独立した明示的なタイムラインを用意し、エンジン内でテストしてください。
よくある質問
PNG画像列から表示時間を推測できますか？
できません。画像列は絵と順序を示します。時間の一覧を読むか、符号化されたアニメーションを検査してください。
loop=0は停止を意味しますか？
この例のGIFでは、loop=0は無限ループを指定します。
1周期が1秒なら、どこでも正確に再生されますか？
保証されません。実際に使うブラウザ、アプリ、エンジンで再生を確認してください。
スプライトのフレームと時間を一緒に管理する
まずCiyoで検証済みの例を一つ作りましょう。元のファイルを残し、自分のプロジェクトで使う前に書き出した結果を確認してください。