VberAI Studio：ゲーム UI 設計図の分割と Unity / Godot / Cocos へのインポート

VberAI Studio（Google AI Studio とは別物）は、ゲーム UI 設計図を独立した要素に分割し、元画像のレイアウトとサイズを保持したうえで、キャンバスから Unity / Godot / Cocos 向け UI アセットをワンクリックでエクスポートします。全画面コンセプトから、インポート可能な Prefab / 階層までを自動パイプラインでつなぎ、手動スライスと再構築は不要です。

操作手順：ゲーム UI 設計図からエンジン納品まで

1. 入力の準備：ゲーム UI 設計の全画面画像

AI Studio で新規タスクを作成します。入力例：

• キャンバス内 AI 生成 の全画面ゲーム UI（メインメニュー、HUD、ショップなど）
• アート / 企画 が書き出した UI 効果図、ビジュアル稿、コンセプトシート（PNG 等）
• その他の 全画面 UI 設計図（解像度は十分に、ボタンとパネルの境界がはっきりしているもの）

ヒント：最終的な「1 画面 UI」に近いほど分割が楽です。コントロール領域が判別できない曖昧なムードボードは避けてください。

2. 全画面画像をキャンバスに配置し構造をプレビュー

生成またはインポート後、UI は ゲームキャンバス の中央プレビューに表示されます。確認項目：

• ボタン、パネル、タイトル領域の境界が明確か
• 重なり、切り抜き、画質の欠陥がないか（分割前またはエクスポート前に修正）
• ターゲットエンジン（Unity / Godot / Cocos）がエクスポート側で選ばれているか

3. 元の位置で UI 要素を分割

キャンバスで 分割 / UI 要素の抽出 を実行します（UI 文言は製品版に準拠）。目標：

• クリック可能なコントロール（ボタン、タブ、リスト項目）と装飾レイヤーを分離
• 元の相対位置とサイズを保持し、エンジン内で全体がずれないようにする
• レイヤーパネルに対応モジュール名が表示される（後のリネームとバインド用）

「Photoshop で 20 枚 PNG に手切りして Unity にドラッグ」との本質的な違いは、位置情報が分割と一緒に残ることです。

4. エクスポート前にレイヤーと命名を確認

分割後、キャンバス側で確認：

チェック項目	説明
ヒット領域 vs 装飾	ボタン背景とアイコンが分かれ、ホットスポットが正確か
テキストレイヤー	コピーを差し替えるタイトルが読みやすく置き換え可能か
伸縮可能な背景	パネルの nine-slice / 背景が異なる解像度に適するか
命名	エンジン内で一目で分かるノード名か（例：Btn_Start、Panel_Shop）

間隔の微調整や下書きレイヤーの非表示は、可能な限り エンジン投入前 にキャンバスで完了させてください。Prefab 配置後の再分割はコストが高くなります。

5. ターゲットエンジンを選びエクスポート / プッシュ

Unity、Godot、Cocos Creator から選択。UI 階層 / Prefab 出力を優先し、散在する画像フォルダだけのエクスポートは避けてください（素材パックのみ必要な場合を除く）。

• Unity： Assets/UI/ 等の所定ディレクトリにインポートし Canvas 配下に配置、RectTransform と Layout Group を確認
• Godot： Control ルートに配置、Theme、アンカー、minimum_size を確認
• Cocos： Widget、Layout、Button コンポーネントを確認

製品が 開いているプロジェクトへのプッシュ をサポートしていれば手動コピーを減らせます。Studio パネルの現行機能に従ってください。

6. レイアウトを検証し、Engine MCP でロジックを接続

エクスポートがプロジェクトに入ったら、UI 構造の検証と MCP によるインタラクション / ゲームプレイ配線の 2 段階で進めます。空白のスクリプトファイルから一行ずつ書く必要はありません。

6a. レイアウトとヒット領域（スモークテスト）

1. 生成された Prefab / シーン UI ルートを開く
2. 16:9 とターゲット縦画面比率で Play し、メインパス（開始、戻る、タブ切替など）をクリック
3. フォント、セーフエリア、ローカライズプレースホルダーを確認。ボタンヒットとレイヤー遮断がないこと
4. ノード名が乱れている場合はエディタ内で統一（例：Btn_Start、Panel_Shop）— 後続の MCP は名前でコントロールを探します

6b. VberAI Engine MCP + AI エディタでの配線（推奨）

VberAI Studio は「静的コンセプト → 構造化 UI アセット」を担当。ボタンコールバック、画面遷移、HP / インベントリ等のゲームプレイデータへのバインドは、すでに開いているエンジンプロジェクト上で VberAI Engine MCP に任せられます。Cursor、Claude Code など MCP 対応クライアントで自然言語により意図を記述します。例：

• 「Btn_Start のクリックをシーン MainMenu のロードロジックに接続」
• 「ショップリスト項目クリックで Panel_Detail を開き、価格テキストを更新」
• 「HUD 体力バーの fillAmount を PlayerHealth の変化に追従」

MCP はエディタのノードツリー、コンポーネント参照、スクリプトアタッチを直接操作し、C# / GDScript / TypeScript 等の工程スクリプトを生成・修正します。チャットにコードを貼って手動配置するより Play 可能な受け入れに近づきます。

ターゲットエンジン	MCP インストールと設定
Unity	Unity MCP インストール；クライアント接続：Cursor / Claude Code + Unity MCP
Godot	Godot MCP インストールと有効化
Cocos Creator	概要：Cocos Creator MCP とは；インストール：3.x、2.x；動画：Cocos MCP 設定チュートリアル

Studio エクスポート後の完全例（Unity HUD を HP にバインド）：AI Studio 出力 HUD を Unity MCP で HP イベントにバインド。エンドツーエンド：AI Studio + Engine MCP ワークフロー。

役割分担： AI Studio が UI のパッケージングとレイヤー分け、Engine MCP がインポート後のエディタ内ロジック、シグナル、シーン編集を担当。同一パイプライン上で UI 構造もゲームプレイスクリプトも「ゼロから手作業」に戻る必要はありません。

エンジン投入前の統一受け入れチェックリスト

1. 分割の完全性 — メインボタン、閉じるキー、リスト項目の漏れ・連結なし
2. 位置とサイズ — キャンバスプレビューと一致、全体のドリフトなし
3. 透明度とエッジ — アイコンの背景除去がきれい；必要なら AI 背景除去 で前処理
4. 解像度とセーフエリア — ノッチ、超ワイドで重要コントロールが切れない
5. ヒット領域 — クリック可能領域が装飾画より大きく、誤タップなし
6. エンジン側の参照 — Unity Prefab、Godot PackedScene、Cocos Prefab 参照が欠落していない

VberAI の他 Studio パスとの選び方

起点	向いているパス
レイヤー済み Figma / PSD	Figma→Unity、Figma→Godot、PSD→Unity
全画面ゲーム UI 設計（AI 出力、効果図含む）	本記事：設計図分割でエンジンへ
AI 動画でスキル / VFX / 走攻	シーケンスフレームとトレーラーをエンジンへ
インポート後の一括リネーム・シグナルバインド	Unity / Godot / Cocos Engine MCP（AI ツール分類）

パスは重ねられます：全画面 UI 設計 → Studio 分割 → Engine MCP で AI エディタ内配線とスクリプト。

境界と注意

• VberAI Studio 自体はゲームプレイルールを生成しませんが、エンジン投入後のスクリプトとノードバインドは Engine MCP + AI エディタ に任せられ、すべて手書きする必要はありません。
• 設計全画面 は初回エクスポートでピクセル完璧になることは稀です。フォント、多言語、モーションはエンジン内で仕上げが必要です。
• 分割品質 はソース画像の鮮明さに依存します。コントロール境界がぼやけたりレイヤーが乱雑な設計図は再出力または手修正が必要な場合があります。
• MCP は開いているプロジェクトのオブジェクトツリーを操作します。複雑な戦闘式、ネット同期、Timeline カットシーンはエンジン内で人間が Review することを推奨します。
• 正式名称 VberAI Studio ≠ Google AI Studio。比較記事 を参照。

まとめ

ゲーム UI で最も無駄になりがちなのは、クリックできない設計全画面をエンジンで手作業で作り直し、さらに** UI ロジックの各行を手書き**することです。VberAI Studio は「全画面 UI 設計 → 位置保持分割 → Unity / Godot / Cocos 納品」を同一ゲームキャンバスに集約します。エンジン投入後は VberAI Engine MCP を重ね、Cursor 等の AI エディタで自然言語によるボタンバインドとスクリプト反復が可能です。公式デモ：YouTube qIh4TY0rpxA。製品入口：AI Studio。

よくある質問

VberAI Studio はゲーム UI 設計図を Unity / Godot / Cocos にインポートできますか？
はい。全画面 UI 設計（AI 出力またはアート効果図）をキャンバスに載せ、UI 要素を分割してレイアウトとサイズを保持し、ターゲットエンジン向け Prefab / 階層をエクスポートまたはプッシュできます。

VberAI Studio と Canvas に PNG を置くだけの違いは？
単一 PNG には編集可能な階層や保持された位置情報がありません。VberAI Studio は分割された UI モジュールとエンジン構造を出力し、手動スライスと RectTransform / Control ツリーの再構築を減らします。

Figma / PSD インポートと同じ道ですか？
同一 AI Studio キャンバスですが入力が異なります：Figma / PSD はレイヤー済みベクター / デザインファイル、本記事は**全画面 UI 設計図（フラットな効果図）**の分割パスです。完全なレイヤー稿がある場合は Figma / PSD を優先し、全画面効果図または AI 出力のみの場合は本記事のパスを使います。

分割後のボタンをクリック可能にするには？
まずエンジン内でエクスポートノード名が明確か確認します。続いて Cursor / Claude Code で対応 VberAI Engine MCP を接続し、自然言語でバインド要件（ゲーム開始、ショップを開く等）を記述 — MCP がエディタ内で Button / シグナル をアタッチしスクリプトを生成・修正します。Unity 例：HUD を HP にバインド；Cocos インストール：3.x MCP、2.x MCP。

エンジン投入後もすべてのロジックを手書きしますか？
いいえ。Studio が UI 構造とアセットを担当し、Engine MCP が開いているプロジェクトで AI エディタ経由のスクリプト生成とコンポーネント参照を行います。複雑なゲームプレイは人間の Review と Play 受け入れを推奨します。

AI 動画のフレーム分割と同じですか？
いいえ。本記事は静的 UI 画面の分割です。スキルフレーム、走攻、VFX ループは 動画 → フレームをエンジンへ を参照してください。

VberAI と Google AI Studio は同じですか？
いいえ。VberAI Studio はゲームアセットキャンバス、Google AI Studio は汎用モデル実験台です。Google AI Studio vs VberAI を参照。

公式の操作デモはありますか？
あります：Turn AI-Generated Game Art into an Interactive UI、チャンネル VberAI for Game Dev。

初回エクスポートで注意することは？
分割の完全性、ボタンヒット、マルチ解像度アンカーを重点確認。テーマフォントとローカライズは通常エンジン内でもう一段必要です。