Smart Layering：画像を複数レイヤーに

要約: 4ステップ

このサイトの Image to Layers は、いま Smart Layering である。本番の一枚を放置して一度で切ると、あとで手直しが残る。切る前に確認が挟まる。残す枠、プログラムテキストにする領域、HD enhance（高精細化） を使うかどうか。結果は新しいボードに載り、元画像の複製の上に並ぶ。

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

ステップ 1: AI Auto Box

ボードを選ぶ。AI tools を開き、Smart Layering を選んで、AI Auto Box（AI による自動枠） を走らせる。画面を読み、単独の要素として扱う部品に枠が付く。一覧を確定する前に、既存の枠の内側へ描き足す、移動する、サイズを変える、ができる。

ステップ 2: レイヤー一覧を確定する

各枠は UI 要素か Program text（プログラムテキスト） である。Program text は書き出しでもテキストのまま残り、画像レイヤーにはならない。重なった枠は前後に積まれる。行をドラッグすると、どれが手前かが変わる。この画面では、ライフ数、ゴールド、ウェーブ数が Program text である。アイコンとカードは UI 要素のままである。

ステップ 3: 見積もりを確認し、HD enhance を選ぶ

確認ダイアログの見出しは Start manual layering? である。要素数と、今回の見積もりが出る。HD enhance（高精細化） にチェックを入れると、切り出したレイヤーが画像モデルをもう一度通る。細部が立ち、端がきれいになり、補える欠けは補われる。見積もりが前のステップの印と揃ってから確定する。

ステップ 4: 新しいボードで確認する

処理が終わるとボードが一つ増える。切り出したものは、元画像の複製の上に並ぶ。位置が近いので、レイヤーをドラッグするか、枠の周囲のハンドルを触るまで、元の画面との差は見分けにくい。名前も一緒に付く。life_count、shield_icon、skull_tower_card_one などである。

手順動画

名前付きレイヤーができたら、PNG to PSD で Photoshop ファイルに書き出せる。同じレイヤーは Unity にも読み込める。Figma to Unity または PSD to Unity を使う。