はじめる

実践的な制作手順

AIでドット絵の歩行アニメを作る:足滑りとループの確認手順

象牙色の台の上に浮かぶチャコール色の階段状の形と、その横の琥珀色のブロック
リズムと繰り返す動きを表す抽象アート。

一枚ずつ見ると良い配達員でも、再生すると地面を滑ることがあります。歩行の確認では輪郭だけでなく、接地している足を追いましょう。

架空の配達員は琥珀色の上着とチャコール色の肩掛けバッグを身に着けています。実演では32 × 32の横向き試作フレームを8枚、一覧とループを作成しました。ファイルの検査は通っていますが、ポーズと移動の確認は別の採用条件です。

別々の8枚を頼む前に仕様を決める

ポーズを依頼する前に、向き、コマのサイズ、色数、想定速度を決めます。Ciyoのキャンバスにキャラクターの参照を残し、上着、バッグのひも、頭の形など、変えてはいけない特徴を指定してください。

画像モデルは見た目の方向性を作るのに使えます。ただし一覧画像には不均等な間隔や余分なピクセルが混ざることがあります。各コマのファイルを切り出してサイズと位置を確認するまでは、参照画像として扱います。

Ciyoキャンバス全体:実演では、琥珀色の上着を着た架空の配達員の参考画像を1枚作り、8ポーズの仕様を決めます。8枚を別々に生成する手順ではありません。
実演では、琥珀色の上着を着た架空の配達員の参考画像を1枚作り、8ポーズの仕様を決めます。8枚を別々に生成する手順ではありません。
この指示をコピー
この配達員の横向き歩行を8コマで計画してください。各コマは32 × 32、背景は透過、承認済みの琥珀色とチャコール色のパレットを使います。頭と肩掛けバッグを統一してください。両脚について接地、沈み込み、通過、上昇のポーズを指定します。実際のコマファイルを確認するまでは、完成したスプライトシートとは呼ばないでください。

原点と地面の高さを固定する

全コマを同じ大きさの枠に収めます。足元の基準点を一つ決め、ループ全体で保ってください。ポーズごとに人物の外周で切り抜くと、エンジンで再生したときに位置が跳びます。

Ciyoのデザインエージェントに、ファイル作業領域で平滑化しない確認画像を作るよう依頼します。制作用スプライトの拡大は最近傍法を使います。写真向けの拡大は中間色を増やし、ドットの境界をぼかします。元ファイルも残してください。

Ciyoキャンバス全体:生成された参考画像は1024 × 1024のRGB画像で、市松模様は透明ではありません。エージェントは透明な参考画像を別に用意してから、制作用のグリッドに描き直します。
生成された参考画像は1024 × 1024のRGB画像で、市松模様は透明ではありません。エージェントは透明な参考画像を別に用意してから、制作用のグリッドに描き直します。

接地している足の位置を見る

画面を移動する人物では、接地中の足が地面に対してほぼ同じ位置にある必要があります。その場で再生するプレビューでは、足は体に対して後ろへ動きます。二つの条件を分けて確認します。

目印のある床の上でループを再生します。接地中の足が体と一緒に前進するなら、接地ポーズを直すか、移動速度と再生速度を合わせます。滑らかな再生だけでは、歩行が正しいとは判断できません。

固定した床で実際のPNGを確認します。例示速度は1フレーム2ピクセル、10 fps(20 px/秒)です。足裏が平らなときの接地範囲を基準に、範囲外への移動を0ピクセルまでとすると、元のつま先は蹴り出しで両半周期とも1ピクセル前に滑ります(22→23、30→31)。診断は不合格です。寸法と透過の確認だけでは動きの正しさを証明できません。

Ciyoキャンバス全体: 元のフレーム:実際の固定床診断では、例示速度2 px/フレームでつま先が1ピクセル滑り、不合格になります。接地している靴のピクセルを床の目印と比較します。
元のフレーム:実際の固定床診断では、例示速度2 px/フレームでつま先が1ピクセル滑り、不合格になります。接地している靴のピクセルを床の目印と比較します。

コマ一覧とループを両方確認する

拡大した一覧で、頭、ひも、色の変化を探します。その後、実際の表示サイズに戻してください。バッグの1ピクセルのずれも、繰り返すと気になる場合があります。

確認記録の例:実際のファイルを見て記入
確認項目見るところ修正が必要な状態
グリッド32 × 32の個別ファイル8枚サイズの不一致や端数の倍率
接地床の目印に対する足の位置接地中に足が滑る
特徴頭、上着、バッグ隣のコマで意図せず変わる
ループの境目最後のコマから最初のコマ跳びや意図しない間
Ciyoキャンバス全体:ファイル作業領域で12色の32 × 32透明PNGを8枚、番号付き一覧、10 fpsのGIFを作成しました。脚がすれ違うポーズや接地は要確認です。ゲーム用の承認済み素材ではなく試作です。
ファイル作業領域で12色の32 × 32透明PNGを8枚、番号付き一覧、10 fpsのGIFを作成しました。脚がすれ違うポーズや接地は要確認です。ゲーム用の承認済み素材ではなく試作です。

コマ数と再生速度を分けて考える

8コマだから毎秒8コマとは限りません。再生速度は別に指定し、移動と組み合わせて確認します。絵を変えず、各コマの表示時間を調整して遅い歩行にすることもできます。

コマ番号付きの確認動画と、番号なしの動画を保存します。前者は問題のあるつなぎ目を伝えるため、後者はプレイヤーの見え方を確認するためです。途中だけでなく、最後から最初への切り替えも見ます。

別ファイルの修正候補rev1では、接地フレーム1と5の各6ピクセルだけを変え、蹴り出すつま先を1ピクセル後ろへ移します。ほかの6フレームは保持します。Ciyoのエージェントは、同じ診断で接地範囲外の移動が0と報告しています。独立したファイル検査でも差分、32 × 32、二値アルファ、元のパレットを確認しました。脚の重なりは残り、修正したつま先は平たく見えます。元のダウンロードとアトラスは変更していません。ゲームエンジンでの検証や推奨速度を示すものではありません。

Ciyoキャンバス全体: 別の修正候補rev1:エージェントが合格と報告したのは、この接地診断だけです。変更した2枚のPNGはグリッドとパレットを保持します。元のアトラスには不合格のポーズが残っています。
別の修正候補rev1:エージェントが合格と報告したのは、この接地診断だけです。変更した2枚のPNGはグリッドとパレットを保持します。元のアトラスには不合格のポーズが残っています。

書き出した後にエンジンで試す

シートが必要な場合でも、個別のPNGを残します。ダウンロード後に透過、順序、サイズを確認してください。実際のアニメーション機能に読み込み、フィルターと読み込み設定がドットを保つか確かめます。

動きが整ったらアトラスにまとめます。パッキングでは、足滑りやループの不連続は修正できません。

よくある質問

AIのコマ一覧をそのままゲームに使えますか?

実際の境界、サイズ、透過、順序を確認した後に使います。一覧画像がそのままアニメーション用アトラスになるとは限りません。

なぜキャラクターが滑るのですか?

接地中の足が地面に対して動いているか、再生速度と移動速度が合っていない可能性があります。移動しながら接地コマを確認してください。

拡大表示だけで確認できますか?

拡大表示で誤りを探し、実寸で読みやすさを判断します。二つの表示には別の役割があります。

読みやすい歩行ループを一つ作る

Ciyoにキャラクターの参照を持ち込み、次のアニメを増やす前にグリッド、ポーズ、確認項目を固めましょう。