VberAI 原位スライス：ゲーム UI 設計図をワンクリックで Unity / Godot / Cocos へ

VberAI Studio（Google AI Studio とは別物）は原位スライスに対応します。全画面のゲーム UI 設計図を独立した UI 要素に分割し、元のレイアウトとサイズを保持したうえで Unity / Godot / Cocos へワンクリックでエクスポート——散在 PNG を手切りしてエンジン内で階層を組み直す必要はありません。

従来の切図 vs 原位スライス

	従来の切図	VberAI 原位スライス
手順	PNG を枠切り → エンジンへドラッグ → 位置と階層を再調整	AI が UI 要素を認識 → 原位置で分割 → エンジン別にエクスポート
出力	散在画像が中心	レイヤー化されたモジュール + インポート可能な UI 階層 / Prefab
位置情報	切った後に失われやすく、エンジン内で手合わせ	相対位置とサイズが分割とともに残る

原位スライスとは

1. 原位 — 分割したボタンやパネルなどが、元の相対座標とサイズに留まる。
2. 切図 / 分割 — AI がボタン、パネル、アイコン、タイトルなどを認識し、命名・エクスポート可能なモジュールにする。
3. ワンクリックでエンジンへ — Unity / Godot / Cocos Creator を選び、UI 階層または Prefab をエクスポート（Studio パネル準拠）。

Figma / PSD で既にレイヤー分割済みなら、設計稿を直接インポートしてエンジンへエクスポートでき、原位スライスは不要です。Figma→Unity などを参照。フラットな全画面効果図や AI 出図の場合のみ本記事のパスを使います。

操作手順

1. 全画面 UI 設計図を準備

入力例：

• キャンバス内で AI 生成したメインメニュー、HUD、ショップなど
• アート / 企画が書き出した UI 効果図（PNG 等）
• その他の全画面 UI 設計図（解像度は十分に、コントロール境界がはっきりしたもの）

2. UI 要素を原位置で分割

キャンバスで分割 / 抽出を実行：

• クリック可能なコントロールと装飾レイヤーを分離
• 元の相対位置とサイズを保持
• レイヤーパネルに読みやすいモジュール名が表示される（リネームとバインド用）

3. ターゲットエンジンへワンクリックでエクスポート

Unity、Godot、Cocos Creator を選択。UI 階層 / Prefab 出力を優先。

• Unity： Canvas 配下にインポートし RectTransform を確認
• Godot： Control ルートに配置し、アンカーと Theme を確認
• Cocos： Widget、Layout、Button を確認

4. エンジン内で受け入れ

1. 生成された Prefab / シーン UI ルートを開く
2. 16:9 とターゲット縦画面比率で Play し、メインパスをクリック
3. 全体のドリフトがなく、ボタンが押せ、レイヤー遮断がないことを確認
4. ロジック配線が必要なら Engine MCP を Cursor 等から利用

詳細と MCP 配線：ゲーム UI 設計図の分割とエンジン納品。

境界と注意

• 初回エクスポートがピクセル完璧になることは稀です。フォント、多言語、モーションはエンジン内で仕上げが必要です。
• 分割品質はソース画像の鮮明さに依存します。境界がぼやけたりレイヤーが乱雑な場合は再出力や手修正が必要なことがあります。
• 原位スライスは構造のパッケージングを解決し、ゲームプレイスクリプトの代替ではありません。
• VberAI Studio ≠ Google AI Studio。比較記事 を参照。

まとめ

ゲーム UI の受け渡しで無駄になりがちなのは、全画面効果図をエンジン内で手切りして組み直すことです。VberAI Studio は「全画面設計図 → 原位スライス → Unity / Godot / Cocos」を同一キャンバスにまとめます。製品入口：AI Studio。

よくある質問

VberAI 原位スライスとは何ですか？ VberAI Studio で全画面ゲーム UI 設計図の要素を AI が認識し、原位置で分割してレイアウトとサイズを保持したうえでエンジンへエクスポートする機能です。

Unity / Godot / Cocos へワンクリックでインポートできますか？ ターゲットエンジン向けに UI 階層 / Prefab をエクスポートまたはプッシュできます（Studio の現行機能に準拠）。インポート後は Play でスモークテストしてください。

PNG を手切りするのと何が違いますか？ 手切りはレイアウト意味を持たない散在画像になりがちです。原位スライスはレイヤー化されたモジュールとエンジン構造を出力し、再構築の手間を減らします。

Figma / PSD インポートと同じ道ですか？ 同一 AI Studio ですが入力が異なります。Figma / PSD で既にレイヤー分割済みなら設計稿を直接インポートしてエンジンへエクスポートでき、原位スライスは不要です。Figma→Unity、PSD→Unity を参照。フラットな全画面効果図（未レイヤー）の場合のみ本記事のパスを使います。