11.Button按钮

UI系统 > UGUI > UGUI基础知识 UI系统 基础知识 组合控件 UGUI
发布时间 :
字数:2.5k 阅读 : 评论:
  1. 11.UGUI基础-组合控件-Button按钮控件
    1. 11.1 知识点
      1. Button是什么
      2. Button按钮组件参数
        1. Interactable 能不能交互
        2. Transition 过渡
          1. None 无：没有状态变化效果，点击没有交互效果。
          2. ColorTint 颜色色彩：用颜色表示不同状态的变化。
          3. Sprite Swap Sprite 交换：用图片表示不同状态的变化。
          4. Animation 动画：用动画表示不同状态的变化。
        3. Navigation 导航
        4. OnClick 鼠标单击
      3. Button按钮代码控制
        1. GetComponent() 得到Button组件
        2. Button.interactable 设置交互状态 UGUI其他控件大多也有这个变量
        3. Button.transition 设置状态过渡效果
        4. GetComponent<Image>() 设置Button上的图片
      4. Button按钮监听事件的两种方式
        1. 拖脚本监听点击事件
        2. 代码添加点击事件
          1. Button.onClick.AddListener 添加点击事件监听
          2. Button.onClick.RemoveListener 移除点击事件监听
          3. Button.onClick.RemoveAllListeners 移除所有点击事件监听
    2. 11.2 知识点代码
    3. 11.3 练习题
      1. 请用现在所学知识，制作一个这样的功能：场景上有一个对象，点击UGUI的发射按钮，可以让对象发射一颗子弹
        1. 创建一个立方体作为Player对象，一个球体作为子弹对象
        2. 创建BulletObject子弹脚本，挂载到子弹对象上，把子弹对象拖到Resource下做成预制体，删除场景上的子弹，让子弹在场景中一直向前飞，三秒之后销毁自身
        3. 创建PlayerObject 玩家脚本，挂载到玩家对象上。添加开火方法，开火时在玩家面前创建一个子弹。可以在Update添加测试代码，鼠标点击发射子弹，测试完后注释。
        4. 创建Canvas，修改模式为缩放模式，设置好分辨率1920x1080。创建UGUI的Panel，把他改名成GamePanel，作为游戏面板。可以移除GamePanel上的Image组件，让Panel不显示图片，只作为管理当前面板的对象。在Panel下添加一个Button，作为攻击按钮。
        5. 创建GamePanel脚本，挂载到GamePanel对象上。添加攻击按钮变量和玩家变量，在外部拖拽关联。添加点击按钮让调用玩家开火方法的监听。
    4. 11.4 练习题代码
      1. BulletObject
      2. PlayerObject
      3. GamePanel

11.UGUI基础-组合控件-Button按钮控件

11.1 知识点

Button是什么

Button是按钮组件，是UGUI中用于处理玩家按钮相关交互的关键组件。

默认创建的Button由2个对象组成：

  • 父对象——Button组件依附对象，同时挂载了一个Image组件，作为按钮背景图。
  • 子对象——按钮文本（可选）。

Button按钮组件参数


Interactable 能不能交互

  • 是否接受点击响应输入。

Transition 过渡

  • 响应用户输入的过渡效果。

None 无：没有状态变化效果，点击没有交互效果。
ColorTint 颜色色彩：用颜色表示不同状态的变化。


  • TargetGraphic 目标图形：控制的目标图形，默认关联的是自己身上的Image组件，然后再对Image进行叠加操作。
  • Normal Color 正常颜色：正常状态颜色。
  • Highlighted Color 高亮颜色：鼠标进入时显示高亮颜色。
  • Pressed Color 按下颜色。
  • Selected Color 选中的颜色：上一次点击的按钮会作为焦点，进入选中状态，展示选中的颜色。
  • Disabled Color 禁用时的颜色，Interactable不勾选时展示。
  • Color Multiplier 色彩乘数：颜色倍增器，过渡颜色乘以该值，一般不改。
  • FadeDuration 淡化持续时间：衰减持续时间，从一个状态进入另一个状态时需要的时间。
Sprite Swap Sprite 交换：用图片表示不同状态的变化。

  • Highlighted Sprite：鼠标进入时图片。
  • Pressed Sprite：按下时图片。
  • Selected Color：选中时的颜色。
  • Disabled Sprite：禁用时显示的图片。
Animation 动画：用动画表示不同状态的变化。

  • 点击AutoGenerateAnimation可以自动生成animator文件，并且给当前按钮添加animator组件。生成后Unity帮我自动设置了切换条件和Animation文件，但是对于Animation文件的效果是空，要自己设置动画效果。

  • Normal Trigger：正常动画触发器。
  • Highlighted Trigger：鼠标进入状态时触发器。
  • Pressed Trigger：按下时触发器。
  • Selected Trigger：选中时触发器。
  • Disabled Trigger：禁用时触发器。

  • 导航模式，可以设置UI元素如何在播放模式中控制导航。
  • None：无键盘导航，按上下左右wasd都没用。
  • Everything：所有都能导航。
  • Horizontal：水平导航，按左右ad有用。
  • Vertical：垂直导航，按上下ws有用。
  • Automatic：自动导航，按上下左右wasd都有用。
  • Explicit：指定周边控件进行导航。
    • 手动拖拽上下左右wasd切换到哪个控件。
  • Visualize 可视化按钮。

    • 点击后可以在场景窗口看到导航连线。

OnClick 鼠标单击

  • 单击（按下再抬起）执行的函数列表。

Button按钮代码控制

GetComponent() 得到Button组件

// 获取当前脚本所附加的 GameObject 上的 Button 组件
Button button = this.GetComponent<Button>();

Button.interactable 设置交互状态 UGUI其他控件大多也有这个变量

// 设置 Button 组件的交互状态为可交互，即按钮可以与用户进行交互
button.interactable = true;

Button.transition 设置状态过渡效果

// 设置 Button 组件的状态过渡效果为 None，表示没有过渡效果
button.transition = Selectable.Transition.None;

GetComponent<Image>() 设置Button上的图片

// 想要设置Button上的图片，一般都是获取当前脚本所附加的 GameObject 上的 Image 组件进行设置
Image image = this.GetComponent<Image>();

Button按钮监听事件的两种方式

点击事件 是 在按钮区域抬起按下一次 就算一次点击

拖脚本监听点击事件

  • 点击Button组件下OnClick下面的添加按钮，可以选择关联对象，在选择关联对象上哪个脚本的哪个事件，进行点击事件的监听。只能关联功能函数。可以关联多个函数。
public void ClickBtn()
{
    print("按钮点击，通过拖代码的形式");
}

代码添加点击事件

声明点击按钮函数

private void ClickBtn2()
{
    print("按钮点击，通过拖代码的形式2");
}
Button.onClick.AddListener 添加点击事件监听
// 添加 ClickBtn2 方法作为 button 的点击事件监听器，当 button 被点击时，会执行 ClickBtn2 方法
button.onClick.AddListener(ClickBtn2);

// 添加一个匿名函数作为 button 的点击事件监听器，当 button 被点击时，会执行其中的代码块
button.onClick.AddListener(() => {
    print("123123123");
});
Button.onClick.RemoveListener 移除点击事件监听
// 移除 ClickBtn2 方法作为 button 的点击事件监听器
button.onClick.RemoveListener(ClickBtn2);
Button.onClick.RemoveAllListeners 移除所有点击事件监听
// 移除所有的点击事件监听器，即移除 button 上绑定的所有方法
button.onClick.RemoveAllListeners();

11.2 知识点代码

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class Lesson11_UGUI基础_组合控件_Button按钮控件 : MonoBehaviour
{
    void Start()
    {
        #region 知识点一 Button是什么
        //Button是按钮组件
        //是UGUI中用于处理玩家按钮相关交互的关键组件

        //默认创建的Button由2个对象组成
        //父对象——Button组件依附对象 同时挂载了一个Image组件 作为按钮背景图
        //子对象——按钮文本（可选）
        #endregion

        #region 知识点二 Button参数相关

        #endregion

        #region 知识点三 Button代码控制

        // 获取当前脚本所附加的 GameObject 上的 Button 组件
        Button button = this.GetComponent<Button>();

        // 设置 Button 组件的交互状态为可交互，即按钮可以与用户进行交互
        button.interactable = true;

        // 设置 Button 组件的状态过渡效果为 None，表示没有过渡效果
        button.transition = Selectable.Transition.None;

        // 想要设置Button上的图片 一般都是获取当前脚本所附加的 GameObject 上的 Image 组件进行设置
        Image image = this.GetComponent<Image>();


        #endregion

        #region 知识点四 Button监听事件的两种方式
        //点击事件 是 在按钮区域抬起按下一次 就算一次点击

        //1.拖脚本

        //2.代码添加

        // 添加 ClickBtn2 方法作为 button 的点击事件监听器，当 button 被点击时，会执行 ClickBtn2 方法
        button.onClick.AddListener(ClickBtn2);

        // 添加一个匿名函数作为 button 的点击事件监听器，当 button 被点击时，会执行其中的代码块
        button.onClick.AddListener(() => {
            print("123123123");
        });

        // 移除 ClickBtn2 方法作为 button 的点击事件监听器
        button.onClick.RemoveListener(ClickBtn2);

        // 移除所有的点击事件监听器，即移除 button 上绑定的所有方法
        button.onClick.RemoveAllListeners();


        #endregion
    }

    public void ClickBtn()
    {
        print("按钮点击，通过拖代码的形式");
    }

    private void ClickBtn2()
    {
        print("按钮点击，通过拖代码的形式2");
    }
}

11.3 练习题

请用现在所学知识，制作一个这样的功能：场景上有一个对象，点击UGUI的发射按钮，可以让对象发射一颗子弹

创建一个立方体作为Player对象，一个球体作为子弹对象

创建BulletObject子弹脚本，挂载到子弹对象上，把子弹对象拖到Resource下做成预制体，删除场景上的子弹，让子弹在场景中一直向前飞，三秒之后销毁自身

using UnityEngine;

public class BulletObject : MonoBehaviour
{
    // 移动速度
    public float moveSpeed = 20;

    private void Start()
    {
        // 在游戏对象生成后的3秒后销毁该游戏对象
        Destroy(this.gameObject, 3);
    }

    void Update()
    {
        // 让该游戏对象按照指定速度和时间增量在世界坐标中沿着正前方方向移动
        this.transform.Translate(moveSpeed * Vector3.forward * Time.deltaTime);
    }
}

创建PlayerObject 玩家脚本，挂载到玩家对象上。添加开火方法，开火时在玩家面前创建一个子弹。可以在Update添加测试代码，鼠标点击发射子弹，测试完后注释。

using UnityEngine;

public class PlayerObject : MonoBehaviour
{
    /// <summary>
    /// 开火方法
    /// </summary>
    public void Fire()
    {
        // 动态创建子弹对象，使用 Resources 加载预制体资源，并在当前游戏对象的位置和旋转处实例化子弹对象
        Instantiate(Resources.Load<GameObject>("Bullet"), this.transform.position, this.transform.rotation);
    }

    //private void Update()
    //{
    //    if(Input.GetMouseButtonDown(0))
    //    {
    //        Fire();
    //    }
    //}
}

创建Canvas，修改模式为缩放模式，设置好分辨率1920x1080。创建UGUI的Panel，把他改名成GamePanel，作为游戏面板。可以移除GamePanel上的Image组件，让Panel不显示图片，只作为管理当前面板的对象。在Panel下添加一个Button，作为攻击按钮。

创建GamePanel脚本，挂载到GamePanel对象上。添加攻击按钮变量和玩家变量，在外部拖拽关联。添加点击按钮让调用玩家开火方法的监听。

using UnityEngine;
using UnityEngine.UI;

public class GamePanel : MonoBehaviour
{
    public Button btnAtk;   // 攻击按钮

    public PlayerObject player;   // 玩家对象

    void Start()
    {
        btnAtk.onClick.AddListener(() =>
        {
            // 当攻击按钮被点击时，执行以下操作：
            // 获取玩家对象，并调用其 Fire 方法进行开火
            player.Fire();
        });
    }
}

11.4 练习题代码

BulletObject

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BulletObject : MonoBehaviour
{
    // 移动速度
    public float moveSpeed = 20;

    private void Start()
    {
        // 在游戏对象生成后的3秒后销毁该游戏对象
        Destroy(this.gameObject, 3);
    }

    void Update()
    {
        // 让该游戏对象按照指定速度和时间增量在世界坐标中沿着正前方方向移动
        this.transform.Translate(moveSpeed * Vector3.forward * Time.deltaTime);
    }
}

PlayerObject

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerObject : MonoBehaviour
{
    /// <summary>
    /// 开火方法
    /// </summary>
    public void Fire()
    {
        // 动态创建子弹对象，使用 Resources 加载预制体资源，并在当前游戏对象的位置和旋转处实例化子弹对象
        Instantiate(Resources.Load<GameObject>("Bullet"), this.transform.position, this.transform.rotation);
    }
}

GamePanel

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class GamePanel : MonoBehaviour
{
    public Button btnAtk;   // 攻击按钮
    public PlayerObject player;   // 玩家对象

    void Start()
    {
        btnAtk.onClick.AddListener(() =>
        {
            // 当攻击按钮被点击时，执行以下操作：
            // 获取玩家对象，并调用其 Fire 方法进行开火
            player.Fire();
        });
    }
}
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com

赏

©2016-2024 Tao

Built with Hexo and 3-hexo theme

×

喜欢就点赞,疼爱就打赏