【Unity入门教程】 第六章 用户界面【中国大学MOOC游戏引擎原理及应用】

以下均为来自中国大学mooc 游戏引擎原理及应用时的学习笔记，不含商用，仅供学习交流使用，如果侵权请联系作者删除。

文章目录

6.1 控件6.2界面功能实现6.3 界面美化

6.1 控件

首先在unity中新建一个text

text是依赖于画布存在的 可以调节字号字体位置 注意文本框是有宽度和高度的 超过了这个宽度和高度的字不会显示 除非设置成overflow wrap和truncate无法表示超出文本框的内容 overflow代表允许溢出 （也就是会表示

按下alt+鼠标左键即可调整text在画布中的位置

（将锚点设置为0.5 0.5就可以 使得左上对齐

其中文本中的这个text代笔

代表会随着button的变化而有所拉伸

想要出现一个下拉菜单可以使用dropdown 可以在dropdown 的Arrow中修改这个箭头的图片 这里可以调整颜色

这里可以调整选项

slider控件 这里可以将颜色修改成这种效果

这里还可以修改滑块的颜色及图片的颜色

inputfield组件在运行时输入的文字可以在text中呈现

我们看到在这个分隔符以上的都是不可以交互的 在分隔符以下的都是

这个可以通过缩放来调整这个ui的窗口的大小

这个可以用来调整窗口边缘的柔和度

这个physcal设置意思是无论屏幕分辨率是多少 这个组件都保持固定的物理大小

6.2界面功能实现

首先我们在unity中创建如下的ui 然后输入以下脚本

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class SJB : MonoBehaviour { public Sprite ST;//这是三张剪刀石头布的图片 形式以精灵的形式来表达 public Sprite JD; public Sprite BU; public Text Score;//分数比的text public Image PlayerGesture;//放手势图片的地方 public Image AIGesture; //以上这两个东西都是开放给unity界面然后将对应的组件要挂接到物体上去才行 public int PlayerScore=0; public int AIScore=0; void Start() { } void Update() { Score.text = PlayerScore.ToString() + ":" + AIScore.ToString(); } public void Call_ST()//这三个函数是要给按下button时候触发的函数 { Call(0); } public void Call_JD() { Call(1); } public void Call_BU() { Call(2); } public void Call(int i) { int ai = Random.Range(0, 3); Num2Img(i, PlayerGesture); Num2Img(ai, AIGesture); if (i == ai) { } else if (i == 0) { if (ai == 1) { PlayerScore++; } else if (ai == 2) { AIScore++; } } else if (i == 1) { if (ai == 2) { PlayerScore++; } else if (ai == 0) { AIScore++; } } else if (i == 2) { if (ai == 0) { PlayerScore++; } else if (ai == 1) { AIScore++; } } } public void Num2Img(int n,Image img) { switch (n) { case 0:img.sprite = ST;break; case 1:img.sprite = JD;break; case 2:img.sprite = BU;break; } } }

我们需要用一个物体来挂接脚本，然后将ui中的组件挂接到脚本上，因此我们创建一个空物体，然后将ui中的组件还有图片挂接到脚本上

由于这里存储的是精灵的形式 因此导入的图片也要将其形式转换成精灵

对于按钮来说需要这样进行挂接： 首先需要把那个物体挂接上来，然后当按下这个按钮的时候我们让它call这个物体上的这个函数

运行后便可得到结果

6.3 界面美化

像这种显示减少了界面的存在感 还和游戏融为了一体

选择不同的种族会表现出不同的界面

我们建立一个ui的平面 并且为其附上颜色

注意这里 我们给画布添加上一个grid layout组件，便可以使得panel中的物体有规则的排布，但是需要注意一点的是这些button必须是panel的子物体 否则的话无法实现

这里可以调整间距 还有每个按钮的大小

这个组件也可以调整位置

child alignment可以处理整体在画布中的位置的对齐方式 或者说是调整最左边或者最右边或最上面的物体

这个方法 可以使得调整的某个物体只按什么列

字体美化：

在text中添加outline插件可以使得字体美化