Unity遊戲程式設計(02) 應用2D圖片物件

使用sprite製作動態按鈕

Transcript

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