代码改变世界

NGUI学习笔记（一）：官方视频学习记录

2015-05-12 13:14  阿诚de窝  阅读(1596)  评论(0)  编辑  收藏  举报

学习NGUI一直断断续续的，目前打算做一个总结的笔记。

我使用的是比较老的3.6.0版本。

 

1.使用NGUI，需要开启“Edit”->“Project Settings”->“Physics”里的“Raycasts Hit Tiggers”选项，否则无法使用交互系统，当前该选项是默认开启的。

 

2.NGUI控件要添加 Box Collider 组件才可以接受交互事件；

 

3.如果要让按钮上的文本也可以根据按钮的状态改变颜色，可以再在按钮上添加另一个Button组件，然后把组件的Target设置为文本即可；

 

4.如果需要使用到更多的交互事件，比如移入移出等，可以添加UIEventTrigger脚本；

 

5.手动使用代码添加UIEventTrigger的事件的示例：

 1 using UnityEngine;
 2 using System.Collections;
 3 
 4 public class AddEvent : MonoBehaviour
 5 {
 6     private GameObject button;
 7 
 8     //传递的参数
 9     public float num = 123.456f;
10 
11     void Start ()
12     {
13         button = GameObject.Find("UI Root/Sprite");
14 
15         //获取组件
16         UIEventTrigger et = button.GetComponent<UIEventTrigger>();
17 
18         //直接传入方法进行回调
19         EventDelegate ed1 = new EventDelegate(OnButtonHoverOver1);
20         et.onHoverOver.Add(ed1);
21 
22         //如果方法带有参数必须使用字符串的形式进行设置
23         EventDelegate ed2 = new EventDelegate(this, "OnButtonHoverOver2");
24         ed2.parameters[0] = new EventDelegate.Parameter(this, "num");
25         et.onHoverOver.Add(ed2);
26     }
27 
28     private void OnButtonHoverOver1()
29     {
30         Debug.Log("OnButtonHoverOver1");
31     }
32 
33     private void OnButtonHoverOver2(float p)
34     {
35         Debug.Log("OnButtonHoverOver2 p:" + p.ToString());
36     }
37 }

其它的事件如Button的onClick等方法都是一致的。

NGUI List<EventDelegate> 小坑

 

6.如果控件无法接收到事件，需要注意一下控件的Depth的设置，高的Depth会阻断到低的Depth。对于这种情况可以开启NGUI的Debug模式，这样可以查看到接收鼠标事件的对象。

 

7.ScrollView的使用记录：

  • 对于ScrollView控件，我们可以添加多个控件到其内部，为其内部的控件添加BoxCollider和UIDragScrollView脚本，可以通过拖拽内部对象来滚动。
  • 如果希望通过一个区域而不是具体的显示组件来拖拽，可以添加一个Invisible Widget，注意不要作为ScrollView的子项添加，拖拽使其尺寸和ScrollView一致，为其添加BoxCollider和UIDragScrollView脚本，UIDragScrollView脚本可以设定其控制的ScrollView对象，这样就可以通过一个区域来拖动ScrollView了。
  • 如果希望场景中的对象也可以接收事件，可以为Main Camera添加UICamera脚本。我们为场景中需要监听事件的对象添加脚本即可。

 

8.将ScrollView中的组件拖出的实现：

  1. 为内部对象添加DragDropItem脚本，对象可以拖动但是仍然在ScrollView中。
  2. 添加一个Depth更高的Panel，为其添加DragDropRoot脚本，这样当ScrollView中的对象被拖出时就会被添加到这个Panel中。但是当鼠标释放后我们拖拽的对象仍然会返回到ScrollView中，同时会停留在拖拽的位置。
  3. 为ScrollView添加一个Grid并将ScrollView的所有子项都移动到Grid中，这样可以实现自动排序的功能，可以勾选Smooth Tween来实现缓动。
  4. 目前拖出的物体会返回到末端，我们可以选择Sorting为Horizontal来使物体会排列到最接近的位置。
  5. 创建一个Horizontal Scroll Bar，选中Scroll View，找到UIScroll View组件里的Scroll Bars，将添加的水平滚动条赋值到Horizontal属性即可将两个对象进行关联。
  6. 我们这时候会发现水平拖动Scroll View中的Sprite不是滚动Scroll View了而是直接拖拽，解决这个问题只需要全选Sprite，选择UIDrag Drop Item里的Restriction为Vertical即可，表示拖拽只支持垂直方向。
  7. 下面我们看看如何将Scroll View中的一个对象拖拽到指定的地方，我们创建一个Sprite并为其添加一个Box Collider，这就是我们要拖拽到的目的地。然后为其添加一个DragAndDropContainer脚本。
  8. 对于DragAndDropContainer脚本有一个Reparent Target属性，我们可以创建一个Grid并赋值给它，这样我们拖拽出来的对象都会添加到该Grid中。