春节期间,学习了一下UGUI(Unity GUI)。

UGUI是Unity 4.6新增的功能,极大了弥补Unity GUI鸡肋: OnGUI.

 

学习UGUI最好的途径是系统的推理推理官方的UGUI的demo,如Drag And Drop、Menu 3D、Draggable Panel等,这些非常有嚼头,也可以学到很多东西。

 

demo很关键:源码,学习的动力,其他都是浮云。

image

 

  • UGUI原生的UI组件有9个

    image

 

  • EventSystem

交互控件,默认只有一个事件,如Button自带一个OnClick事件,其他的事件,请通过EventTrigger添加。

添加UGUI组件后,一般会自带一个事件,如Button.OnClick()

clip_image001

其他的事件,通过添加Event Trigger添加:

clip_image002

或者通过写脚本,实现17个 UGUI-EventSystem 接口来实现。

 

                • IPointerEnterHandler – OnPointerEnter – Called when a pointer enters the object
                • IPointerExitHandler – OnPointerExit – Called when a pointer exits the object
                  • IPointerDownHandler – OnPointerDown – Called when a pointer is pressed on the object
                  • IPointerUpHandler – OnPointerUp – Called when a pointer is released (called on the original the pressed object)
              • IPointerClickHandler – OnPointerClick – Called when a pointer is pressed and released on the same object
              • IInitializePotentialDragHandler – OnInitializePotentialDrag – Called when a drag target is found, can be used to initialise values
            • IBeginDragHandler – OnBeginDrag – Called on the drag object when dragging is about to begin
            • IDragHandler – OnDrag – Called on the drag object when a drag is happening
          • IEndDragHandler – OnEndDrag – Called on the drag object when a drag finishes
        • IDropHandler – OnDrop – Called on the object where a drag finishes
        • IScrollHandler – OnScroll – Called when a mouse wheel scrolls
      • IUpdateSelectedHandler – OnUpdateSelected – Called on the selected object each tick
    • ISelectHandler – OnSelect – Called when the object becomes the selected object
    • IDeselectHandler – OnDeselect – Called on the selected object becomes deselected
    • IMoveHandler – OnMove – Called when a move event occurs (left, right, up, down, ect)
  • ISubmitHandler – OnSubmit – Called when the submit button is pressed
  • ICancelHandler – OnCancel – Called when the cancel button is pressed

已知问题,在4.6.0 Win 7 64位系统下,ISubmitHandler我添加到InputField上,点击回车不会触发。

 

  • Animation & Animator

UGUI的UI动画,可以由Unity 的新、老动画配合完成。
image

 

新动画

老动画

*.controller

*.anim

Animator状态机

Animation录制动画

设置条件变量

成对出现

Animator.SetBool()

Animation.Play()

同GameObject

同GameObject

clip_image002

clip_image004

 

为了简化常用动画,可通过DOTween脚本和UGUI结合,轻松的实现动画。

image

 

  • 3种Canvas的用途

 

image

1 Screen Space OverLay 默认模式–静态的

2 Screen Space Camera NGUI默认效果,很酷UI,如ShowDialog等。

3 World Space — 3D对象上用,ToolTip、血条、HUD。

 

 

  • Layout:Grid\H\V\Element

image

UGUI提供了4个Layout的组件,同时,结合Rect Transform的Anchors功能,方便设计复杂的UI嵌套。

布局要多练习,其核心思想和Web、流式布局类似,为了考虑多种屏幕尺寸,复杂UI要按照Grid划分好网格,再填充UI元素。

 

几个Tips:

  • Rect Transform Reset :rectT.anchoredPosition = Vector2.zero; //UGUI
  • 一个习惯,把UI的控制代码挂到**Control上独立的一个EmptyGameObject上,如_AudioControl image
  • 在Image中的九宫格,如果设置Image Type:Sliced后失效,请导出你的场景为UnityPacage,再新建工程导入,则可成功九宫格了。