游戏引擎比对：Unity&Cocos Creator UI篇

APSchmidt

概述（Overview）

本文将会表述Unity和Cocos Creator两种游戏引擎在常用UI上的细节差异。
Unity UI链接：
Cocos Creator UI链接：
通用（General）

Unity和Cocos中都具有矩形变换工具。但是关于对齐和锚点有较大的不同。
Unity

Unity在拖动UI时有自动吸附功能，此外伸缩到负值的时候会自动标红叉并且不予显示
Unity默认只有UI组件才可以配置锚点，Unity的锚点预设功能比较方便，不过只有作为具有Rect Transform节点的子节点的情况下才能够起效
Unity可以添加Rect Transform组件以配置任意节点的锚点，中心点
Cocos Creator

Cocos没有自动吸附
Cocos Creator中一旦添加Widget组件就可以配置对齐，此外所有的节点都可以配置锚点（在cocos里面叫做Anchor），这个和unity有些不同，并不代表对父节点的对齐关系，而是表示了中心点的位置。Cocos没有锚点预设功能。
渲染模式两者接近：

• Simple - 均匀缩放整个精灵。
  
• Sliced - 使用 3x3 精灵分区，确保大小调整不会扭曲角点，而是仅拉伸中心部分。
  
• Tiled - 类似于 Sliced，但平铺（重复）中心部分而不是对其进行拉伸。对于完全没有边框的精灵，整个精灵都是平铺的。
  
• Filled - 按照与 Simple 相同的方式显示精灵，但不同之处是使用定义的方向、方法和数量从原点开始填充精灵。
  

Cocos Creator中还有一种渲染模式 - 网格模式（Mesh）：必须使用 TexturePacker 4.x 以上版本并且设置 ploygon 算法打包出的 plist 文件才能够使用该模式。
<hr/>文本（Text/Label）

Unity

• Unity中称为Text
  
• Overflow的配置多样
  
• 可以直接支持富文本
  

Cocos Creator

• Cocos Creator中称为Label，此外还有RichText组件
  
• 使用LabelOutline和LabelShadow可以快速实现描边和阴影
  
• 富文本和文本是分离的。
  

请注意：

字体内部全部名称和字体名称需要一致，而且必须都是英文，否则字体无效（Windows平台）

图片&精灵（Image&Sprite）

Unity中有Image，此外二维物体中具有精灵（Sprite）
Cocos Creator没有Image的概念，图片资源完全以精灵（Sprite）呈现

有关Image和Sprite的区别：
渲染上

• Image 通过UGUI的Image和CanvasRenderer组件组件来渲染
  
• Sprite 通过SpriteRenderer组件来渲染
  
• 两者在视觉上没有任何区别（都使用默认材质时）。它们默认的渲染也都是在Transparent Geometry队列中。
  

使用上

• Image需要位于某个Canvas下才能显示出来。
  
• Sprite可以像普通的3D游戏物体一样对待，通过Transform组件进行移动等操作
  
• Image则使用RectTransform进行布局，以便通过Canvas统一管理。由于RectTransform可以设置大小、对齐方式等，Image可以说更加方便一点，这也是很多人选择使用Image的原因。
  

按钮（Button）

Unity和Cocos的按钮类似
On Click事件中，Unity可以配置的内容更多，可以选择节点（Game object）的属性，或者其他内置组件的属性，且随着属性类型的变化，传输数据框也会随之改变。Unity也支持调用自定义的public函数。
Cocos Creator中只支持对组件的函数进行调用，不支持直接对组件的某些变量进行修改（例如我们不能直接修改Label的text字符串值，Unity中可以），不支持修改节点属性。
画布（Canvas）

Unity

unity的画布是用来装UI元素的容器，所有的UI元素都必须挂在Canvas节点下，否则无显示效果。可以同时有多个Canvas。
画布的渲染模式有三种：

• Screen Space - Overlay直接渲染到屏幕上，没有相机也可以直接看到效果，一定渲染到最顶层。
  
• Screen Space - Camera可以指定渲染的相机，根据相机的远景会有动态缩放，物体距离相机比Canvas远的物体将会被遮挡。
  
• World Space 会像3D物体一样位于游戏场景中，可以设置其位置和大小，与其他3D物体具有同样的显示效果。
  

Cocos Creator

Canvas（画布） 组件能够随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。场景中的 Canvas 同时只能有一个，建议所有 UI 和可渲染元素都设置为 Canvas 的子节点。
实际上Cocos Creator创建任意场景中初始自带这个节点，推荐所有的内容都挂在这个节点下。
Cocos Creator的Canvas组件具有下面的几个属性：

• Design Resolution 设计分辨率（内容生产者在制作场景时使用的分辨率蓝本）
  
• Fit Height 适配高度（设计分辨率的高度自动撑满屏幕高度）
  
• Fit Width 适配宽度（设计分辨率的宽度自动撑满屏幕宽度）
  

画布组（CanvasGroup）

Unity可以采用CanvasGroup来批量控制UI的状态。Canvas Group具有Alpha, Interactable, Blocks Raycasts, Ignore Parent Groups等属性，对于UI节点的控制将是批量完成的。
Cocos没有CanvasGroup，一般的用法是直接改变父节点的透明度来完成。可交互性需要通过BlockInputEvents组件，BlockInputEvents 组件将拦截所属节点 bounding box 内的所有输入事件（鼠标和触摸），防止输入穿透到下层节点，一般用于上层 UI 的背景。
<hr/>矩形变换（RectTransform）

Unity特有的组件
Anchors

Anchors是在子类锚在父类上的点，因此如果没有父类（RectTransform），那么RectTransform属性面板上的Anchor Presets将不可设置，但Anchors仍可设置。
所谓，锚在父类上，意思就是子类的Pivot（中心点）到（父类上）Anchors（锚点）的相对位置不变，而这个位置就是RectTransform面板上显示的——PosX，PosY，PosZ——对应了anchoredPosition3D（PosX，PosY，PosZ），或anchoredPosition（PosX，PosY）
那么，Anchors的Min代表了在父类左下角的位置，Max代表了在父类右上角的位置，[0, 1]——的范围代表了在父类X轴和Y轴方向的百分比。
Pivot

Pivot代表了RectTransform的中心点，即：相对于RectTransform的坐标（如Anchor或Rotation）都会以它为基准点，（0，0）代表自身区域的左下，（1，1）代表自身区域的右上，如果超过了[0, 1]范围，就说明超过了自身区域之外。
与Anchors不同的是，Anchors的[0, 1]范围是——父类区域，而Pivot的[0, 1]范围是——自身区域。
坐标转换

屏幕坐标的起点位置 左下角为(0，0)点，右上角为(Screen.width，Screen.height)
跟随鼠标坐标（Unity）

/// 获取鼠标点击坐标
Vector3 screenPosition;//将物体从世界坐标转换为屏幕坐标
Vector3 mousePositionOnScreen;//获取到点击屏幕的屏幕坐标
Vector3 mousePositionInWorld;//将点击屏幕的屏幕坐标转换为世界坐标
public Vector3 MouseFollow()
{
    //获取物体在相机中（世界中）的位置，转换为屏幕坐标；
    screenPosition = Camera.main.WorldToScreenPoint(transform.position);
    //获取鼠标在场景中坐标
    mousePositionOnScreen = Input.mousePosition;
    //让鼠标坐标的Z=场景中物体的Z坐标
    //如果不做这一步将会是无效的，因为默认鼠标输入没有Z坐标，所以在3D模式下会导致物体不跟随
    mousePositionOnScreen.z = screenPosition.z;
    //将相机中的鼠标坐标转化为世界坐标
    mousePositionInWorld = Camera.main.ScreenToWorldPoint(mousePositionOnScreen);
    //物体跟随鼠标移动
    //transform.position = mousePositionInWorld;
    //返回此坐标
    return new Vector3(mousePositionInWorld.x, mousePositionInWorld.y, mousePositionInWorld.z);
}
获得相对坐标（Cocos Creator）

世界坐标系（World Coordinate）和本地坐标系（Local Coordinate）
世界坐标系也叫做绝对坐标系，在 Cocos Creator 游戏开发中表示场景空间内的统一坐标体系，「世界」就用来表示我们的游戏场景。
本地坐标系也叫相对坐标系，是和节点相关联的坐标系。每个节点都有独立的坐标系，当节点移动或改变方向时，和该节点关联的坐标系将随之移动或改变方向。
Cocos Creator 中的 节点（Node） 之间可以有父子关系的层级结构，我们修改节点的 位置（Position） 属性设定的节点位置是该节点相对于父节点的 本地坐标系 而非世界坐标系。最后在绘制整个场景时 Cocos Creator 会把这些节点的本地坐标映射成世界坐标系坐标。
如果要获得相对于另一个节点的坐标，一般需要先转换为世界坐标，此后再转换为节点（模型）坐标
convertToNodeSpace(worldPoint);//将世界坐标转换为模型坐标。
convertToNodeSpaceAR(worldPoint);//将世界坐标转换为模型坐标。AR表示相对于锚点。

convertTouchToNodeSpace(touch);//将世界坐标中触摸点转换为模型坐标。
convertTouchToNodeSpaceAR(touch);//将世界坐标中触摸点转换为模型坐标。AR表示相对于锚点。

convertToWorldSpace(nodePoint);//将模型坐标转换为世界坐标。
convertToWorldSpaceAR(nodePoint);//将模型坐标转换为世界坐标。AR表示相对于锚点。
<hr/>参考文章

如果有不正确的地方欢迎大家指正！谢谢！
以下为参考文章：

redhat9i

膜拜

NoiseFloor

c14 yyds

JamesB

好耶