NGUI学习笔记(一):官方视频学习记录

时间:2022-09-08 18:51:21

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

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

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

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

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

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

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

 using UnityEngine;
using System.Collections; public class AddEvent : MonoBehaviour
{
private GameObject button; //传递的参数
public float num = 123.456f; void Start ()
{
button = GameObject.Find("UI Root/Sprite"); //获取组件
UIEventTrigger et = button.GetComponent<UIEventTrigger>(); //直接传入方法进行回调
EventDelegate ed1 = new EventDelegate(OnButtonHoverOver1);
et.onHoverOver.Add(ed1); //如果方法带有参数必须使用字符串的形式进行设置
EventDelegate ed2 = new EventDelegate(this, "OnButtonHoverOver2");
ed2.parameters[] = new EventDelegate.Parameter(this, "num");
et.onHoverOver.Add(ed2);
} private void OnButtonHoverOver1()
{
Debug.Log("OnButtonHoverOver1");
} private void OnButtonHoverOver2(float p)
{
Debug.Log("OnButtonHoverOver2 p:" + p.ToString());
}
}

其它的事件如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中。

NGUI学习笔记(一):官方视频学习记录的更多相关文章

  1. Angular 快速学习笔记&lpar;1&rpar; -- 官方示例要点

    创建组件 ng generate component heroes {{ hero.name }} {{}}语法绑定数据 管道pipe 格式化数据 <h2>{{ hero.name | u ...

  2. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;六&rpar;&equals;&equals;&equals;&gt&semi;脚手架Vue-CLI&lpar;项目说明-Babel&rpar;

    五  Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...

  3. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;一&rpar;&equals;&equals;&equals;&gt&semi;基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  4. &lbrack;原创&rsqb;java WEB学习笔记75:Struts2 学习之路-- 总结 和 目录

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. &lbrack;原创&rsqb;java WEB学习笔记66:Struts2 学习之路--Struts的CRUD操作&lpar; 查看 &sol; 删除&sol; 添加&rpar; 使用 paramsPrepareParamsStack 重构代码 ,PrepareInterceptor拦截器,paramsPrepareParamsStack 拦截器栈

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. 【神经网络与深度学习】学习笔记:AlexNet&Imagenet学习笔记

    学习笔记:AlexNet&Imagenet学习笔记 ImageNet(http://www.image-net.org)是李菲菲组的图像库,和WordNet 可以结合使用 (毕业于Caltec ...

  7. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;五&rpar;&equals;&equals;&equals;&gt&semi;脚手架Vue-CLI&lpar;PyCharm&rpar;

    Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)

  8. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;四&rpar;&equals;&equals;&equals;&gt&semi;脚手架Vue-CLI&lpar;基本工作和创建&rpar;

    (五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...

  9. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;三&rpar;&equals;&equals;&equals;&gt&semi;组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  10. Vue学习笔记-Vue&period;js-2&period;X 学习&lpar;二&rpar;&equals;&equals;&equals;&gt&semi;组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

随机推荐

  1. 161213、Maven资源替换和Freemarker模板

    先介绍一下本文的两位主角: Apache Maven - 正当红的项目管理工具 FreeMarker - 老牌的模板引擎 两者貌似互不相干,何来冲突呢? 原来Maven有一个内置的资源替换机制, 可以 ...

  2. vs2010 clickone 工程安装后的路径 win7

    C:\Users\xuan\AppData\Local\Apps\2.0\DX16T5JV.MLO\1H1ZAND1.1ZY\test..tion_f74974f651f2573b_0001.0000 ...

  3. Java基础:Collection—List&amp&semi;Set

    List和Set: List可以将元素维护在特定的序列中.它的特点是有序,允许重复元素出现.最常见的List的实现类是:ArrayList. Set的特点是:无序,不保存重复元素.当尝试将重复的元素添 ...

  4. C&plus;&plus; stringstream介绍,使用方法与例子

    From: http://www.usidcbbs.com/read-htm-tid-1898.html C++引入了ostringstream.istringstream.stringstream这 ...

  5. Linux实战教学笔记12&colon;linux三剑客之sed命令精讲

    第十二节 linux三剑客之sed命令精讲 标签(空格分隔): Linux实战教学笔记-陈思齐 ---更多资料点我查看 1,前言 我们都知道,在Linux中一切皆文件,比如配置文件,日志文件,启动文件 ...

  6. R语言 画图roc

    这才是我要的滑板鞋~~~~~ #glm模型glm.model=train(y~.,data=data_train, method="glm", metric="ROC&q ...

  7. 猿团专访 &vert;以技术推动发展 msup 成为企业经验智库

    随着企业的发展,几乎所有的管理者都有同样一个痛点:如何才能让自己的团队变得更强,技术能力更能匹配企业发展需求?msup的创立毫无疑问解决了这个难点. 麦思博(msup)有限公司发源于美国西雅图,是一家 ...

  8. node&period;js压缩版 Windows安装

    1.下载 下载地址:https://nodejs.org/zh-cn/download/ 选择相应的版本下载 2.解压缩 将文件解压到要安装的位置,并新建两个目录 node-global :npm全局 ...

  9. 第2章 Linux操作系统简介

    1. Linux操作系统的构成 (1)内核(kernel) ①操作系统的核心,负责管理系统的进程.内存.设备驱动程序.文件和网络系统. ②控制系统和硬件之间的相互通信. ③决定着系统的性能和稳定性. ...

  10. Private strand flush not complete错误

    Private strand flush not complete错误 (2013-10-22 11:04:58) 转载▼   分类: FAQ 最近的一个报表系统数据库,总是出现checkpoint ...