初试一下unity中的几个ui界面。
GUI
完成猜拳游戏(图标见附件)。然后注意到PK的图标是靠上的，修改代码使得PK图标垂直居中，如附件截图所示。
提示：
GUI.Box() 是 Unity 中用于绘制矩形框的函数，通常用于在屏幕上显示简单的装饰性框。
GUI.DrawTexture 函数是 Unity 中用于绘制纹理（Texture）的函数，通常用于在屏幕上绘制2D图像。
素材图
using UnityEngine;
public class GuessingGame : MonoBehaviour{
public Texture2D[] t_Array;
public int user=0,computer=0;//分别代表玩家和电脑当前选择的手势。
public Texture2D pk;//存放纹理图
private float imageOffsetX = 10; // X 方向偏移量
private float imageOffsetY = 10; // Y 方向偏移量
public Rect rect=new Rect(0, 0, 450, 350);//默认坐标（），宽高分别为450，350
void OnGUI(){
rect=GUI.Window(0,rect,GuessWindow, "猜拳游戏");//创建一个窗口，GUI.Window（id，窗口的位置大小，方法，标题）
}
void GuessWindow(int windowID){
//指定位置绘制框与标签
GUI.Box(new Rect(30, 30, 120, 120), t_Array[computer]);
GUI.Label(new Rect(60,150,60,30),"电脑");
//GUI.Box(new Rect(160, 30, 120, 120), pk);//这里图放进去是不对齐的
Rect boxRect = new Rect(160, 30, 120, 120);
GUI.Box(boxRect, ""); // 绘制一个空的 GUI.Box，用于显示纹理图像
Rect imageRect = new Rect(boxRect.x+5, boxRect.y + 30, 110, 60);// 计算纹理图像的显示位置
GUI.DrawTexture(imageRect, pk);// 绘制纹理图像
/* GUI.BeginGroup(boxRect);// 在矩形框内创建一个组，并设置相对坐标
// 定义要在矩形框内显示的内容的位置
Rect contentRect = new Rect(0, 0, 120, 80); //对框的偏移
GUI.DrawTexture(contentRect, pk, ScaleMode.ScaleToFit, true, 1.0f);// 显示内容
GUI.EndGroup(); // 结束组*/
GUI.Box(new Rect(290, 30, 120, 120), t_Array[user]);
GUI.Label(new Rect(300,150,60,30),"玩家");
GUI.Label(new Rect(160,180,150,30),"请选择石头剪刀布");
if (GUI.Button(new Rect(30, 210, 120, 120), t_Array[0])){
user = 0; Play();
}//选到石头，调用play方法
if (GUI.Button(new Rect(160, 210, 120, 120), t_Array[1])){
user = 1; Play();
}//选到剪刀，调用play方法
if (GUI.Button(new Rect(290, 210, 120, 120), t_Array[2])){
user = 2; Play();
}//选到布，调用play方法
GUI.DragWindow(new Rect(0, 0, 10000, 10000));//允许窗口在屏幕上拖动，参数指定了可以拖动的范围
}
void Play(){//判断输赢的方法
computer = Random.Range(0, 3);//电脑随机出
if (user - computer == 1 || user - computer == -2)
Debug.Log("你输了!");
if (user - computer == 0)
Debug.Log("平局！");
if (user - computer == -1 || user - computer == 2)
Debug.Log("你赢了！");
}
}
在GUI中通过编写代码挂载在一个空物体上就可以运行界面了。代码中说明这个游戏窗口是可以拖动的，其中多次运用了Rect(x偏移, y偏移, width, height)，再用 GUI.DrawTexture（）调整pk图的位置即可。
UGUI
实现课本中颜色版的例子。
先创建以下控件。
然后你会发现创建了一堆东西叠在那里的，别慌，可以拖哦。点击选中物体，如果误选，也可点击以上面板中的物体组件进行拖拽布局。
大概是这样，也可以在plane中加图，按钮文本框哪些文字部分在hierarchy面板中展开控件选label看到inspector面板中的text属性修改，然后把写好的代码挂载在canvas画布上。
using UnityEngine;
using UnityEngine.UI;
public class UGUI_Color : MonoBehaviour
{
public Image ugui_image;
public Text ugui_text;
public Slider[] sliders;
public Toggle toggle;
public bool is_UpdateImage;
public float r, g, b;
void Start()
{
r = g = b = 0;//初始化界面颜色
UpdateInfo();
}
void Update()
{
if (is_UpdateImage)// 根据is_UpdateImage的状态更新界面元素的颜色信息
UpdateInfo();
}
private void UpdateInfo()
{
ugui_image.color = new Color(r, g, b);
ugui_text.text = "Color:(" + r.ToString("f2") + "," +
g.ToString("f2") + "," + b.ToString("f2") + ")";
// ugui_text.text = $"Color:({r:f2}, {g:f2}, {b:f2})";
}
public void Button_Reset()
{
ResetColors();
foreach (Slider slider in sliders)
{
slider.value = 1f;
}
toggle.isOn = false;//关闭toggle
}
private void ResetColors()//重置
{
r = g = b = 1.0f;
UpdateInfo();
}
public void Slider_SetColorR(Slider slider)
{
r = slider.value;
}
public void Slider_SetColorG(Slider slider)
{
g = slider.value;
}
public void Slider_SetColorB(Slider slider)
{
b = slider.value;
}
//更新是否更新图片颜色，所以is_UpdateImage要打勾
public void Toggle_UpdateColor(Toggle toggle)
{
is_UpdateImage = toggle.isOn;
}
public void InputField_SetColor(InputField inputField)
{
switch (inputField.text.ToLower())//根据输入颜色设置图片颜色，统一大小写
{
case "red":
ugui_image.color = Color.red;
break;
case "green":
ugui_image.color = Color.green;
break;
case "blue":
ugui_image.color = Color.blue;
break;
}
}
}
接着，对ui控件进行设置。先是canvas画布，拖几个ui控件到相应的框。
然后是toggle、sliderR、sliderG、sliderB、button、inputfield，在inspector面板中往下滑，你会看到类似的onchange组件，改一下几个框，拖动组件进去。
大致的布局就弄好了，点击运行查看效果，在game面板中拖滑动条可以看到色块改变颜色。取消勾选toggle，在文本框输入red等字段按回车，也可以看到效果。
这就是一个简单的UGUI界面，UGUI目前在unity界面设计中还是很重要的，需要更多的练习。
UI Toolkit
通过搜索和网上教程了解Unity的UI toolkit，简单阐述UI toolkit的优缺点，并通过UI toolkit实现一个简单的UI界面。
UI Toolkit是一种新的页面设计方式，个人觉得跟一些网页编辑器很像。这里也是低代码的，支持可视化界面编辑，可以写代码，也可以直接在界面添加删除。不过在处理大量元素动画的时候，怎么处理其复杂度与兼容性也是待考虑的。个人用uxml代码做了个比较简单的界面。
<?xml version="1.0" encoding="utf-8"?>
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:VisualElement name="Background" style="flex-grow: 1; background-color: #ff0084;">
<ui:VisualElement name="MyContainer" style="width: 300px; height: 250px; background-color: #C779D0; align-items: center; justify-content: center; margin-left: 20px; margin-right: 20px; margin-top: 20px; margin-bottom: 20px;">
<ui:Label text="tookit homework" display-tooltip-when-elided="true" name="NameLab" style="font-size: 50px; -unity-text-align: middle-center; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0;" />
<ui:Button text="请点击" display-tooltip-when-elided="true" name="ActionBtn" style="font-size: 50px; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px; background-color:#ff6b6b; justify-content: center; align-items: center;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>在hierarchy面板与assets面板都创建一个uitookit的对象，注意两个是不一样的，双击assets的uitookit的对象即xml文件就可以进去UI builder进行编辑。
要是朝着低代码的趋势下，这些还是要了解的，网页端也如此。
实验心得
在实际开发中，界面布局也是开发人员做的，有很多程序员都是兼管前端后台，全栈是不是很吃香呢。
3304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
