Unity3d UI设计简述

xiaoxiao2021-02-28  78

在我们的实训项目中,本人主要负责UI的设计以及unity中UI界面的代码编写部分。

由于之前没有对Unity进行过深入的了解,于是在实训开始的初期,我首先对于unity中的UI界面部分的功能进行了了解。

Canvas

在进行Unity的界面编写时,Canvas是一个很基本的工具,是用于存放所有UI元素的地方。所有的UI元素都必须是Canvas的自对象。 Canvas是一个画布,就像我们绘图用的图纸一样,所有的控件都必须在Canvas中才能被绘制出来,在其他地方则不能被绘制出来。如果场景中没有画布,那么我们创建任何一个UI元素,都会自动创建画布,并且将新元素置于其下。 在Canvas上进行绘制时,首先我们要知道,画布上的图形绘制顺序。 1、对于处于同一个层次的组件来说,先创建的组件先绘制,后创建的组件后绘制。 2、当控件处于父子关系时,先绘制子物体,再绘制出父物体。

其次,在一个场景中,Canvas的数量和层级都没有限制。父子Canvas用的是相同的渲染模式。

Canvas的三种渲染模式如下:

     Screen Space - Overlay(覆盖模式):画布填满了整个屏幕,并把所有的UI元素放在了屏幕的最上层。如果屏幕的尺寸改变,画布也会自动改变尺寸来匹配屏幕。典型例子:大量窗口、文本和按钮的策略游戏。

 Screen Space-Overlay模式的画布有Pixel Perfect和Sort Layer两个参数:

  (1)Pixel Perfect:只有RenderMode为Screen类型时才有的选项。使UI元素像素对应,效果就是边缘清晰不模糊。

  (2)Sort Layer: Sort Layer是UGUI专用的设置,用来指示画布的深度。

      Screen Space - Camera:与上一种情况类似。但摄像机在画布的前方,看起来绘制在一个与摄像机固定的平面上。这种模式可以用于在UI上显示3D模型。典型例子:射击游戏屏幕上的 3D HUD。

     相关参数:

    (1)Render Camera:渲染摄像机

  (2)Plane Distance:画布距离摄像机的距离

  (3)Sorting Layer: Sorting Layer是UGUI专用的设置,用来指示画布的深度。可以通过点击该栏的选项,在下拉菜单中点击“Add Sorting Layer”按钮进入标签和层的设置界面,或者点击导航菜单->edit->Project Settings->Tags and Layers进入该页面。

    可以点击“+”添加Layer,或者点击“-”删除Layer。画布所使用的Sorting Layer越排在下面,显示的优先级也就越高。

  (4)Order in Layer:在相同的Sort Layer下的画布显示先后顺序。数字越高,显示的优先级也就越高。

      World Space:画布与其他对象相同,类似于一个plane。当UI为场景一部分,可以使用该模式。例子:游戏内的手机屏幕、与场景绑定的游戏指导等。

  

渲染模式 画布对应屏幕 摄像机 像素对应 适合类型 Screen Space-Overlay 是 不需要 可选 2D UI Screen Space-Camera 是 需要 可选 2D UI World Space 否 需要 不可选 3D UI 以上是三种模式的比较(来源于网络)

由于本游戏的性质,将在编写中选择第二和第三种渲染模式。

 

Rich Text

       

  因为该游戏涉及到许多文字类的描述和介绍,所以需要对文本本身进行编辑。这里就需要用到RICH TEXT这样工具。

  这种文本用于GUI元素和文本网格可以结合多种字体类型和大小。 GUIStyle, GUIText 和 TextMesh类都有富文本设置,能指示unity寻找文本内含有的标记标签。Dubug.Log也可以用这些标记标签来增强代码报告错误的能力。这些标签不显示,而是显示应用到文本的风格变化。

  富文本使用方法类似 html 标签,比如 "<b>Hello</b>" 将显示为加粗的 "Hello"。

  这些标签还可以嵌套使用。可用的标签有 b(加粗)、i(倾斜)、size(大小)和 color (颜色)。其中 size 和 color 必须指定属性值,如:" <size=50>Hello</size>" "<color=#FF0080FF>Hello</color>"。size 属性的单位是像素,color 属性使用RGBA格式的16进制表示颜色或直接填写常用颜色名称。

  下面列出了Unity支持的所有风格标签(来源于网络)

标签

描述

例子

备注

b

用粗体渲染文本

We are <b>not</b> amused

 

i

用斜体渲染文本

We are <i>usually</i> not amused

 

size

根据给定的像素值设置文本的大小

We are <size=50>largely</size> unaffected

虽然Debug.Log函数也可以用这个标签,但是在窗口栏上你会看到行距并且如果size设太大了控制台窗口看上去会比较怪

color

根据制定的颜色值设置文本的颜色。颜色可以用传统的HTML格式指定。#rrggbbaa...这里的字母是用一对16进制的数字表示的红色、绿色、蓝色和alpha值(半透明)分量。例如,完全不透明的青色这样指定:

<color=#00ffffff>...

也可以使用颜色的名字来指定。这样比较容易理解,而且很自然,颜色的范围是被限定的而且都是完全不透明的 。

<color=cyan>..所有可用的颜色名字请参考官方文档。

 

转载请注明原文地址: https://www.6miu.com/read-66928.html

最新回复(0)