Unity-UI（UGUI详解）02.1 Canvas组件、Visual组件

Canvas组件代表UI被放置和渲染的虚拟空间。全部的UI元素必须是带有Canvas组件的Gameobject的子物体。当我们创建一个UI元素从菜单的时候，如果场景中没有canvas，将自动创建一个canvas

元素的渲染顺序：
元素的渲染顺序和元素在Hierarchy中显示的一样，第一个子节点先渲染，后面的后渲染。如果两个UI元素重叠，后面渲染的会覆盖前面渲染的。

RenderMode（渲染模式）：
UI渲染到场景的方式
Screen Space-Overlay，Screen Space-Camera 和 World Space

一个Canvas包括全部UIElements将是高效的，但是场景中有多个Canvases也是可能的。在Canvas中嵌套Canvas也是可能的，为了优化的目的嵌套Canvas将使用和父Canvas相同的渲染模式。

Screen Space-Overlay：
在这种模式下，Canvas大小适配之后直接渲染，不通过关联到场景或者摄像机。如果屏幕的大小变化UI将自动匹配大小。UI将覆盖其他图像比如摄像机视图。
Note：
The Screen Space-Overlay canvas需要放置在hierarchy的最上层。这是一种build-in limitation。保证Space-Overlay canvas可以正常显示

Screen Space-Camera：
在这种模式下，Canvas呈现方式好像它是在摄像机前一定距离的平面对象上绘制的一样。UI在屏幕上的大小不随着距离的变化而变化，如果屏幕大小或者分辨率变化UI将自动适应。任何3D objects在场景中相比UI plane到摄像机的距离更近，将渲染到UI的前面。

World Space：
这个模式下作为场景中的一个元素。不同于Screen Space-Camera，plane不需要朝向camera，canvas的大小将由视角和到摄像机的距离来决定，其他场景中的物体可以穿过canvas

此组件用于控制canvas种全部的UI元素的大小。这个设置将影响canvas下的全部物体。

Properties：
UI Scale Mode：
决定UI元素的大小在canvas中是由什么决定的：
Constant Pixel Size（固定大小，不随屏幕大小变化）
Scale With Screen Size （随着屏幕大小的变化而进行变化）
Constant Physical Size（保持物理大小，不随屏幕大小和分辨率变化）

在Constant Pixel Size模式下进行设置：
Scale Factor：设置canvas下全部的UI元素的大小
Reference Pixels Per Unit：像素与单位的对应关系

在Scale With Screen Size下进行设置：
Reference Resolution ： UI 布局的分辨率，这个分辨率将随着屏幕分辨率进行变化
Screen Match Mode：如果当前分辨率的纵横比不适合参考分辨率，则用于缩放画布区域的模式
Match Width or Height Scale the canvas area with the width as reference, the height as reference, or something in between
Expand Expand the canvas area either horizontally or vertically, so the size of the canvas will never be smaller than the reference
Shrink Crop the canvas area either horizontally or vertically, so the size of the canvas will never be larger than the reference
Match：决定缩放的时候宽还是高作为引用

在Constant Physical Size下进行设置：
Physical Unit：设置物理单元的位置和尺寸。
Fallback Screen DPI：
Default Sprite DPI：
Reference Pixels Per Unit：

此组件用来控制一组的UI元素，不需要单独的处理他们，此组件也影响其子物体
Properties：
Alpha：此值从0到1，控制canvas及其下面全部子物体的alpha
interact able：决定组件是否可以被继承
Block Ray casts：此组件对Raycasts来说是否可以被视为collider
Ignore Parent Groups：是否受到父物体的CanvasGroup组件的影响，或者忽略他们

通常使用情况：

Canvas Renderer
此组件呈现包含图形化UI元素的对象

Property：
Text：组件显示的文本
Character：
Font：字体大小
Font Style：字体样式
Font Size：字体大小
Line Spacing：行间距
Rich Text：markup elements在text中是否支持
Paragraph：
Alignment：对齐方式
Align By Geometry：使用字形几何范围执行水平对齐，而不是字形度量
Horizontal Overflow：字体超出范围的解决方式
Vertical Overflow：字体太高超出范围的解决方式
Best Fit：Unity是否直接忽视大小属性，直接根据文本的大小匹配控件
Color：text的颜色
Material：渲染字体的材质

Hints：

Image控件显示的为Sprite类型，Raw Image可以接受任何类型的纹理

Properties ：
Source Image：要现实的贴图
Color：要应用到上的颜色
Material：渲染的材质
Ray cast Target：可以被射线检测
Preserve Aspect：保留原始维度
Set Native Size：设置的维度到原始的像素大小

Raw Image可以显示任何类型的贴图
Property：
Texture：组件要显示的贴图
Color：
Material：
UV Rectangle：的偏移和大小

Details：通过修改UV Rectangle属性，可以缩放

此组件用来控制子控件的显示效果。mask将限制子元素的大小。如果子元素的大小比父元素大，将显示比父元素小的部分。

通常使用流程：
创建一个Panel对象，将需要显示的对象全部放到Panel对象下，给Panel添加一个Mask组件，全部的子物体只能显示在Panel范围内的部分

实现基于GPU的模板缓冲

对于大的区域显示很小的一部分使用RectMask2D。
RectMask2D的限制：

RectMask2D的优势：

1Shadow
给或者文字添加一个阴影效果
Properties：
Effect Color：阴影颜色
Effect Distance：阴影距离
Use Graphic Alpha：混合图像和效果的颜色

2OutLine
给文字或者添加描边效果。
Properties：
Effect Color：
Effect Distance：
Use Graphic Alpha：

3Position as UV1
添加一个简单的位置作为UV1效果给文本和图像

NGUI中没有直接实现这个功能的东西。你只有自己修改一下他的脚本。
可以用Dragobject +Gird来实现
大概的思路 定义一次显示多少条。第一个子控件向下滑动放手时达到什么位置触发刷新机制。这个可以在Dragobject中来监听。
如果要随便向上或者向下都可以刷新的话。就手动在GRID上面挂springposition脚本。里面有滑动事件的回调函数。

      unity3d第一个项目已经算是完成了，从cocos引擎转过来也有一段时间了，下面列出一些在使用中遇到的坑或者unity3d与cocos2d差异比较大的地方。适合其他引擎转U3D或者纯新手小白，万一有路过的大神请 踩了我这朵野花 指出错误，好好学习天天向上。游戏主要是2D界面，搭配live2d伪3D效果。 我也想做纯3D的可是没有钱啊。

一 版本以及部分插件工具
     (1)unity_535p6

     (2)UGUI

     (3)DoTween

     (4)SceneManager

     (5)live2d

     (6) playerMaker;Anti-Cheat (都已弃用)

二经验总结

    (1)分辨率适配

         1使用UGUI Canvas  Render Mode :Screen space-Camera 绑定摄像机，摄像机采用正交 Orthographic Canvas Scaler:UI Scale Mode 采用 Scale With Screen Size ; Reference Resolution 使用640960分辨率, Screen Match  Mode:expand

         2部分背景设为11361136 在iphone5，6上依然会有白边，目前解决方案是背景设为11381138。

         3建议美术CG与背景出图大小为，10241024（不重要的背景可512512通过拉伸显示）。

     (2)资源相关及优化

         1尽量使用尺寸为2的次幂 3232，6464 到 20482048，format 采用 compressed 压缩，个别尺寸不好做处理资源又大，可以采用16bit，采用这一方法美术需少使用渐变色，否则会严重色块化。

        2 也可直接导入PSD（相当于图集），texture Type 使用Sprite(2D and UI); SpriteMode 使用Multiple, 然后使用 Sprite  Editor自动切割,适用某个界面一堆小图。缺点是每次替换PSD需重新切割，改动有可能会使之前自动切割的被重新命名。

        3参数需把Generate Mip Maps 选项勾掉，可减少一定大小，这个选项的功能是在3D游戏中视野远近影响物体模糊。

        4字体可使用ttf，不需要美术单一出atlas， text控件也支持富文本、描边、阴影等。

        5plist不再可用，策划需提供TEXT文本或JSON等。

        6音频文件支持AIFF  WAV  MP3 OGG 。

           视屏文件支持MOV  MPG  MPEG MP4  AVI  ASF。

        7修改stripping level，通过库剖离来减少DLL的空间大小。

   （3)UGUI、脚本、其他控件相关

         1一个场景尽量使用一个canvas，需显示不同层级可使用多个摄像机，不同摄像机culling mask不同layer,通过修改摄像机Depth来控制层级关系。

         2 live2d比较特殊，如果需要将其他控件置于它的上面，除了用单一摄像机照射外，还需改变Live2d的Z轴与它摄像机Clipping Planes的Far参数。

         3需要做屏蔽层，只需创建一个panel 即可，改变它的层级即可屏蔽下方的点击与触摸。

         4如果在一个button上添加image等其他控件，其他控件的范围大小也会影响到按钮的点击区域。

         5支持帧动画，只需全部选中拖入Hierarchy即可生成。

         6U3D粒子系统不支持particle Designer等粒子生成插件，但源生的功能更强，可实现预加热功能。

         7动画建议使用自带的animator控件，也可以使用ITween，DoTween,HotTween等一些插件来实现简单的位移变形等。

         8如果使用tween类插件，建议使用DoTween，更加类似cocos写法，性能优化等比较好，（NGUI自带itween）。

         9注意所有的tween类插件均不支持image sprite单个透明度的变化，只能修改材质透明度，而所有的UGUI image控件共用同一材质，除非每个image单独添加材质。也可通过单独手写脚本来控制透明度变化，需要在update里计算，比较繁琐。

         10脚本中一般使用的update有 Update 与FixedUpdate等，update 跟当前帧数相关，fixedUpdate则是物理时间，所以一些物理逻辑要放入FixedUpdate进行。

         11想在场景切换后还保持某个GameObject存在使用方法 DontDestroyOnLoad(transformgameObject)；

         12把一些模型投影到ui上可以用RenderTexture，也可用这个创建小地图、镜相、动态阴影等效果。注意rendertexture消耗比较大。

         13unity 50后增加了AudioMixer混音器，可以把所有audioSource输出放入同一音轨，通过这个实现全局音乐开关和音效开关。

         14游戏暂停可使用 TimetimeScale = 0。

         15使用u3d自带animator编辑动画，动画结束后可添加回调、动画可倒播。通过状态机可完成比较复杂的动画模块，特定情况下的动画需要与脚本同时控制。

         163D物理碰撞同样使用于2D,GameObjecr上需添加刚体控件。

         17粒子贴图与cocos相似，尺寸大小最好小于6464。

     （4）多语言

         1简体版与繁体版，通过修改text所挂的ttf来实现，文字尽量在unity里输入，减少贴图上文字的数量，这样只需改变ttf即可实现简体繁体的切换。

         2英文版等共存，unity内需要输入的文字全部写在text里，需要写脚本通过key value来读取每个text显示的内容。

         3一些界面上的文字不好通过UNTIY输入来替换的（比如IAP礼包等界面），可创建多个不同的prefab,进入场景时候通过区分

语言环境来调用。

     （5）与IOS Android 交互

          1多语言 通过ApplicationsystemLanguage区分当前设备语言环境。注意：ios9以后Unity通过ApplicationsystemLanguage返回的简体中文和繁体中文都是SystemLanguageChinese，所以需要在ios 上返回当前语言参数给unity。

         2ios上显示插屏等会应为Unity 的rootViewController时长改变而造成奔溃或者不显示，需要在调用第三方SDKd出时候添加

UnityAppController appController = (UnityAppController )[UIApplication sharedApplication]delegate;

         3Andoird 需要在点击购买后d出屏蔽层，否则点击过快或造成传入的参数改变。提供去除屏蔽的回调，java层在购买和失败后调用。

         4iap与兑换码最好写成单例，某些Android渠道要求在一开始调用IAP回调，回复购买只在IOS与google版本中显示，需留好接口在不同渠道中开启或关闭。

         5unity使用ARC，ios某些广告低版本SDK未使用，需要在这些广告类中单独添加参数 -fobjc-arc。

三遗留问题

     1shader等使用不熟练。

     2过场采用sceneManager插件，用GUI实现，如使用UGUI animator如何实现。

     3所有按钮点击放大等效果公用一个animator，再触摸屏幕其他区域有可能会使其他按钮响应放大效果。

     4Android下手机如果有系统提示或来电，在进入游戏内游戏声音丢失，需重启游戏。

     5scorllview背包等因为包含物品数量较少没有使用动态池。

参考
Unity进阶技巧 - RectTransform详解
Unity——RectTransform详解
屏幕适配实用技巧
揭秘！anchoredPosition的几何意义！
localPosition与anchoredPosition转化之瞎猫找死耗子

首先为了让大家更好的理解内容，我在Unity中创建了两个UI控件，一个Plane控件，作为父对象，一个Image控件，最为子对象，如下图：

Pivot我们可以暂且称它为中心轴（这个翻译不太准确，但为了便于理解，先这么叫着），它是一个X,Y值范围是0到1的点，这个点的会在Anchor（锚点）计算位置的时候会使用到，下面用一张图来解释Pivot点的位置

旋转、大小和缩放修改发生在主轴Pivot点周围，因此Pivot的位置会影响旋转、调整大小或缩放的结果。

关于Anchor锚点可能接触过UI的朋友都了解一些，但是Unity中Anchor应该称它为锚框更为合理，因为它是由两个锚点(Min，Max)组成的一个矩形，当然也可以组成一个点（两个点重合）

当然上图是两个锚点重合的情况，所以看上去是一个点，下面我们利用两个锚点不重合的情况来说明一下：

在了解了Pivot和Anchor分别是什么后，我们就来看看Unity是如何使用这个两个东西来控制UI的布局

我们先来看看两个锚点重合时的情况，这种情况是我们最常用也是最容易理解的方式
总结下第1种情况的特点就是：子物体的大小不会随着父物体的大小变化而变化，但是位置会根据Pivot点到Anchor点的距离一致的原则发生对应的变化

当两个锚点（AnchorMin和AnchorMax）不重合时，两点就会确定一个矩形，这个矩形就是我们的锚框，如下图中的绿框就是我们的锚框区域
同理，如上图所示，Unity以锚框的右上角为原点(0,0)，然后红框的Right和Top两个数确定红框的右上角的在坐标系中的位置，原地和红框的右上角的点确定一段距离（即上图的绿色箭头），不管黑框如何边框，这段距离都保持不变

在黑框大小和位置变化的时候，Unity会保证红框的左下角到锚框的左下角距离不变，同时红框的右上角到锚框的右上角距离不变，来确定红框的相对位置和大小，看下图来感受一下变化：

注意上图中红框左下角到黑框左下角的距离，以及红框右上角到黑框右上角的距离，他们都是不变的

快速设置Anchor，加快捷键能同时设置pivot或position

unity中的ui元素是有严格的父子关系的，子物体的位置是根据父物体的变化而变化的，而子物体和父物体联系的桥梁就是Anchor。之所以anchorMax和anchorMin的值是小数，是因为其表征的是该点所在位置占父物体大小的比例。

所谓的绝对布局，就是出现锚点的情况，此时的recttransform面板中的属性变成PosX,PosY,PosZ,Width,Height，这五个属性，首先说说Width和Height，在绝对布局的情况下无论分辨率是多少，父物体多大，该UI元素的大小是恒定的，如下图所示

所谓相对布局，就是出现锚框的情况。在这种情况下UI元素的四个角，距离四个对应的锚点的距离是不变的，在这种情况下RectTransform的属性又变为了Left,Top,Right,Bottom,PosZ，其中的PosZ表征的是该元素到父物体在Z轴上的偏移，利用这个值可以调整UI元素的显示顺序，不过我用的不多，这里不作太多讨论。剩下的四个值应该很好理解了，就是UI元素的每一条边距离父物体的每一条边的距离。

anchoredPosition根据名字的含义，我们大概可以猜出他是根据anchor锚点得出来个一个位置属性，他本身是一个点，如果在AnchorMin和AnchorMax是重合的情况下，anchoredPosition就是表示锚点到Pivot的位置，如下图所示：

但是如果AnchorMin和AnchorMax不重合的时候，anchoredPosition就比较复杂了，在这种情况下，Unity会根据Pivot、AnchorMin和AnchorMax计算出一个锚点，然后在通过Pivot和锚点来得出anchoredPosition的位置

offsetMin和offsetMax这两个属性比较好理解，其中offsetMin表示物体（本文中的红框）左下角相对AnchorMin的偏移，offsetMax表示物体右上角相对AnchorMax的偏移

sizeDelta就是offsetMax - offsetMin的值，即物体左下角到右上角的变量，如下图所示：

    UGUI制作小地图的方法和NGUI也没多大区别，同样是通过Camera+RenderTexture来实现。细节方面的美化可以自行通过美工来完善。为了更好的适应新的UI系统，学习NGUI之余也使用UGUI来制作同样效果的东西。

       首先，我们创建一个Camera对象，改名为MiniMapCamera，设置Rotation让其视野朝下，面向地面，修改Projection为Orthographic。通过Size来调整摄像机高度。

       然后，Create——UI——RawImage，生成Canvas和RawImage，在Canvas下创建一个空物体叫做MiniMap，然后在MiniMap下创建一个Image对象，并给Image对象添加Mask组件（达到圆形效果）,修改Image对象名字为Mask，修改组件Image的SourceImage为Knob（Unity自带圆形Image）将RawImage拖拽到Mask下。

       接下来，在Pojects面板内创建一个RenderTexture，并将其拖拽到MiniMapCamera的TargetTexture中。设置RawImage的对象为该Texture。此时便能有一个初步的小地图了。

      为了美化这个简陋的小地图，我们可以在MiniMap下再添加一个RawImage，选择一个喜欢的图作为遮罩，确保该RawImage排在Mask下，这样便能覆盖Mask作为外遮罩对象。然后修改MiniMapCamera的CulingMask来选择小地图能看见的层。具体细节可以按自己的喜好来调节。

      这样小地图便完成了，给上一个DIY效果图（依旧是官方案例作为素材）。

---