UGUI技术之Canvas-画布使用_Unity3D开发_蓝鸥

UGUI技术之Canvas-画布使用_Unity3D开发_蓝鸥

文/宋小波啊(作者)

Unity 中有一个能够直观并且快速构建用户界面的 UI 系统,我们叫它 uGUI。

uGUI

在 uGUI 中,Canvas 是一个挂载了 Canvas 组件的游戏对象,它划定了一个区域,用来容纳所有的 UI 元素,并且这些 UI 元素必须是 Canvas 的子对象。

当我们创建一个新的 UI 元素时,如果场景中还没有 Canvas,就会自动创建出一个 Canvas。

Canvas 会在 Scene 视图中显示出一个矩形区域,这就可以使我们在不运行项目的情况下,直接在 Scene 视图中可视化地定位 UI 元素。

元素的绘制顺序

Canvas 中 UI 元素的绘制顺序,和它们在层级视图中出现的顺序相同。Canvas 下第一个子对象会最先被绘制,接着是第二个子对象,以此类推。如果两个 UI 元素重叠了,那么后绘制的元素会覆盖掉先绘制的元素。

要想改变某个 UI 元素的绘制顺序,只需要通过拖动重新在层级视图中排列元素就可以了。绘制顺序也能够通过脚本来控制,需要用到 Transform 组件的三个方法:SetAsFirstSibling、SetAsLastSibling 和 SetSiblingIndex。

Render Mode - 渲染模式

Canvas 中的 Render Mode 设置,用来决定它以屏幕空间进行渲染还是以世界空间进行渲染,有三种设置方式。

1、Screen Space - Overlay

这种渲染模式将屏幕上的 UI 元素渲染在场景的最顶层。如果屏幕的大小或者分辨率发生了变化,Canvas 也会自动改变大小,和屏幕的保持一致。

Screen Space - Overlay

2、Screen Space - Camera

这个渲染模式和 Screen Space - Overlay 相似,在这种模式下,Canvas 会处于指定摄像机的前方,距离可以调整。UI 元素通过这个摄像机来渲染,摄像机的设置会影响 UI 的外观。如果摄像机设置为了透视,UI 元素也会以透视呈现,并且透视的形变量可以通过摄像机的 Field of View 来控制。如果屏幕的大小或者分辨率发生了变化,或者摄像机的视锥发生了变化,Canvas 同时也会改变大小,和屏幕保持一致。

Screen Space - Camera

3、World Space

在这种渲染模式下,Canvas 就和场景中的其他游戏对象一样。Canvas 的大小能够手动地通过 RectTransform 来设置,并且 UI 元素会根据在 3D 场景中的放置位置,来决定渲染在场景中其他对象的前面还是后面。当我们想让 UI 成为世界场景的一部分时非常有用。这也被称作“叙事化界面(Diegetic Interface)”。

时间: 2024-10-13 12:24:51

UGUI技术之Canvas-画布使用_Unity3D开发_蓝鸥的相关文章

UGUI技术之基本布局使用_Unity3D开发_蓝鸥

[uGUI]基本布局 文/宋小波啊(作者) 本节我们来学习如何相对 Canvas 和其他元素来布局我们的 UI.我们可以先创建一个 Image 用来测试,在 GameObject 菜单中选择 UI -> Image 来创建. Rect 工具 每个 UI 元素都会用一个矩形表示,这样方便布局.在工具栏中选择 Rect 工具之后,我们就能在 Scene 视图中操作这个矩形.Rect 工具既能用于 Unity 中的 2D 物体和 UI 系统,对 3D 物体也同样能够使用. 选择工具栏中的 Rect 工

Unity 2D 终结手册 (1) (2) - 2D 项目+精灵_Unity3d开发

Unity 2D 终结手册 (1) - 2D 项目+精灵_Unity3d开发_蓝鸥 这篇系列文章主要介绍 Unity 2D 开发技术.包括 2D/3D 项目的区别.如何设置 2D/3D 模式.2D 开发中使用到的组件等. Unity 不止能够制作酷炫的 3D 游戏,同样也能够制作完美的 2D 游戏.使用 Unity 开发 2D 内容时,编辑器的大部分功能都是通用的,只不过有些功能为了简化 2D 开发,做了一些调整. (图 1)Unity 2D 游戏 在 Scene 视图上方的工具条中,有一个明显

Unity 2D 终结手册 (3) - 精灵编辑_Unity3d开发

Unity 2D 终结手册 (3) - 精灵编辑_Unity3d开发_蓝鸥 有时,一个精灵纹理(Texture)只包含一个精灵元素(Element),但是更常见的是,在一张图像中包含多个相关的精灵元素,这样使用起来会更方便.例如,在一张图像中可以包含一个角色身上的所有部位,或者包含一辆车的车轮.车身等.对于这样的图像资源,Unity 提供了一个方便的工具,能够快速地提取出里面的元素并让我们进行编辑,这就是精灵编辑器(Sprite Editor). 通过以下两个步骤打开精灵编辑器(Sprite E

【Unity3d游戏开发】浅谈UGUI中的Canvas以及三种画布渲染模式

阅读目录 一.Canvas简介 二.Canvas画布参数与应用 回到顶部 一.Canvas简介 Canvas画布是承载所有UI元素的区域.Canvas实际上是一个游戏对象上绑定了Canvas组件.所有的UI元素都必须是Canvas的自对象.如果场景中没有画布,那么我们创建任何一个UI元素,都会自动创建画布,并且将新元素置于其下. 回到顶部 二.Canvas画布参数与应用 1.创建画布 当你创建任何一个UI元素的时候,都会自动创建画布.也可以主动创建一张画布:点击GameObject->UI->

【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础(Canvas 画布)

1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十六进制形式表示(ARGB) drawText(String text,float x,float y,Paint paint) 作用:绘制文本字符 第一个参数:文本内容 第二.三个参数:文本的X.Y坐标 第四个参数:画笔实例 drawPoint(float x,float y,Paint paint

第六章 一张白纸好作画—Canvas画布(1)

第六章 一张白纸好作画-Canvas画布 前面的相关章节,我们详细说明过Android UI组件的使用.通过前面章节的学习,开发者已经可以开发出令人满意的UI效果了.但是有的时候,我们需要实现更加漂亮的UI效果,此时可能就无法直接使用UI组件,而是需要自己画出各种UI效果了. 在Android中,Canvas就是一个画布,开发者可以在画布上绘制想要的任何东西.在本章中,我们将介绍Canvas及相关的技术. 6.1 Canvas画布介绍 6.1.1View Canvas-使用普通View的Canv

CANVAS画布与SVG的区别

CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属性)描述二维图形的语言.在H5中看似canvas与svg很像,但是,他们有巨大的差别. CANVAS Canvas 是通过 JavaScript 来绘制 2D 图形. Canvas 是逐像素进行渲染的. 在Canvas中,一旦图形被绘制完成,他就不会继续得到浏览器的关注,如果他的位置发生变化,那么就需要重新来

02 Canvas画布

学习笔记适合新手,如有错误请指正.?号处也请各位指点下,谢谢. Canvas画布是承载所有UI元素的区域 所有的UI元素都必须是Canvas的子对象 创建画布: 点击导航菜单>“GameObject”>”UI“>“Canvas”导航栏 Render Mode:渲染模式(Screen Space—Overlay.Screen Space—Camera.World Space) Pixel Perfect:只有RenderMode为Screen类型才有的选项,使UI元素像素对应,效果是边缘清

selenium webdriver 实现Canvas画布自动化测试

https://blog.csdn.net/xiaoguanyusb/article/details/80324210 由借鉴意义, 转过来 canvas 是一个画布,定位元素时只能定位到画布上,如下乳所示,网页上有一张类似于下图的eChart报表图片.selenium的基本定位方式只能定位到该画布上,画布上的子元素通过selenium的基础定位方式是定位不到的, 此时就需要使用selenium的js注入的方式,通过插入js脚本的方式获取索要操作的元素坐标. 再使用action对应的方法去执行对