ゲームのタイルセットをAIで作る：つなぎ目を消す方法
遊びをつくる執筆にClaudeを使用しています。
タイルセットをAIで生成したとき、最初の壁になるのが「つなぎ目」です。並べると境界線がくっきり見えてしまい、マップ全体が格子状に見える。これはAIが一枚の画像として描くため、隣に並べたときの連続性を考慮しないことが原因です。 この記事では、AIで生成したタイル画像のつなぎ目を消すための考え方と、実際の作業手順を具体的に示します。「タイリング対応で出力してほしい」とプロンプトに書いただけではうまくいかない理由も含めて説明します。 つなぎ目を消す作業は大きく「生成段階で抑える」と「生成後に処理する」の二段階があります。どちらか一方だけでは不十分で、両方を組み合わせるのが現実的なアプローチです。
この記事の目次
なぜつなぎ目が出るのかを理解する
AIが一枚の画像を描くとき、左端と右端がつながる前提で色や模様を配置するわけではありません。草むらのテクスチャなら、左端の草の向きと右端の草の向きは独立して決まります。隣に同じ画像を並べると、その境界で向きや明暗が急変して線として見えます。
つなぎ目は二種類あります。一つは輝度・色調のずれで、端と端で明るさや色が違うケース。もう一つは模様の連続性の切断で、タイル柄やテクスチャの流れが端で唐突に終わるケースです。前者は比較的簡単に修正でき、後者は手間がかかります。どちらのタイプかを最初に見極めると、後の作業が効率的になります。
生成段階でつなぎ目を抑える
プロンプトと設定の工夫
画像生成AIにタイリング対応を指示する方法はツールによって異なりますが、共通して有効なアプローチがあります。
Stable Diffusionをローカルまたはサービス経由で使う場合、「Tiling」オプション（またはシームレス生成のチェックボックス）が用意されているケースがあります。このオプションを有効にすると、生成時に左右・上下が折り返した状態で計算されるため、出力画像の端がつながりやすくなります。プロンプトに「seamless texture, tileable」と加えるだけでは効果が不安定なので、ツール側のオプションを使うほうが確実です。
ただし、この設定でも完全にはつながらない場合があります。特に有機的な模様（木の根、石の形、水の波紋など）はランダム性が高く、シームレス設定をかけても端に不自然な繰り返しが出ることがあります。
つなぎ目が出にくいテクスチャを選ぶ
石畳や砂地など、方向性のないランダムな模様はつなぎ目が目立ちにくいです。反対に、方向性のある草や木目、流れのある水面は端の処理が難しくなります。序盤のプロジェクトでは前者から始めると作業量を抑えられます。
生成後にオフセット処理でつなぎ目を確認・修正する
生成後の修正で最も基本的な方法が「オフセット処理」です。これは画像を半分ずらしてつなぎ目を中央に持ってくる手順で、境界部分を目に見える形にして修正するものです。
手順は次のとおりです。
- 生成した画像（例：256×256px）をAsepriteやPhotoshop、GIMPなどの画像編集ソフトで開きます。
- 「オフセット」または「スクロール」機能を使い、画像を幅の半分（128px）・高さの半分（128px）だけずらします。GIMPでは「フィルター → 歪め → タイル化」が同じ機能を持ちます。Photoshopでは「フィルター → その他 → スクロール」で折り返しあり（ラップ）を選びます。
- ずらした後、中央の十字状の境界線が見えます。ここがつなぎ目です。
- スタンプツール・コピースタンプ・ヒーリングブラシなどで境界部分を周囲のテクスチャになじむように塗りつぶします。端や角は触らないよう注意します（ここを編集すると逆側のつなぎ目が増えます）。
- オフセットを元に戻して（同じ量で逆方向にずらす）、全体をタイル状に並べて確認します。
確認の際は、画像を4枚並べた状態（2×2）で見ることが重要です。1×2や2×1だと見えないつなぎ目が、4枚並びで初めて気づくことがあります。
AIインペイント（塗り直し）を修正に使う
オフセット処理で中央に出たつなぎ目の修正を、手動の代わりにAIのインペイント機能に任せる方法もあります。
手順としては、オフセット処理で境界を中央に持ってきた状態の画像を使います。Stable DiffusionのInpaint機能やAdobe FireflyのGenerative Fillなどで、境界部分をマスクして「同じテクスチャで埋める」よう指示します。周囲の文脈を読んで自然につなぐため、手動より手間が少なく仕上がりも自然になりやすいです。
ただし、インペイントで生成された部分が他の箇所と色調がずれることがあります。インペイント後にも再びオフセット処理で確認することを習慣にしてください。また、繰り返し回数が多いほど画像全体の一貫性が失われやすいため、一度の処理で片付けるように境界をまとめてマスクするのが得策です。
複数種のタイルをまとめて扱うときの注意点
マップ用のタイルセットには、草・土・砂・水など複数の種類が必要です。それぞれを別々に生成して並べると、タイル間の境界だけでなく、異なるテクスチャ同士の接続部分にも問題が出ます。これはつなぎ目とは別の問題で、「コーナータイル」や「エッジタイル」と呼ばれる、二つの素材が混ざる領域の処理が必要になります。
シームレス化の完成度を上げてから、この接続タイルの制作に進む順序にすると、手戻りが少なくなります。接続タイルをAIで作る場合も、同じオフセット・インペイントの手順が応用できますが、元のタイルとの色調一致を優先して確認してください。
また、複数のタイルで明るさが揃っていないとマップ全体が斑になります。生成後に各タイルのヒストグラム（輝度分布）を大まかに確認し、大きくずれているものは輝度と色調を調整してから組み合わせると統一感が出ます。
次の行動
まず一枚のシンプルな素材（石畳や砂地など）をAIで生成し、オフセット処理でつなぎ目の場所を確認してみてください。修正前後を2×2で並べて比較すると、どこまで改善できたかが一目でわかります。タイルが完成したら、アソバースのHTMLファイル投稿機能を使って実際のマップ描画ロジックと組み合わせ、ゲームとして動かしながら仕上げを確認することをおすすめします。
参考資料
- Stable Diffusion 公式ドキュメント（Tillingオプションの説明）
- GIMP 公式ドキュメント（「タイル化」フィルターの解説）
- Adobe Photoshop ヘルプ（「スクロール」フィルターの折り返し設定）
