关于Unity中的NGUI和UGUI

一、用Unity开发2D游戏,有三套关系

1.GUI:Unity本身自带的GUI

2.NGUI:以前在Unity中广泛来做2D的,是第三方的包,需要安装

3.UGUI:Unity5.X后(其实是Unity4.6以后),Unity找到NGUI的作者,用了一年开发了UGUI,变成内置于Unity中的包,官方主推,

     所有的GUI元素都在Unity的UI工具栏,右键--->UI,后来这个作者因为自己个人的原因离开了Unity

二、3D游戏是以米为单位,2D游戏是以像素为单位。所以用Unity做2D要解决这个问题。有两种解决方案:

3D做2D游戏的方法:

1: 使用正交摄像机:多大就是多大,没有什么变换。

2: 使用透视摄像机,将2D元素移动到合适的距离(Z的位置)。例如设计分辨率为 960x640, 使得在3D世界里面一个图片的大小w*h米,将这个图片移动到一定的距离(Z的位置),在Game视图里面能全屏地显示这个2D精灵。

计算方法:tag(视角*0.5) = (h/2) / zeye摄像机到精灵的距离; zeye摄像机到精灵的距离= h / (2 * tan(30));

     960*640的zeye值大约是554,也就是要把Image的Z轴设置成5.54,这样才能把Image刚好覆盖整个Game视图屏幕

三、3D做2D游戏的步骤:

1.创建一个2D精灵

2.把图片的Texture Type改为Sprite

3.这时候图片属性会出现一个Pixeis Per Unit表示多少像素为一米 ,Pixeis Per Unit 100:100个像素为1米。960*640大小是9.6*6.4米

4.把图片拖进精灵的Sprite属性中

5.旋转图片90度(直接修改Inspector的Z轴参数)

6.设置精灵的Z轴的位置,使得在Game视图里面能全屏地显示这个2D精灵。这个Z轴的数值可以通过计算得出,zeye摄像机到精灵的距离= h / (2 * tan(30));,每个比例像素的Z轴大小都是不同的,其中960*640应该设置为5.54。这一步骤是为了获得这个比例。

7.如果不想改变精灵的Z轴位置,但是又想让它在Game视图里面能全屏地显示,这时候可以修改精灵的X和Y的Scale缩放比例,如果原本Z的大小为10,则X和Y应该缩放5.54,即10/5.54的比例,也就是原来的长度和宽度乘10/5.54得到现在的长宽。这个长宽比原来的大,刚好可以让它在Game视图里面能全屏地显示。这个比第六步更加灵活,更加实用,是3D做2D游戏的解决方案。

四、UGUI

底下有

1.一个Canvas管理所有的子2D的UI节点,等到要缩放的时候,只要缩放Canvas就可以缩放所以2D的UI节点。2D元素适配到3D世界。

 创建的时候会自动创建一个EventSystem节点,用来专门接受管理事件。如果直接创建一个Text,系统也会自动帮我们创建一个父Canvas节点和EventSystem节点。

2.控件(Button,Label)

3.事件响应

五、Canvas节点

有四个组件,这里讲前三个

1.Rect Transform组件:不能改变,一创建就不能修改的组件,而且继承自Transform组件

2.Canvas组件(绘制2D元素的原理):

Render Mode:

  (1)Screen Space (overlay):自适应屏幕空间,覆盖到屏幕上面,像电视机的菜单一样,总是在最上面,可能是使用正交摄像机实现的,因为不开源,所以猜想。

               在Canvas节点下的Image精灵节点直接点击Set Native Size就会让Image节点自适应在屏幕上,在Game视图里面能全屏地显示。    

   Pixel Perfect:勾选的时候,显示的效果更好,subPixel技术。

   Target Dispaly:绘制到哪个屏幕上,可以有多个显示器,选择一个显示器绘制。

  (2)Screen Space (Camera):在没有设置Render Camera属性的时候,和第Screen Space (overlay)一样,会有黄色警告。

    Plane Distance:2D和3D的遮挡关系,可以把3D物体放在2D的Canvas之前,也可以放在2D的Canvas之后,和3D物体的Z轴Position比较大小,但是至始至终Canvas在Game视图里面能全屏地显示。  

        

   (3)World Space:把它当成World空间来做,这时候Rect Transform组件可以改变。我们Canvas下面的的精灵子节点,只需要把它的Z轴的坐标改成0,就可以被换算成对应的能全屏显示在Game视图的坐标。

           等于用手动设置Scale,等于之前3D做2D游戏的手动方法。Canvas Scaler组件在这种模式下没有作用,所以记得要把image的长宽改成9.6和6.4。使得2D和3D节点很好地融合在一起。

                

        

3.Canvas Scaler组件:把3维世界的物体正确地换算到2维世界中,就像上面的缩放X,Y,Z轴10米,则scale的x为10/5.54,y为10/5.54

UI Scale Mode:

    (1)Constant Pixel Size:图片有多大,就把它显示到多大的窗口里面。不会对进行任何的缩放,所以如果是960*640的图片精灵,只能在960*640的分辨率窗口下显示完全,其他的不行。

    (2)Scale With Screen Size:按照屏幕来进行缩放,960*640设计分辨率也可以在800*480屏幕分辨率全屏显示,这个模式比较常用。为了2D元素缩放不走样,宽度和高度都要缩放同样的比例,所以只要一个调节线就可以。

   Match:不同的分辨率转换的时候的X,Y的转换因子大小,比如960*640转800*480,X,Y的比例缩放因子设置,宽度800/960=0.83,高度480/640=0.75,所以那个拉条就是在0.75到0.85之间的数值变化。

         但是我们一般要么固定宽度,要么固定高度,条拉到底。分辨率成倍数的是可以完美转换的,不成的话就会有一些部分长或者宽没显示出来(很少)。

  (3)Constant Physical Size:(1)是按照像素来显示的960*640,这里是按照物理尺寸4:3来显示的

  

注意:Imgae组件是无交互式的组件,里面的Source Sprite属性必须是Spite类型的精灵,Texture类型的不行。Image组件还可以设置颜色,也可以挂材质球(但是不适用于Screen Space (overlay)),设置贴图属性,preserve aspact保持缩放比。

原文地址:https://www.cnblogs.com/HangZhe/p/6850890.html