Updated on September 17, 2017 使用腳本程式及Sprite製作動態按鈕

1. 電子工程系
Unity遊戲程式設計(02)
應用2D圖片物件
吳錫修
September 17, 2017

2. shapethefuture
 Sprite可以是單張圖片或由⼀組相關圖片所組成
 Sprite物件支援碰撞偵測與觸發事件
 角色碰觸陷阱，中毒失血；子彈擊中戰機，戰機爆炸
 為了能加入碰撞偵測與程式腳本控制，角色、陷阱、子彈、戰機都可使
用Sprite
Sprite物件 1/3
2 Wu, ShyiShiou Dept. of E.E., NKUT
sprite 1 sprite 2

3. shapethefuture
 匯入Sprite圖片素材
 由Assets快顯功能表Create/Folder，新增Sprite資料夾
 將圖片素材拖曳到Assets/Sprite資料夾
 由屬性編輯器 (inspector) 檢查圖片素材的貼圖類型 (Texture Type)設定
值是否為Sprite (2D and UI)
Sprite物件 2/3
3 Wu, ShyiShiou Dept. of E.E., NKUT

4. shapethefuture
 建立Sprite元件
 從Assets/Sprites資料夾將圖片素材拖曳到場景
 變更元件名稱
 由Hierarchy或Inspector窗格修改元件名稱
 程式腳本是以元件名稱來存取元件
Sprite物件 3/3
4 Wu, ShyiShiou Dept. of E.E., NKUT

5. shapethefuture
 程式腳本用來控制當發生某些情況 (事件) 時，元件該做什麼？
 遊戲引擎會定時執行遊戲專案程式腳本
 https://docs.unity3d.com/Manual/ExecutionOrder.html
 C#語言程式腳本之預設程式碼如下：
using UnityEngine;
using System.Collections;
public class ScriptFilename : MonoBehaviour {
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
}
}
程式腳本
5 Wu, ShyiShiou Dept. of E.E., NKUT

6. shapethefuture
 程式腳本可透過元件名稱或元件標籤來分辨場景中的物件
 場景中的元件名稱不可重複
 不同元件可設定相同的標籤
 標籤設定
 點擊Add Tag…可新增標籤
如何在程式腳本中辨識場景元件 1/2
6 Wu, ShyiShiou Dept. of E.E., NKUT

7. shapethefuture
 程式框架
if (gameObject.name == "About") {
// 點擊About元件時要執行的作業
}
if (gameObject.tag == "Button") {
// 點擊Button標籤之元件時要執行的作業
}
如何在程式腳本中辨識場景元件 2/2
7 Wu, ShyiShiou Dept. of E.E., NKUT

8. shapethefuture
 建立⼀個2D專案，專案名稱sprite button
 將按鈕圖片素材拖曳(匯入)到Assets/Sprites資料夾
設計動態按鈕 1/12
8 Wu, ShyiShiou Dept. of E.E., NKUT
search_normal search_hover
about_normal
search_press
about_pressabout_hover

9. shapethefuture
 拖曳「search_normal」場景，建立Search按鈕
 元件名稱改為Search
 Position(X, Y, Z) = (4, 0, 0)
 Scale (X, Y, Z) = (0.5, 0.5, 1)
 拖曳「about_normal」到場景建立About按鈕
 元件名稱改為About
 Position(X, Y, Z) = (-4, 0, 0)
 Scale (X, Y, Z) = (0.5, 0.5, 1)
設計動態按鈕 2/12
9 Wu, ShyiShiou Dept. of E.E., NKUT

10. shapethefuture
 建立程式腳本
 在Assets下新增Scripts資料夾
 Script資料夾快顯功能表Create/C# Script，並命名為UI_Controller
 在類別開頭宣告Sprite陣列變數，用來儲存按鈕normal、hover及
press狀態圖片
 在類別開頭宣告SpriteRenderer變數
public class UI_Controller : MonoBehaviour {
public Sprite[] SpriteTexture = new Sprite[3];
private SpriteRenderer Sprite_Renderer;
// Use this for initialization
void Start () {
Sprite_Renderer = this.GetComponent<SpriteRenderer>();
}
...
}
設計動態按鈕 3/12
10 Wu, ShyiShiou Dept. of E.E., NKUT

11. shapethefuture
 撰寫OnMouseEnter事件函式，變更為顯示按鈕hover狀態時的圖片
public class UI_Controller : MonoBehaviour {
...
void Update () {
}
void OnMouseEnter(){
Sprite_Renderer.sprite = SpriteTexture[1];
}
}
設計動態按鈕 4/12
11 Wu, ShyiShiou Dept. of E.E., NKUT

12. shapethefuture
 撰寫OnMouseExit事件函式，回復為顯示按鈕normal狀態時圖片
public class UI_Controller : MonoBehaviour {
...
void Update () {
}
void OnMouseExit(){
prite_Renderer.sprite = SpriteTexture[0];
}
}
設計動態按鈕 5/12
12 Wu, ShyiShiou Dept. of E.E., NKUT

13. shapethefuture
 撰寫OnMouseDown事件函式，變更為顯示按鈕press狀態時圖片
public class UI_Control : MonoBehaviour {
...
void Update () {
}
void OnMouseDown(){
Sprite_Renderer.sprite = SpriteTexture[2];
if (gameObject.name == "About") {
// 點擊About元件時要執行的作業
}
if (gameObject.name == "Search") {
// 點擊Search標籤之元件時要執行的作業
}
}
}
設計動態按鈕 6/12
13 Wu, ShyiShiou Dept. of E.E., NKUT

14. shapethefuture
 在Search及About元件加入UI_Controller程式腳本
 將UI_Controller程式腳本拖曳到Hiearachy之Search及About元件上
 由Inspector窗格檢視元件屬性，會多了⼀個UI Controller (Script)屬性欄；
且程式腳本中的public變數會自動產生對應的資料欄 (Sprite Texture)
設計動態按鈕 7/12
14 Wu, ShyiShiou Dept. of E.E., NKUT

15. shapethefuture
 設定About元件之SpriteTexture屬性內容
 由Inspector窗格檢視About元件屬性，展開SpriteTexture
 拖曳about_normal到Element 0欄
 拖曳about_hover到Element 1欄
 拖曳about_press到Element 2欄
設計動態按鈕 8/12
15 Wu, ShyiShiou Dept. of E.E., NKUT

16. shapethefuture
 設定Search元件之SpriteTexture屬性內容
 由Inspector窗格檢視Search元件屬性，展開SpriteTexture
 拖曳search_normal到Element 0欄
 拖曳search_hover到Element 1欄
 拖曳search_press到Element 2欄
設計動態按鈕 9/12
16 Wu, ShyiShiou Dept. of E.E., NKUT

17. shapethefuture
 About元件加入2D碰撞偵測
 選取About元件
 選單命令Component> Physics 2D> Circle Collider 2D
設計動態按鈕 10/12
17 Wu, ShyiShiou Dept. of E.E., NKUT

18. shapethefuture
 Search元件加入2D碰撞偵測
 選取Search元件
 選單命令Component> Physics 2D> Circle Collider 2D
設計動態按鈕 11/12
18 Wu, ShyiShiou Dept. of E.E., NKUT

19. shapethefuture
 測試
 按下執行按鈕，使用滑鼠操作按鈕，檢驗是否符合程式腳本設計動作
設計動態按鈕 12/12
19 Wu, ShyiShiou Dept. of E.E., NKUT

20. shapethefuture
 新建2D專案，並以學號-1做為專案名稱及場景名稱
 下載button.rar素材製作動態按鈕
實作練習
20 Wu, ShyiShiou Dept. of E.E., NKUT