翻译了一下Unity新的UI的画布渲染模式,记录一下,希望有人能用得上。

正在做一个U3d的小游戏,无奈中文资源太少,必须硬着头皮读英文,但是,只读一遍很难彻底理解意思,所以干脆翻译了一下,和大家分享。

大家用U3d做UI的时候,经典的GUITexture已经被淘汰了,至少官方不支持了,所以赶紧来学学新的知识吧!

新的UI系统,所有UI元素被集中地绘制在canvas上,而canvas的三种模式能够帮助你更好的工作。第一第二中是继承以前的渲染模式的,就是在屏幕上画出ui来

是基于屏幕的,但是在创作的时候也有位置,这可能会让你产生疑惑。第三种是将UI看做游戏的一部分;

-----------------------------------------------------------------


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.

画布是所有UI对象应该待的地方;画布是一个有一个画布组件的游戏物体(game-Object),并且,所有的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元素,比如说图片(image),这样操作:GameObject》UI》Image,会直接地创造一个画布对象(因为你之前没有Canvas对象),如果在屏幕中已经有了一个画布对象,那么UI元素会被自动创建成这个Canvas对象的子对象;

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.

画布区域被显示成屏幕视图中的一个方框,这使得布置元素变得容易而且不需要保持游戏视图在所有时间可见(这个画布会永远出现在屏幕上,而跟画布做寄生的Game-Object物体的position位置无关,译者按)。

Draw order of elements

元素的绘制顺序

UI elements in the Canvas are drawn in the same order they appear in the Hierarchy.

画布上的UI元素会在他们出现的层级上以相同的顺序被画出来

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元素重叠了,后者会出现在前者的上面。

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.

画布有一个渲染模式设置,可以被用来使它在屏幕空间上或者在世界空间上被渲染(出现在屏幕前面还是游戏世界之中);

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 specified Camera.

这和“屏幕空间-覆盖”模式很像,但是在这种渲染模式下,画布会被布置在一个特殊相机前面给定距离的位置

The UI elements are rendered by this camera, which means that the Camera settings affect the appearance of the UI.

UI元素被这台相机渲染,也就意味着这个相机的设置会影响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.

如果相机被设置成透视模式(相机组件的Projection投影属性有Perspective透视,近大远小,模式和orthographic正交投影模式,译者按),UI元素会被透视渲染,透视的形变量会被camerafield 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.

如果屏幕尺寸被重置或者改变了分辨率,或者相机的函数改变了,画布会自动改变尺寸去适应它。

(其实就是给铺在屏幕上的模式加了一个摄像头,让他能做出3D效果,译者按)


UI in screen space camera canvas

在 屏幕空间-相机模式下的画布中的ui元素;

 

World Space

世界空间(屏幕空间的意思是在游戏调试视图中给一个白框,你再白框中绘制,这个白框将会显现在将来的游戏中,本质上还是二维视图,是对原有的GUI的改善,而这个渲染模式将UI带到三维世界中,译者按)

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.

画布的尺寸可以使用它的Rect Transform组件手动设置,并且,UI元素会被渲染在其他的3D物体的前面或者后面,这决定于画布的三维位置;

This is useful for UIs that are meant to be a part of the world. This is also known as a “diegetic interface”.

这对于用户界面来说很有用,也就是说这是游戏世界的一部份了,所以也以“剧情界面而著称”


UI in world space canvas

在世界空间模式下的画布 上的ui



要实现在Unity中将整个UI画布渲染到书籍的纸质页面上并实现手遮盖效果,你可以按照以下步骤进行操作: 1. 创建一个的2D场景,并在场景中创建一个UI画布(Canvas)。在画布中添加一个Panel,并将其大小设置为与书籍页面相同的大小。 2. 在Panel中添加一个Raw Image组件,该组件将作为书籍页面的背景。将该组件的Texture属性设置为书籍页面的纹理。 3. 将UI元素添加到Panel中,并设置它们的位置和大小以适应书籍页面。 4. 创建一个的Render Texture,该纹理将用于渲染UI画布。 5. 在Project视图中选择Render Texture,并在Inspector视图中将其大小设置为书籍页面的大小。 6. 将Render Texture拖动到Canvas组件的Render Mode属性下的Render Camera选项中。 7. 在场景中创建一个空GameObject,并将Camera组件添加到该对象上。 8. 在Camera组件的Clear Flags属性中选择Solid Color,并将Background颜色设置为白色。 9. 将Camera的Projection属性设置为Orthographic,并将Size设置为书籍页面的高度的一半。将Camera的Position设置为书籍页面中心的位置。 10. 将Camera的Target Texture属性设置为Render Texture。 11. 在场景中创建一个的GameObject,将其命名为“Hand”,并将其位置设置为书籍页面的顶部。 12. 创建一个的材质(Material),并将其Shader属性设置为“Transparent/Diffuse”。 13. 将Render Texture拖动到材质的Texture属性中。 14. 将Hand对象的Renderer组件的Material属性设置为创建的材质。 15. 在场景中创建一个的Empty GameObject,并将其命名为“HandController”。 16. 将该对象上添加一个Box Collider组件,并将其大小设置为书籍页面的大小。 17. 添加一个的Script脚本,并将其附加到HandController对象上。 18. 在Script脚本中实现手遮盖效果,例如使用Input.GetMousePosition()来获取鼠标位置,并将Hand对象的Position属性设置为该位置。 19. 运行场景,手遮盖效果就会出现在书籍页面上。 希望这些步骤可以帮助你实现在Unity中将整个UI画布渲染到书籍的纸质页面上并实现手遮盖效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值