UI 下Botton 点击功能

在 Unity 的 UI 界面中添加图片，并让图片具有点击的功能。

一、在Unity 的UI界面添加对应的图片和Button组件

1、将Image01、Image02 设置为Image的子物体。同时让Image02 的格式为Filled；Image 和 Image01 为Simple 的格式即可

总体显示及对应的图片如下箭头所指。

  

为了方便查看和管理，将 Image 的名称修改为 TheSkill  ，如下图所示

 

2、添加 ClickSkill 脚本，用来控制其相应的功能，将其附加到 TheSkill 物体下。该脚本的内容如下

【注】：绑定到按钮上的函数必须设置为公有的，否则无法绑定。

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

public class ClickSkill : MonoBehaviour 
{
    Image fillImage;
    bool isStartTime = false;
    float startTime = 0;
    float curTime;

	void Start () {
        fillImage = GameObject.Find("Canvas/TheSkill/Image02").GetComponent<Image>();
        fillImage.fillAmount = 1;
	}
	
	void Update ()
    {
        curTime = Time.time;
        if (isStartTime && curTime-startTime<10)
        {
            fillImage.fillAmount = (startTime + 10 - curTime) / 10;
        }
		
	}

    /// <summary>
    /// 将该函数绑定到某一物体的按钮组件上，当点击按钮时让该函数开始执行
    /// </summary>
    public void TheClick()
    {
        isStartTime = true;
        startTime = Time.time;
        print("You have click the button");
    }
}

3、在 TheSkill 物体上添加 Button 组件，让该物体具有点击的功能。并将以上脚本中需要点击来执行的函数，及操作的物体绑定到该按钮上。具体步骤如下：

（1）、点击下图箭头所指的加号，来添加要操作对象和事件函数。

【注意】：OnClick() ：函数表示点击该按钮所触发的事件

（2）、将以上脚本所绑定的对象拖到Object 处，表示该脚本绑定的物体，然后再在该物体下选对应的脚本及要执行的函数。

（3）、点击如下箭头1所指的位置，选择 ClickSkill 脚本（2处）中的 TheClick() 函数（3处）。表示当点击该按钮时，要执行的函数。

4、在 Unity 运行后，点击图片结果如下

 

---

二、点击一个图片构成的按钮，实现物体旋转

1、添加立方体Cube、和UI 的 Image，并在 Image下添加 Button 组件。

2、添加控制的的脚本 ClickRotate 。再添加一个空物体，命名为 Control ，将该脚本挂载到空物体上。

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

public class ClickRotate : MonoBehaviour 
{
    Transform tfCube;
    private float durationTime = 6;  // 计时器所持续的时间
    private float aTimer = 0;
    bool haveClick = false;
	
	void Start ()
    {
        tfCube = GameObject.Find("Cube").GetComponent<Transform>();
	}
	
	void Update ()
    {
        if (haveClick)
        {
            aTimer += Time.deltaTime;  // 当点击之后就开始计时
            tfCube.Rotate(Vector3.up, 60 * Time.deltaTime);// 物体开始旋转

            // 当计时器的时间达到了规定的时间就开始停止
            if (aTimer>=durationTime)
            {
                
                haveClick = false;
                aTimer = 0;
            }
        }
	}

    /// <summary>
    /// 点击之后开始执行该函数，必须将该函数设置为公有的属性
    /// </summary>
    public void IsClick()
    {
        haveClick = true;
    }
}

3、将脚本所挂载的对象（在此为一个空物体）绑定到该按钮上。（注意要绑定的是脚本所挂载的对象，而不是脚本所操作的对象）

4、将要执行的函数绑定到该按钮上。

5、当运行Unity的时候就会执行对应脚本中所绑定的函数。结果如下图所示