unity Button按钮点击时改变按钮图片样式

目录

一、前言

二、点击时改变图片(点击其他物体时会改回去)

三、点击后永久改变图片样式(永久指你不自己改回来)

1.先做一个按钮

 2.准备一个你想换的图片,并把它改成精灵模式

3.开始写代码

 4.成果展示

四、点击改变图片样式,再点一下改回来

1.制作按钮

2.再做一个按钮,把这俩按钮搞的一样大

3.把按钮2放到按钮1下方

4.把按钮2隐藏

5.给按钮加方法

五、成果展示


一、前言

本篇文章有三种改变按钮图片的方法。

按钮原来是(如图1所示)

图1 按钮按下前

 点击的时候,希望它变成(如图2所示)

图2 按钮按下后

 这里也可以变成其他图片,不光是改变颜色

二、点击时改变图片(点击其他物体时会改回去)

添加Button后,改变设置(如图3所示)

图3 改变设置

我们要把这个红色的改成 SpriteSwap(如图4所示)

图4 改变样式

把自己喜欢的图片拖到红色箭头指的那一行,拖进去之后,你点击按钮的时候会直接改变按钮图片样式哦~~~

 其他的地方,你们也可以自己拖图片试一下,总之就是不同情况下改变图片。

三、点击后永久改变图片样式(永久指你不自己改回来)

这个是评论区有问,所以加的。

1.先做一个按钮

按钮初始样式(如图5所示)

图5 按钮初始样式

 面板中按钮位置(如图6所示)

图6 面板中按钮

 按钮的组件(如图7所示)

图7 按钮的组件
 2.准备一个你想换的图片,并把它改成精灵模式

准备的图片(如图8所示)

图8 准备的图片
3.开始写代码

 先把刚刚准备好要替换的图片放到代码里。(如图9所示)

    [SerializeField] Sprite sprite;
图9 替换图片

 把按钮也加在这个代码里。(如图10所示)

    [SerializeField] Sprite sprite;
    [SerializeField] Transform button0;
图10 添加按钮

 现在要添加代码,代码的功能是:当点击按钮的时候,把按钮的图片换成图片1。

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

public class ChangeButton : MonoBehaviour
{
    [SerializeField] Sprite sprite;
    //注意这里我声明的是Transform
    [SerializeField] Transform button0;
    
    void Start()
    {
        //我需要在Button组件里面加,所以用GetComponent<Button>()
        //当点击时(onClick)
        //因为我一直要看着,有没有点击,所以加方法叫,监听时(AddListener)
        //最后加入方法ButtonDown
        button0.GetComponent<Button>().onClick.AddListener(ButtonDown);
    }

    void ButtonDown() {
        //我需要改的是图片,所以我需要先获取组件Image,所以用GetComponent<Image>()
        //我需要Image组件里的图片,所以用sprite
        //等号后面的sprite是我第一行加的图片1
        button0.GetComponent<Image>().sprite = sprite;
    }
}
 4.成果展示

下图为最后成品(如图11所示)

图11 成品

四、点击改变图片样式,再点一下改回来

这个是评论区又有问,所以加的。

逻辑梳理:

我建两个按钮AB,B把A盖住。

B平时是隐藏的,点击A,显示B。

(这时候B出现了,刚好A被遮住,你只能点到B)

那么点击B,B自己消失,就又只能看见A了

1.制作按钮

和第二节相同。(如图12所示)

图12 按钮制作
2.再做一个按钮,把这俩按钮搞的一样大

这步略,相信你们都会。

3.把按钮2放到按钮1下方

(如图13所示)

图13 按钮位置

这会图片会显示按钮2的图片,因为按钮1被遮住了。

4.把按钮2隐藏

(如图14所示)

图14 隐藏按钮2
5.给按钮加方法

给按钮1加的方法:点击按钮1,显示按钮2

给按钮2加的方法:点击按钮2,把按钮2关掉

按钮1的方法(如图15所示):

图15 第一步
图15 第二步

 按钮2的方法(如图16所示):

图16 按钮2的方法

五、成果展示

成果如下(如图17所示)。

图17 成果
  • 16
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菌菌巧乐兹

希望能给大家写更多有用的文章~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值