対戦画面は、背景・キャラクター・画面の操作に分けて用意する
要約
AI で小さなゲームを作るとき、先に対戦の完成画が 1 枚届くことが多いです。プロジェクトに入れる前に、この絵は背景、キャラクターの打ち合い、画面の操作に分けます。左のキャラクターは、動作ごとのスプライトシートにします。当たったフレームで打撃音を鳴らし、試合の音楽はラウンドのあいだ通しで流します。録画は YouTube にあります。
最初に来るのは、画面全体の 1 枚です
AI で小さなゲームを作る人が増えています。よくある始め方は、画面全体を 1 枚で生成することです。二人のキャラクターが宮殿の前で打ち合い、下には体力とエネルギーのバーがあります。ラウンドが動いているとき、プレイヤーが見るのはこの画面です。
プロジェクトで使うのは、この画面を構成する切り出しです。1997 年のアーケード対戦、キング・オブ・ファイターズ’97 の舞台を例にすると、遠景と二人のキャラクターと、下の操作が同時に写っています。この 3 つは別々に描きます。
この絵は 3 つのレイヤーに分けます
同じ画面を分けると、下の 3 層になります。
Layer 0（背景）は舞台です。柱、旗、宮殿、遠山、石の床がこのレイヤーに入ります。キャラクターが歩いても、舞台はその位置に残ります。試合のあいだ背景は 1 枚で、ピクセルの描き方はキャラクターと揃えます。
Layer 1（キャラクターの打ち合い）は二人の戦いです。棒、槍、当たったときの閃光、舞い上がる土埃がこのレイヤーに入ります。人の位置と、今のポーズもここで入れ替わります。
Layer 2（画面の操作）は顔、体力バー、エネルギーバー、中央の飾りです。打ち合いの上に重なります。残りの体力とエネルギーが変わったら、このバーの絵を差し替えます。キャラクターが踏み出しても、操作はその位置のままです。
3 つのレイヤーは同じ描き方でそろえます。体力バーを満タンから空まで描いても、舞台とキャラクターの絵と揃ったままにします。舞台は 1 枚で足ります。体力バーとエネルギーバーは、満タン、半分、空の 3 種類を用意します。キャラクターは、この技で使うポーズを描き切ります。武器の閃光は、そのときのポーズと一緒に描きます。
この絵を分ける作業は、もう簡単です。エンジンに読み込むとき、元の位置が残っているか、どれが押せる操作のままか、そこを見ます。レイヤーの文脈は残し、画面と同期したままにします。手順は画像から複数レイヤーへに書いてあります。
左のキャラクターは動作を一式そろえます
完成画では、左の人は一つのポーズだけです。体を低くし、棒を前に出し、後ろに赤いマントがあります。ラウンドのあいだには、立ち、歩き、技、ガード、被弾、ダウン、そして起き上がりが要ります。
これらの動作は切り出しにしてから、シーンを再生します。武器から出る閃光も描きます。どのフレームも同じ人で、衣装と向きは変えません。プレイヤーがボタンを押したら、エンジンがこれらのフレームを順に再生します。
AI で生成すると、この一つのポーズだけが出ることが多いです。棒を振る、被弾する、起き上がる、は同じスプライトシートに足します。
画面と効果音、試合の音楽を合わせます
当たったときの閃光は、キャラクターのレイヤーにある 1 フレームです。打撃音はこのフレームから鳴らします。技が変われば、効果音も変えます。試合の音楽はラウンドの始めから終わりまで流します。棒が当たったときも、その音楽はそのまま続きます。
効果音は別のファイルにして、このフレームと一緒に再生します。技を変えるとき、その一撃の打撃音に差し替えます。試合の音楽は別のファイルで、ラウンド全体に敷きます。
まとめ
この画面は作れます。切り出しをレイヤーと動作ごとに用意し、効果音を当たったフレームに合わせ、エンジンに読み込みます。再生した画面は、生成時の絵とまだ揃っています。