vibegame

Cocos Creator 2.x MCP

2026-09-09T15:14:00+08:00

要約: 3ステップ

Cocos Creator 2.x MCP は、AI コーディングツールに Cocos Creator 2.4.x プロジェクトを見せ、操作させたい場合に向いています。3.8.6 以降のプロジェクトは Cocos Creator 3.x MCP を使います。ダウンロードは Cocos Creator 2.x MCP です。チャネルの仕組みは MCP で AI コーディングツールをゲームエンジンにつなぐを見てください。

ステップ 1: CocosCreator2.x MCP Server を開く

公式ページからインストールし、CocosCreator2.x MCP Server を開きます。ウィンドウが求めればサインインします。同じプロジェクトで Cocos Creator 2.x を開いたままにします。

ステップ 2: Running を確認し、One-Click Configuration を使う

Server（サーバー） タブで、Status（状態） は Running（実行中） である必要があります。このウィンドウのデフォルトポートは 4000 です。MCP URL は http://127.0.0.1:4000/mcp です。主流のコーディングツールには One-Click Configuration（ワンクリック設定） を使います。

残りの二つのタブは Tool Management（ツール管理） と Quick Config（クイック設定） です。通信は Streamable HTTP（MCP 2025-03-26）です。

ステップ 3: AI コーディングツールをつなぐ

One-Click Configuration（ワンクリック設定） を完了します。コーディングツールが MCP 経由でエディタとやり取りするあいだ、Cocos Creator と MCP サーバーは起動したままにします。

バージョン、ツール、ライセンスは vberai.com/game-engines/cocos2x です。

Cocos Creator 3.x MCP

2026-09-09T15:14:00+08:00

要約: 3ステップ

Cocos Creator 3.x MCP は、AI コーディングツールに Cocos Creator 3.8.6 以降のプロジェクトのシーン、ノード、プレハブを見せ、操作させたい場合に向いています。テキスト上のコード生成だけでは足りません。ダウンロードは Cocos Creator MCP です。2.4.x のプロジェクトは Cocos Creator 2.x MCP を使います。チャネルの仕組みは MCP で AI コーディングツールをゲームエンジンにつなぐを見てください。

ステップ 1: Cocos Creator MCP Server を開く

公式ページからインストールし、Cocos Creator MCP Server を開きます。ウィンドウが求めればサインインします。同じプロジェクトで Cocos Creator 3.x を開いたままにします。

ステップ 2: Running を確認し、One-Click Configuration を使う

Server（サーバー） タブで、Status（状態） は Running（実行中） である必要があります。このウィンドウのデフォルトポートは 3000 です。MCP URL は http://127.0.0.1:3000/mcp です。主流のコーディングツールには One-Click Configuration（ワンクリック設定） を使います。

残りの二つのタブは Tool Management（ツール管理） と Quick Config（クイック設定） です。通信は Streamable HTTP（MCP 2025-03-26）です。

ステップ 3: AI コーディングツールをつなぐ

バージョン、ツール、ライセンスは vberai.com/game-engines/cocos です。

Godot MCP

2026-09-09T15:14:00+08:00

要約: 3ステップ

Godot MCP は、AI コーディングツールに Godot 4 プロジェクトのシーン、ノード、スクリプトを見せ、操作させたい場合に向いています。テキスト上のコード生成だけでは足りません。ダウンロードは Godot MCP です。チャネルの仕組みは MCP で AI コーディングツールをゲームエンジンにつなぐを見てください。

ステップ 1: Godot MCP Server を開く

公式ページからインストールし、Godot MCP Server を開きます。ウィンドウが求めればサインインします。同じプロジェクトで Godot 4 を開いたままにします。

ステップ 2: Running を確認し、One-Click Configuration を使う

Server（サーバー） タブで、Status（状態） は Running（実行中） である必要があります。このウィンドウのデフォルトポートは 2000 です。Endpoint（エンドポイント） は http://127.0.0.1:2000/mcp です。主流のコーディングツールには One-Click Configuration（ワンクリック設定） を使います。

Start（開始） / Stop（停止） はそのタブにあります。残りの二つのタブは Tools（ツール） と Setup（セットアップ） です。通信は Streamable HTTP（MCP 2025-03-26）です。

ステップ 3: AI コーディングツールをつなぐ

One-Click Configuration（ワンクリック設定） を完了します。コーディングツールが MCP 経由でエディタとやり取りするあいだ、Godot と MCP サーバーは起動したままにします。

バージョン、ツール、インストーラーは vberai.com/game-engines/godot です。

Unity MCP

2026-09-09T15:14:00+08:00

要約: 3ステップ

Unity MCP は、開いている Unity プロジェクトを、AI コーディングツールに見せ、操作させたい場合に向いています。シーン、GameObject、プレハブが対象です。テキスト上のコード生成だけでは足りません。ダウンロードは Unity MCP です。チャネルの仕組みは MCP で AI コーディングツールをゲームエンジンにつなぐを見てください。

ステップ 1: Unity MCP Server を開く

公式ページからインストールし、Unity MCP Server を開きます。ウィンドウが求めればサインインします。同じプロジェクトで Unity Editor を開いたままにします。

ステップ 2: Running を確認し、One-Click Configuration を使う

Server Status（サーバー状態） は Running（実行中） である必要があります。このウィンドウのデフォルトポートは 6594 です。Endpoint URL（エンドポイント URL） は http://127.0.0.1:6594/mcp です。主流のコーディングツールには One-Click Configuration（ワンクリック設定） を使います。

通信は Streamable HTTP（MCP 2025-03-26）です。Stop Server（サーバーを停止） は状態表示の横にあります。

ステップ 3: AI コーディングツールをつなぐ

One-Click Configuration（ワンクリック設定） を完了します。コーディングツールが MCP 経由でエディタとやり取りするあいだ、Unity と MCP サーバーは起動したままにします。

バージョン、ツール、ライセンスは vberai.com/game-engines/unity です。

MCP で AI コーディングツールをゲームエンジンにつなぐ

2026-09-09T15:14:00+08:00

要約: 3ステップ

ゲーム開発では、切り出しと、その周りのロジックに慣れていないと、すぐ詰まります。AI コーディングツールはスクリプトを書けます。ただし既定では、エンジンのノードツリーは見えません。名前の付いた切り出しが、どのボタンに載るべきかも分かりません。

MCP（Model Context Protocol）は、そのコーディングツールとゲームエンジンのあいだの専用チャネルです。アートがすでに構造化され、名前の付いたファイルとして書き出してあるなら、コーディングツールに一枚ずつ置き場所を説明する必要はありません。開いているプロジェクトを MCP 経由で読みます。

ステップ 1: 詰まるのは、切り出しの置き場所

ディスク上の PNG は、まだゲーム UI ではありません。コーディングツールは、どのノードが攻撃ボタンか、どのフォルダが Assets/Textures か、どのプレハブがすでにレイアウトを持っているかを、まだ知る必要があります。チャットにスクリーンショットを貼って説明するのは、遅い経路です。

自動レイヤー分割：画像を複数レイヤーにの名前付き切り出しと、エンジンのフォルダ構成に合わせた書き出し（例：Figma から Unity へ）で、その一部はすでに解けています。残りは MCP が担います。開いているエディタの状態を読みます。デスクトップ上の ZIP だけでは足りません。

ステップ 2: MCP はローカルサーバーとして動く

各エンジンの MCP は、エディタの横で動く小さなデスクトップウィンドウです。Server Status（サーバー状態） は Running（実行中） である必要があります。コーディングツールはローカル URL に接続します。Unity MCP では、例えば http://127.0.0.1:6594/mcp です。

VberAI Studio の MCP ツールは、いずれも One-Click Configuration（ワンクリック設定） に対応しています。インストール後、主流のコーディングツールをワンクリックでつなぎます。そのあと、コーディングツールが MCP 経由でプロジェクトとやり取りするあいだ、エンジンと MCP サーバーは起動したままにします。

ステップ 3: ワンクリック設定でコーディングツールをつなぎ、エンジンのページを選ぶ

Cursor、Codex、Claude Desktop など、主流のクライアントはワンクリック設定でつなぎます。チャネルが通ったあと、現在のシーン、階層、名前の付いたアセットについての質問は、貼り付けたスクリーンショットではなく MCP を通ります。

同じ考え方で、エンジンのウィンドウだけが変わります。Godot MCP では、ポートは 2000、アドレスは http://127.0.0.1:2000/mcp です。

すでに開いているエンジンのページを選びます。

画像から複数レイヤーへ：キャラクター画像をレイヤーに分け、ゲーム素材の準備を速くする

2026-09-09T13:39:00+08:00

要約

変換シリーズに Figma から Unity へと PNG から PSD へが入り、Godot と Cocos Creator の道の上に乗った。続けて読むと、一つの感触が残る。image-to-layers はすでに簡単である。PNG をレイヤーに分けること自体は易しい。それらのレイヤーをゲームエンジンに、元の位置のまま、インタラクションを付けたまま戻すことこそ、あとで見るべきところである。

使える答えを、分割ボタンの追加だけに置く必要はない。垂直のツールは、レイヤー名、位置、インタラクションを、手順から手順へ共有の文脈として運ぶ必要がある。本サイトの Docs はすでに：Auto Layering（自動レイヤー分割）：画像を複数レイヤーに、Figma から Unity へ、AI Image Translate、Reskin。

PNG の分割はすでに簡単である

PNG を別レイヤーに切ることは、いまは簡単である。いまの AI レイヤー分割は、絵を分け、端と隠れた部分を補える。

VberAI Studio の Auto Layering（自動レイヤー分割）：画像を複数レイヤーに以外にも、合成をワンクリックで切り出すツールは多い。本当の問題は分割のあとである。元の位置が残るか、ボタンがボタンのままか、エンジンのなかで同じ画面として戻せるか。

エンジンに読み込む：元のレイヤー文脈を保ち、同期し続ける

Auto Layering のあと、Figma から Unity へはルートが Assets の ZIP を書く。Prefabs は組んだ UI、Textures は切り出しである。名前、位置、描画順、どれがクリックできるかは、ファイルと一緒に運ぶ必要がある。それを落とすと、Codex と Unity MCP はノードを接続できない。読み込み結果は、絵の山になる。

Photoshop 時代の助言——パネルはすべて 9-slice、文字は焼き込まない、ボタン状態は書き出し前に全部計画する——は、いまもエンジン側の作業を表している。ただしそれらは、素材準備を速くするための開始条件から外れた。Figma から Unity への Exp はすでに、その古いリストの少なくとも半分は進捗を止めないと書いている。

垂直ツールが重要なのは、同じ文脈を共有し続けるからである

Auto Layering（自動レイヤー分割）は検出した端から切り出し、意味のある名前のファイルを書き出す。Figma から Unity へや PSD から Unity へは、同じレイヤー一式を Unity のプロジェクトフォルダに置く。AI Image Translate は言葉を変え、Reskin は見た目を変える。レイヤーの関係とサイズは、なお一対一で対応する。

これらの手順が順に回るのは、そのレイヤー文脈が途中で落ちないときに限る。単体の分割ツールは切り出しまで終えられる。名前、位置、インタラクションを次のツールへは運ばない。

まとめ

文脈が共有されていれば、ゲーム UI の一括分割は、実際の開発環境で最低限の使い勝手を持つ。

Figma から Unity へ：AI First のあと、UI の手作業を工程の中心に置かなくてよい

2026-09-09T13:12:00+08:00

要約

本サイトが Figma から Unity へを公開したあと、状況ははっきりした。AI は旧来のゲーム開発工程を強く動かしている。Saharukh が 2026 年 5 月に書いた Figma to Unity の黄金ルールも、少なくとも半分は、もう進捗を止めない。AI First から見れば、自動化できる手順をさらに自動化しているだけであり、速度はそれに続く。

本サイトのチュートリアルと公開メモは、同じ AI First の論理に乗っている。エンジンを先に極める手順は置いておく。すでに動く AI を使い、ゲームを作る楽しさに戻る。端から端まですでに回る組み合わせは次のとおりである。

Codex：コードの生成
VberAI Studio：美術の一括生成と処理
Unity MCP：コーディングツールとエンジンのあいだの同期
Unity：最後の検証、プレイテスト、完成したプロジェクト

元記事の細部の半分は、もう成り立たない

元記事の経験を先に並べ、表で各行を対応させる。

Figma で見た目のよい画面は、動くゲーム UI ではない。 元記事の言い方では、UI は動き、応答し、拡縮し、複数の状態を持ち、別デバイスで動き、リアルタイムエンジンでも安く済む必要がある。Figma から Unity へは、「画像を一枚書き出して終わり」ではない。

Figma は作画、Unity は現場である。 ファイルが Unity に入ったあと、本当の問いが出る。ボタンはクリックできるか、ホバーで何が起きるか、無効のとき何が起きるか、別言語で溢れるか、ポップアップはスマホと PC の両方に収まるか、動きは滑らかか、UI はフレームレートを落とすか。

ボタンは、矩形に一行の文字を足したものではない。 元記事は通常、ホバー、押下、無効、選択、コントローラーのフォーカス、音、クリックの動き、ローカライズ、レスポンシブな拡縮、光り得る演出、プレイに繋がるイベントを列挙する。「ボタンを Figma から書き出す」は軽く聞こえる。プロジェクトのなかでは軽くない。

切り出して書き出す作業は、仕事の一片にすぎない。 チームはなお決める必要がある。何が画像になるか、何を Unity で組むか、何が再利用できる Prefab になるか、何に 9-slice、動き、シェーダー、ローカライズ、キーボード、マウス、タッチ、コントローラーが要るか。

画面全体を一枚の画像として書き出さない。 元記事が挙げるのは、全画面、文字付きボタン、固定サイズのパネル、静止画の進捗バー、PNG に焼き込んだ文案である。焼き込んだ文案は翻訳しにくい。パネル全体は拡縮しにくい。静止画の進捗バーは滑らかに埋まらない。画面ごとに巨大な PNG 一枚は重く、改めにくい。きれいな分け方はこうである。文字は Unity のなかで本物の文字のまま残す。ボタンは再利用できるコンポーネントにする。パネルは 9-slice。バーは塗りつぶし画像かシェーダー。アイコンはスプライトとして書き出す。繰り返しは Prefab にする。

命名は、プロジェクトが大きくなるまで退屈に見える。 Rectangle 124、Group 56、Icon copy 9、Frame 32 は、開発者やテクニカルアーティストに推測を強いる。元記事のよりよい名前は btn_primary_bg、icon_currency_gold、panel_shop_base、hud_health_fill、popup_reward_frame、img_avatar_border_rare である。

画面だけで考えず、コンポーネントで考える。 ショップ画面はヘッダー、通貨バー、アイテムカード、購入ボタン、スクロール領域、カテゴリタブ、確認ポップアップに分かれる。Figma のコンポーネントは Unity の Prefab に対応する。例えば Shop Item Card から PF_ShopItemCard へ。中にアイコン、名前、価格、レア枠、購入ボタン、ロック / 選択 / ホバーを置く。

Figma のレイアウトは Unity のレイアウトではない。 同じ UI がスマホ、タブレット、PC、超ワイド、ノッチとセーフエリア、別言語、別入力に当たることがある。実装にはアンカー、拡縮、セーフエリア、レイアウトグループ、伸び縮みする余白が要る。UI を一つの解像度に貼ったシールにはできない。

動きを最後まで残さない。 ポップアップのフェードイン、ボタンのわずかな拡縮、体力バーの点滅、報酬の光、エラー時の揺れ——これらは、何が起きたかをプレイヤーに伝える。遅い動きは、レイアウト、タイミング、性能、プレイの流れとぶつかる。

UI も性能を食う。 重ねた透明度、大きなテクスチャ、ぼかし、マスク、パーティクル、動くアイコン、散らかったキャンバス、ばらばらのスプライトの過多、頻繁なレイアウト再構築。ハイエンド PC では静かである。スマホでは本物になる。

元記事の十手順： Figma ファイルを整える → 再利用できるコンポーネントを印す → 何を書き出すか決める → サイズとアルファを用意する → Unity に読み込み、テクスチャ、圧縮、アトラスを設定する → Prefab を組む → 状態を足す → 動きとフィードバックを足す → 多くの画面で試す → ドローコール、メモリ、オーバードロー、キャンバス再構築を早く見る。

元記事が避けようとする失敗： 全画面の画像書き出し、文案のスプライトへの焼き込み、ボタン状態なし、解像度が一つだけ、レイヤー名がでたらめ、ローカライズなし、コントローラーやタッチなし、ユニークアセットが多すぎる、アトラスなし、動きが遅すぎる、セーフエリアなし、性能を最後まで残す。

UI テクニカルアーティスト はデザインとエンジニアリングのあいだに座る。アセットを用意し、Prefab を組み、シェーダーを書き、動きを作り、最適化し、再利用できる部品を作り、解像度に合わせ、デザイナーにエンジンの限界を見せ、開発者が見た目を保てるように助ける。仕事は、デザインを守り、制作のなかで生き残らせることだと書かれている。

「人を先に、ツールを後に」の時代では、上の各行が時間を食う。

AI First のあと、まだ成り立つものと、中心から外れたもの

ホームページははっきり書いている。Figma に近い面でアートを整え、エンジン MCP で濃く同期し、人手に寄っていた旧い手順を分ける。元記事に対して見ると、次の表になる。

元記事がいまも強調すること	AI First のあと
きれいなファイルは動く UI ではない	いまも真である。クリック、拡縮、言語は、Unity のなかで証明する必要がある。
切り出して書き出す作業が全体ではない	いまも真である。ただし中心は動いた。隙間は、人が切り方を一つずつ決めることではない。Codex が読めるエンジンのフォルダに、ファイルが入るかどうかである。
全画面書き出しをしない、文案を焼き込まない	いまも真である。ローカライズの記事ですでに書いた。文字が画像に入ると、フレーム全体を作り直すことになる。
`Rectangle 124` のような名前がプロジェクトを壊す	いまも真である。Auto Layering（自動レイヤー分割）は検出した端から切り出し、意味のある名前のファイルを書く。悪い名前は、あとで Prefab とスクリプトを壊す。
ホバー、押下、無効、フォーカス、音、イベント	半分は真である。それらの状態は、なお Unity のなかに存在する必要がある。UI テクニカルアーティストが読み込み前に手で全部組む必要はない。Codex と Unity MCP は、Prefab が入ったあとに足せる。
9-slice、シェーダー、アトラス、キャンバス再構築	半分は真である。スマホではいまも爆発する。AI First の順は、UI をプロジェクトに入れて動かし、開いているエディタを Codex に見させることである。これらは入口の条件ではない。
コンポーネントが Prefab になる	いまも真であり、書き出しがすでに一部を担っている。Figma から Unity へは Prefab（`.prefab`）を書ける。解凍すると `Assets/Prefabs` は組んだ UI、`Assets/Textures` は切り出しである。
動きと性能は書き出し前の計画に置かなければならない	もう中心ではない。元記事はそれらを手順 8 と 10 に置き、その計画なしでは書き出せないかのように読めた。いまよくある道は、使える Prefab を書き出し、動きとコストの作業を Unity のなかで Codex と Unity MCP に足させることである。
UI テクニカルアーティストが真ん中に座らなければならない	ゲーム開発の経歴がない人にとって、ここが最初に外れる。ホームページの前提は、エンジンを先に極めなくてよい、である。入口はこう変わる。VberAI Studio がファイルをエンジンのフォルダに書き、Unity MCP が開いているシーンとスクリプトを Codex に渡す。

「UI の手作業を工程の中心に置かなくてよい」は、UI を雑にしてよい、という意味ではない。元記事の人手十手順を、Figma から Unity へ進むための前提に置かなくてよい、という意味である。

この組み合わせが実際に変えたもの

VberAI Studio は、人手に寄っていた前半に当たる。レイヤーを整え、使える名前を付け、何を切るか決め、Unity の Assets 構成で書き出す。.fig を Import Project（プロジェクトを読み込む）で入れ、Auto Layering（自動レイヤー分割）を走らせ、Export to Unity（Unity に書き出す）する。ここまでが、ファイルが Unity のプロジェクトフォルダに構造化して入る道である。ホバー状態、ローカライズした文字サイズ、パーティクルの見た目は扱わない。元記事の後半であり、デザインツールが一度で終える前提は置けない。

Unity は、いまも証明の場である。Prefab がシーンに入ったあと、元記事の問いは残る。クリックできるか、別言語で溢れるか、ノッチが覆うか、フレームレートが落ちるか。

Unity MCP は、MCP ができてデザインツールができないことに当たる。いまのシーン、階層、スクリプトを AI ツールへ同期する。Figma と Cursor のあと、デザインファイルを Godot に読み込むは、すでに同じ分担を書いている。MCP は開発とシーンの文脈を保ち、デザインツールはファイルを編集し続け、必要なときにエンジンのフォルダへ書き出す。Unity でも同じ分け方である。

Codex は、元記事が UI テクニカルアーティストやプログラマに残した配線に当たる。ボタンイベントを繋ぎ、状態をいくつか足し、文字を翻訳できるテキストのまま残し、解像度を一つ以上試す。本サイトの立場は、基礎的なコードが書けるデザイナーであり、エンジンの専門家ではない。その配線が、先に UI フレームワーク一式を手で組むことをまだ要求するなら、AI First は止まる。

四つの部品を順に置くとこうなる。

AI 画像ツールでゲーム UI をスクリーンショットとして生成し、Figma では端の例外と修正だけを行う。
VberAI Studio に読み込み、Auto Layering を走らせ、Unity の Assets（Prefab と切り出し）を書き出す。
開いている Unity プロジェクトで、Unity MCP にいまの UI ツリーを Codex へ見せる。
Codex にインタラクション、状態、基本の収まりを足させる。アートが変わったら、エンジンのなかでテクスチャ名を手で直さない。VberAI Studio からもう一度書き出す。

元記事の UI テクニカルアーティストは、制作がデザインを失わないように守っていた。いまの守り方は別である。レイヤーと名前は、書き出しの時点ですでに揃っている。人が結果を判断する。Codex がエンジンのなかで編集する。

どの文字列もレイヤーに焼き込むやり方は、いまは不格好に見える。AI 生成と自動ラベルのコストと都合が、旧い手直しの総コストをすでに上回るなら、問題でなくなることもある。

まとめ

AI は、ゲーム開発のなかでまだ手作業だった部分を食っている。
VberAI Studio は、この垂直方向でもう一段、AI First を走らせた。この種のツールは、ゲーム開発をさらに大きな規模で速くする。
この組み合わせがまだ自動化していない余地は、速く縮む。

Figma から Unity へ

2026-09-09T11:20:00+08:00

要約: 6ステップ

Figma から Unity へ は、レイヤー付きの .fig UI や HUD を Unity に読み込みたい場合に向いています。VberAI Studio が Import Project（プロジェクトを読み込む） でファイルを読み込み、自動レイヤー分割が検出したエッジから名前の付いたパーツを切り出します。Export to Unity（Unity に書き出す） で、それらのパーツをエンジンに書き出します。

レイヤー付き Photoshop ファイルの場合は：PSD から Unity へ。

ステップ 1: ローカルの `.fig` を保存

Figma で画面を開き、File（ファイル）→ Save Local Copy（ローカルコピーを保存） を使います。名前の付いたグループ（フレーム、ボタン、HUD バー）は、VberAI Studio まで引き継がれます。

ステップ 2: VberAI Studio で Import Project

VberAI Studio のプロジェクトページで Import Project（プロジェクトを読み込む） を選び、.fig ファイルを指定します。

ステップ 3: 自動レイヤー分割

ボードを選びます（例：cat_journey_UI）。選択ツールバーの、重なりレイヤーの操作を開き、Auto-Layering（自動レイヤー分割） を選びます。

Run AI auto-layering?（AI 自動レイヤー分割を実行しますか？） を確認し、Start layering（レイヤー分割を開始） を押します。

名前の付いた範囲が画面に載ります。切り出した、名前の付いた画像の準備ができます。詳しい手順は自動レイヤー分割：画像を複数レイヤーににあります。

ステップ 4: Unity に書き出す

レイヤー分割後のボードを選んだままにします（ここでは cat_journey_UI_layer）。Export（書き出し） を開き、Export to Unity（Unity に書き出す） を選びます。

ステップ 5: Unity の書き出し形式を選ぶ

ダイアログでは Target engine（対象エンジン） が Unity になります。形式は Prefab（.prefab）にできます。Export to（書き出し先） は ZIP アーカイブ、または対象プロジェクトへの直接書き出しです。Default paths（デフォルトパス） はエンジンの既定ディレクトリを使います。

ステップ 6: 出力を確認する

今回は ZIP アーカイブで書き出しました。解凍するとルートは Assets です。Prefabs には Unity の .prefab（シーンに置ける組み立て済み UI）が入り、Textures にはレイヤー名に沿った切り出し PNG が入ります。

PSD から Unity へ

2026-09-09T11:20:00+08:00

要約: 6ステップ

PSD から Unity へ は、レイヤー付き Photoshop ファイル（PSD または PSB）を Unity に読み込みたい場合に向いています。VberAI Studio がデザインを読み込み、自動レイヤー分割が検出したエッジから名前の付いたパーツを切り出します。Export to Unity（Unity に書き出す） で、それらのパーツをエンジンに書き出します。

.fig の場合は：Figma から Unity へ。まだレイヤーが必要な平面 PNG の場合は：PNG から PSD へ。

ステップ 1: レイヤー付き PSD を開く

名前の付いたグループ（フレーム、ボタン、HUD バー）を残します。その名前は、VberAI Studio まで引き継がれます。

ステップ 2: PSD/PSB を読み込む

VberAI Studio で Import（読み込み）→ PSD/PSB を選びます。

ステップ 3: 自動レイヤー分割

ボードを選びます（例：cat_journey_UI）。選択ツールバーの、重なりレイヤーの操作を開き、Auto-Layering（自動レイヤー分割） を選びます。

Run AI auto-layering?（AI 自動レイヤー分割を実行しますか？） を確認し、Start layering（レイヤー分割を開始） を押します。

ステップ 4: Unity に書き出す

ステップ 5: Unity の書き出し形式を選ぶ

ステップ 6: 出力を確認する

PSD から Godot へ

2026-09-08T18:40:00+08:00

要約: 3ステップ

PSD から Godot へ は、レイヤー付き Photoshop ファイル（PSD または PSB）を、Godot のシーンとして読み込みたい場合に向いています。VberAI Studio がデザインを読み込み、Godot に書き出します。書き出しでは .tscn が出力されます。デフォルトのパスは Godot の Assets 構成に従います。

.fig の場合は：Figma から Godot へ。まだレイヤーが必要な平面 PNG の場合は：PNG から PSD へ。

ステップ 1: レイヤー付き PSD を開く

名前の付いたグループ（フレーム、ボタン、HUD バー）を残します。その名前は、VberAI Studio と Godot のノードツリーまで引き継がれます。

ステップ 2: PSD/PSB を読み込む

VberAI Studio で Import（読み込み）→ PSD/PSB を選びます。

ステップ 3: Godot に書き出す

画面を選びます（例：Main Screen）。Export（書き出し） を開き、Export to Godot（Godot に書き出す） を選びます。

ダイアログで形式を Scene（.tscn）にします。Default paths（デフォルトパス） は、プロジェクトの Assets フォルダを探し、その構成に合わせて書き出します。

手順動画

PSD/PSB の読み込みと、Godot への書き出しです。

PNG から PSD へ

2026-09-08T18:36:00+08:00

要約: 3ステップ

PNG から PSD へ は、ゲーム UI が 1枚に潰れた PNG しかない場合に向いています。HUD、画面キャプチャ、一度もレイヤーになっていないボードを、もう一度 Photoshop で扱いたいときです。自動レイヤー分割を実行し、検出したエッジから名前の付いたパーツを切り出してから、Export to Photoshop PSD（Photoshop PSD に書き出す） を選びます。.psd では、それらのパーツがグラフィックレイヤーとテキストレイヤーに分かれています。起点が 1枚の PNG である画面が複数ある場合も、同じ手順で進められます。

ステップ 1: 自動レイヤー分割

VberAI Studio で PNG を開き、ボードを選びます（例：cat_journey_UI）。選択ツールバーの、重なりレイヤーの操作を開き、Auto-Layering（自動レイヤー分割） を選びます。

Run AI auto-layering?（AI 自動レイヤー分割を実行しますか？） を確認し、Start layering（レイヤー分割を開始） を押します。

ステップ 2: Photoshop PSD に書き出す

レイヤー分割後のボードを選んだままにします（ここでは cat_journey_UI_layer、1536×864）。Image Export（画像の書き出し） を開き、Export to Photoshop PSD（Photoshop PSD に書き出す） を選びます。

ステップ 3: PSD を開く

ファイルは {name}_layer.psd として書き出されます。このボードでは cat_journey_UI_layer.psd です。Photoshop には、名前の付いたグラフィックレイヤーとテキストレイヤー（スキルスロット、通貨アイコン、HUD ラベル）が並びます。画面を撮り直さなくても、パーツごとに動かしたり、隠したり、見た目を変えたりできます。

そのファイルを Godot に読み込むには：PSD から Godot へ。

スプライトシートのグリッド切り出し

2026-09-08T17:31:00+08:00

スプライトシートを開きます。行と列が数えられるときは 簡易グリッド、セルの幅・高さ・オフセット・隙間が分かっているときは 手動グリッド、透明ピクセルが各ブロックを分けているときは自動を使います。

重ね線がマスに合うまで調整します。空のセルを飛ばすと、完全に透明なマスを除けます。プレビューで不要なフレームを外し、単体画像、行ごとの連結、列ごとの連結で書き出します。拡大はニアレストネイバーなので、ピクセルアートがぼけません。ファイルはこの端末だけに留まり、サーバーへは上がりません。

AI 背景除去

2026-08-28T18:30:00+08:00

要約: 3ステップ

AI Background Removal（AI 背景除去） は、ゲーム UI / シーンの一枚から、透明（または無地）の背景を取りたいときに向きます。HUD、ボタン、ラベル、そのほかのインターフェースは残します。UI 要素を残すことが、この手順の要点です。ゲームのインターフェース画面向けに調整されています。Pixian.ai や Remove.bg のような写真向け切り抜きでは、HUD の部品が削られたり消えたりすることが多いです。

Remove background（背景除去） メニューを開き、AI Background Removal（AI 背景除去） を選んで一度実行します。シーンの環境が消えて、UI レイヤーがエンジンへの読み込みや、このあとのスプライト作業に使えるかを確認します。光の滲みが多いマット処理で、生成による描き直しを使わない場合は高精度 AI マッティングを見てください。

ステップ 1: ゲーム UI のシーン一枚から始める

環境アートと HUD、操作系が同じフレームに乗っているビットマップを使います。ステータスパネル、クエストカード、スキルバー、仮想パッドが、まだ一枚に合成されています。

ステップ 2: AI Background Removal を選ぶ

画像を選んだ状態で、Remove background（背景除去） メニューを開き、AI Background Removal（AI 背景除去） を選びます。

ステップ 3: 切り抜き後に UI が残っているか確認する

結果では、描かれた環境は消え、キャラクターのスプライト、看板、宝箱、周囲の HUD は残ります。書き出す前に、パネルとアイコンの輪郭を確認します。

環境は除去済み。HUD と操作できる UI は一枚に残っています。

よくある質問

2026-08-26T16:00:00+08:00

VberAI Studio は有料専用ですか？

サブスクリプションは必須ではありません。クレジットの消費は多めです。一部の機能を日常作業に入れるなら、あとからクレジットを足すのが普通の使い方です。AI 生成のリクエストは、ほぼ毎回クレジットを使います。

VberAI Studio に Figma の `.fig` を読み込むには？

VberAI Studio のプロジェクトページで Import Project（プロジェクトを読み込む） を選び、.fig ファイルを指定します。

経験ゼロから小さなゲームを始められますか？

このサイトでは、その実験が進んでいます。あるワークフローの短い経路を探すなら、まずはじめにを見てください。

自動レイヤー分割：画像を複数レイヤーに

2026-08-26T14:39:00+08:00

要約: 3ステップ

このサイトの Image to Layers は Auto Layering（自動レイヤー分割） です。合成された一枚を、個別に編集できるレイヤーに分けます。枠を描く必要はありません。検出したエッジから切り出します。Layer Split（レイヤー分割）と同じツールバーです。目標は同じで、枠のサイズに合わせる手順はそちらのページです。

切り出しのあと、名前・位置・インタラクションをエンジンに読み込むまで残す理由は、画像から複数レイヤーへ：キャラクター画像をレイヤーに分けて、ゲーム素材の準備を速くするに書いてあります。

ステップ 1: Auto-Layering を開く

ボードを選びます（例: cat_journey_UI）。重ねレイヤーのメニューを開き、Auto-Layering（自動レイヤー分割） を選びます。

ステップ 2: Auto-Layering を確定する

Run AI auto-layering?（AI 自動レイヤー分割を実行しますか？） のあと、Start layering（レイヤー分割を開始） を押します。ダイアログに Manual Layering（手動レイヤー分割） と表示されていても、その操作は Layer Split です。

ステップ 3: 名前付きレイヤーを確認する

結果は元画像の右側に並び、すでに名前が付いています。複雑な HUD とシーンの部品には、枠が自動で付きます。

手順動画

目標は同じで、枠を描く手順は Layer Split です。名前付きレイヤーができたら、PNG to PSD で Photoshop ファイルに書き出せます。同じレイヤーは Unity にも読み込めます。Figma to Unity または PSD to Unity を使います。

ゲームテーマの一括リスキン：既存アートに祭りの見た目を載せる

2026-08-20T15:00:00+08:00

VberAI Studio の Reskin は、使い続けると離れにくい。機能そのものは Reskin にある。

インディー開発とゲームデザイナーにとって、いまのゲームにすでにアートがある状態で祝日の祭りを走らせるのは楽ではない。美術設計にとっては、ほぼ災難に近い。

中核の作業は、古いアートの上に新しい祭りの効果を一括で載せることである。ハロウィンなら祭りテーマのアイコン一式、バレンタインデーなら愛情を表す視覚要素が大量に出る。プロジェクトの段階は、これを変えない。継続運営があるなら、美術と開発はいつもその日付の前に日程へ入り、祭りの内容は先に用意しておき、当日に出す。

さらに中核なのは、プロンプトの一貫性を保った一括作業である。

Reskin はそこにある。生成は構造化した文書として出す。構造化した美術リソースの設定は残し、視覚の提示だけを差し替える。

まとめ

ゲーム UI の一括 Reskin には、一括の API リクエストと応答が要る。元の環境パラメータの設定は、かなり効く。

同じ論点は、r/aigamedev のこのスレッドにも出る：Reskinning assets with AI。スタジオが Reskin を入れると、得られるのは扱いやすい祭りのテーマである。短い時間で、指定した方向に大量のアセットを生成できる。あとにコストの式が残ることもある。生成コストをどこまで下げられるか、作業をどう組むかである。いまのところ、専門の作業は専門の側で組むほうが安定しやすい。組み方が寄れば、生成しなければならない量は減る。それが制作側の更新である。

AI リスキン

2026-08-20T14:30:00+08:00

要約: 4ステップ

Reskin（リスキン） は、VberAI Studio で作り終えた UI / HUD ボード向きです。レイアウトを手で組み直さず、雰囲気だけ変えたいときに使います。アートボードを選び、AI Reskin（AI リスキン） を開き、目標のテーマを書きます。そのプロンプトから、各レイヤーの見た目が再生成されます。レイヤーの関係と画像サイズは、一対一で対応したままです。文字色は元のまま残ることが多いです。ラベル色を揃える工程を、あとで予定してください。

ステップ 1: 選んだボードで AI Reskin を開く

VberAI Studio のキャンバスで、スタイルを変えたい画面を選びます（例: Main Screen）。ボードの上に出る選択ツールバーで、右端の AI バッジ付き AI Reskin（AI リスキン） を選びます。

ステップ 2: テーマのプロンプトを入力する

AI UI Reskin（AI UI リスキン） ダイアログは、説明文から見た目を再生成します。確定前にクレジット消費が表示されます。

プロンプトの例:

Halloween-themed page atmosphere

ステップ 3: 結果を確認する

実行が終わるまで待ち、ボードを確認します。環境、パネルの装飾、小物はテーマに従います。画面上の文字は元の色のまま残ることが多いので、ラベルはあとで色を揃えることがあります。

ステップ 4: レイヤー関係とサイズ

レイヤーの関係と画像サイズは、一対一で対応したままです。

手順動画

選んだボードでの AI Reskin です。プロンプトから、一対一のレイヤー結果までです。

Figma から Cocos Creator へ

2026-08-20T13:40:00+08:00

要約: 3ステップ

Figma から Cocos Creator へ は、レイヤー付きの .fig UI や HUD を、Cocos Creator のシーンとして読み込みたい場合に向いています。VberAI Studio がファイルを読み込み、Cocos Creator 3.x に書き出します。UI のロジックは Cursor または Codex でつなぎます。Cocos Creator で Build（ビルド） すると、プレビューはローカルのウェブページで開きます。

ステップ 1: ローカルの `.fig` を保存

Figma で画面を開き、File（ファイル）→ Save Local Copy（ローカルコピーを保存） を使います。

ステップ 2: VberAI Studio で Import Project

VberAI Studio のプロジェクトページで Import Project（プロジェクトを読み込む） を選び、.fig ファイルを指定します。

ステップ 3: 書き出してプレビューする

画面を選びます（例：Main Screen）。Export（書き出し） を開き、Export to cocosCreator3.x（Cocos Creator 3.x に書き出す） を選びます。

UI のロジックは Cursor または Codex でつなぎます。Cocos Creator でプロジェクトを Build（ビルド） すると、プレビューはローカルのウェブページで開きます。

手順動画

Figma から VberAI Studio を経て Cocos Creator までの手順です。

Figma と Cursor のあと、デザインファイルを Godot に読み込む

2026-08-19T14:17:00+08:00

要約

Figma で作画し、Cursor でコードを書いても、デザインファイルの後処理は残る。必要なのは、レイヤーを保った自動書き出し、エンジン向けの名前、プロジェクトフォルダへの保存である。Figma にはゲームエンジン向けの構造化書き出しがない。VberAI Studio がその隙間を埋めるので、ここではデザインファイルと Godot の間の経由点として使う。

後処理の隙間

Figma と Cursor を土台にしても、デザインファイルの後処理は終わらない。PNG を一枚書き出すだけでは薄い。必要なのは、AI IDE が読める形の書き出しである。レイヤーは残し、名前は揃え、エンジンがすでに使っているディレクトリにファイルを保存する。

MCP でプロジェクトの一部を同期すれば、AI ツールはいまのシーンとスクリプトの文脈を見られる。ただし MCP は、エンジンをまたいだ美術リソースの構造化保存と同期を一括では自動化しない。その手順は、いまもデザインツール側の工程に属する。

2025 年 5 月、同じ問いが Latenode に出ていた：Exporting Figma designs to Godot: Current status?。当時のよくある道は、切り出して書き出し、Godot で UI を組み直すことだった。2026 年 5 月、Figma はキャンバス内 Agent を出している（Fast Company）。レイヤーの生成と編集は楽になる。ただしそれだけでは、ファイルが Godot プロジェクトに入る道は答えにならない。形は共存できる。MCP で開発とシーンの文脈を同期し、デザインツールでアートを動かし続け、必要なときにエンジンのフォルダ構成で書き出す。

.fig の道は Figma から Godot へに書いてある。PSD/PSB の読み込みは別稿である：PSD から Godot へ。いくつか引っかかりも出た。VberAI Studio の PSD 読み込みは、ベクターレイヤーの対応がまだ完全ではない。同じファイルを Import Project（プロジェクトを読み込む）で .fig として入れると摩擦は少なく、ベクターも書き出しまで残りやすい。その流れは次の動画にある：

Import Project：.fig を VberAI Studio に読み込み、Godot に書き出す

VberAI Studio の UI では Figma 読み込みの入口が小さく、プロジェクトページの Import Project（プロジェクトを読み込む）は見逃しやすい。

まとめ

書き出しを元のアートファイルに揃え、開発フォルダへ一度で同期したいとき、VberAI Studio は使える選択肢である。対応する MCP（例：Godot MCP）と組み合わせると、手作業のファイル整理を一回り減らせる。
将来 Figma が垂直の書き出しを足しても、シーン単位の作業が残る可能性が高い。ゲーム制作は一括の生成と差し替えに寄る。汎用の PNG 書き出しでは足りない。

Figma から Godot へ

2026-08-18T17:20:00+08:00

要約: 3ステップ

Figma から Godot へ は、レイヤー付きの .fig UI や HUD を、Godot のシーンとして読み込みたい場合に向いています。VberAI Studio がファイルを読み込み、Godot に書き出します。書き出しでは .tscn が出力されます。デフォルトのパスは Godot の Assets 構成に従います。

レイヤー付き Photoshop ファイルの場合は：PSD から Godot へ。

ステップ 1: ローカルの `.fig` を保存

Figma で画面を開き、File（ファイル）→ Save Local Copy（ローカルコピーを保存） を使います。名前の付いたグループ（フレーム、ボタン、HUD バー）は、VberAI Studio と Godot のノードツリーまで引き継がれます。

ステップ 2: VberAI Studio で Import Project

VberAI Studio のプロジェクトページで Import Project（プロジェクトを読み込む） を選び、.fig ファイルを指定します。

ステップ 3: Godot に書き出す

画面を選びます（例：Main Screen）。Export（書き出し） を開き、Export to Godot（Godot に書き出す） を選びます。

手順動画

Figma の Import Project（プロジェクトを読み込む） と、Godot への書き出しです。

HD アップスケール

2026-08-11T21:22:00+08:00

要約: 3ステップ

HD Upscale（HD アップスケール） は、ピクセルサイズを大きくしたいビットマップ向きです。生成による解釈のずれは許容できる前提です。操作できるのは再描画範囲、出力形式、倍率です。実行するとクレジットを使い、結果は元画像の右側に新しいレイヤーとして置かれます。密集したゲーム UI、焼き込まれた文字、小さなアイコングリッドは、いまも安定しません。再描画範囲を上げると見た目は変わりますが、文字のシャープさは戻りにくいです。

この手順で使う元フレームは、ショップ / インベントリのシーンです。HUD、アイテムグリッド、環境が一枚に乗っています。

ステップ 1: 選んだ画像で HD Upscale を開く

キャンバス上の画像を選びます。選択ツールバーで HD Upscale（HD アップスケール）（AI グループ）を選びます。

ステップ 2: 再描画範囲、形式、倍率を設定する

ダイアログは、元のサイズと拡大後の見込みサイズを表示します。調整できる項目は次のとおりです。

Redraw range（再描画範囲） — ディテールをどこまで再生成してよいか（低いと構造は元に近く、高いと書き換わりが増えます）
Output format（出力形式） — PNG、JPG、または WEBP
Magnification（倍率） — 拡大率（例: ×2）

確定前にクレジット消費が表示されます。拡大した一枚は、元画像の右側に新しいレイヤーとして置かれます。

ステップ 3: 拡大したレイヤーを確認する

実行後、新しいレイヤーを元画像と比べます。このショップ UI では、再描画を低めにするとフレームは大きくなりますが、小さなアイコンと画面上の文字の輪郭は柔らかいままです。

Redraw range（再描画範囲） を高くする（例: 0.6）と、再生成に回る処理が増えます。レイアウトと小物はずれることがあります。ラベルや細い HUD の印は、読める文字にならず、ぼやけたままかノイズになることが多いです。

書き出しサイズの大きさを、UI のピクセル単位の忠実さより優先するときに HD Upscale を使います。インベントリのアイコン、ステータス文字、ピクセルの輪郭を正確に残したい一枚では、再描画は低めにします。あるいはこの手順は使わず、生成ディテールが効くレイヤーだけを拡大します。

スプライト自動分割

2026-07-17T18:30:00+08:00

スプライトシートをドロップするか、端末の画像 / ZIP を選びます。ツールはブラウザ内でアルファチャンネルまたは背景色に沿って各パーツを切り、PNG で書き出し、ZIP にまとめてダウンロードもできます。ファイルは端末に留まります。

不透明な画像は設定で背景色を指定できます。最小サイズは、小さすぎる破片を捨てるためのものです。形どおりに切ると透明な縁が残り、バウンディングボックスだと矩形になります。

自動分割

2026-07-17T15:13:00+08:00

要約: 2ステップ

Auto Split（自動分割） は、パーツのあいだにすでに隙間があるスプライトシート向きです。端末内で、別々のビットマップへすばやく切り出します。クレジットは使いません。端末上で実行し、各パーツを書き出すか、あとの工程へドラッグできます。

名前は元のスプライトシートを引き継ぎ、連番の接尾辞が付きます。切り出しは幾何的な領域検出です。名前は自動生成で、内容は読み取りにくいです。読みやすさが要るなら、書き出したあとに名前を付け直します。

ステップ 1: Split — Auto Split を開く

キャンバス上のスプライトシートを選びます。選択ツールバーで Split（分割） を開き、Auto Split（自動分割） を選びます。

ステップ 2: 分割したパーツを確認する

Auto Split は分かれた領域を検出し、個別の画像に切り出します。各パーツはスプライトシートの基名に連番接尾辞を付けます（例: … Part 26）。書き出しや、次の処理へのドラッグ＆ドロップに使えます。

速度とクレジット消費を、意味のあるファイル名より優先するときは Auto Split を使います。わかりやすい名前や、より厳密な境界が要るなら、エンジンに読み込む前に名前の付け直しを予定するか、手動の分割に切り替えます。

ブラウザ内だけで切り出し、ファイルが端末から出ない手順なら、ローカルのスプライト自動分割を試してください。

Steam ストアページのローカライズ：代理店のほぼすべてが AI ツールを使っている

2026-07-16T16:45:00+08:00

要約

英語の Frostpunk 2 風ストア宣伝フレームを Image Translate で簡体字中国語にすると、絵全体は残る。ラベルは言語が切り替わり、場面はそのままである。出力はローカライズしたストアアートとして出せる。同じ画像をそのまま主流の ChatGPT 画像生成や Nano Banana に渡すと、画面全体が描き直されやすい。ここは文字領域だけを再生成するので、ゲーム UI のローカライズに合う。

ストアページの制作会社は、すでに工程のなかで AI を使っている。専門の画像生成ベンダーを持たないインディーチームにとって、VberAI Studio は競争力のある選択肢になり得る。同じ能力はゲーム UI にも合い、広告クリエイティブのような配信画像をローカライズする運営側にも合う。

Reddit r/SoloDevelopment にスレッドがある：Localization of steam page: Almost all agencies use AI tools。ゲームスタジオ向けにストアページをローカライズする会社は、すでに工程のなかで AI を走らせている。インディーチームは、UI の文字がスクリーンショットに焼き込んであると、言語ごとに撮り直し、Photoshop、Figma と時間を失う。App Store と Google Play の掲載も同じ型である。

Image Translate は、宣伝画像とストアスクリーンショットの多言語版にかかる時間を短くできるか。次のテストが、いちばんはっきりした答えである。

マーケティングフレーム

Frostpunk 2 の Steam ストアページのプレビュー画像を、今回のローカライズのテストに使う。

上の英語元画像を、VberAI Studio で簡体字中国語を選んで走らせた結果。

文案は簡体字中国語に移った。キャラクター、金の枠、価格行、内容タイルは元の位置に残った。フレーム全体が必要なストア画像として、このファイルは使える。

同じ画像をそのまま主流の ChatGPT 画像生成や Nano Banana に渡すと、画面全体が描き直されやすい。ここでの Image Translate は精度が高い。文字領域を再生成し、残りのフレームはそのままにする。別のツール拘束に見えるし、ゲーム UI のローカライズに合う。

流れは Image Translate のとおりである。画像を選ぶ → Image Translate → 言語を選ぶ → 同じサイズのファイルを書き出す。

まとめ

VberAI の Image Translate は、マーケティングフレーム全体に焼き込まれた文字を扱える。場面は残り、ラベルは言語が切り替わる。汎用の画像生成で絵全体を描き直すやり方とちがい、作業は文字領域に留まる。ゲーム UI のローカライズに合い、広告クリエイティブのような運営側の配信画像にも合う。

高精度 AI マッティング

2026-07-16T15:10:00+08:00

要約: 3ステップ

Super AI Matting（高精度 AI マッティング） は、きれいなアルファ切り抜きが欲しく、画像生成は走らせたくないスプライトや UI キャプチャ向きです。光の滲み、柔らかいハロー、半透明ピクセルの輪郭品質は安定しています。ゲームアートでは、汎用の背景除去サービスより向くことが多いです。この工程はマット処理だけです。背景を除去し、前景の一枚はそのまま残します。

ツールバーの入口は Remove background — Super AI Matting（背景除去 — 高精度 AI マッティング） です。画像を選び、Super AI Matting を実行し、透明な結果を書き出します。エンジンへの読み込みや、このあとのスプライト作業に使えます。

ステップ 1: 元のスプライトまたはシーンキャプチャから始める

元の背景がまだ付いているビットマップを使います。キャラクター、HUD、発光アイコン、環境が同じフレームに乗っています。

ステップ 2: Remove background — Super AI Matting を選ぶ

画像を選んだ状態で、Remove background（背景除去）メニューを開き、Super AI Matting（高精度 AI マッティング） を選びます。

ステップ 3: マット処理の出力を確認する

出力ではシーンの背景が消え、前景のアートと UI の輪郭は残ります。光の滲みと半透明領域は、写真向けの自動切り抜きよりきれいなことが多いです。

チェッカーボードのマット：背景は除去済み。透明な領域に格子が見えます。

この手順はピクセルを再生成しません。元画像にあるものをマット処理します。光のブルーム、魔法の軌跡、柔らかいアイコン縁があるゲームスプライトを、太い縁なしでエンジンに読み込みたいときに、この違いは効きます。

背景抽出

2026-07-16T14:40:00+08:00

要約: 3ステップ

Extract Background（背景抽出） は、シーン全体のスプライトから、キャラクター、HUD、操作案内のない環境一枚が欲しいときに向きます。Extract（抽出） メニューを開き、モデルとサイズを選んで生成します。出力は再利用向けの背景候補です。すべての建物の輪郭まで、ピクセル単位で再現する保証はありません。

Extract Background（背景抽出） は、前景のキャラクターと重ね表示の UI を除いたシーンをモデルに再構成させ、背景寄りの画像を返します。このあとのアートやレベル作業に使えます。

ステップ 1: シーン全体のスプライトから始める

環境、キャラクター、UI が混ざったシーンを使います。下の例は村のショットで、NPC、HUD、画面上のラベルがまだ残っています。

ステップ 2: Extract Background を開き、モデルを設定する

画像を選んだ状態で、Extract（抽出）メニューを開き、Extract Background（背景を抽出） を選びます。

AI Extract Background（AI 背景抽出） ダイアログで、モデル（例: GPT Image 2）を選び、出力サイズと品質を設定してから抽出を開始します。

ステップ 3: きれいな背景結果を確認する

結果ではキャラクターと UI が消え、家、地面、木、空といった環境の一枚が残ります。背景として再利用できます。

抽出した背景は、元画像とピクセル位置が揃わないことがよくあります。この例では、建物の形や一部の画風が、元のフレームからずれています。本番素材として固定する前に、見た目を確認し、必要なら軽く直します。

AI 画像翻訳

2026-07-16T14:20:00+08:00

要約: 3ステップ

Image Translate（画像翻訳） は、文字がすでに絵に焼き込まれたスプライトや UI ビットマップを、まとめて扱うときに向きます。文字をビットマップの中に残してよいなら、速い多言語化の一回です。目標言語を選び、生成を実行すると、同じサイズの画像が返ります。シーンはだいたい残り、ラベルだけが切り替わります。画像生成でビットマップ内の文字を書き換えます。レイアウトとスタイルはピクセルのまま残ります。

Image Translate（画像翻訳） は、ビットマップ内の文字をモデル生成で書き換え、同じサイズの素材を出力します。最初の一回で、ラベルをすべて手描きし直す必要はありません。

ステップ 1: 元の UI 画像から始める

すでに元言語が表示されているゲームインターフェース、またはシーンのスプライトを使います。下の例は英語の UI フレームです（地名、NPC の案内、看板、バックパック / 設定のラベル）。

ステップ 2: Image Translate を開き、目標言語を設定する

画像を選んだ状態で、ツールバーの Image Translate（画像翻訳） を開きます。

AI Image Translate（AI 画像翻訳） ダイアログで目標言語を選び（例: Japanese）、レイヤーを確認してから Translate（翻訳） を実行します。

ステップ 3: 同じサイズの翻訳結果を確認する

結果の寸法は元画像と同じです。画面上の文字は目標言語に切り替わります（地点名、NPC の案内、ショップ / 出口の看板、バックパック / 設定など）。

英語のラベルが日本語に切り替わり、シーンの絵はそのまま残っています。

AI 支援ツールなしで、ピクセルのスプライトシート整理はどう見えるか

2026-07-15T18:00:00+08:00

要約

ワンクリックのツールは、すでにピクセル風のキャラクターアニメーションフレームとスプライトシートを狙っている。呼び出しの連鎖が端から端までどう並ぶかを見るため、同じ作業を使い慣れた汎用ツールで通した。参照つき生成、背景除去、揃えと書き出し、GIF プレビュー、最後のスプライトシートである。以下の手順はその道を記録し、詰まりに名前を付ける。

テストで使ったツール

ツール	役割
Grok Image	速い生成。短い時間でいくつかの方向が取れる
GPT Image 2	遅い。キーワードや参照が合えば品質は安定しやすい
Pixian.ai	背景除去。上位プランは大きな切り出しをより完全に扱う
Figma	切り取り、揃え、命名、連鎖の視覚記録

手順の順

連鎖全体で、ツールの呼び出しはおおよそ次である。Grok Image ×2、GPT Image 2 ×2、Figma ×2+、Pixian.ai ×2、Ezgif ×1（切り替えは合計およそ九回）。タイトル画像は、静的なアイコン案二つから、Ezgif でプレビューできる GIF までの道を示す。アイデアからプレビューできるアニメーションまで仕上げるには長い時間がかかり、やり直しと捨てた道が途中にある。

ステップ 1. Grok Image：参照とプロンプトでピクセル風の元画像を生成する

参照とプロンプトから、ピクセル風の元画像を生成する。

Two icons share the same style—one for “Documents” and the other for “Experiments”—and both employ a gamified aesthetic. The “Documents” icon depicts a scroll shimmering with magical trails of light, while the “Experiments” icon features a weapon-forging tool, symbolizing a resource honed through the fires of experience.

ステップ 2. Figma：一枚の小さな画像に切り取る

Figma で対象アイコンを一枚の小さな画像に切り取り、連番生成の手順に渡す。

ステップ 3. GPT Image 2：連番フレームを生成する

GPT Image 2 が連番フレームを出す。最初と最後のフレームを一致させる、という悪いプロンプト拘束のあと、使えるフレームはおよそ五枚だけ残った。黒いマットはモデル出力である。

ステップ 4. Pixian：背景を除く

連番フレームから背景を除く。

ステップ 5. Figma：フレームごとに揃え、名前を付け、書き出す

フレームを縦に揃え、動きの振幅をそろえ、順に名前を付け、書き出す。連鎖のなかで、手作業コストがいちばん高い区間である。

ステップ 6. ChatGPT のチャット内生成テスト

チャット内の直接アニメーションテストは見劣りし、その道は捨てた。

黒い背景のまま、透明度の処理なし。ゲームシーンにはそのまま使えない。

ステップ 7. Ezgif：フレームを透明 GIF にまとめる

Ezgif でフレームを透明 GIF に組み、サイトや手元の動きプレビューにする。

ステップ 8. エンジン向け：並べたスプライトシート

Godot のようなエンジンは、並べた連番のスプライトシート（透明 PNG / WebP）を求めることが多い。

詰まり

詰まり 1：ステップ 5 の揃えは高く、不安定である

いちばん弱い環はステップ 5 である。物体の手揃えと、動きの飛びの抑えである。AI の連番生成はフレーム間の一貫性を予測しにくいので、この段階は不確かさとやり直しを足す。

詰まり 2：きれいな切り出しと、繰り返せるプレビューが前提である

工程は二つの前提に依存する。

信じて使えるほどきれいな背景除去
再生成や調整が続けられる、速い GIF / アニメーションプレビュー

どちらが欠けても、あとの揃えとエンジンへの受け渡しは止まり続ける。

対比：主流の製品のかたち

より安定したキャラクタースプライトの連番は、生成と スケルトン / バインドの確認 を組むことが多い。動作の拘束を置いたあとのフレーム保証は、「プロンプトで多フレームを出し、手で整える」より勝ちやすい。

ワンクリックのツール（下記のサービス）は、編成、切り出し、揃え、プレビューを製品に折り込む。汎用ツールの連鎖は、詰まりの各手順を見えるようにする。

UI 要素の抽出

2026-07-15T17:15:00+08:00

要約: 3ステップ

Extract UI Elements（UI 要素の抽出） は、具体的なゲームシーンのスクリーンショットから、視覚モデルで UI 部品を一枚のスプライトビットマップに抜き出したいときに向きます。領域の数と境界を厳密に揃えたいときは向きません。結果はおおよそで、選んだモデルに左右されます。

Extract UI Elements（UI 要素の抽出） は、現在の画像に対してモデルベースの UI 抽出を実行します。プロンプトは不要です。画面の操作だけで進みます。

ステップ 1: メニューから機能を選ぶ

抽出の前に、シーンまたはスプライトのキャプチャを用意します。下の例は、この手順で使う元画像です。

対象画像を選んだ状態で、Extract（抽出）関連のメニューを開き、Extract UI Elements（UI 要素を抽出） を選びます。

クリック手順の入口の参照用です。製品スクリーンショットは 2026-09-03 時点です。

ステップ 2: モデルとパラメータを設定する

ダイアログでモデルと出力サイズを選びます。選べるのは GPT Image 2、Nano Banana / Nano Banana 2、Nano Banana Pro です。サイズが大きいほど、抽出される項目は増え、種類も増えやすいです。

クリック手順の入口の参照用です。製品スクリーンショットは 2026-09-03 時点です。

ステップ 3: 抽出結果を確認する

生成後、組み立てられたスプライトを確認します。いまの出力は 不透明な ビットマップレイヤーです。次の工程に渡す前に、たいてい後処理が必要です。

GPT Image 2、Output Size（出力サイズ）1K の結果です。

より合う場面: ビットマップからスプライトシートへ

UI が密集した一枚のビットマップは、上の手順より Extract UI Elements に向きます。モデルは、一枚の元画像から個別の UI 部品とパネルを引き、一枚のスプライトシートにまとめます。この例の網羅範囲と境界は、ステップ 3 のデモより豊かで正確です。

元画像: UI が密集した一枚のビットマップ。

出力スプライトシート。GPT Image 2、Output Size（出力サイズ）1K。

AI でスプライトシートを生成し、エンジンで使えるピクセルアートに整える

2026-07-15T10:00:00+08:00

要約

AI が生成したスプライトシートを、ゲームで使えるピクセルアートにする作業は、よく二つの問題で止まる。シーンの分類と意味上の役割（詰まり 1）、ばらばらのビットマップを構造化したエンジンアセットにすること（詰まり 2）である。どちらについても、VberAI は分割、抽出、整理をより実用に近づける。このメモの残りは、残っている詰まり、Cursor 式の Rules による文脈、命名とメタデータを扱う。

Reddit の議論

Reddit r/aigamedev に関連スレッドがある。

Using AI to generate sprite sheets and clean them up into game-ready pixel art

スレッドは一つの工程を追う。AI でスプライトシートを生成し、ゲームに入れるピクセルアートへ整える。コメントに多い失敗は、出力がエンジンに素直に落ちないこと、アニメーションフレームが安定しないこと、整理にまだ重い手作業が残ることである。

Layer Split のような流れを書くあいだに、それらの失敗は、より具体的な詰まりに分かれる。

詰まりの分析

詰まり 1：スプライトには分類とシーンの意味が要る

スプライトがゲームに入ると、たいてい役割が付く。例えば：

シーンの建築 / 装飾要素：位置は比較的固定、インタラクションは少なく、衝突設定はたいてい不要
インタラクティブ / 衝突するオブジェクト：衝突、遮蔽、重ね順、ときどき状態変化を持つことが多い

アセットが「スプライトに見える」より前に、分類と期待される振る舞いがすでに含まれている。画像モデルは絵を生成するほうが強く、スプライトがシーンでどの役割を持つかを系統的に答えるのは弱い。VberAI も、分類とシーンの意味をシステム機能としてはまだ扱っていない。分割、抽出、整理は使える。「装飾か衝突体か」の判断は、書き出したあと、IDE での一括作業にほぼ残る。

詰まり 2：美術アセットは構造化データであるべきなのに、ばらばらの画像として扱われがちである

ゲームアートは、エンジンのフォルダと参照グラフに入る。より安定した形は 構造化したリソース記述 に近い。種類、用途、関係、検索できる項目である。名前のないビットマップの山は、自動化を支えにくい。

AI 生成は、たいてい先に一枚か一組の画像を出し、構造はあとから埋める。VberAI の Layer Split / 領域選択は境界の制御を良くする（Layer Split）。ただし構造化の道はまだ人手に寄る。選択、レイヤー、確認を画像ごとに繰り返し、アセット数が増えるとコストも増える。中核の問いは、処理手順を再利用できる構造にできるかどうかである。一度きりの完了だけでは足りない。

詰まり 3：常識の文脈がモデルに届くか——同じ UI フレームのなかでもルールは違う

同じインターフェース画像のなかの要素でも、生成の拘束は違う。

キャラクターの立ち絵 / アバターは、たいてい 結果が一つ で足りる。待機、走り、攻撃などの多フレーム状態は要らない。拘束のない生成は、余分な多フレームの状態シートを出しやすい（タイトル図）
多フレームのアニメーションは、一貫性の拘束が強い（比率、向き、タイミング、キーフレーム）。再生成と選別のコストも高い
UI フレームに一部だけ写る要素：直接生成は、欠けた領域を補完できることがある。手で分けて抽出するだけでは、元画像の局所情報が足りない

左：VberAI の手動注釈による抽出。選択がきつく、建物の右側が落ちる。右：GPT Image 2 のスプライトシート。建物は完成しているが、下の山と芝生が付いたままである。

欠けているのは、Cursor Rules に近いものである。切り替えできる再利用可能な文脈拘束。「単フレームのみ」「走りサイクルが必要」「隠れた領域の補完を許す」などをモデルに渡す。常識の拘束が安定して届かなければ、結果は「見た目は許容できる」と「エンジンにそのまま使える」のあいだで止まりやすい。

同じ Reddit スレッドから：

I tried doing this with nano banana. I was trying to animate a cartoony dinosaur running. It would create the sprite sheet, but I couldn’t get enough good frames to make a convincing run animation.

I ultimately just cut out the limbs and tried animating them as a 2d skeleton in Unity. Just like anything, I think it takes practice and creativity to make these things work.

この反応は同じ限界に対応する。モデルはスプライトシートを出せても、使えるアニメーションフレームを安定して十分には出さない。工程は、より制御しやすい部品分割 / 2D スケルトン構成に戻る。隙間は画質だけではない。タスクの文脈と合格条件がツールチェーンに入るかどうかである。

詰まり 4：自動の命名とメタデータ——MCP / IDE の呼び出しを支える

美術アセットは、最終的にエンジンへ梱包される。MCP と Cursor のような IDE を通した有用な協調では、呼び出しやすさはビットマップそのものより、画像のうしろの メタデータ に寄る。

有効な編成には、たいてい二層がある。

意味のある命名 — 最初の文脈を置く（何の物体か、どのクラスか、どの手順か）
より豊かな内蔵メタデータ — アセット種別による検索、絞り込み、一括処理、ルールに基づく呼び出し（ハーネス）

ここは VberAI がすでに明確に進んでいる。処理した出力は意味のある名前を自動で受け取り、あとの検索とアセット管理が直接になる。命名とメタデータは、生成結果を IDE / MCP が参照できる構造化アセットに近づける。

まとめ

ゲームの美術アセットはもともと構造化されており、AI 生成の工程に合う。解くべきは、構造化したハーネスである。分類の意味、検索できるメタデータ、設定可能な文脈ルール、エンジンと IDE が続けられる命名である。

VberAI Studio は、分割、抽出、自動命名の一部をすでに担っている。詰まり 1〜3 は、まだ人の判断か、系統的な設定の不足に寄っている。それらの拘束が、エージェントから呼べる再利用可能な構造になれば、工程は揃いやすい。

レイヤー分割

2026-07-09T10:00:00+08:00

要約: 3ステップ

Layer Split（レイヤー分割） は、選んだビットマップの切り出しサイズを、自分で描く枠に合わせたいときに向きます。枠のあと、自動でレイヤー分けと AI 切り出しが走ります。出力の名前は読み取りやすいです。同じツールバーには Auto-Layering（自動レイヤー分割） もあります。枠は描かず、検出したエッジから切り出します。その手順は自動レイヤー分割：画像を複数レイヤーにです。

物が隠れている、または隣り合っているときでも、枠を描けばひとつだけ切り出せます。たとえば建物だけで、周りの草や土は含めません。

ステップ 1: ツールバーから Layer Split を開く

キャンバス上の画像を選びます。選択ツールバーで、Extract（抽出） の右にある重ねレイヤーの操作を開きます。同じ階層に次の 2 つがあります。

Layer Split（レイヤー分割） — 手で領域を描き、そのあと自動でレイヤー分けと AI 切り出し。生成サイズは描いた枠に従います。
Auto-Layering（自動レイヤー分割） — 手描きの枠は不要。検出したエッジから切り出します。

以前の Extract（抽出） 項目 Manual Layering（手動レイヤー分割） はありません。Layer Split（レイヤー分割） が、いまの名前でのその工程です。手で枠を描き、そのあと自動でレイヤー分けと切り出しを生成します。

ステップ 2: アートレイヤーとテキストレイヤーを手で分ける

Layer Split が開いたら、対象の絵が入っている範囲全体を選び、どのレイヤーがビジュアルで、どれがテキストかを指定します。枠が生成サイズになります。絵とテキストを分けると、あとの処理で介入しやすくなります。

ステップ 3: 処理結果を生成する

枠とレイヤー種類を確定してから生成を実行します。出力は、その境界と種類の指定に従います。

複雑なシーンでは、追加の処理上限に当たることがあります。実行後、出力画像には各ビジュアル結果に対応するわかりやすい名前が付きます。あとから探しやすくなります。

手順動画

選んだボードでの Layer Split です。ツールバーから、枠に合わせた切り出しまでです。

同じ結果で、枠を描かない手順は自動レイヤー分割：画像を複数レイヤーにです。

はじめに

2026-06-26T10:00:00+08:00

よくある制作上の詰まりを洗い、AI 生成でその箇所を外し、出力をゲームエンジンへ直接読み込めるアセットにします。初心者向けの AI 先行ワークフローとして、この流れは一通り試してあります。

工程ではツールを並べて比べ、できることと詰まるところをはっきりさせます。VberAI Studio が核です。操作は、AI でゲームを直接作る感覚に近いです。

時間のかかるコンテンツ制作は AI に任せます。

入門

2026-06-26T10:00:00+08:00

ここには、より複雑で幅のある経験のまとめが入ります。ドキュメントは一つの具体的な問題を解くために書かれます。こちらは、ある進め方そのものを書くことが多く、その道でいちばん直接に得た体験をまとめます。

vibegame

Cocos Creator 2.x MCP

要約: 3ステップ

ステップ 1: CocosCreator2.x MCP Server を開く

ステップ 2: Running を確認し、One-Click Configuration を使う

ステップ 3: AI コーディングツールをつなぐ

Cocos Creator 3.x MCP

要約: 3ステップ

ステップ 1: Cocos Creator MCP Server を開く

ステップ 2: Running を確認し、One-Click Configuration を使う

ステップ 3: AI コーディングツールをつなぐ

Godot MCP

要約: 3ステップ

ステップ 1: Godot MCP Server を開く

ステップ 2: Running を確認し、One-Click Configuration を使う

ステップ 3: AI コーディングツールをつなぐ

Unity MCP

要約: 3ステップ

ステップ 1: Unity MCP Server を開く

ステップ 2: Running を確認し、One-Click Configuration を使う

ステップ 3: AI コーディングツールをつなぐ

MCP で AI コーディングツールをゲームエンジンにつなぐ

要約: 3ステップ

ステップ 1: 詰まるのは、切り出しの置き場所

ステップ 2: MCP はローカルサーバーとして動く

ステップ 3: ワンクリック設定でコーディングツールをつなぎ、エンジンのページを選ぶ

画像から複数レイヤーへ：キャラクター画像をレイヤーに分け、ゲーム素材の準備を速くする

要約

PNG の分割はすでに簡単である

エンジンに読み込む：元のレイヤー文脈を保ち、同期し続ける

垂直ツールが重要なのは、同じ文脈を共有し続けるからである

まとめ

Figma から Unity へ：AI First のあと、UI の手作業を工程の中心に置かなくてよい

要約

元記事の細部の半分は、もう成り立たない

AI First のあと、まだ成り立つものと、中心から外れたもの

この組み合わせが実際に変えたもの

まとめ

Figma から Unity へ

要約: 6ステップ

ステップ 1: ローカルの .fig を保存

ステップ 2: VberAI Studio で Import Project

ステップ 3: 自動レイヤー分割

ステップ 4: Unity に書き出す

ステップ 5: Unity の書き出し形式を選ぶ

ステップ 6: 出力を確認する

PSD から Unity へ

要約: 6ステップ

ステップ 1: レイヤー付き PSD を開く

ステップ 2: PSD/PSB を読み込む

ステップ 3: 自動レイヤー分割

ステップ 4: Unity に書き出す

ステップ 5: Unity の書き出し形式を選ぶ

ステップ 6: 出力を確認する

PSD から Godot へ

要約: 3ステップ

ステップ 1: レイヤー付き PSD を開く

ステップ 2: PSD/PSB を読み込む

ステップ 3: Godot に書き出す

手順動画

PNG から PSD へ

要約: 3ステップ

ステップ 1: 自動レイヤー分割

ステップ 2: Photoshop PSD に書き出す

ステップ 3: PSD を開く

スプライトシートのグリッド切り出し

AI 背景除去

要約: 3ステップ

ステップ 1: ゲーム UI のシーン一枚から始める

ステップ 2: AI Background Removal を選ぶ

ステップ 3: 切り抜き後に UI が残っているか確認する

よくある質問

VberAI Studio は有料専用ですか？

VberAI Studio に Figma の .fig を読み込むには？

経験ゼロから小さなゲームを始められますか？

自動レイヤー分割：画像を複数レイヤーに

要約: 3ステップ

ステップ 1: Auto-Layering を開く

ステップ 2: Auto-Layering を確定する

ステップ 3: 名前付きレイヤーを確認する

ステップ 1: ローカルの `.fig` を保存

VberAI Studio に Figma の `.fig` を読み込むには？

ステップ 1: ローカルの `.fig` を保存

ステップ 1: ローカルの `.fig` を保存