Download to read offline
![using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Cloud : MonoBehaviour {
[SerializeField]
private float speed;
private Vector3 startPos;
// Use this for initialization
void Start () {
startPos = transform.position;
}
// Update is called once per frame
void Update () {
transform.Translate(Vector3.right * Time.deltaTime * speed);
}
private void OnBecameInvisible() {
transform.position = startPos;
}
}
Lab Sprite Masks應用 6/7
21](https://image.slidesharecdn.com/02unitysprites-191003235832/85/Unity-Sprite-21-320.jpg){kind=icon}
![ SW_Controller程式碼
public class SW_Controller : MonoBehaviour{
[SerializeField]
private Sprite[] sprite_texture=new Sprite[2];
[SerializeField]
private GameObject monster; //monster物件參照
private int sw_status = 1;
private SpriteRenderer sprite_renderer; //sw物件的SpriteRenderer元件參照
// Use this for initialization
void Start(){
sprite_renderer = this.GetComponent<SpriteRenderer>();
}
void OnMouseDown(){
sw_status = 1 - sw_status;
sprite_renderer.sprite = sprite_texture[sw_status]; //替換sw圖片
monster.SetActive(sw_status == 1); //更新monster物件狀態
}
}
Lab 設計動態開關 6/9
31](https://image.slidesharecdn.com/02unitysprites-191003235832/85/Unity-Sprite-31-320.jpg){kind=icon}
![ 選單命令Assets> Create> C# Script，命名為IrregularButton
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class IrregularButton : MonoBehaviour {
[SerializeField]
private Text message;
void Start() {
GetComponent<Image>().alphaHitTestMinimumThreshold = 0.1f;
}
public void OnButtonClicked() {
message.text = gameObject.name + " was clicked";
}
}
Lab 設計不規則按鈕 10/12
45](https://image.slidesharecdn.com/02unitysprites-191003235832/85/Unity-Sprite-45-320.jpg){kind=icon}
Uploaded by吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計 - 應用Sprite物件
本文档介绍了如何在2D游戏中使用sprite对象，包括创建、切割和应用sprite，以及使用sprite masks和2D碰撞器来实现游戏交互。还详细描述了动态开关和不规则按钮的设计过程。此外，文档强调了在Unity环境中管理和操作sprite资源的基本技巧。
More Related Content
![[CEDEC2017] 最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介！](https://cdn.slidesharecdn.com/ss_thumbnails/cedec2017v0-170830231914-thumbnail.jpg?width=640&height=640&fit=bounds)
Unity遊戲程式設計 - 應用Sprite物件
- 1. 應用Sprite物件 Revised on October4, 2019 分割Sprite圖片 使用9-slicing Sprites 應用Sprite Masks 2D碰撞器及滑鼠事件 設計動態開關 設計不規則按鈕
- 2.
- 3. 由Assets快顯功能表Create/Folder，新增Sprites資料夾 將圖片素材拖曳到Assets/Sprites資料夾 將圖片素材的貼圖類型(Texture Type)設定為Sprite(2D and UI) 匯入Sprite素材 3
- 4. 將Sprite圖片拖曳到場景 變更物件名稱 由Hierarchy或Inspector窗格修改物件名稱 建立Sprite物件 4 修改元件名稱
- 5. 已匯入的Sprite素材可透過Sprite Editor進行裁切 Sprite Mode Single 單張矩形裁切(預設) Multiple 裁切成多張素材 Polygon 單張多邊形裁切 將Sprite Mode設定為Multiple，點擊Sprite Editor按鈕 裁切Sprite 1/4 5
- 6. 由Slice下拉選單設定剪裁方式(Type)，之後點擊「Slice」按鈕 Automatic自動剪裁 Grid By Cell Size 固定大小剪裁 Grid By Cell Count 以指定行列個數剪裁 裁切Sprite 2/4 6
- 7. Sprite Editor自動使用「sprite名稱_編號」做為分割出的Sprite 名稱 依需求調整剪裁情形 例如應將ninja_1與ninja_2合併，ninja_3與ninja_4合併 裁切Sprite 3/4 7 ninja_1 ninja_2 ninja_3 ninja_4
- 8.
- 9. 9-slicing是⼀種2D技術，可利用單張Sprite來組成使用各種尺寸的 圖像，常應用在建構2D環境中的牆面或地板紋理 將圖像分成九個部分，在調整Sprite的大小時，不同部位會以不同的 方式縮放或平鋪(即以圖塊形式重複)，以保持Sprite構成部份 9-slicing Sprites尺寸必須是4的倍數，在縮放時 四個角(A、C、G和I)的大小不變 B和H部分水平伸縮或重複平鋪 D和F部分垂直伸縮或重複平鋪 E部分水平和垂直伸縮或重複平鋪 9-slicing Sprites 1/4 9
- 10. 製作9-slicing Sprite 將rope_ladder圖片素材拖曳到Assets/Sprites資料夾 將Mesh Type設定為Full Rect 點擊Sprite Editor 9-slicing Sprites 2/4 10 rope_ladder圖片素材
- 11.
- 12. 使用9-slicing Sprite物件 將編輯完成的rope_ladder圖片拖曳到場景 調整Sprite Renderer元件之Draw Mode設定 Sliced 角落保持相同的大小，Sprite的頂部和底部水平 伸縮，Sprite的兩側垂直伸縮，Sprite的中心水 平和垂直伸縮以適應Sprite的大小 Tiled Sprite的頂部和底部水平伸縮，兩側邊垂直伸縮， Sprite的中間部位以舖貼磁磚方式舖滿空間 調整rope_ladder物件大小，檢視變化情形 9-slicing Sprites 4/4 12
- 13. Sprite Mask用於將Sprite部分隱藏或顯示 Sprite Mask僅會作用在具備Sprite Renderer元件性質之物件上 建立Sprite Mask 選單命令GameObject> 2D Object> Sprite Mask Sprite Mask 1/3 13
- 14. Sprite Masks屬性設定 Sprite：指定做為遮罩用的sprite (使用單色圖片或漸層圖片) Alpha Cutoff：如果alpha包含透明區域和不透明區域之間的混合，則可 手動調整將顯示區域的截止點 Custom Range：指定遮罩作用的圖層範圍 Front (起始的上層圖層) Sorting Layer：開始套用遮罩的上圖層名稱 Order in Layer：圖層中的Order值 Back (終止的下層圖層) Sorting Layer：結束套用遮罩的下圖層名稱 Order in Layer：圖層中的Order值 Sprite Sort Point：Sort的參考點，用預設值即可 Sprite Mask 2/3 14
- 15. Sprite Mask並不會自動套用到圖層中的所有Sprite物件，還要結合 Sprite物件SpriteRenderer元件之Mask Interaction屬性設定 None 不套用遮罩效果 Visible Inside Mask 顯示遮罩範圍內的部份 Visible Outside Mask 隱藏遮罩範圍內的部份 Sprite Mask 3/3 15 None Visible Inside Mask Visible Outside Mask Sprite Mask
- 16. 透過窗戶才能看到外面的風景，雲朵由左向右飄移(循環) Lab SpriteMasks應用 1/7 16
- 17. 匯入以下圖片素材到Assets/Sprites資料夾，並將圖片素材的貼圖 類型(Texture Type)設定為Sprite(2Dand UI) Lab Sprite Masks應用 2/7 17 brick window rectangle beach cloud
- 18. 選單命令File> NewScene新增場景，命名為window view 拖曳brick圖片到場景，建立brick_wall物件 Position(X,Y,Z) = (0, 0, 0) Scale(X,Y,Z) = (3, 3, 1) Draw Mode = Tiled Size(Width,Height) = (10, 5) Mask Interaction = Visible Outside Mask 拖曳window圖片到場景，建立window物件 Position(X,Y,Z) = (0.4, 0, 0) Scale(X,Y,Z) = (0.6, 0.6, 1) Order in Layer = 2 (數值愈大表示愈上層) Lab Sprite Masks應用 3/7 18
- 19. 拖曳beach圖片到場景，建立beach物件 Position(X,Y,Z)= (0.2, 0.2, 0) Scale(X,Y,Z) = (1.5, 1.5, 1) Mask Interaction = Visible Inside Mask 選單命令GameObject> 2D Object> Sprite Mask 命名為window mask Position(X,Y,Z) = (0.43, 0, 0) Scale(X,Y,Z) = (11, 10.3, 1) Sprite = rectangle Lab Sprite Masks應用 4/7 19
- 20. 拖曳cloud圖片到場景，建立cloud物件 Position(X,Y,Z)= (-8, 4.25, 0) Scale(X,Y,Z) = (0.4, 0.4, 1) Mask Interaction = Visible Inside Mask Order in Layer = 1 建立程式腳本 在Assets下新增Script資料夾 Script資料夾快顯功能表Create/C# Script，並命名為Cloud Lab Sprite Masks應用 5/7 20
- 21. using System.Collections; using System.Collections.Generic; usingUnityEngine; public class Cloud : MonoBehaviour { [SerializeField] private float speed; private Vector3 startPos; // Use this for initialization void Start () { startPos = transform.position; } // Update is called once per frame void Update () { transform.Translate(Vector3.right * Time.deltaTime * speed); } private void OnBecameInvisible() { transform.position = startPos; } } Lab Sprite Masks應用 6/7 21
- 22. 在cloud物件加上Cloud程式腳本 拖曳Cloud.cs到cloud物件上即可 測試 按下執行按鈕，驗證場景功能 Lab Sprite Masks應用 7/7 22
- 23. 遊戲場景中，有些物件間或物件與玩家間會產生互動，例如角色碰觸 陷阱，中毒失血；子彈擊中戰機，戰機爆炸 碰撞器像是包覆在物件上的防護膜，代表物件發生碰撞效應的範圍 Sprite物件加上2D碰撞器即可偵測與其它物件或玩家互動情形，並透 過程式腳本主行事件回應作業 選單命令Component> Physics 2D，選取合適的碰撞器 2D碰撞器 (Collider 2D) 1/3 23 Circle Collider 2D Box Collider 2D Polygon Collider 2D Edge Collider 2D Capsule Collider 2D Composite Collider 2D
- 24. Box Collider2D (方框碰撞器) 適用於矩形物體 Circle Collider 2D (圓形碰撞器) 適用於圓形物體 Edge Collider 2D (邊緣碰撞器) 適用於邊界、地板或天花板 可編輯/調整線段節點 即使將它編輯成矩形，也只有在線段上才會碰撞，內部不會產生碰撞 Polygon Collider 2D (多邊形碰撞器) 能較精準貼近不規則物體，但會耗用較多運算資源 2D碰撞器 (Collider 2D) 2/3 24
- 25. Capsule Collider2D (膠囊碰撞器) 適用於膠囊形狀物體 Composite Collider 2D (複合碰撞器) 用來將子物件的碰撞器合併成⼀個碰撞器 子物件勾選Used By Composite 對已附加2D碰撞器元件的物件，我們可在物件的程式腳本中撰寫 OnMouseEnter()、OnMouseExit()、OnMouseDown()等事件函式來 處理滑鼠作業 2D碰撞器 (Collider 2D) 3/3 25
- 26.
- 27. 選單命令File> NewScene新增場景，命名為sprite button 將開關及獨眼怪圖片素材拖曳(匯入)到Assets/Sprites資料夾，並 將圖片素材的貼圖類型(Texture Type)設定為Sprite(2D and UI) Lab 設計動態開關 2/9 27 eye_monster sw_off sw_on
- 28. 拖曳eye_monster到場景，建立monster物件 物件名稱改為monster Position(X,Y,Z) = (0, 0, 0) Scale(X,Y,Z) = (1, 1, 1) 拖曳sw_on到場景，建立sw物件 物件名稱改為sw Position(X,Y,Z) = (0, -3, 0) Scale(X,Y,Z) = (0.5, 0.5, 1) Lab 設計動態開關 3/9 28
- 29. 在sw物件加入2D碰撞偵測 選取sw物件 選單命令Component> Physics 2D> Box Collider 2D Lab 設計動態開關 4/9 29
- 30.
- 31. SW_Controller程式碼 public classSW_Controller : MonoBehaviour{ [SerializeField] private Sprite[] sprite_texture=new Sprite[2]; [SerializeField] private GameObject monster; //monster物件參照 private int sw_status = 1; private SpriteRenderer sprite_renderer; //sw物件的SpriteRenderer元件參照 // Use this for initialization void Start(){ sprite_renderer = this.GetComponent<SpriteRenderer>(); } void OnMouseDown(){ sw_status = 1 - sw_status; sprite_renderer.sprite = sprite_texture[sw_status]; //替換sw圖片 monster.SetActive(sw_status == 1); //更新monster物件狀態 } } Lab 設計動態開關 6/9 31
- 32. 設定sw元件之SpriteTexture屬性內容 拖曳sw_off圖片到Element0欄 拖曳sw_on圖片到Element 1欄 Lab 設計動態開關 7/9 32
- 33. 設定sw元件之Monster屬性內容 拖曳monster物件到Monster欄 Lab設計動態開關 8/9 33
- 34. 確認sw物件屬性設定 測試 按下執行按鈕，使用滑鼠點擊開關，檢驗是否符合程式腳本設計動作 Lab 設計動態開關 9/9 34
- 35. 程式腳本是透過物件名稱或物件標籤來分辨場景中的物件 場景中的物件名稱不可重複 不同物件可設定相同的標籤 標籤設定 點擊Add Tag…可新增標籤 在程式腳本中辨識場景物件 35
- 36. 新增場景 將不規則按鈕素材圖片拖曳到Assets/Sprites目錄 Lab設計不規則按鈕 1/12 36 Image_background button_bottombutton_center button_leftbutton_right button_top 一般按鈕介面 不規則按鈕介面
- 37. 設定Button_center、Button_right、Button_top、Button_left 及Button_bottom素材圖片屬性 TextureType = Sprite(2D and UI) 勾選Read/Write Enable Lab 設計不規則按鈕 2/12 37
- 38. 選單命令GameObject> UI>Image 更名為Image_background 重置Rect Transform 拖曳button_background到ImageSource Image欄 Width = 360，Height = 360 Lab 設計不規則按鈕 3/12 38
- 39. 選單命令GameObject> UI>Button 更名為Button_center 刪除Text子物件 重置Rect Transform 拖曳button_center到ImageSource Image欄 Width = 140，Height = 140 Lab 設計不規則按鈕 4/12 39
- 40. 選單命令GameObject> UI>Button 更名為Button_right 刪除Text子物件 重置Rect Transform 拖曳button_right到ImageSource Image欄 Pos X = 110 Width = 84，Height = 188 Lab 設計不規則按鈕 5/12 40
- 41. 選單命令GameObject> UI>Button 更名為Button_top 刪除Text子物件 重置Rect Transform 拖曳button_top到ImageSource Image欄 Pos Y = 110 Width = 188，Height = 84 Lab 設計不規則按鈕 6/12 41
- 42. 選單命令GameObject> UI>Button 更名為Button_left 刪除Text子物件 重置Rect Transform 拖曳button_left到ImageSource Image欄 Pos X = -110 Width = 84，Height = 188 Lab 設計不規則按鈕 7/12 42
- 43. 選單命令GameObject> UI>Button 更名為Button_bottom 刪除Text子物件 重置Rect Transform 拖曳button_bottom到ImageSource Image欄 Pos Y = -110 Width = 188，Height = 84 Lab 設計不規則按鈕 8/12 43
- 44. 選單命令GameObject> UI>Text 更名為Message 重置Rect Transform Pos Y = 200 Width = 300，Height = 100 Text = "" Font Size = 20 Alignment = Center Color = Yellow Lab 設計不規則按鈕 9/12 44
- 45. 選單命令Assets> Create>C# Script，命名為IrregularButton using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class IrregularButton : MonoBehaviour { [SerializeField] private Text message; void Start() { GetComponent<Image>().alphaHitTestMinimumThreshold = 0.1f; } public void OnButtonClicked() { message.text = gameObject.name + " was clicked"; } } Lab 設計不規則按鈕 10/12 45
- 46. 套用IrregularButton程式腳本到Button_center物件上 拖曳Message物件到IrregularButton(Script)之Message欄 在Button(Script)新增On Click()函式 設定使用物件自身IrregularButton程式腳本中 的OnButtonClicked()函式做為OnClick()函式 拖曳Button_center到Object欄 以IrregularButton.OnButtonClicked() 做為On Click()函式 Lab 設計不規則按鈕 11/12 46
- 47.