分享

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

 office0228 2017-12-28

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

首先是Photoshop中,之前用过的插件是图层不能出现中文命名,这个插件支持所有语言,但是图层名字后一定要加“=PNG”或“=JPG”等标识,不然脚本会跳过该图层,不将图层信息写入json文件中,而且组不能加上标识不然整个组会被切成一张图片(当然如果我们要的就是这个效果就另当别论了)。所以我们需要给所有图层加上标识。如果图层很多的话可以写一个PS脚本一键重命名所有图层,先全部命名为=“PNG”,在讲需要单独导出成JPG或其他配置的进行修改,因为毕竟UI大多都是PNG格式的图片。
PSD设置
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);
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

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

public class SetRaycastTarget : MonoBehaviour
{


}
  • 1
  • 2
  • 3
  • 4
  • 5

然后重写该类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;
        }
    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

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

By:蒋志杰

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多