目录
一、前言
本篇文章有三种改变按钮图片的方法。
按钮原来是(如图1所示)
点击的时候,希望它变成(如图2所示)
这里也可以变成其他图片,不光是改变颜色
二、点击时改变图片(点击其他物体时会改回去)
添加Button后,改变设置(如图3所示)
我们要把这个红色的改成 SpriteSwap(如图4所示)
把自己喜欢的图片拖到红色箭头指的那一行,拖进去之后,你点击按钮的时候会直接改变按钮图片样式哦~~~
其他的地方,你们也可以自己拖图片试一下,总之就是不同情况下改变图片。
三、点击后永久改变图片样式(永久指你不自己改回来)
这个是评论区有问,所以加的。
1.先做一个按钮
按钮初始样式(如图5所示)
面板中按钮位置(如图6所示)
按钮的组件(如图7所示)
2.准备一个你想换的图片,并把它改成精灵模式
准备的图片(如图8所示)
3.开始写代码
先把刚刚准备好要替换的图片放到代码里。(如图9所示)
[SerializeField] Sprite sprite;
把按钮也加在这个代码里。(如图10所示)
[SerializeField] Sprite sprite;
[SerializeField] Transform button0;
现在要添加代码,代码的功能是:当点击按钮的时候,把按钮的图片换成图片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所示)
四、点击改变图片样式,再点一下改回来
这个是评论区又有问,所以加的。
逻辑梳理:
我建两个按钮AB,B把A盖住。
B平时是隐藏的,点击A,显示B。
(这时候B出现了,刚好A被遮住,你只能点到B)
那么点击B,B自己消失,就又只能看见A了
1.制作按钮
和第二节相同。(如图12所示)
2.再做一个按钮,把这俩按钮搞的一样大
这步略,相信你们都会。
3.把按钮2放到按钮1下方
(如图13所示)
这会图片会显示按钮2的图片,因为按钮1被遮住了。
4.把按钮2隐藏
(如图14所示)
5.给按钮加方法
给按钮1加的方法:点击按钮1,显示按钮2
给按钮2加的方法:点击按钮2,把按钮2关掉
按钮1的方法(如图15所示):
按钮2的方法(如图16所示):
五、成果展示
成果如下(如图17所示)。