unity遊戲程式設計(02) 應用2d圖片物件
TRANSCRIPT
電子工程系應 用 電 子 組電 腦 遊 戲 設 計 組
Unity遊戲程式設計(02) 應用2D圖片物件
吳錫修
Nov 11, 2016
shap
e th
e fu
ture
Sprite可以是單張圖片或由⼀組相關圖片所組成
Sprite物件支援碰撞偵測與觸發事件
角色碰觸陷阱，中毒失血，為了能加入碰撞偵測與程式控制，角色與陷阱就必須使用Sprite
Sprite物件 1/3
Wu, ShyiShiou Dept. of E.E., NKUT2
sprite 1 sprite 2
shap
e th
e fu
ture
匯入Sprite圖片素材
由Assets快顯功能表Create/Folder，新增Sprite資料夾
將圖片素材拖曳到Assets/Sprite資料夾
由屬性編輯器 (inspector) 檢查圖片素材的貼圖類型 (Texture Type)設定值是否為Sprite (2D and UI)
Sprite物件 2/3
Wu, ShyiShiou Dept. of E.E., NKUT3
shap
e th
e fu
ture
建立Sprite元件
從Assets/Sprite資料夾將圖片素材拖曳到場景
變更元件名稱
程式腳本是以元件名稱來存取元件，要注意名稱是否⼀致
由Hierarchy或Inspector窗格修改元件名稱
Sprite物件 3/3
4 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
程式腳本是指當發生某些情況 (事件) 時，元件該做什麼？
遊戲引擎會定時執行遊戲專案程式腳本
https://docs.unity3d.com/Manual/ExecutionOrder.html
C# Script檔預設腳本程式碼如下：
using UnityEngine;using System.Collections;public class ScriptFilename : MonoBehaviour {
// Use this for initializationvoid Start () {
}
// Update is called once per framevoid Update () {
}}
程式腳本
5 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
建立⼀個2D專案
將按鈕圖片素材拖曳(匯入)到Assets/Sprite資料夾
設計動態按鈕 1/12
6 Wu, ShyiShiou Dept. of E.E., NKUT
start_active (按下滑鼠時)
start_hover (滑鼠在按鈕上時)
start_normal (一般情況)
end_active (按下滑鼠時)
end_hover (滑鼠在按鈕上時)
end_normal (一般情況)
shap
e th
e fu
ture
建立開始遊戲按鈕
將「start_normal」素材加到場景
將「start_normal 」元件名稱改為StartGame
建立結束遊戲按鈕
將「end_normal」素材加到場景
將「end_normal」元件名稱改為EndGame
設計動態按鈕 2/12
7 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
建立程式腳本
在Assets下新增Script資料夾
Script資料夾快顯功能表Create/C# Script，並命名為UI_Control
在類別開頭宣告Sprite陣列及SpriteRenderer
public class UI_Control : MonoBehaviour {public Sprite[] SpriteTexture = new Sprite[3];private SpriteRenderer Sprite_Renderer;// Use this for initializationvoid Start () {
}...
}
設計動態按鈕 3/12
8 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
撰寫OnMouseDown事件函式public class UI_Control : MonoBehaviour {
...// Update is called once per framevoid Update () {
}void OnMouseDown(){
if(gameObject.name == "StartGame"){
Sprite_Renderer = gameObject.GetComponent<SpriteRenderer>();Sprite_Renderer.sprite = SpriteTexture[2];
}else if(gameObject.name == "EndGame"){
Sprite_Renderer = gameObject.GetComponent<SpriteRenderer>();Sprite_Renderer.sprite = SpriteTexture[2];
}}
}
設計動態按鈕 4/12
9 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
撰寫OnMouseUp事件函式public class UI_Control : MonoBehaviour {
...// Update is called once per framevoid Update () {
}void OnMouseUp(){
if(gameObject.name == "StartGame"){
Sprite_Renderer = gameObject.GetComponent<SpriteRenderer>();Sprite_Renderer.sprite = SpriteTexture[1];
}else if(gameObject.name == "EndGame"){
Sprite_Renderer = gameObject.GetComponent<SpriteRenderer>();Sprite_Renderer.sprite = SpriteTexture[1];
}}
}
設計動態按鈕 5/12
10 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
撰寫OnMouseEnter事件函式public class UI_Control : MonoBehaviour {
...// Update is called once per framevoid Update () {
}void OnMouseEnter(){
if(gameObject.name == "StartGame"){
Sprite_Renderer = gameObject.GetComponent<SpriteRenderer>();Sprite_Renderer.sprite = SpriteTexture[1];
}else if(gameObject.name == "EndGame"){
Sprite_Renderer = gameObject.GetComponent<SpriteRenderer>();Sprite_Renderer.sprite = SpriteTexture[1];
}}
}
設計動態按鈕 6/12
11 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
撰寫OnMouseExit事件函式public class UI_Control : MonoBehaviour {
...// Update is called once per framevoid Update () {
}void OnMouseExit(){
if(gameObject.name == "StartGame"){
Sprite_Renderer = gameObject.GetComponent<SpriteRenderer>();Sprite_Renderer.sprite = SpriteTexture[0];
}else if(gameObject.name == "EndGame"){
Sprite_Renderer = gameObject.GetComponent<SpriteRenderer>();Sprite_Renderer.sprite = SpriteTexture[0];
}}
}
設計動態按鈕 7/12
12 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
設定元件與程式之關連
將UI_Control程式腳本拖曳到Hiearachy之StartGame及EndGame元件上
由Inspector窗格檢視元件屬性，會多了⼀個UI_Control(Script)屬性欄；且程式腳本中的public變數會自動產生對應的資料欄
設計動態按鈕 8/12
13 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
設定陣列內容
由Inspector窗格檢視StartGame元件屬性，展開SpriteTexture，分別將圖檔拖曳到Element 1、Element 2、Element 3欄中
設計動態按鈕 9/12
14 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
同樣方式，設定EndGame元件之SpriteTexture屬性
設計動態按鈕 10/12
15 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
加入2D碰撞偵測
選取StartGame元件
點擊功能表Component/Physics 2D/ Box Collider 2D，或由Inspector窗格點擊「Add Component」按鈕
設計動態按鈕 11/12
16 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
選取EndGame元件
點擊功能表命令Component/Physics 2D/Box Collider 2D，或由Inspector窗格點擊「Add Component」按鈕
測試
按下執行按鈕，使用滑鼠操作按鈕，檢驗是否符合程式腳本設計動作
設計動態按鈕 12/12
17 Wu, ShyiShiou Dept. of E.E., NKUT
shap
e th
e fu
ture
電子工程系應 用 電 子 組電 腦 遊 戲 設 計 組
新建2D專案，並以學號-1做為專案名稱及場景名稱
下載button.rar素材製作動態按鈕
實作練習
18