首页 > 其他分享 >UGUI图形系统

UGUI图形系统

时间:2023-05-29 19:44:46浏览次数:28  
标签:图形系统 void UnityEngine 组件 using UGUI public View

UGUI图形系统

1画布与事件系统

1.1画布

画布用于承载所有的UI元素。

Canvas物体的Canvas组件Render Mode分为三种:

第一种:Screem Space Overlay模式,该模式下画布中的元素始终在前面。

第二种:Screem Space Camera模式,该模式下画布中的元素是否在前取决于它与物体的位置。

第三种:World Space模式,该模式下画布可以自由移动缩放。可用来做人物的血条等。

1.2事件系统

事件系统是使画布内元素产生效果系统,创建画布后会自动创建,如果不小心删除也可点击添加单独创建。

 

2.图像、文本框、按钮、输入框的脚本交互

2.1登录按钮的脚本实现

示例

using UnityEngine;

using UnityEngine.UI;

public class Login : MonoBehaviour

{

    InputField accountInput;

    InputField passwordInput;

    Button loginButton;

    void Start()

    {

        accountInput = transform.Find("Account").GetComponent<InputField>();

        passwordInput = transform.Find("Password").GetComponent<InputField>();

        loginButton = transform.Find("Login").GetComponent<Button>();

        loginButton.onClick.AddListener(LoginButtonOnClick);

    }

    void LoginButtonOnClick()

    {

        string account = accountInput.text;

        string password = passwordInput.text;

        Debug.Log("Account is " + account);

        Debug.Log("Password is " + password);

    }

 

}

该段代码实现的功能是,在输入账号和密码并点击登录键后,将账号和密码在控制台输出。

7.2.2更换背景图的脚本实现

示例

using UnityEngine;

using UnityEngine.UI;

public class Change : MonoBehaviour

{

    public Sprite bg;

    void Start()

    {

        transform.Find("Background").GetComponent<Image>().sprite = bg;

    }

}

该段代码实现的功能是,在将新的图像添加到新建的脚本后,点击播放可以在运行时将背景图换成新的图像

7.2.3修改文本框

示例

using UnityEngine;

using UnityEngine.UI;

public class Test : MonoBehaviour

{

    string text = "抵制不良游戏,拒绝盗版游戏。注意自我保护,谨防受骗上当。\n适度游戏益脑,沉迷游戏伤身。合理安排时间,享受健康生活。";

    void Start()

    {

        transform.Find("Text").GetComponent<Text>().text = text;

    }

}

该段代码实现的功能是,在运行时将文本框文字改为:抵制不良游戏,拒绝盗版游戏。注意自我保护,谨防受骗上当。适度游戏益脑,沉迷游戏伤身。合理安排时间,享受健康生活。

7.2.4点击按钮导入链接

示例

using UnityEngine;

using UnityEngine.UI;

public class Test : MonoBehaviour

{

    void Start()

    {

transform.Find("Button").GetComponent<Button>().onClick.AddListener(ButtonOnClick);

    }

    void ButtonOnClick()

    {

        Application.OpenURL("https://v.qq.com/channel/choice?channel_2022=1");

    }

}

该段代码实现的功能是,在点击了Button按钮后,跳转到网站https://v.qq.com/channel/choice?channel_2022=1。

7.3切换开关与开关组

7.3.1切换开关

示例

using UnityEngine;

using UnityEngine.UI;

public class Test : MonoBehaviour

{

    InputField user;

    InputField password;

    Toggle toggle;

    Button logon;

    void Start()

    {

        user= transform.Find("User").GetComponent<InputField>();

        password = transform.Find("Passward").GetComponent<InputField>();

        toggle=transform.Find("Toggle").GetComponent<Toggle>();

        logon=transform.Find("Logon").GetComponent<Button>();

        logon.onClick.AddListener(logonOnClick);

    }

    void logonOnClick()

    {

        if (toggle.isOn == true)

        {

            string username= user.text;

            string passwordnum=password.text;

            Debug.Log("用户名是:"+username);

            Debug.Log("密码是:"+passwordnum);

        }

        else

        {

            Debug.Log("请先同意用户协议");

        }

    }

}

该段代码实现的功能是,在点击了按钮后,可以正常登录,未点击时控制台显示:请先同意用户隐私协议!

7.3.2开关组

若有多个Toogle,而只能选择一个,可在Hierachy中新建一个空对象,在空对象的Inspector中添加一个Toggle Group,将空对象移入每个Toogle的Inspector>Toogle>Group中,运行即可实现单选,Toggle Group的Allow Switch Off指允许取消勾选,即选择后可以实现一个都不选。

7.4滑动条Slider的使用

示例

using UnityEngine;

using UnityEngine.UI;

public class Test : MonoBehaviour

{

    Slider slider;

    void Start()

    {

        slider = transform.Find("Slider").GetComponent<Slider>();

        slider.onValueChanged.AddListener(OnValueChanged);

    }

    void OnValueChanged(float value)

    {

        Debug.Log("进度条的值为:"+slider.value);

    }

}

该段代码的功能是,在控制台显示slider滑动的值。

 

7.5滚动视图与遮罩的使用

7.5.1滚动视图Scroll View

滚动视图是容纳多个图标的容器,可以通过拖动滚动条来查看所有的图标,因为在Scroll View中的Viewport含有Mask组件,所以,图标只会在滚动视图内显示。

7.5.2Mask和Rect Mask 2D

Mask作为父物体的组件时,子物体超出父物体的部分不会显示,这里会识别父物体的透明度,透明度高的部分也不会被显示。

Rect Mask 2D作为父物体的组件时功能与Mask相同,但不会识别父物体的透明度,父物体以矩形方式呈现。

 

7.6水平、垂直、网格布局组件与布局元素

7.6.1水平、垂直和网格布局

水平布局组件:Horizontal Layout Group,在Scroll View>View Port>Content中加入该组件,可以将滚动视图中的图像设置成一行,并进行相关设置。

垂直布局组件:Vertical Layout Group,在Scroll View>View Port>Content中加入该组件,可以将滚动视图中的图像设置成一列,并进行相关设置。

网格布局组件:Grid Layout Group,在Scroll View>View Port>Content中加入该组件,可以将滚动视图中的图像设置成方固定方格排列,并进行相关设置。

7.6.2布局元素

布局元素组件:Layout Element,网格布局元素中的单个图像若添加该组件,并选择组件中的Ignore Layout,可以使该图像自由移动,不受网格限制。

 

7.7内容尺寸适配器Context Size Fitter

7.7.1内容尺寸适配器

该组件英文名Context Size Fitter,当在内容输入文本框或者在Scroll View>View Port>Content的网格状态下使用该组件,把Horizontal Fit项设置成Preferred Size时,可以根据内容自适应左右宽度的大小,Vertical Fit同理。

7.7.2克隆元素图标

示例

using UnityEngine;

public class Clone : MonoBehaviour

{

    public GameObject hero;

    public Transform content;

    void Update()

    {

        if (Input.GetKeyDown(KeyCode.A))

        {

            GameObject clonehero=GameObject.Instantiate(hero);

            clonehero.transform.parent = content;

        }

    }

}

将元素图标的预制件与HeroPanel>Scroll View>View Port>Content拖入该脚本并将该脚本挂到penel中后,可以在播放时通过按A键来克隆物体。

7.8UI特效与图片填充功能

7.8.1UI特效

Outline组件,该组件可以通过设置大小、颜色等给UI元素(如图片)描边。

Shadow组件,该组件可以通过设置大小、颜色等给UI元素(如图片)设置阴影。

7.8.2图片型进度条制作

示例

using System.Collections;

using UnityEngine;

using UnityEngine.UI;

public class FullFill : MonoBehaviour

{

    public Image image;

    void Start()

    {

        StartCoroutine(Fill());

    }

    IEnumerator Fill()  //协程就是要等时间

    {

        float value = 0;

        while(value<=1)

        {

            yield return new WaitForSeconds(0.5f);

            value+=0.1f;

            image.fillAmount = value;

        }

    }

}

新建两个层级不同的Image,父Image设置成背景色,子Image设置成填充色,并在子Image的Sourse Image中导入一张图片,将Image Type设置成Filled,将Fill Method设置成Horizontal,将Fill Origin设置成Left,将含上面代码的脚本挂到某一物体上,将子Image挂到脚本中,可以实现实现播放时的进度条加载效果。

标签:图形系统,void,UnityEngine,组件,using,UGUI,public,View
From: https://www.cnblogs.com/gatran/p/17441473.html

相关文章

  • Unity的UGUI用TexturePacker全自动打图集,包括九宫格切图信息
    @TOC前言最近在学习UGUI的打图集,之前一直在用SpritePacker和SpriteAtlas打图集,现在记录下另一种打图集方式:TexturePacker主要是讲如何自动打图集到Unity,并且不丢掉九宫格信息,以及一些参数的设置环境准备1.unity版本2019.4.10f12.TexturePacker安装官网,支持正版,支持正版,支持正版ht......
  • STM32 + RTThread + UGUI
    一、概述开发板:STM32F103C8T6显示器:ST7735SRT-Thread:5.0.0玩过GUI的小伙伴都知道,界面的显示是一个个像素点组合起来的,那么直接构建出来炫酷的GUI还是相对比较困难的,所以我们一般都会使用一些GUI库来实现,比如LVGL、QT、UGUI等,这样对于驱动开发的人员来说就相对比较简......
  • 【Unity3D】UGUI之Text
    1Text简介​UGUI概述中介绍了Canvas渲染模式、RectTransform组件、锚点(Anchor)等,本文将介绍UGUI中的Text控件。​在Hierarchy窗口右键,选择UI列表里......
  • 【Unity3D】UGUI概述
    1UGUI与GUI区别​GUI控件在编译时不能可视化,并且界面不太美观,在实际应用中使用的较少。UGUI在编译时可视化,界面美观,实际应用较广泛。2Canvas渲染模式(Render......
  • 【Unity3D】UGUI之Button
    1Button属性面板​在Hierarchy窗口右键,选择UI列表里的Button控件,即可创建Button控件,选中创建的Button控件,按键盘【T】键,可以调整Button控件的大小和位置......
  • 【Unity3D】UGUI之Image和RawImage
    1纹理(Texture)​Image控件和RawImage控件都是承载渲染图片的控件,都需要指定一个纹理(Texture)图片。在Assets窗口选中一张图片,在Inspector窗口的参数设置面板可......
  • 【Unity3D】UGUI之Slider
    1Slider属性面板​在Hierarchy窗口右键,选择UI列表里的Slider控件,即可创建Slider控件,选中创建的Slider控件,按键盘【T】键,可以调整Slider控件的大小和位置......
  • 【Unity3D】UGUI之Toggle
    1Toggle属性面板​在Hierarchy窗口右键,选择UI列表里的Toggle控件,即可创建Toggle控件,选中创建的Toggle控件,按键盘【T】键,可以调整Toggle控件的大小和位置......
  • UI(一) - NGUI和UGUI比较
    UI是游戏项目中重要的组成部分,面对一个从零开始的项目,首先要确立的就是选用哪个UI系统作为主框架。===现在主流项目中基本上都是NGUI和UGUI,那么到底选哪个。我们先来做个比......
  • UGUI 使UI布局生效,SetLayoutHorizontal()、SetLayoutVertical()
    ContentSizeFitter、GridLayoutGroup、HorizontalLayoutGroup、VerticalLayoutGroup、AspectRatioFitter等UGUI布局组件在某些情况下不能立即生效,这是可以调用SetLayoutHor......