智能分层：图片转多图层

先说结论：4个步骤

Smart Layering（智能分层） 把一张界面图拆成多图层。Image to Layers 指的就是这一步。已经在用的界面，如果一次切完就不再看，后面通常还要手工改。所以切开之前会停一下：哪些框留下，哪些区域是程序文字，要不要开 HD enhance（高清增强）。确认之后，切好的图放在一块新画板上，垫在源图的一份拷贝上。

拆开并不难。导入到引擎中时，原来的位置和交互还在不在，才是后面要盯住的。原图层的上下文信息要保留，并和画面同步。具体写在从图片到多图层。

步骤 1：用 AI Auto Box 圈出各块

选中画板。打开 AI tools（AI 工具），点 Smart Layering（智能分层），再点 AI Auto Box（AI 自动圈选）。这一步读整张图，把要单独切开的元素各自圈出来。列表还没确认时，可以在已有框里再画一个，也可以移动框、改框的大小。

步骤 2：核对图层列表

每个框标成 UI element（界面元素），或 Program text（程序文本）。标成程序文本的区域，导出时按文字处理，不做成图片图层。框叠在一起时有前后。拖动某一行，可以改哪一块在上面。这张图里，生命数、金币数和波次是程序文本。图标和卡面是界面元素。

步骤 3：确认数量，再决定要不要高清增强

对话框标题是 Start manual layering?（开始手动分层？）。里面写着要切多少个元素，以及这次的估算。勾选 HD enhance（高清增强） 之后，切出来的图层会再交给图像模型处理一次。细节更清楚，边缘更干净。模型能补上的残缺，也会补上。估算和上一步标的内容一致，再点确认。

步骤 4：在新画板上看结果

处理完会新建一块画板。切分结果铺在源图的一份拷贝上。各块贴得很紧。拖动某一层，或者拉动框边上的控制点，才能看出它和原图是分开的。图层名字也一起写上，例如 life_count、shield_icon、skull_tower_card_one。

演示视频

图层切好、名字也写上之后，用 PNG 到 PSD 存成 Photoshop 文件。同一批图层也可以导入到 Unity 中：Figma 到 Unity，或 PSD 到 Unity。