官方教程—Unity UI 系统基础详解

默认教学计划
10363人加入学习
(16人评价)
价格 免费
教学计划

每个canvas都有一些可选的render modes 渲染模式:

 

1、screen space - overlay:UI会覆盖整个场景,所有UI元素会在场景最上层渲染输出,会自动填充整个场景,并自适应大小,Rect Transform受影响自动使用。

Pixel Perfect:UI元素渲染输出时会自动吸附到最近的像素点,增强UI显示效果(大雾)

 

 

2、screen spance - camera:与上面类似,不过由场景中制定的摄像机渲染输出,会使camera相关的设定作用于UI元素上,此模式下canvas会自动填充相机输出视图,并根据相机输出视图的变化而变化,Rect Transform受影响自动使用。

render camera:用于渲染这个canvas上UI元素的摄像机,为空(None)时,canvas就会选择screen spance - overlay的设置来渲染这个canvas,当设置好目标摄像机后,UI会被移至相机的视锥体中并改变自身大小适应填充,使得UI能够根据场景视图中游戏对象进行渲染

Plane Distance:向远或靠近摄像机时,canvas和UI会根据与摄像机的距离自动改变大小,适应视锥体,注意数值要在摄像机渲染范围内

 

 

3、world space:在世界坐标系下渲染UI,UI元素可以使场景中静态的对象也可以是动态的对象(对话框、标签等在场景中跟随游戏对象运动)。该模式下canvas不在影响Rect Transform。

event camera:接收事件必须具有的,确定哪个摄像机来检查例如UI上点击等事件(默认使用当前场景的摄像机)。

receives events:设置这个canvas中的元素是否接收事件比如点击或悬停,禁用时该canvas所有子UI元素都将忽略事件检测

sorting layer、order in layer:控制场景中canvas之间的渲染顺序

 

 

 

canvas中的UI元素会根据hierarchy视图的层级顺序自顶向下的方式进行渲染,当同级UI元素渲染时,后渲染的UI会在前面的之上,最后渲染的UI在顶层,改变UI顺序(渲染顺序)只需要在hierarchy面图中改变UI顺序即可

 

 

 

 

 

[展开全文]

UGUI 的canvers 事件 好强大

[展开全文]

1.Canvas组件

Canvas[画布]是一个控制一组被渲染的UI元素的组件。所有的UI元素必须是Canvas的子物体。同一个场景中可以存在多个Canvas组件,但是使用UI元素必须至少要有一个可用的Canvas组件。

如果创建UI元素的时候没有Canvas组件,则新的Canvas组件就好被创建,该UI元素则会附加为Canvas的子物体。

2.Canvas的渲染模式

每个Canvas都有一些可选的Render Modes(渲染模式)。

渲染模式可以通过Render Mode下拉菜单设置中选择。

2.1 Screen Space-Overlay渲染模式

Screen Space-Overlay渲染模式是一种常见的渲染模式,也是Canvas默认的渲染模式。这种模式下,UI会覆盖整个场景,所有的UI元素会在场景的最上层渲染输出,并且会自动填充整个场景,随着场景视图大小变化而变化。

值得注意的是,在这种模式下,Canvas会影响Rect Transform组件,整个Rect Transform组件将不可编辑。Canvas会通过修改Rect Transform的数值来自动填充整个屏幕。

这个模式下,有个Pixed Perfect选项被选中后,UI元素渲染输出时,会自动吸附到最近的像素点。在某种情况下,会增强UI的展示效果。

2.2 Screen Space-Camera

Screen Space-Camera渲染模式和Screen Space-Overlay模式类似,只不过它是由场景中指定的摄像机渲染输出。这会使Camera相关的设定将会作用到UI元素上。最常使用的场景是使用透视摄像机对UI进行渲染输出得到景深的效果。

在这个模式下Canvas会自动填充相机输出视图,并且根据摄像机输出视图变化而变化。同样,Canvas组件也会影响到Rect Transform。

这种模式下,有几个选项,包括PixedPerfect作用跟Screen Space-Overlay模式下一样。Render Camera用来设置用于渲染这个Canvas上UI元素的摄像机,如果设置为None,Canvas就会选择Screen Space-Overlay的设置来渲染这个Canvas。当Screen Space-Camera选中并且赋予摄像机对象时,UI将会被移至相机的视锥体中,并改变自身大小适应填充。这时Canvas和UI会根据与相机的距离来自动改变大小,适应视锥体。值得注意的是 Plane Distance的数值应在相机渲染范围内。当使用Screen Space-Camera时,Canvas可以被场景中任意摄像机渲染,为了使Canvas及其内容与场景中其他Canvas区分隔离开,可以通过设置相机的Clear Flag, Culling Mask,Depth属性。

2.3 World Space渲染模式

World Space模式在世界坐标系下渲染UI,UI元素可以是场景中静态的对象,也可以是动态的对,例如对话框、标签等在场景中跟随游戏对象运动。

首先要了解的是,World Space模式下,Canvas不再影响Rect Transform。Canvas可以位于世界坐标系下任意位置。明白同一场景下,可以有多个Canvas,给世界空间坐标系的UI元素创建Canvas的做法就十分常见了。

Event Camera是接收事件必须具备的,确定是由哪个摄像机来检测例如UI上的点击等事件。大多数情况下,当World Space选中时,Event Camera会是当前渲染场景的摄像机。Receives Events选项设置这个Canvas中的UI元素是否接收事件(例如点击或悬停)。禁用这个选项,则该Canvas下的所有子UI元素都将忽略事件检测。

Sorting Layer和Order Inlayer用于控制场景中Canvas之间的渲染的顺序。Sorting Layer和Order Inlayer在Canvas中可以进行设置包含World Space, Screen Space.

Canvas中的UI元素会以自顶向下的方式进行渲染,第一个对象在渲染的底层,接下来的元素会接着渲染在顶层。改变UI元素渲染顺序,只须简单的改变UI元素在Hierarchy面板上的顺序即可。

[展开全文]

uibutton 的点击事件。以及点击动画

[展开全文]

这个课程英文的有点困难,中文的好点fafewfisdffewfewfewfwe

[展开全文]

UI必须要依附于Canvas

canvas会自动填充屏幕

[展开全文]

Anchors(四个小三角形):

聚合,则对象不缩放;

分开,则对象随父对象进行缩放(锚点对应对象,则随父对象等比例缩放;锚点对应父对象,则对象边界与父对象边界的距离不变;一对成组的锚点处于父对象边界,对象只会横向拉伸)。

[展开全文]

1、Rect Transform的概念
    。表示2DUI的长、宽和中心轴点
    。也包括Z轴、旋转和缩放
    。最大区别在于锚点的概念()

[展开全文]

 1、Canvas
    。每个UI组件都必须在Canvas下
    。一个场景允许多个Canvas
    。Canvas的渲染模式
        - 默认为屏幕叠加方式
        - 也可为摄像机输出(透视效果)
        - 以及世界坐标模式的渲染(需要指定接收事件的摄像机)

    。Canvas的渲染顺序可设置
    。Canvas中元素按照自顶向下的顺序渲染

[展开全文]
重点讲到 了 anchor 的使用
[展开全文]
canvas三种模式:Screen Space-overlay、Screen Space-Camera、world space
[展开全文]
yqj · 2015-01-28 · Canvas[画布] 0

canvas画布——是一种组件

控制(一组)被渲染UI元素


所有(UI)元素必须是Canvas的子物体

在组织结构上Canvas是最上层的文件名


同一个场景运行存在多个Canvas

使用UI元素必须有一个可用的canvas组件

如果创建UI元素时场景中没有canvas组件,系统将会自动创建并将组件归为其子物体

每个canvas都有可选的render modest(渲染模式),在渲染的下拉菜单中设置

screen space- overlay(默认常见)

此模式下ui会覆盖整个场景,素有的UI元素会在场景最上层渲染输出,覆盖整个常见的 方式是自适应填充——会随着场景视图大小变化而变化,类似网页


并且此模式中 整个Rect Transform组件 不可编辑

因为canvas会修改 Rect Transform的数值来自动填充整个屏幕

整个渲染模式下有个Pixel  Perfect选项

当此选项开启时,UI元素渲染输出时,会自动吸附到最近的像素点,在一些时候会增强显示效果

screen space-camera

与上一个模式十分相似,差别是它是由场景中指定的摄像机渲染输出,这会使Canmera相关的设定作用于UI元素上

world space

[展开全文]

Canvas

Screen Space - Overlay

  • 不能在UI前加特效

Screen Space - Camera

World Space

  • 制作血条


[展开全文]

授课教师

课程特色

视频(11)
下载资料(1)

学员动态

yexingai 开始学习 Canvas[画布]
yexingai 加入学习
swtloxz 开始学习 Canvas[画布]
swtloxz 加入学习
文之初 开始学习 Canvas[画布]