Skip to main content
ARShow
 首页 » 资源教程

UGUI和Native2D结合使用教程初探完整版

2017年05月26日 20:15:126930蛮牛网

背景

关于UGUI的教程和源码很多了,但与结合使用的例子和文章不多,今天我们来吃一下螃蟹,通过两个特性演示一下UGUI和Native的结合使用。

虽然这不是一件很难的事,针对目前网上的教程,大概分三类:一类是系列教程,主要是翻译整理Unity文档、API特性介绍的教程,ugui涉及的所有组件都以API文档表格的形式罗列出来,每个组件每个特性都详细说一遍,其实如果外语好的话直接看官方文档也没有什么区别,我把这样的教程叫做字典,可以收藏起来,使用的时候随时翻看查一下就行;另一类的帖子和文章主要是大家分享的使用中遇到的相关问题,功能比较少,知识点比较深入,应该算是一种填坑的经验教程;第三类,就是比较好的了,就是通过例子图形并貌的演示控件属性的,比如介绍UGUI锚框的文章,真是帮了我大忙了。

经过这段时间的学习的经验,其实UGUI入门并不是很难,如果会NGUI那就更简单了,其实际上大家如果要去找源码例子的话,你也不用纠结什么NGUI和UGUI的,好像原作者都是一位,有很多相通的地方,特别是我在实践的过程中,发现UGUI的实用教程比较少,其实找到NGUI有相关教程例子,看懂原理稍微改一下,简单的功能也是可以快速移植的,还有就是UGUI和Native2d的结合使用和UGUI与3d场景使用差不多,可能还能更简化一些,所以学习一下还是很有意义的。

本片旨在介绍两个特性,UGUI和Native2d的结合UI相机使用;UI事件的遮挡判断。

实现

UGUI和Native2d的结合UI相机使用

看过系列教程的同学,基本能明白,三种相机类型的区别,一种是Overlay覆盖相机;一种是指定相机;一种是使用3d相机。UGUI和Native2d的结合,当然首先我们可以排除掉3d相机了,因为我们是使用的2d场景,我看了很多例子,基本是使用覆盖型相机,就是不使用相机,UI直接绘制在视口的最顶层,这个比较好理解。

但看看一些前人的帖子,说这种办法在做一些特效就很麻烦,因为已经在最顶层了,无法在前面做一些特效,而第二种指定相机实现特效就变了很简单,因为,元素的深度由我们来控制,虽然我们可以在UI的前面绘制我们的特效了。

当然在3d场景中应用UGUI,因为是透视有时候有一个很麻烦的事情就是要计算UI控件的缩放大小。而我们在2d场景中就没有这个问题,用的是正交投影,UGUI和Native2d本身两个都是2d的,而且设置什么尺寸完全一样大,也就没有什么坐标啊尺寸的转换了(虽然现实还是依旧残酷),用起来还是挺舒心的,下面我们展示一下。

UGUI和Native2D结合使用教程初探完整版 资源教程 第1张

UGUI和Native2D结合使用教程初探完整版 资源教程 第2张

UGUI和Native2D结合使用教程初探完整版 资源教程 第3张

 

左侧UGUI和Native2d接合的gameobject结构,右侧运行界面

 

三种相机的选择

UGUI和Native2d的结合使用,UI事件的遮挡和判断

这里其实这个特性,很多前人的文章已经提及了,只不过他们的实验的环境是在3d场景下,这里我搬过来用来验证一下,在,Native2d和3d场景没有什么区别,这个也算知识点吧,因为没有什么冒泡事件机制,用一个属性就可以判断了,用一张图和看下代码  来说一下原理,然后使用这个特性来改一下代码,做个判断就可以了。

鼠标点击的位置

鼠标点击事件和是否在Point点在物体上方的判断代码

原理

做法

1、我们在Update中定义了一个全局鼠标点击函数,点击干点什么,如GlobalClick

2、我们给UGUI(或者2d,3d的物体)也绑定了鼠标点击事件,如ButtonClick

现象

1、无论点击那里 全局鼠标事件都会触发(废话)GlobalClick

2、当在按钮上点击,两个鼠标事件都触发 GlobalClick,ButtonClick

问题

1、如何让Button知道鼠标是在自己上面点击(感觉这个问题很搞笑),不过Unity确实提供了这么一个函数,也确实适用Natvie2d和UGUI控件

2、当点击空地上,也就是不在任何UGUI上的时候我们要明确的知道, 也就是一个纯的GlobalClick,实际上就是 !ButtonClick ||GlobalClick的问题,也就是网上传说中的 Unity UGUI —— 鼠标穿透UI问题,强烈建议参考这篇 Unity UGUI —— 鼠标穿透UI问题(Unity官方的解决方法)

总结

UI系统是一个逃不掉的功能和模块,所以硬着头皮也要学下来,好在有一定前端设计经验的同学,这个不是特别难,本人还是沿着从实际出发,结合例子,来介绍UGUI功能点和知识点,希望对大家有用,有使用不当或者介绍不全的地方,请高手指正交流,谢谢大家。

续上一篇的内容,今天我们来说两个深入一点的知识点:第一个是通过代码动态创建UGUI控件(完成这个例子也是为我们下一章的内容做铺垫);第二个是关于UGUI和鼠标点击事件的使用。

实现

第一个是通过代码动态创建UGUi控件。

大多数教程,讲的都是静态化的控件使用,也就是通过Unity拖拽实现静态UI的设计,然后绑定代码使用,与动态的方式比相对简单。动态的创建的方式复杂些,难度也比静态的大了许多,比如说装备系统中的装备格子,基本是动态加载的,界面中的伤害信息显示等。当然,这里类似的的教程和帖子也比较多,这里我会列出相应的方法和说明。

下面我用一个例子来说明如何动态创建UGUI控件。这里我们选择一种比较简单的方法,先通过拖拽的实现一个静态的UGUI控件结构,然后然后再把他生成预设。我们要使用它的时候就实例化这个预设。这里有两个注意点就是所有的UGUI控件必须有一个父Canvas,所以我们在预设的绑定代码中中必须提供并手动绑定Canvas,当然也可以使用代码绑定的方式(如果你知道明确那个Canvas),实际上我们通过实例化预设。就可以完成动态生成UGUI控件的功能了,当然这里会有一个很大的坑。就是关于动态控件的定位控制问题。实际我发现动态生成的控件,不能使用全局位置Positon和相对位置LocalPositon这两个属性来控制位置,是不是有点小恶心(这个留到以后再讲)。

 

UGUI和Native2D结合使用教程初探完整版 资源教程 第4张

 

预设的创建

UGUI和Native2D结合使用教程初探完整版 资源教程 第5张

 

其中红色标出的这行代码,特别重要必须制定父Canvas

第二个,我们来说一下Native和UGUI的鼠标点击事件。

原本都是2d的竟然有两套鼠标点击事件的控制逻辑。实际上有人总结了UGUI的鼠标点击的方法就有四种,我总结了一下,其实大概也就是分两种,一种是通过添加事件监听函数的传统方式方式来完成。另一种就是比较高大上的,通过中转或者代理的方式来实现,UGUI叫做触发器EventTrigger,有兴趣的同学可以参照下面的链接仔细学习一下。

可以参考这篇,UGUI事件系统 http://www.cnblogs.com/caymanlu/p/5876336.html

当然,我不太喜欢通过手动绑定的方式来实现,而是通过代码继承接口来实现的方式,这里有两个注意点就是要使用鼠标点事件,必须给摄像机挂在射线追踪脚本,并且控件要添加2d碰的物理脚本;

UGUI和Native2D结合使用教程初探完整版 资源教程 第6张

 

给Canvas 挂载射线追踪脚本

按钮添加事件脚本

鼠标点击事件实现

而关于Native2d控件的鼠标事件触发,又有了一种新的方式以前我是采用射线追踪的方式来才来获得鼠标点击事件,

可以参考下面我这个链接,Unity 2D 屏幕点击选中实现--精灵透明处理篇

本篇我们采用一种新的方式,通过三步完成鼠标点击事件的获取:第一步、给摄像机挂在物理碰撞脚本;第二、给Native2d原生2d控件添加物理2d碰撞组件;第三步、我在脚本中继承相应的接口,实现事件回调函数,具体参考以下代码。至此两个体系的鼠标,点击事件都在一个场景中实现了。

主相机添加物理2d射线追踪脚本

Native2 sprite对象添加Box collider2d脚本,并添加点击事件处理脚本

UGUI和Native2D结合使用教程初探完整版 资源教程 第7张

总结

本篇是对两个基础功能的应用,也再次展现和验证UGUI和Native2d的结合UI使用,实际上也一样适用UGUI和3d场景的使用。

评论列表暂无评论
发表评论