---
# System prepended metadata

title: Unity Button
tags: [Unity UI]

---

###### tags: `Unity UI`
[toc]
# Unity Button

# Button
## 建立Button
![](https://i.imgur.com/YAMVtij.png)
## Button 屬性
Button預設以下幾種狀態讓開發者自行變化

| Trigger Name          | 說明|
| ------------------- | -------- | 
| Normal Trigger      | 一般狀態|
|Highlighted Trigger |滑鼠在Button上時|
|Pressed Trigger     |按住Button時|
|Selected Trigger    ||
|Disabled Trigger    ||

![](https://i.imgur.com/jKALjsZ.png)

能變化的種類分成三種:

| 變化    | 說明    |
| ------------------- | -------- | 
| Color Tint         |顏色上的變化|
| Sprite Swap        |圖片上的變化(可以更換圖片等等)|
| Animation          |可以製作動畫|

### 以下用Animation來示範

![](https://i.imgur.com/DvIX6yn.png)

1. 點 Auto Generate Animation，讓 Unity 自動幫你建好Normal 、Highlighted、Pressed 、Selected、Disabled 這五種 Animation Clip 
2. Animation controller 找地方存起來即可
3. 選取 Button 後到 Windows/Animation/Animation
![](https://i.imgur.com/x72utN8.png)

4. 選取想要變化的狀態，本範例使用 highlighted 來做動畫
![](https://i.imgur.com/nL4HVyW.png)

就可以為 highlighted 做出想要的動畫~
![](https://i.imgur.com/CnfJooB.gif)

## BUTTON event : on_click()
在寫程式的時候既然寫到 Button，那有很高的機率就是為了點 Button 吧? 最棒的是 Unity 已經幫 Button 加好了 Event ，只要把會影響到的物件放到欄位裡，在選擇要用什麼 function 處理就行了~

已下範例我將在點了 button 後讓 button 消失。
![](https://i.imgur.com/eNobE5P.gif)

由於我點下 button 後會影響到 button 自己(把自己關掉)，因此我把 Hierachy 的 button 拖到欄位裡面

![](https://i.imgur.com/OPF5xd2.gif)

接著選擇要怎麼處置它。
一般而言用程式碼來將物件關閉時都會這樣寫
```csharp=
GameObject_name.SetActive(false);
```
而我們直接用 unity 幫我們建好的 event 也是異曲同工之妙

![](https://i.imgur.com/nqaxWv9.gif)

沒有勾代表 false
![](https://i.imgur.com/VXohYnR.png)

接著來看看效果
![](https://i.imgur.com/b4TZaQ0.gif)

## 幫Button加點音效
不知道有沒有人跟一開始的我一樣有疑惑，如果 event 只有on_click()，我要怎麼去幫 Button 加其他的效果?例如:鼠標放在button 上時 (highlighted) 就撥放音效。

喔...好啦!! 其實 unity 還有很多 event 可以使用，我們只要新增 eventTrigger，就可以選擇要新增哪個 event 來用喔!
本範例的 event 選擇 onPointerEnter() ，也就是處理鼠標滑進 button 時的狀況。

![](https://i.imgur.com/AtCZhsg.gif)

如果要撥放音效，那物件就一定要掛上 Audio source 才行~ 所以我在 button 裡新增一個 Audio source component，並把想要的音效放上去。

[範例使用的音效的出處](https://assetstore.unity.com/packages/audio/sound-fx/ui-sound-effects-collection-pack-2-buttons-27803)

![](https://i.imgur.com/mkx17Qb.gif)

![](https://i.imgur.com/9VmQ8LB.gif)

把 audio source 掛好，且把音效素材放上後，下一步就是在適當的時機播放音效，本範例希望能在鼠標移入 button 上就播放音效。要播放音效，一般在程式碼的時候我們都會打

```csharp=
public AudioSource audio;
audio.play();
```
幸運的是我們擁有好用的 eventTrigger，讓我們直接新增需要的event，並選擇 AudioSource 後在選擇 play()，就可以播放了!

1. 先新增
![](https://i.imgur.com/xZm4aca.gif)
2. 把掛著 audio source 的物件抓進來。**因為要播放音效，所以一定要抓有掛 audio source 的物件。**
![](https://i.imgur.com/a25jUq9.gif) 

3. 最後選擇要用什麼function來處理
![](https://i.imgur.com/F0BBOjQ.gif)

**一定要記得先把audio source的 play on awake()先關閉，否則遊戲一執行，音效就會播出，這不是我們想要ㄉ**

![](https://i.imgur.com/lkdY2gv.gif)

**成果如下**:point_down: 
至於為什麼會音效不停播放，是因為 button 左右擺動的時候讓鼠標一直重新碰到 button，讓音效重複播放，下次在製作動畫的時候小心點就能避免這個問題。

{%youtube HSwkl6jP6E4 %}
