Unity 用脚本操作常用UI控件(上)

简介: Unity 用脚本操作常用UI控件(上)

控件介绍:

在界面系统的术语中,将一个具有独立状态、外观和操作的对象称为控件。例如,常用的交互控件有按钮、输入框、滑动条等,常见的非交互式控件有文本标签、图片等。

Unity采用了父子物体和组件的设计思想,其每个界面控件,往往也是由游戏物体挂载组件,以及一些子物体实现的。例如,按钮控件是由按钮物体加上一个文本子物体构成的,而按钮和新的功能组件也叫按钮(Button),要注意区分"按钮组件"和"按钮控件"。


一、创建游戏界面

为了方便介绍,先搭建一个简单的界面

UI系统对于2D和3D区别不大,可以随意创建一个Unity工程

控件实际上是一个游戏物体,因此只要在Hierarchy窗口空白处右键,选择UI,先创建一个UI Text,然后观察Canvas(画布),Text(文本控件)和EventSystem(事件系统)。

1.Canvas与EventSystem简介

要想理解Canvas存在的必要性,便需要知道在一个游戏中,它和普通物体不同,界面上各种控件的布局会更复杂一些,如需要考虑位置对齐、适配、缩放等实际情况。因此,一般来说所有UI控件都必须是Canvas的子物体,这样才能方便统一布局。

另外,Unity也允许存在多个Canvas,形成多个独立的界面层。例如,游戏中人物的血条就可以放在单独的Canvas中表示,但是过多的Canvas会影响游戏性能。

EventSystem代表着事件系统。UI系统一定会用到事件系统,例如单机按钮、输入文字等操作都需要事件系统的辅助。事件系统不是UI系统专用的,它本身也有其他用途。

2.界面的比例问题

如果新建多个UI控件,我们会发现在Game窗口里能看到控件,而在场景里,UI控件会以非常极大的比例展现,必须将场景镜头拉得很远才能看清楚UI控件整体。

这是由于UI系统是以Canvas为载体,而Canvas很多时候和最终屏幕显示有直接的对应关系。UI 的默认比例时以1像素为单位的,而正常三维场景是以1米为单位的。因此,UI的一个像素等驾驭三维世界的1米。对于1920✖️1080像素的界面来说,横向就有1920米。

三维游戏场景的比例尺与默认界面系统的比例尺差距很大,就导致在编辑界面时很不自然,为了改善操作的便利性,Unity在场景中提供了2D按钮,为编辑界面带来了方便。

二、矩阵变换(Rect Transform)组件

如果选中界面上的控件,会发现每个物体并不带有基本的Transform组件,取而代之的是Rect Transform组件。其实Rect Transform组件是Transform组件的子类,因此并不违反"每个物体必须有且只有一个Transform组件"的规定。其中Rect是Rectangle的简写,即"矩形"的意思。

在UI系统中用Rect Tranform的原因是界面控件的位置、大小相对于游戏中的其他物体来说要复杂得多。复杂性体现在很多方面,下面举例

界面布局直接收到客户端屏幕大小、长宽比例的影响。比如,移动端显示屏具有多种分辨率和长宽比,加上个人计算机,情况就更多了。

界面上控件位置、大小直接影响用户体验。在很多游戏中,用户可以拖拽窗口的位置或修改窗口的大小。例如,游戏的聊天窗口位置和大小是可以动态调整的。在这种情况下使窗口内部元素动态适应窗口大小、自动改变窗口内部元素的布局十分必要。

由于存在种种复杂的情况,如果UI控件还是用简单的"位置、旋转和缩放"来定义自身位置,显然无法满足要求。因此Unity总结了众多游戏屏幕适配的经验和方法,设计了 Rect Transform组件

简单来说,Rect Transform组件使用多种相对参数取代了绝对的位置参数。上文制作的UI场景中,所有物体都是默认的"居中对齐"方式。这时右边的位置参数为Pos X、Pos Y,其代表的是控件与父控件之间的偏移量,(POs x=0,POs Y=0)就代表位于父控件的正中央。

非拉伸情况下,物体的位置是相对的,通过Anchor Presets和Pos来调整;大小是确定的,通过Height和Width来改变。

而当选择Stretch(拉伸)模式时,位置和大小的参数会发生根本的变化。例如,最典型的"上下左右都拉伸"的方式下,界面参数会发生改变:

定位物体的Pos X,Pos Y消失了,取而代之的是Left(左偏移),Top(上偏移),Right(右偏移),Bottom(下偏移)。如果将4个偏移参数改为0,则代表这个控件将铺满父控件的全部控件,而且无论父控件扩大或缩小,依然会保持铺满的状态。

这时"左偏移"代表的是"离左边有多远","上偏移"代表的是"离顶部有多远",如左偏移文本框中填写10代表离左边10个单位,填写负数则表示可以超出父控件的范围。这种铺满的模式适合用于表示游戏中的主体窗口。

三、图片(Image)组件

图片组件用于展示UI上的图片。在界面上可以设置的属性如下:

  1. 指定片源(Source Image)
  2. 修改图片的叠加颜色(Color)
  3. 指定图片材质(Materal),一般为空
  4. 射线检测目标(Raycast Target),大部分的UI组件都包含着一选项,它决定了控件是否会被单击到
  5. 图片类型(Image Type),包括简单(Simple)、切片(Sliced)、瓦片(Tiled)与填充(Filled)4种类型。其中切片与瓦片类型需要对图片导入参数进行设置后才能正常使用。切片类型通常用于制作可以任意缩放但边缘不变形的图片(也称为九宫格图片)
  6. Set Native Size(设为原始大小)按钮可以充值整个图片为原始像素大小
  7. 当图片类型为简单和填充时,会出现"Preserve Aspect(保留长度比)"选项,勾选它能够保证图片在放大、缩小时长宽比例不变,比较常用

为演示用脚本控制图片的基本方法,给图片增加一个脚本ImageAnimTest,内容如下

public class ImageAnimTest : MonoBehaviour
{
        Image image;
        //可以在编辑器里指定另一张图片
        public Sprite otherSprite;
        float fillAmount=0;
        void Start()
        {
              //获取Image组件
               image=GetComponent<Image>();
              //直接将图片换为另一张图片
              if(otherSprite!=null)
              {
                     image.sprite=otherSprite;
              }
              //将图片类型改为Filled,360度填充,方便制作旋转动画
              image.type=Image.type.Filled;
              image.fillMethod=Image.FillMethod.Radial360;
           }
        Void Update()
          {
              //制作一个旋转现实的动画效果,直线效果也是类似的
              //取值为0~1
              image.fillAmount=fillAmount;
              fillAmount+=0.02f;
              if(fillAmount>1)
              {
                    FillAmount=0;
              }
      }     
}

在运行之前,可以给脚跟的Other Sprite字段制定一张新图片,这样在运行时,就会将内容替换为新的图片,并产生旋转现实的效果

四、文本(Text)组件

文本组件也是最常用的组件之一,用来显示文本信息。Unity的文本组件功能施恩丰富,在界面上可以设置的属性如下:

  1. Text(文本内容,就是要现实的文字内容
  2. Font(字体),默认为Arial。Unity支持安装其他类型的字体,只要将合适的字体文件复制到工程的Assets/Fonts文件夹下即可自动导入
  3. Font Style(字体风格)包括普通、黑体、斜体、黑体加斜体四种选择
  4. Line Spacing(行间距)
  5. Rich Text(富文本)
  6. Alignment(段落对齐方式)包括横向的靠左、居中和靠右对齐,以及纵向的靠左、居中和靠右对齐
  7. Horizontal Overflow(横向超出),指定横向超出控件大小的自负的处理方式,可以选择Wrap(折行)或Overflow(放任跑出边界)
  8. Vertical Overflow(纵向超出)
  9. Best Fit(最佳匹配),自动根据文本控件的大小改变字体的大小,可以限制自动调整的最大值和最小值
  10. Color(文字颜色)
  11. Materila(材质)一般留空
  12. Raycast Target(射线检测目标)与图片中的作用一样

 


相关文章
|
4天前
|
人工智能 API Apache
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
|
4天前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
|
1月前
|
Linux C# Android开发
分享3款开源、免费的Avalonia UI控件库
分享3款开源、免费的Avalonia UI控件库
120 0
|
2月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
132 3
|
2月前
|
设计模式 存储 人工智能
深度解析Unity游戏开发:从零构建可扩展与可维护的游戏架构,让你的游戏项目在模块化设计、脚本对象运用及状态模式处理中焕发新生,实现高效迭代与团队协作的完美平衡之路
【9月更文挑战第1天】游戏开发中的架构设计是项目成功的关键。良好的架构能提升开发效率并确保项目的长期可维护性和可扩展性。在使用Unity引擎时,合理的架构尤为重要。本文探讨了如何在Unity中实现可扩展且易维护的游戏架构,包括模块化设计、使用脚本对象管理数据、应用设计模式(如状态模式)及采用MVC/MVVM架构模式。通过这些方法,可以显著提高开发效率和游戏质量。例如,模块化设计将游戏拆分为独立模块。
180 3
|
3月前
|
前端开发 开发工具 图形学
PicoVR Unity SDK⭐️三、详解与UI的交互方式
PicoVR Unity SDK⭐️三、详解与UI的交互方式
|
3月前
|
前端开发 图形学
Unity精华☀️UI和物体可见性的判断方法
Unity精华☀️UI和物体可见性的判断方法
|
3月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
|
3月前
|
图形学 C# 开发者
全面掌握Unity游戏开发核心技术:C#脚本编程从入门到精通——详解生命周期方法、事件处理与面向对象设计,助你打造高效稳定的互动娱乐体验
【8月更文挑战第31天】Unity 是一款强大的游戏开发平台,支持多种编程语言,其中 C# 最为常用。本文介绍 C# 在 Unity 中的应用,涵盖脚本生命周期、常用函数、事件处理及面向对象编程等核心概念。通过具体示例,展示如何编写有效的 C# 脚本,包括 Start、Update 和 LateUpdate 等生命周期方法,以及碰撞检测和类继承等高级技巧,帮助开发者掌握 Unity 脚本编程基础,提升游戏开发效率。
78 0
|
3月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
95 0