关于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保持缩放比。