
ゲームアセット生成AI Scenario: Isometric 2D Tilesゲームステージ作り
GenerativeAIをゲーム開発に活用する方法Tipsのマガジンゲーム開発AI Lab.
Witchpotに含まれる記事です
ゲームアセット用生成AIサービスのScenarioの紹介はこちら
Unity向けプラグインの使い方の一つとしてUnity上でIsometricの2D Tilemapを作るワークフローが紹介されていました
これに従って作っていくとこの↓動画のようなゲームステージを作ることが出来ます
このワークフローを翻訳するとともに実際に試した中での注意点や追加で行った処理などをまとめます
WitchpotではScenarioのようなゲーム開発に生成AIを活かすツールをフル活用してゲームを開発、また生成AIツールの開発や展開を行っています
生成AI x ゲーム開発の情報を発信していきますのでTwitterやnoteをよかったらフォローしてください
事前準備
もしScenarioのUnityプラグインのインストールがまだの場合はインストールを行ってください
またUnityのTilemapの取り扱いの細かい部分はスキップしています
調べれば公式の解説↓や解説ブログがあるのでそちらで使い方を押さえてある前提です
タイルの生成
まず初めに建物やアイテムなどタイルマップの構成オブジェクトを画像生成AIツールを使ってどんどん作って行きます
タイルはベースとなる↓の画像をControlNetのガイドとして利用していきます
ダウンロードしてご使用ください

これは作るTilemapのグリッドの形状に合わせて作成されています

Unity上 Window > Scenario > Prompt Window より画像生成の画面を開きます

Modelは特にこだわりがなければ最初はPublic Modelsの中にあるAssetDiffusion(Beta)を選択します

Prompt Windowで建物のあるタイルを作る想定で設定を行います
下の画像の赤でハイライトした部分を設定していきます
・Image to Imageを選択して
・ダウンロードしたベースのタイル画像を設定
・Enable ControlNet と Advanced Settingsをアクティブに
・Model1にCannyを選択してWeightを1に設定
・Promptに isometric building, low poly style などを設定
・Sampling steps : 75, Guidance : 9.0, Influence : 0.5 程度に設定

タイルが生成されます
ControlNetのModelがcannyでうまく生成できないときlineartやdepth, normal-mapなどに変更したりしても良い絵が生成できました

タイルの設定

まずWindow > Scenario > Scenario Settings からSave Folderに設定したフォルダがあることを確認してください
筆者はTexturesフォルダを作成し設定しました
※このフォルダがないと、このあとの処理画像が保存されずエラーになってしまいます
出来たタイル用の画像を選択するとRemove Backgroundボタンが出てくるのでこれをクリックします

これによりRemove機能が使用されてTexturesフォルダ下に背景部分を透過した画像が10秒ほどで保存されます

使いたいタイル画像を全てRemoveBackgroundしつつ保存します
保存した画像を使用することが出来るよう設定を行います
Spriteであること、生成した画像が512 x 512 pixelのものであればPixel Per Unit を512にしてApplyします

ProjectSettings > Graphics よりSortAxisが x:0, y:1, z:0 にします

以上でタイルの準備が完了です
Tilemapでステージを作成する
Window > 2DでTileのテンプレからTile palette を開きます

Tile PaletteでCreate New PaletteからGridをIsometricとして新しいパレットを作成します

GameObjectから2D Object > Tilemap > Isometric を選択してタイルマップを作ります

Tilemapの設定を行います
HierarchyでTilemapを選択した状態でInspectorのTilemap RendererからModeをIndividualに設定します

Tile Paletteに作った画像を追加してTileを作って行きます
タイルごとの位置・サイズが合うようにOffset, Rotaion, Scaleを調整して並べて行けば良いです。基本的にはベースのタイルの位置にあっているのでOffset等の値は微調整はあるもののだいたい同じ値を適用できます
地面になるタイルをベースのタイル画像から作って並べます
建物やオブジェクトなどのタイルを並べます
並べると分かりやすくなりますが地面部分のタイルが色がまばらなので統一感がでません

画像生成AIだとなりがちな部分ですね
今回はPhotoshopで地面部分を色を編集してなじむようにしてみました

今回は建物など適当に並べましたが、道路やそのたオブジェクトなどを並べればゲームステージとして成立していくと思います
今回の街とは別で砂漠をイメージして作ったもの↓
Scenario公式でサンプルとして作っているもの

まとめ
以上、ScenarioのUnityプラグインを使ってTilemapを作る方法を翻訳、実際に試してみました
Unity上から画像を作って背景を削除などワークフローとしてかなりスムーズに作っていけるようになっていて、まだ微調整は必要でも今までアセット準備にかけていた時間はかなり短縮できるのではないかと思います
是非やってみてください
Witchpotではゲーム開発x生成AIの情報発信と同時にシステム開発や自社サービスの提供を行っています
ゲーム開発会社や個人のゲームデベロッパーの方で興味がありましたら、なんでも気軽にご連絡頂ければと思います
Twitter: @nakashun_t
メール:nakajima.shuntaro@witchpot.com
Discord : https://t.co/z0Qt556Vnv
いいなと思ったら応援しよう!
