【Unity3d】将PSD直接导出成UGUI界面（二）

之前一篇博文介绍了Psd 2 Unity uGUI Pro这个插件（【Unity3d】将PSD直接导出成UGUI界面（一））。经过更长时间的使用之后发现一些需要注意的地方，也是这个插件可以更加完善的地方。

首先是Photoshop中，之前用过的插件是图层不能出现中文命名，这个插件支持所有语言，但是图层名字后一定要加“=PNG”或“=JPG”等标识，不然脚本会跳过该图层，不将图层信息写入json文件中，而且组不能加上标识不然整个组会被切成一张图片（当然如果我们要的就是这个效果就另当别论了）。所以我们需要给所有图层加上标识。如果图层很多的话可以写一个PS脚本一键重命名所有图层，先全部命名为=“PNG”，在讲需要单独导出成JPG或其他配置的进行修改，因为毕竟UI大多都是PNG格式的图片。

PS脚本中使用需要判断是组还是图层，如果是组，就取组中的Layers继续判断，这里采用递归的方法可以很方便的实现这一功能：

function TryRenameArtLayer(layers)
{
    for (var i = 0; i < layers.length; i++)
    {
        var layer = layers[i];
        if(layer.typename == 'ArtLayer')
        {
            layer.name += "=PNG";
        }
        else
        {
            TryRenameArtLayer(layer.layers);
        }
    }
}

将psd文件处理过后我们会得到一个资源文件夹和一个json文件，右击json文件选择Set as Psd 2 Unity Pro’s Target可以打开界面生成面板并将自动配置structure和file。而右击空白处打开Set as Psd 2 Unity Pro’s Target则需要手动配置structure和file。其中Target配置的Root物体，我们可以直接选择Canvas或者Canvas下的某个子物体，但是需要注意的是这里只能先使用Space-Overlay，如果需要用Space-Camera或者World Space类型，可以在界面生成之后再设置。

生成之后的界面中，UI元素的Raycast Target默认是勾选状态，不过在制作界面的时候，对于不需要交互的元素，我们最好还是把这个设置勾掉，特别是有些会覆盖到按钮的元素（一般是带有透明部分的图片，一不小心会有部分覆盖到按钮上，很难被发现）。可以全选所有Image或者Text，将Raycast Target勾掉。也可以写一个脚本，获取子物体上的Image和Text控件，然后将raycastTarget设置会false，再对按钮的Raycast Target进行单独设置。当然如果不嫌麻烦的话可以每个UI物体单独设置。脚本需要编写Editor脚本。先顶一个SetRaycastTarget空类：

public class SetRaycastTarget : MonoBehaviour
{


}

然后重写该类Editor的OnInspectorGUI方法（需新建一个对应的SetRaycastTargetEditor脚本）：

[CustomEditor(typeof(SetRaycastTarget))]
public class SetRaycastTargetEditor : Editor
{
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();

        SetRaycastTarget raycast = (SetRaycastTarget)target;

        if(GUILayout.Button("Set Raycast Target"))
        {
            var image = raycast.GetComponentsInChildren<Image>(true);
            for(int i = 0; i < image.Length; i++)
                image[i].raycastTarget = false;

            var text = raycast.GetComponentsInChildren<Text>(true);
            for (int i = 0; i < text.Length; i++)
                text[i].raycastTarget = false;
        }
    }

}

将脚本挂载到Canvas上，点击Inspetcor上的Set Raycast Target按钮，就能一键设置了。

By：蒋志杰