NEWGPT Image 2.5が登場 — 手戻りを減らして、集中的な編集を。

GPT Image 2.5をぜひお試しください

ゲームUIを編集可能なレイヤーに分離

ゲームのスクリーンショットを、個別のUIパネル、HUD要素、アイコン、インターフェースアセットに変換します。AIを活用したレイヤー分離機能で、細かなパーツも精密に調整できます。

ゲームUIのスクリーンショットをアップロード

クリーンなスクリーンショット、またはUIモックアップをご使用ください。最初の処理で、主要なインターフェースコンポーネントがシーンから分離されます。

1

クリックまたはドラッグ&ドロップで画像をアップロード

Layer Hotspots17 Layers
Hover or click box to inspect layer
Separated Layer Cutouts17 Layers
Protected Assets
2

設定

ゲームインターフェース向けに最適化

最初の処理では、バー、パネル、メニューボタン、ミニマップ、キャラクター、シーンなどの機能コンポーネントごとに分離されます。スキルバーのような密集した帯状の要素は、必要に応じてさらに細かく分離できます。

HUD & ステータスバーミニマップ & メニュースキルバー & ホットバーチャット & ダイアログパネル
1回あたりのコスト60 クレジット

画像をアップロードして開始

プライベートファイルの取り扱い

アップロードされたファイルはアカウントに関連付けられ、署名付きURLを通じて配信されます。完了したジョブは手動で削除可能です。

透過PNG出力

詳細レイヤーは、検出された各要素を透過背景上の独立したレイヤーとして出力します。

より良い結果を得るための推奨事項:

  • トリミングされていないフルサイズのスクリーンショット
  • 高解像度で、過度な圧縮のない画像
  • UIとエフェクトの重なりが少ない画像
  • モーションブラーのかかっていない静止フレーム
  • HUD、バー、パネルをそれぞれ独立したレイヤーに
  • キャラクターとシーンを別々に保持
  • 選択したパネルをボタン単位に分割
  • レイヤーエディターでの移動、非表示、書き出しに対応

実際の処理結果

1枚のスクリーンショットから、個別のUIパーツへ

同じゲームのスクリーンショットに対する2つの実行例です。1回目はインターフェースをシーンから分離し、2回目はそのうちの1つのレイヤー(スキルバー)をさらに細かく分離しています。

ステップ1:スクリーンショットの分離

キャラクターとシーンの背景がインターフェースから切り離され、各バー、パネル、メニューボタン、アイコンがそれぞれ独自のレイヤーになります。

体力バー、ミニマップ、チャットパネル、スキルバーが表示されたファンタジーゲームのスクリーンショット
  • 独立した透明レイヤーとしての Skill Bar and Ornaments
  • 独立した透明レイヤーとしての Player Character Portrait Frame
  • 独立した透明レイヤーとしての Chat Panel
  • 独立した透明レイヤーとしての Minimap Panel
  • 独立した透明レイヤーとしての Boss Nameplate and HP Bar
  • 独立した透明レイヤーとしての XP Bar Base
  • 独立した透明レイヤーとしての Player Character in Scene
  • 独立した透明レイヤーとしての Location Nameplate
  • 独立した透明レイヤーとしての Player HP Bar
  • 独立した透明レイヤーとしての Player MP Bar
  • 独立した透明レイヤーとしての Vendors Menu Button
  • 独立した透明レイヤーとしての Quests Menu Button
  • 独立した透明レイヤーとしての Group Menu Button
  • 独立した透明レイヤーとしての Minimap Clock Icon
  • 独立した透明レイヤーとしての Minimap Gear Icon
  • 独立した透明レイヤーとしての Minimap Hourglass Icon

ステップ2(オプション):1つのレイヤーをさらに分離

ステップ1の時点では1つのレイヤーだったスキルバーを個別に実行し、10個のボタン、2体の像、バーのベースに分離しました。

2体の石像の間に10個のボタンが配置されたスキルバー
  • 独立した透明レイヤーとしての Skill bar base plate and frame
  • 独立した透明レイヤーとしての Right gargoyle statue
  • 独立した透明レイヤーとしての Left gargoyle statue
  • 独立した透明レイヤーとしての Skill button 7
  • 独立した透明レイヤーとしての Skill button 9
  • 独立した透明レイヤーとしての Skill button 4
  • 独立した透明レイヤーとしての Skill button 8
  • 独立した透明レイヤーとしての Skill button 1
  • 独立した透明レイヤーとしての Skill button 2
  • 独立した透明レイヤーとしての Skill button 6
  • 独立した透明レイヤーとしての Skill button 0
  • 独立した透明レイヤーとしての Skill button 5
  • 独立した透明レイヤーとしての Skill button 3

処理についてのご注意

各レイヤーはAIモデルによって再描画されるため、パーツを元通りに重ね合わせても、完全なコピーではなく元のスクリーンショットに近い仕上がりになります。サイズや位置がわずかに異なる場合があり、特にスキルバーのような密集したパーツで顕著に現れます。また、レイヤーが元のパーツよりもやや大きくなることがあります。小さなテキスト、数字、細いアイコンを使用する前に、必ずご確認ください。

使い方

2つのステップ(2ステップ目は任意)

  1. 1

    スクリーンショットをアップロード

    最初の処理で、主要なインターフェースコンポーネントとキャラクターがシーンから分離されます。

  2. 2

    レイヤーを確認

    エディターでレイヤーを選択、移動、非表示にして、元のスクリーンショットと比較します。

  3. 3

    詳細化するレイヤーを選択

    スキルバーなどのレイヤーを選択します。処理開始前に必要なクレジットが表示されます。

  4. 4

    パーツを活用する

    分割されたパーツがエディター上のレイヤーと置き換わります。いつでも元のレイヤーに戻したり、元に戻す(アンドゥ)ことが可能です。

ゲーム開発者の皆様へ

1枚のフラットな画像からUIパーツを抽出

スクリーンショットやコンセプトアートのフレームには、インターフェース全体が1枚の画像として収められています。これを分離することで、バー、パネル、アイコンを透明レイヤーとして取得し、独自のUIパイプラインで再配置、再スタイリング、再構築することができます。

このツールはアートワークの分離を行います。ゲームエンジン上のオブジェクトとしてUIを再構築するものではありません。

  • 参考フレームからのレイアウトプロトタイピング
  • UIリデザインのためのHUDパーツの抽出
  • 既存のスクリーンショットからのUIモックアップ再構築
  • スタイルスタディのためのアイコンやフレームの収集

UIデザイナーの皆様へ

1枚の画像ではなく、コンポーネント単位で作業

バー、パネル、ボタンが別々のレイヤーに分かれることで、並び替えを行ったり、不要なものを非表示にしたり、結果を書き出したりすることが可能になります。

レイヤーはキャンバス上の位置を保持するため、他の部分に影響を与えることなく、1つのパーツだけを動かすことができます。

  • 体力・マナバー
  • ミニマップとそのフレーム
  • メニューおよびクエストボタン
  • チャットおよびダイアログパネル
  • カウンター、時計、独立したアイコン

アセット制作者の皆様へ

再利用可能なパーツを収集

アイコン、ボタン、装飾品が個別の透明PNGレイヤーになります。※必ず使用権利を持つアートワークのみをご使用ください。

  • スキル・アビリティアイコン
  • 装飾フレームと彫像
  • 通貨およびステータスアイコン
  • 装飾用のコーナーパーツ

なぜ2ステップなのか

1回の処理におけるレイヤー数の制限

1回の実行で、背景に加えて最大16個の分離レイヤーが生成されます。ゲームのスクリーンショットにはそれ以上のパーツが含まれているため、最初のパスではすべてのボタンを細分化するのではなく、密集した帯状の要素をグループ化します。

2つ目のステップでは選択した1つのレイヤーのみを対象に実行するため、モデルの全レイヤーをそのコンポーネントだけに割り当てることができます。

最初のパス

断片ではなく、コンポーネント単位で

最初の処理では、広範囲なビジュアル領域ではなく機能的なコンポーネント単位で抽出します。ラベル付きのバーはまとまったまま維持され、メニューボタンはそのアイコンと一緒に保持されます。

シーンの背景は1つのレイヤーとして維持され、シーン内に立つキャラクターは背景から分離されます。

  • ステータスバーおよびXPバー
  • ボスおよびターゲットバー
  • ミニマップおよびメニューボタン
  • チャットおよびダイアログウィンドウ
  • キャラクターとシーン

グループの維持

1つのレイヤーとして出力されるパーツ

アビリティバーなどの類似したボタンの行は、最初のパスでは1つのレイヤーとして出力されることがよくあります。これが2つ目のステップが存在する理由です。

ただし、その場合でも非常に密集した帯状の要素が、すべての個別のパーツに完全に分離されることは保証されません。

制限事項

このツールで行えないこと

スクリーンショットとピクセル単位で完全に一致する切り抜き画像は生成されません。また、すべてのインターフェース要素が個別のレイヤーになることも保証されません。

Unityのプレハブ、Unrealのウィジェット、Godotのシーンなどのエンジンファイルは作成されません。また、ボタンの機能やテキストの自動認識は行いません。

  • 小さなテキストや数字は目視での確認を推奨します
  • 細い線やグロー効果の見栄えが若干異なる場合があります
  • 重なり合っている要素は1つのレイヤーに留まることがあります

準備のコツ

よりクリーンな分離のために

可能な限り最高解像度のフルフレーム画像を使用してください。モーションブラー、画面の揺れ、インターフェースに重なる激しいパーティクル効果のある場面でのキャプチャは避けてください。

1つのパネルのみが必要な場合は、事前にトリミングするか、最初のパスを実行した後にそのレイヤーをさらに分離してください。

  • トリミングされていないフルフレーム画像
  • 高解像度
  • 動きのない静止した瞬間
  • エフェクトで覆われていないインターフェース

レイヤーの活用

編集、並び替え、書き出し

レイヤーエディターでは、レイヤーの移動、サイズ変更、非表示、ロック、並び替え、マスクや調整の適用、そしてコンポジット画像としての書き出しが可能です。

ZIPおよびPSDのダウンロードには、分離されたレイヤーが含まれます。さらに分離を行ったレイヤーは、その分割されたパーツとして書き出されます。PSD書き出しには有料プランが必要です。

クレジット

開始前にコストを確認

各処理にはクレジットが消費され、実行前にコストが表示されます。レイヤーのさらなる分離は個別のオプショナルな処理であり、確認するまで料金は発生しません。

処理が失敗した場合、使用されたクレジットは自動的に返金されます。

Game UI to Layersに関するよくある質問

Game UI to Layersとは何ですか?

ゲームのスクリーンショットを、ステータスバー、パネル、メニューボタン、ミニマップ、アイコン、キャラクター、シーン背景などの透明レイヤーに分離するツールです。レイヤーエディターでそれらを移動、非表示、書き出しすることができます。

すべてのボタンが個別のレイヤーになりますか?

最初のパスではなりません。1回の実行につき背景と最大16個の分離レイヤーが生成されるため、類似したボタンの行は通常まとまった状態になります。2つ目のステップでそのレイヤーをさらに分離することも可能ですが、非常に密集した帯状の要素が完全に分割されることは保証されません。

個別のスキルボタンを取得するにはどうすればよいですか?

最初のパスを実行し、エディターでスキルバーのレイヤーを選択し、「このレイヤーをさらに分離」を選択します。実際のテストでは、スキルバーが10個のボタン、2体の像、バーのベースに分離されました。

料金は2回発生しますか?

必要な場合のみです。最初のパスは1回の実行となります。レイヤーのさらなる分離は個別のオプショナルな実行となり、開始前にクレジットコストが表示されます。失敗した処理のクレジットは自動的に返金されます。

生成されるレイヤーはスクリーンショットの正確な切り抜きですか?

いいえ。各レイヤーはAIモデルによって再描画されます。パーツを組み合わせた状態はスクリーンショットに近くなりますが同一ではなく、サイズや位置がわずかに異なる場合があります。

インターフェース内のテキストは保持されますか?

テキストや数字は通常保持されますが、小さすぎる文字や細いフォントは変化する可能性があります。テキストや数字を含むレイヤーは、使用前に必ず確認してください。

Unity、Unreal、Godotで結果を使用できますか?

透明PNGレイヤーと書き出し可能な構成画像を取得できます。このツールはUnityのプレハブやUnrealのウィジェット、その他のエンジンプロジェクトファイルを作成するわけではないため、ご自身のUIセットアップに画像をインポートしてご使用ください。

1回の実行で何枚のレイヤーを取得できますか?

1回の実行につき、背景と最大16個の分離レイヤーが生成されます。

シーンとキャラクターはどうなりますか?

シーンの背景は専用のレイヤーとして保持されます。シーン内に立つキャラクターは背景から分離され、その背後の背景部分が再構築されます。

レイヤーをさらに分離した後、元のレイヤーに戻すことはできますか?

はい。元のレイヤーは非表示の状態で保持され、そのパーツが表示されます。「元のレイヤーを復元」を実行するか、元に戻す(アンドゥ)機能を使用することでいつでも戻すことができます。

どのようなスクリーンショットが最適ですか?

モーションブラーやインターフェースを覆う激しいエフェクトがない、高解像度の静止フレームが最適です。要素の間に明確な隙間がある画像ほど効果的です。

利用可能な書き出しフォーマットは何ですか?

レイヤーをZIPとしてダウンロード、コンポジットをPNGとして書き出し、または有料プランでPSDをダウンロードできます。さらに分離したレイヤーは、そのパーツごとに書き出されます。

どのゲームのスクリーンショットでも使用できますか?

ご自身に使用権利のあるアートワークのみをご使用ください。所有していないゲームのスクリーンショットや、他者のライセンスで保護されたアートは、編集や共有の権利がない場合があります。

分離されたパーツをAIで編集できますか?

エディター上でパーツの移動、マスク、調整、ダウンロードを行うことができます。AIによる編集、高解像度化(アップスケール)、背景削除は、元のレイヤーに対して実行されます。

ゲームのスクリーンショットを個別のUIレイヤーに変換

スクリーンショットをアップロードし、分離されたコンポーネントを確認。調整が必要なレイヤーだけに絞って詳細な分離を実行できます。

ゲームUIを分離する

すべての実行前にクレジットコストをご確認いただけます。