ゲーム開発を一気通貫：VberAI が1枚のUIを画像生成から Unity まで通す

ゲームUIはツールのあいだで途切れがちです。画像は別ソフト、切り出しはまた別、エンジンに入れたあとは階層を組み直す、という流れになりやすいです。この記事では、ダークゴシックのメインメニュー1枚を使って、VberAI Studio（Google AI Studio とは別製品）の4段階を見ます。AI画像生成、原位スライス、エンジンへの書き込み、モーションプレビューです。

入口は VberAI Studio です。

1. 完成したメインメニューを1枚用意する

素材は、すでにレイアウト済みのメインメニューです。左にキャラクター、右に STORY と ARENA などの入口、背景は月夜の情景です。入力は画面全体であり、ばらばらのアイコンではありません。

この段階が AI画像生成です。立ち絵もメインメニューも、まず1枚の画像として入ります。あとの分割、書き込み、プレビューは、すべてこの同じ画像を使います。

2. 原位スライスで背景を残す

分割すると、ボタン、キャラクター、通貨アイコンが元の位置から離れ、UIのない月夜の背景だけが残ります。要素は元画像の座標で切り出され、背景は別に保持されます。

Photoshop で PNG を1枚ずつ書き出すと、位置情報は残りません。原位スライスは相対位置とサイズを保持するので、エンジン側でカンプに合わせて手で揃える必要がありません。手順は 原位スライス を参照してください。

3. Engine MCP で現在の Unity シーンに書き込む

切り出した素材は、次にエンジンへ入ります。デモでは Engine MCP パネルを開きます。画面上の指示は中国語の「把图层3写入当前 Unity 工程」です。「图层3」はこのメインメニューのファイル名です。結論が先に出て、そのあと5項目を確認します。

• 生成した原画を読み込む
• 分割した要素を元の位置へ戻す
• 背景だけをきれいに抜き出す
• キャラクターをシーンへ書き込む
• 現在のシーンを確認する

5項目が通ると、パネルは書き込み完了を示します。

書き込み先は現在の Unity シーンです。レイアウトはスライス結果に従い、名前のない PNG をフォルダへ置くだけにはなりません。Cursor からボタンや数値を続けてつなぐときも、同じ Engine MCP を使います。導入は Unity MCP のインストール を参照してください。

4. 同じ画面のうえで動きをプレビューする

プレビューに使うのは、直前に切り出したレイヤーです。背景は抜き出した月夜、キャラクターは同じ立ち絵、STORY と ARENA は切り出したボタンです。キャラクターが杖を前方へ振り、術が先端から走り、ボタンは元の位置で点灯します。

左上の吹き出しは定位置のままです。キャラクターには追従しません。画面上の固定コントロールです。

切り出した静止画は、同じ背景のうえに戻してプレビューできます。動きとして見え、ボタンは元の位置で点灯します。ボタン遷移と数値は、Unity 上で Engine MCP かスクリプトによって別途つなぎます。

各段階で減る手作業

段階	画面で見えるもの	減る手作業
AI画像生成	ゴシック調のメインメニュー1枚	カンプをゼロから組む
原位スライス	要素が離れ、背景だけが残る	Photoshop でボタンごとに PNG を書き出す
Engine MCP	レイヤーが現在の Unity シーンへ入る	取り込み後に階層を組み直す
モーションプレビュー	同じキャラクターとボタンが元の背景で動く	別素材でデモ映像を作り直す

範囲

• デモが使うのは、このメインメニュー1枚です。スライス品質は、元画像の鮮明さと、コントロールの境界が読み取れるかに依存します。
• MCP パネルが示しているのは、書き込み完了とチェック通過です。ボタン遷移と数値の確定には、Unity シーン側のロジックがまだ必要です。
• モーションプレビューは、この立ち絵と切り出したボタンを使います。上のメインメニューと同じレイヤーです。

まとめ

1枚の画面を、1本の流れに置けます。画像を生成し、原位でスライスし、Unity に書き込み、同じレイヤーを動かして確認します。製品入口は AI Studio です。