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(射线检测目标)与图片中的作用一样

 文章来源地址https://www.toymoban.com/news/detail-699666.html

到了这里,关于Unity 用脚本操作常用UI控件(上)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用Unity生成UI预制体 (Unity3D)

    在Unity中,预制体(Prefab)是一种非常有用的工具,用于生成可重复使用的UI元素。预制体使得UI的创建和管理变得更加简单和高效。在本文中,我们将详细介绍如何使用Unity生成UI预制体,并提供相应的源代码示例。 步骤1:创建UI元素 首先,我们需要创建UI元素,例如按钮、

    2024年02月05日
    浏览(42)
  • 【Unity小技巧】手戳一个简单易用的游戏UI框架(附源码)

    参考原视频链接: 【视频】:https://www.bilibili.com/video/BV1zT411b7L3/ 注意 :本文为学习笔记记录,推荐支持原作者,去看原视频自己手敲代码理解更加深入 开发一款游戏美术成本是极其高昂的,以我们常见的宣传片CG为例,动辄就要成百上千万的价格,因此这种美术物料一般只

    2024年02月11日
    浏览(42)
  • Unity UI适配规则和对热门游戏适配策略的拆解

    本文会介绍一些关于UI适配的基础概念,并且统计了市面上常见的设备的分辨率的情况。同时通过拆解目前市面上较为成功的两款休闲游戏Royal Match和Monopoly GO(两款均为近期游戏付费榜前几的游戏),大致推断出他们的适配策略,以供学习和参考。 设计分辨率: 设计分辨率是指

    2024年03月14日
    浏览(53)
  • 【Unity游戏开发基础】如何做可以调整音量的UI滚动条组件

    游戏的设置列表中,调整游戏声音大小的选项是必备的,如何实现拖动滚动条后音量相应改变大小呢?这里介绍一下相关的脚本和步骤 首先,新建一个调整音量的脚本,名叫SetVolume,把预置的Update方法和Start方法删除。 然后,这个脚本需要挂载在滚动元素的Slider组件下。这个

    2024年02月03日
    浏览(39)
  • Unity3D学习之UI系统——用NGUI制作游戏登陆界面

    会省略一些东西,可以看我的NGUI的博客 设置UI分辨率自适应 设置Root 的层级 和摄像机渲染的层级为UI 主摄像机不渲染UI 一般都是美术给一个示意图,然后按示意图上拼面板 3.1.1 制作图集 制作两个新图集 3.1.2 拖面板 检查DrawCall 3.1.3 面板基类 创建面板基类, 首先设置成单例

    2024年02月19日
    浏览(63)
  • 【游戏开发小技】Unity通过UI全屏图来模糊场景画面(Shader | 模糊 | 滤镜 | Blur)

    一、前言 嗨,大家好,我是新发。 以前我写文章都是很长很长,接下来我会尝试用新的方式来写博客,尽量简短,以实用为主。同时也是作为自己零碎的一些记录,方便查阅。 本文我要说的是在 Unity 中通过 UI 全屏图来模糊场景画面的效果。 二、效果演示 这是没用模糊效果

    2024年02月05日
    浏览(32)
  • 「Unity入门」Step by Step的太空清理垃圾游戏Part 3:飞船移动与UI

    完成基础的太空场景后,我们就可以来实现一些可交互的操作了。在这个游戏中主要可交互的操作有控制飞船飞行方向和点按垃圾收集。在游戏开始后,飞船会以恒定的速度向前方移动,用户则可以摇杆来控制飞船左右、上下转动。通过除此之外,还有切换前后镜头、加速等

    2024年02月01日
    浏览(37)
  • 【简单详细】Unity生成地形和UI小地图实时展示人物位置的详细制作过程

    效果: 注意:一个 父物体 Map是一个纯白色image,放到左上角,要加 Mask组件 哦!!!       它的 两个子物体, 其中一个(map)是显示出地图纹理的image,另外一个(mapPlayer)是一个小点,我们也用image来表示,也就是效果图上的 绿点 。     我们把人物放进去,挂载脚本

    2024年02月05日
    浏览(38)
  • 23. Unity - 3D游戏开发小计02 --- 动画结束UI、导航网格代理、场景搭建插件(ProGrids,ProBuilder,Polybrush)

    1. 动画结束UI 一个游戏在通过后,都是需要一个界面显示当前游戏已经结束,即需要给游戏添加一个结束的界面,可以做一个简单的游戏结束界面,用一个图片展示: 首先在 层级窗口 添加两层UI中的Image,其中第一层的Image仅作背景,可将其填充颜色设置为纯黑色,第二层的

    2024年02月05日
    浏览(33)
  • Unity2D Sprite尺寸与UI在场景视图和游戏视图显示不一致问题解决方案

    在Unity3D中,当开发2D游戏时,经常会遇到Sprite尺寸与UI在场景视图和游戏视图中显示不一致的问题。这个问题可能导致UI元素变形或者在不同分辨率的设备上显示不正确。本文将为您提供解决这个问题的方法,并附带相应的源代码。 问题分析: Sprite是2D游戏中最常用的图像资

    2024年02月05日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包