Canvas 画布组件(官网翻译)

Canvas
画布

 

The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object with a Canvas component on it, and all UI elements must be children of such a Canvas.
Canvas是一个应该包含所有UI元素的区域。画布是一个带有画布组件的游戏物体,并且所有的UI元素都应该是这个画布的子物体。

Creating a new UI element, such as an Image using the menu GameObject > UI > Image, automatically creates a Canvas, if there isn’t already a Canvas in the scene. The UI element is created as a child to this Canvas.
创建一个UI元素,比如一个图片,使用路径GameObject > UI > Image如果当前场景没有画布的时候就会自动创建一个画布。UI元素作为这个画布的子物体被创建。

The Canvas area is shown as a rectangle in the Scene View. This makes it easy to position UI elements without needing to have the Game View visible at all times.
画布区域在场景视图中显示为一个矩形。这使得不用一直开启游戏视图就可以简单的放置UI元素。

Canvas uses the EventSystem object to help the Messaging System.
Canvas使用事件系统物体来实现信息系统。

Draw order of elements
元素的渲染顺序

UI elements in the Canvas are drawn in the same order they appear in the Hierarchy. The first child is drawn first, the second child next, and so on. If two UI elements overlap, the later one will appear on top of the earlier one.
UI元素在画布的渲染顺序和他们显示在层级视图的顺序一致。第一个子物体第一个渲染,第二个子物体下一个渲染,以此类推。如果两个UI元素有交叠,后渲染的那个将会显示在先渲染的那个的上面。

To change which element appear on top of other elements, simply reorder the elements in the Hierarchy by dragging them. The order can also be controlled from scripting by using these methods on the Transform component: SetAsFirstSibling, SetAsLastSibling, and SetSiblingIndex.
改变哪个元素显示在其他元素的上方,简单的拖拽改变元素在层级视图中的顺序。这个顺序也可以通过使用这些Transform组件在脚本中控制:SetAsFirstSibling, SetAsLastSibling, 和SetSiblingIndex。

Render Modes
渲染模式

The Canvas has a Render Mode setting which can be used to make it render in screen space or world space.
画布有一个Render Mode设置,这个设置可以用来使它渲染在屏幕空间或世界空间。

Screen Space - Overlay
屏幕空间——覆盖

This render mode places UI elements on the screen rendered on top of the scene. If the screen is resized or changes resolution, the Canvas will automatically change size to match this.
这个渲染模式把UI元素放置屏幕上在场景的最上方。如果屏幕改变大小或者改变方案,这个画布将会自动改变尺寸匹配它。

 

UI in screen space overlay canvas
屏幕空间覆盖画布的UI

Screen Space - Camera
屏幕空间——相机

This is similar to Screen Space - Overlay, but in this render mode, the Canvas is placed a given distance in front of a specifiedCamera. The UI elements are rendered by this camera, which means that the Camera settings affect the appearance of the UI. If the Camera is set to Perspective, the UI elements will be rendered with perspective, and the amount of perspective distortion can be controlled by the Camera Field of View. If the screen is resized or changes resolution, or the camera frustrum changes, the Canvas will automatically change size to match as well.
这和Screen Space - Overlay很像,但是在这个模式下,画布被放置在离特定的相机给定的距离。UI元素通过这个相机渲染,也就意味着相机设置影响UI的表现。如果相机被设置为Perspective,UI元素将被渲染为透视,并且透视失真的量可以由相机的Field of View控制。如果屏幕改变大小或者改变方案,或者相机frustrum改变,这个画布将会自动改变尺寸匹配它。

UI in screen space camera canvas
屏幕空间相机画布的UI

 

World Space
世界空间

In this render mode, the Canvas will behave as any other object in the scene. The size of the Canvas can be set manually using its Rect Transform, and UI elements will render in front of or behind other objects in the scene based on 3D placement. This is useful for UIs that are meant to be a part of the world. This is also known as a “diegetic interface”.
在这种渲染模式下,画布将会像场景中的其它物体一样。画布的大小可以用它的Rect Transform手动设置,并且UI元素渲染在其他物体的前面或者后面将基于3D放置位置决定。这对UI来说意味着是世界的一部分。这经常被用来做一个“叙述界面”。

UI in world space canvas
世界空间画布的UI

posted on 2017-02-11 09:04  Lumious  阅读(480)  评论(0编辑  收藏  举报

导航