AI Studio で3分：本番品質ゲーム UI 構築（公式動画ガイド）

公式動画を見る

動画： Game developers, you need to see this 👀（VberAI YouTube）

公式説明の要点：

3 分で本番品質のゲーム UI。手動スライス不要、反復セットアップ不要。
PSD & Figma インポート → AI でゲーム UI 生成 → 自動アセット分解 → Unity / Cocos / Godot へ直接エクスポート。

デモの内容

VberAI Studio（略称 AI Studio）はデザインをフラット画像ではなく階層データとして扱います。

• 左：レイヤー付き PSD / Figma
• 中央：キャンバスプレビュー
• 右：Unity、Godot、Cocos Creator 向けエクスポート

メニュー、HUD、ショップなど繰り返し使う UI シェルに最適です。

こんな人向け

役割	メリット
デザイナー + エンジニア	エンジン内でのレイアウト再構築を削減
ソロ開発者	1 画面のプレイ可能 UI を素早く
マルチエンジン	1 つのデザイン習慣で複数ターゲット

ステップ（動画と並行）

1. デザインファイルを準備

• レイヤー付き PSD または命名済み Figma フレーム
• グループ名を明確に（Btn_Start、Panel_HUD）
• VberAI で VberAI Studio（AI Studio）を開く

2. インポートと確認

1. PSD / Figma から新規インポート
2. レイヤーグループが UI ブロックと一致するか確認
3. 草稿フレームを非表示、命名を修正

3. プレビューとエクスポート

• キャンバスで余白と重ね順を確認
• ターゲット：Unity / Godot / Cocos Creator
• 出力：UI 階層 / プレハブ（スプライトのみ不可）
• テキストは TextMeshPro（Unity）などエンジンコンポーネントを優先

4. エンジンへ取り込み

1. パッケージを Assets/UI/ 等にインポート
2. 生成プレハブを Canvas（Unity）または Control ルート（Godot）下へ
3. 16:9 と縦長比率でスモークテスト

Unity MCP / Godot MCP 利用時は、インポート後にノード一括リネームや pressed シグナル接続を AI に依頼できます。

VberAI スタックとの関係

製品	役割
AI Studio	デザイン → エンジン UI 構造
Unity / Godot / Cocos MCP	インポート後のエディタ自動化
AI Super Matting	エクスポート前のアイコン透明処理

詳細比較は Figma から Godot：手動 vs AI Studio を参照。

よくある質問

この動画は MCP 設定？
AI Studio が主題です。Cocos Creator MCP 設定は Cocos Creator MCP 設定方法（動画付きガイド） を参照。

対応エンジンは？
Unity、Cocos、Godot へのエクスポート（動画説明より）。

「3 分」は現実的？
命名済みレイヤーで単一画面なら、初回インポート＋エクスポートは分単位で可能。フォント・ローカライズはエンジン側で仕上げが必要です。

動画 URL？
https://www.youtube.com/watch?v=AWptt6hUZkM VberAI YouTube を登録するか、VberAI Studio で次の画面を試してください。