AI でつなぎ目のないピクセルアートのタイルセットを作る（つなぎ目の直し方も）

プロンプト一つでシートを作る

頼んだのは、16 枚のタイルを 4 × 4 に並べたシートです。各タイルはゲーム内のピクセルで 16 × 16、パレットは 16 色、すべてのタイルがつなぎ目なく並ぶこと、という条件です。Ciyo の Image Generator（画像生成ツール）で GPT Image 2.5 Flare を使うと、1024 × 1024 のシートが 2 クレジットで返ってきました。

ぱっと見では、頼んだとおりのものです。草、花、道、水、水辺、石、板張り、柵、茂み、耕した土が、すっきりした見下ろし型のピクセルスタイルで描かれています。

Mossfall という、見下ろし型でのんびりした 2D 農業ゲーム用のピクセルアートのタイルセットのシート: 16 枚の正方形のタイルを、すき間なく 4 × 4 のグリッドに並べる。各タイルはゲーム内のピクセルで 16 × 16 とし、くっきりした正方形のピクセル、16 色に限ったパレット、アンチエイリアスなしで描く。タイル: 草だけ、花のある草、横向きの土の道、縦向きの土の道、土の道の角四種、土の道の十字路、水、草と接する水辺、石の床、木の板の床、木の柵、小さな茂み、耕した土。どのタイルも隣のタイルとつなぎ目なく並ぶこと。文字、ラベル、グリッド線は入れない。

取り込む前の五つの確認

ゲームエンジンは絵として見るわけではありません。シートを正方形に切り分け、その正方形を繰り返します。そこで私たちも同じようにシートを切り分けて測定しました。グリッドは正確で、タイルの境目はちょうど 256、512、768 ピクセルの位置にあります。それ以外は、ほとんどすべてに手直しが必要でした。

つなぎ目の検査

左端が右端に、上端が下端にそのまま続いていれば、そのタイルはつなぎ目がないと言えます。私たちは各端をまたぐ色の差を測り、タイル内部で隣り合う二つのピクセルの間にある通常の差と比べました。

草だけのタイルでは、端の差は通常の差の 3〜4 倍で、水では約 7 倍でした。最悪だったのは石の床です。左右の端をまたぐ差は 38.1 で、通常の差 3.4 と比べて 11 倍でした。3 × 3 に並べると、石が半分に切られた位置に、縦と横の線がはっきり見えます。

Quick Edit でつなぎ目を直す

昔からある直し方は、タイルを縦横それぞれ半分ずつずらして、元の端が中央で十字に交わるようにし、中央を修復してから元に戻す、というものです。ずらしたコピーを作って Ciyo のボードにアップロードし、Quick Edit でその十字だけを描き直すよう頼みました。Quick Edit は一回ごとに +5 クレジットと表示され、結果はどれも入力の 2 倍の 2048 × 2048 で返ってきました。

一回目で上下の端はつながり、そのつなぎ目の値は 34.2 から 8.3 に下がりました。ところが、中央に縦一直線の暗い目地の線を描いたため、左右のつなぎ目は 37.9 から 45.4 に悪化しました。問題を名指しした二回目で、その線は消えました。

ちょうど中央を上から下まで、まっすぐな暗い縦線が走っています。この線を消してください。両側の石をつなげて中央をまたぐひとつながりの石にし、目地は自然なジグザグにしてください。ピクセルアートのスタイル、ピクセルの大きさ、色は同じにしてください。どの辺も外側の 4 分の 1 は変えないでください。

並べて見た結果

二回目のあと、タイルを元の位置に戻してもう一度測定しました。左右のつなぎ目は 2.2、上下のつなぎ目は 8.1 で、通常の差は 3.9 です。つまり、どちらの端もタイル自体の質感に近い値になりました。3 × 3 に並べると、石の床はひと続きの面に見えます。

Quick Edit は中央だけでなく、タイルの外側も少し変えていました。ゲームの中で差し替える前に、タイル全体を元のものと見比べてください。

実用に耐えるワークフロー

生成したシートは、完成した素材ではなく、スタイルの見本と個々のタイルの素材として使ってください。残すタイルごとに、境目の線を消し、3 × 3 に並べてつなぎ目を確かめ、的を絞った Quick Edit でつなぎ目を一つずつ直し、最後に実際のピクセルサイズとパレットに合わせてください。

道のパーツは一枚のシートにまとめず、別々のタイルとして生成してください。私たちのシートでは、角と縦に長い道がタイルの境目をまたいでいたので、モデルが描いた並びそのままでしか使えません。

• 写真を本物のピクセルアートにする
• ゲーム用のスプライトシートを作る
• 動画モデルはピクセルアートを動かせるか