Unity学习笔记 - uGUI

作者: pirateH | 来源:发表于2016-10-12 23:50 被阅读551次

    uGUI就是Unity原生自带的UI制作系统,unity 4.6之后才有的。据说比NGUI好用,毕竟是unity亲生的嘛~

    学习目标:

    1. UI图片的摆放与正常显示

    2. 按钮  -  点击按钮动画;点击后界面跳转;点击后触发脚本中设定的功能

    3. 窗口  -  窗口弹出/消失动画

    4. 屏幕适配

    5. 美术资源规划与性能优化

    一. UI图片的摆放与正常显示


    1. 创建UI图片

    引自:http://blog.csdn.net/u012999985/article/details/50865335

    点击菜单栏的GameObject标签——UI——Image

    建立之后我们就能看到在左边的场景实体列表(Hierarchy)新生成了三个实体

    Canvas:画布,相当于一个呈现界面UI素材的容器。

    Canvas下的子实体Image:每个UI控件都是由美工设计的图片构成,这个就Image是放自己设计的图片的实体

    EventSystem:监听UI相关的事件实体,用来支持点击触碰等。

    Set Native Size 恢复图片原始尺寸

    2. Canvas基本设置

    Canvas - Render mode:Screen Space Camera

    Canvas - Render Camera:Main Camera 

    Canvas Scaler - UI Scale Mode:Scale with screen size


    二、按钮

    1. 点击按钮的动画

    按钮会自带悬停、按下效果,在Button - Transition中可设置

    ColorTink: 点击效果靠颜色与Alpha透明度来调节

    SpriteSwap:不同状态使用不同图片

    Animation:利用Unity的动画系统来制作按钮的动画效果

    关于Animation:

    点击auto generate animation,创建animation controller文件;

    选中加动画的button,打开Animation窗口,点击刚才创建的controller,这时Animation窗口中就可以看到4个动画状态了;

    点击Add property就可以加动画效果了(或者点击红色录制按钮)。

    * Image - Raycast Target 要勾选点击才会有效

    2. 点击后界面跳转

    新建一个空的Game Object,比如叫Menu Ctrl

    在Menu Ctrl上添加脚本MenuCtrl:

        public void LoadScene(string sceneName)

        {

            SceneManager.LoadScene(sceneName);

        }

    On Click()下面点击加号新建事件

    将Menu Ctrl拖入,选中函数MenuCtrl.LoadScene,并输入需要跳转到的场景名

    三、弹出窗口


    创建panel,添加animator组件;

    选中panel,打开animation窗口,新建动画。

    四、屏幕适配

    1. 关于Anchor四叶草

    参考:http://www.jianshu.com/p/5a11073e2b77

    四叶草是Anchor,Button是子矩形,灰色面板是父矩形

    Anchor四角和父矩形四角的距离为比例固定;

    子矩形四角和Anchor四角的距离为绝对距离固定;

    Anchor四角合拢即Anchor大小永远为0,则父矩形大小变化时,子矩形大小不变,仅位置移动;

    Anchor四角分开则父矩形大小变化时,Anchor大小随之变化,子矩形大小也同样变化;

    调整Anchor四角的位置可使子矩形随父矩形形变的幅度有所不同(总之是会有各种不同的效果,数学不好原理似懂非懂,反正试试就知道了)。

    下图这种将Anchor合拢置于父矩形左上角,则子矩形大小不会变,相对于左上角的绝对距离不会变

    现在只是知道uGUI屏幕适配的大概,有待进一步学习和尝试。

    五. 美术资源规划与性能优化

    这篇文章写的挺好:http://www.jianshu.com/p/061e67308e5f

    补充资料:

    遮罩效果(Mask

    http://www.mamicode.com/info-detail-526038.html

    Mask貌似比较废,少用为好。

    动态创建uGUI(感觉会用的上):

    Unity进阶技巧 - 动态创建UGUI


    后记:因为unity不支持prefab嵌套,所以UI该怎么组织是个问题

    相关文章

      网友评论

        本文标题:Unity学习笔记 - uGUI

        本文链接:https://www.haomeiwen.com/subject/nfouyttx.html