0评论

Unity3d将PSD直接导出成UGUI界面(二)

文章来自CSDN博客 2018-07-28 84浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏开发行业精英群711501594

之前一篇博文介绍了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按钮,就能一键设置了。