使用剛體、碰撞器與觸發器， 遊戲圖層管理，碰撞管理，探險遊戲關卡設計

1. 2D移動與碰撞處理II
Revised on November 1, 2019
 使用剛體、碰撞器與觸發器
 遊戲圖層管理
 碰撞管理
 探險遊戲關卡設計

2.  剛體是具物理性質的元件，可使物件在物理引擎控制下擬真運動
 由選單命令Component> Physics 2D> Rigidbody 2D為物件套用2D
剛體元件
 物理性質：質量(Mass)、移動阻力( Linear Drag)、旋轉阻力(Angular
Drag)、重力(Gravity Scale)
 運動剛體(Kinematic)不受重力及外力影響
 埸景中的活動物件可使用剛體來實現
 真實世界兩個物體撞在⼀起會發⽣碰撞，遊戲世界裡要透過碰撞器來
模擬現實世界的碰撞情形
 碰撞器像是包覆在物件上的透明防護罩，代表物件實體邊界
 加了碰撞器之剛體物件會被其它碰撞器阻隔
剛體、碰撞器與觸發器 1/5
2

3.  我們可依物件外觀，由選單命令Component> Physics 2D中選用合適
的碰撞器
 Box Collider 2D(方框碰撞器)
 適用於矩形物體
 Circle Collider 2D(圓形碰撞器)
 適用於圓形物體
 Edge Collider 2D(邊緣碰撞器)
 適用於邊界、地板或天花板
 可編輯/調整線段節點，即使編輯成封閉迴路，也只有在線段上才會碰
撞，其內部不會產⽣碰撞
剛體、碰撞器與觸發器 2/5
3
Circle Collider
Box Collider

4.  Polygon Collider 2D(多邊形碰撞器)
 能較精準貼近不規則物體，但耗用較多運算資源
 Capsule Collider 2D(膠囊碰撞器)
 適用於膠囊形狀物體
 Composite Collider 2D(複合碰撞器)
 用來將子物件的碰撞器(Box Collider 2D及Polygon Collider 2D)
合併成⼀個碰撞器
 子物件勾選Used By Composite
 會自動附加Rigidbody 2D元件
剛體、碰撞器與觸發器 2/5
4
Polygon Collider Capsule Collider
Composite Collider 2D
Polygon Collider
Box Collider

5.  兩個具有碰撞器之物件相互碰觸時，程式腳本可以實作
OnCollisionXXX2D函式來處理碰撞作業
void OnCollisionEnter2D (Collision2D other) {
//進入碰撞時
}
void OnCollisionStay2D(Collision2D other) {
//在碰撞物上時
}
void OnCollisionExit2D(Collision2D other) {
//結束碰撞時
}
剛體、碰撞器與觸發器 4/5
5

6.  觸發器
 當碰撞器被設定Is Trigger屬性，即成為觸發器；其它碰撞器物件可以穿
過觸發器物件
 通常道具元件會加上觸發器
 在物件之程式腳本可使用下列函式來處理碰撞事件
void OnTriggerEnter2D(Collider2D other) {
//進入觸發範圍時
}
void OnTriggerStay2D(Collider2D other) {
//在觸發物上時
}
void OnTriggerExit2D(Collider2D other) {
//脫離觸發範圍時
}
剛體、碰撞器與觸發器 5/5
6

7.  更新座標方式 (自行計算位移，物體移動⽣硬不自然)
transform.Translate (Vector3.up * 0.1f);
transform.Translate (Vector3.down * 0.1f);
transform.Translate (Vector3.right * 0.1f);
transform.Translate (Vector3.left * 0.1f);
 對剛體物件施力，由物理引擎處理剛體物件移動
rigidbody2D = this.GetComponent<Rigidbody2D> ();
Vector2 force2D = Vector2.zero;
force2D.y += forceValue;
// force2D.x += forceValue;
rigidbody2D.AddForce (force2D);
遊戲物件移動控制
7

8. 遊戲圖層及碰撞管理 1/4
8
 預設場景上的物件都是放置在Default圖層
 Layer用來做遊戲物件碰撞管理
 Sorting Layer用來管理場景物件前後層次
 同Sorting Layer之物件，Order in Layer
數值較大者在上層；若Order in Layer值也
相同，則由Position Z值(與Main Camera
遠近)決定
 Layer屬性與Sorting Layer屬性二者並不相關

9.  管理圖層
 選單命令Edit> Project Settings> Tags and Layers管理圖層
 在Sorting Layers增加Background、Interactive、Player圖層
遊戲圖層及碰撞管理 2/4
9
下層
上層新增圖層

10.  將在Sorting Layers中加入的圖層，同步更新到Layers清單中
遊戲圖層及碰撞管理 3/4
10

11.  碰撞管理
 選單命令Edit> Project Settings> Physics 2D進行碰撞管理
 設定Layer Collision Matrix
 預設全部圖層間都會進行碰撞檢測處理
 依據遊戲設計需求，設定圖層間的碰撞檢核
遊戲圖層及碰撞管理 4/4
11

12.  忍者可左、右移動、跳躍及射飛標
 忍者必須先射飛鏢消滅飛龍，才能躍過山溝
 忍者接觸到毒霧會受傷
 忍者靠近寶箱時會顯示提示箭頭，此時按空白鍵可開啟寶箱
探險遊戲關卡設計
12

13.  新增2D遊戲專案，將預設場景以main名稱存檔
 在Assets下建立以下資料夾
 Animations
 Prefabs
 Scripts
 Sprites
 SpritesNinja
建立遊戲專案 1/2
13

14.  將忍者動作分鏡圖匯入到AssetsSpritesNinja資料夾
 將background.png、trap0.png、trap1.png、trap2.png、
tresure0.png、treasure1.png、up.png、dragon.png素材滙入到
AssetsSprites資料夾
 Main Camera
 Size設定為16
建立遊戲專案 2/2
14

15.  選單命令Edit> Project Settings> Tags and Layers
 在Sorting Layers增加Background、Interactive、Player圖層
 在Layers加入Background、Interactive、Player圖層
建立遊戲圖層 1/2
15

16.  設定圖層碰撞關係
 選單命令Edit> Project Settings> Physics 2D進行碰撞管理
 設定Layer Collision Matrix，啟用以下碰撞檢核
 Player與Backgound
 Player與Interactive
建立遊戲圖層 2/2
16

17.  將background.png拖曳到場景，命名為Background
 Position(X,Y,Z) = (0, 0, 0)
 Scale(X,Y,Z) = (8, 8, 1)
 Layer = Background
 Sorting Layer = Background
 設定地面邊界
 選單命令Component> Physics 2D> Edge Collider 2D加入邊緣碰
撞器
 點擊Edit Collider編輯邊緣碰撞器，使其貼齊山谷左側地面
 選單命令Component> Physics 2D> Edge Collider 2D加入邊緣碰
撞器
 點擊Edit Collider編輯邊緣碰撞器，使其貼近貼齊山谷右側地面
建造背景及地面邊界
17
Edge Collider 2D
Edge Collider 2D

18.  點選AssetsSpritesdragon
 Sprite Mode = Multiple
 點擊Sprite Editor
 套用自動分割，並調整每個分鏡圖片座標基準點(Pivot)到胸口位置
建立飛龍 1/4
18
Pivot

19.  將dragon_0.png拖曳到場景，命名為Dragon
 Position(X,Y,Z) = (-3.5, -4, 0)
 Rotation(X,Y,Z) = (0, 180, 0)
 Scale(X,Y,Z) = (3, 3, 1)
 Layer = Interactive
 Sorting Layer = Interactive
 設定碰撞器
 選單命令Component> Physics 2D> Circle Collider 2D加入圓形
碰撞器
建立飛龍 2/4
19

20.  製作飛龍動畫
 選取Dragon物件
 選單命令Window> Animation> Animation開啟動畫編輯器，使用
dragon分鏡素材建立編輯飛龍動畫
建立飛龍 3/4
20

21.  加入Dragon程式腳本，飛龍被飛鏢擊中會損血，⽣命值歸零時消失
public class Dragon : MonoBehaviour {
[SerializeField]
private int life = 3;
// Use this for initialization
void Start () {
}
// Update is called once per frame
void Update () {
}
void OnTriggerEnter2D(Collider2D other) {
if (other.tag == "dart") life--;
if (life == 0) Destroy(this.gameObject);
}
}
建立飛龍 4/4
21

22.  點選AssetsSpritesNinja忍者動作分鏡圖片
 Texture Type = Sprite(2D and UI)
 透過Sprite Editor將所有忍者動作分鏡圖片的座標基準點(Pivot)
調整到角色雙腳底部重心位置
建立忍者角色 1/3
22
Pivot

23.  將AssetsSpritesNinjaidle_000拖曳到場景，命名為Ninja
 Position(X,Y,Z) = (-26, -9, 0)
 Sorting Layer = Player
 Layer = Player
 選單命令Component> Physics 2D> Rigidbody 2D加入剛體元件
 勾選Use Auto Mass
 Gravity Scale = 1
 勾選Freeze Rotation Z
 選單命令Component> Physics 2D> Capsule Collider 2D加入膠囊碰
撞器
 適當調整Offset(X, Y)及Size(X, Y)
建立忍者角色 2/3
23

24.  製作角色動畫
選單命令Window> Animation> Animation開啟動畫編輯器，使用Ninja
分鏡素材建立以下動畫
 建立idle動畫(1秒)
 建立run動畫(0.5秒)
 建立jump動畫(1秒)
 建立throw動畫(1秒)
建立忍者角色 3/3
24

25.  拖曳Kunai到場景中，命名為Dart
 Rotation(X,Y,Z) = (0, 0, -90)
 Layer = Player
 Sorting Layer = Player
 Tag = dart
 選單命令Component> Physics 2D> Rigirbody 2D加入剛體
 Gravity Scale=0
 選單命令Component> Physics 2D> Box Collider 2D加入矩形碰撞器
 勾選Is Trigger
製作飛鏢預製物件 1/3
25

26.  在Dart物件加上Dart程式腳本
public class Dart : MonoBehaviour{
[SerializeField]
private float speed = 8;
void Start(){
if (this.transform.localEulerAngles.y == 180) //飛鏢向左
speed = -speed;
GetComponent<Rigidbody2D>().velocity = new Vector2(speed, 0.0f);
}
private void OnBecameInvisible(){ //飛鏢飛出畫面
Destroy(this.gameObject);
}
void OnTriggerEnter2D(Collider2D other) { //飛鏢射到其它物件
Destroy(this.gameObject);
}
}
製作飛鏢預製物件 2/3
26

27.  將Dart之Speed欄位設為10
 執行測試，飛鏢會向右射出，飛出場景時會
自動消失
 將Dart之Rotation Y欄位設為180
 執行測試，飛鏢會向左射出，飛出場景時會
自動消失
 測試無誤後，由Hierarchy面板將Dart物件
拖曳到Prefabs資料夾，做成預製物件
 刪除場景上Dart物件
製作飛鏢預製物件 3/3
27

28.  選單命令GameObject> Create Empty，更名為Dart Spawn
 Position(X,Y,Z) = (0, 0, 0)
 Rotation(X,Y,Z) = (0, 0, -90)
 Scale(X,Y,Z) = (1, 1, 1)
 Layer = Player
 拖曳Dart Spawn成為Ninja子物件
 調整Dart Spawn位置到Ninja之前端，Position(X,Y,Z) = (2.1, 2.15, 0)
設定飛鏢發射點
28

29.  在Ninja物件加上NinjaController程式腳本
public class NinjaController : MonoBehaviour{
[SerializeField]
private GameObject dart;
[SerializeField]
private Transform dartSpawn;
private int facing = 0; //0表示主角面向右，1表示面向左
...
public void ThrowDart(){
Instantiate(dart, dartSpawn.position, dartSpawn.rotation);
}
}
飛鏢發射控制 1/3
29

30.  拖曳AssetsPrefabsDart預製物件到Ninja Controller之Dart欄
 拖曳Dart Spawn物件到Ninja Controller之Dart Spawn欄
飛鏢發射控制 2/3
30

31.  修改ninja_throw動畫，在時間軸0:15處新增Animation Event，設
定ThrowDart()做為事件函式
飛鏢發射控制 3/3
31

32.  選取Ninja物件
 選單命令Window> Animator，開啟Animator編輯器
 建立動畫狀態之間轉換
忍者動作控制 1/12
32

33.  建立⼀個名為action的Int參數
 設定Any state jump狀態切換條件
 取消Has Exit Time
 取消Settings/Fixed Duration
 Settings/Transtion Duration = 0
 取消Settings/Can Transition To Self
 在Consitions中新增action Equals 2
忍者動作控制 2/12
33

34.  設定idle run狀態切換條件
 取消Has Exit Time
 Settings/Transtion Duration = 0
 在Consitions中新增action Equals 1
忍者動作控制 3/12
34

35.  設定idle throw狀態切換條件
 取消Has Exit Time
 Settings/Transtion Duration設為0
 在Consitions中新增Action Equals 3
忍者動作控制 4/12
35

36.  設定jump run狀態切換條件
 取消Has Exit Time
 Settings/Transtion Duration = 0
 在Consitions中新增action Equals 1
忍者動作控制 5/12
36

37.  設定run idle狀態切換條件
 取消Has Exit Time
 Settings/Transtion Duration = 0
 在Consitions中新增action Equals 0
忍者動作控制 6/8
37

38.  設定jump idle狀態切換條件
 取消Has Exit Time
 Settings/Transtion Duration = 0
 在Consitions中新增action Equals 0
忍者動作控制 7/12
38

39.  設定throw idle狀態切換條件
 勾選Has Exit Time
 Settings/Exit Time = 1
 Settings/Transtion Duration設為0
忍者動作控制 8/12
39

40.  更新NinjaController程式腳本
public class NinjaController : MonoBehaviour{
...
private int facing = 0; //0表示主角面向右，1表示面向左
[SerializeField]
private int speed = 10; //移動速度
private Animator animator;
private Rigidbody2D rigid;
private Vector3 startPos; //主角初始位置
private bool isGround = true; //主角在地面
private int action = 0; //主角目前動作，0:閒置，1:跑，2:跳躍，3:射飛鏢
void Start(){
animator = this.GetComponent<Animator>();
startPos = transform.position;
rigid = this.GetComponent<Rigidbody2D> ();
}
忍者動作控制 9/12
40

41. void Update() {
if (isGround) {
if (Input.GetKeyUp (KeyCode.RightArrow) || Input.GetKeyUp (KeyCode.LeftArrow)
|| Input.GetKeyUp (KeyCode.X))
action = 0;
if (Input.GetKey (KeyCode.RightArrow)) { //向右鍵
facing = 0;
action = 1;
}
if (Input.GetKey (KeyCode.LeftArrow)) { //向左鍵
facing = 1;
action = 1;
}
if (Input.GetKey (KeyCode.UpArrow)) action = 2; //向上鍵
if (Input.GetKey (KeyCode.X)) action = 3; //X鍵
PlayAnimation();
}
忍者動作控制 10/12
41

42. private void PlayAnimation() {
switch (action){
case 1: //跑步，必須依據facing調整角色方向
this.transform.eulerAngles = new Vector3 (0, 180 * facing, 0);
this.transform.Translate (speed * Time.deltaTime, 0, 0);
break;
case 2: //跳躍
if (isGround) {
isGround = false;
if (facing == 0)
rigid.velocity = new Vector2(speed/2, rigid.velocity.y + speed);
else
rigid.velocity = new Vector2(-speed/2, rigid.velocity.y + speed);
}
break;
}
animator.SetInteger("action", action); //變更角色動畫
}
忍者動作控制 11/12
42

43. private void OnBecameInvisible(){ //主角掉落山谷
transform.position = startPos;
}
void OnCollisionEnter2D(Collision2D other) {
if (!isGround && other.gameObject.name == "Background") { //主角回到地面
isGround = true;
action = 0;
}
}
...
}
 測試遊戲專案
忍者動作控制 12/12
43

44.  將AssetsSpritestrap0拖曳到場景
 命名為Trap
 Position(X,Y,Z) = (10, -11, 0)
 Rotation(X,Y,Z) = (0, 0, -3)
 Scale(X,Y,Z) = (0.6, 0.6, 1)
 Layer = Interactive
 Sorting Layer = Interactive
 Tag = trap
建立陷阱道具 1/2
44

45.  選單命令Component> Physics 2D> Circle Collider 2D加入圓形碰
撞器
 勾選Is Trigger
 Offset Y = -2.25，讓碰撞邊界貼近陷阱外緣
建立陷阱道具 2/2
45

46.  選取Trap物件
 選單命令Window> Animation> Animation開啟動畫編輯器，使用trap
分鏡素材建立trap動畫
製作陷阱道具動畫
46

47.  更新NinjaController程式腳本，碰到陷阱時忍者呈現受傷狀態
public class NinjaController : MonoBehaviour{
...
private int action = 0; //主角目前動作，0:閒置，1:跑，2:跳躍，3:射飛鏢
private float alpha = 0.0f;
private float da = -0.1f;
private SpriteRenderer playerSprite;
private bool isInjure = false; //主角受傷旗號
void Start(){
...
rigid = this.GetComponent<Rigidbody2D> ();
playerSprite = this.GetComponent<SpriteRenderer> ();
}
更新忍者程式腳本 1/3
47

48. void Update () {
...
PlayAnimation ();
if (isInjure) { //顯示主角受傷效果
alpha += da; //使主角淡入淡出顯示
playerSprite.material.color = new Color (1f, 1f, 1f, alpha);
if (alpha > 1.0f || alpha < 0.0f) da = -da;
}
}
更新忍者程式腳本 2/3
48

49. void OnTriggerEnter2D(Collider2D other) {
if (other.gameObject.tag == "trap") //主角碰到陷阱
isInjure = true; //主角為受傷狀態
}
void OnTriggerExit2D(Collider2D other) {
if (other.gameObject.tag == "trap") { //主角脫離陷阱
isInjure = false; //主角為一般狀態
playerSprite.material.color = new Color(1f, 1f, 1f, 1f); //復原主角狀態
}
}
...
}
更新忍者程式腳本 3/3
49

50.  將AssetsSpritestreasures0拖曳到場景
 命名為Treasure
 Position(X,Y,Z) = (24.5, -8, 0)
 Scale(X,Y,Z) = (0.6, 0.6, 1)
 Layer = Interactive
 Sorting Layer = Interactive
 Tag = treasure
建立寶箱道具 1/2
50

51.  選單命令Component> Physics 2D> Box Collider 2D加入矩形碰撞器
 勾選Is Trigger
 將up素材拖曳到treasure物件上，做為treasure的子物件
 命名為up
 Position(X,Y,Z) = (0, 5, 0)
 Size(X,Y,Z) = (0.6, 0.6, 1)
 Sorting Layer = Interactive
 Layer = Interactive
建立寶箱道具 2/2
51

52.  在Treasure物件加入TreasureControl程式腳本
public class TreasureControl : MonoBehaviour {
[SerializeField]
private Sprite open; //寶箱已開啟之Sprite圖片
public bool isOpen; //寶箱狀態
private bool isShow = false; //箭頭顯示旗號
private float alpha = 0.0f;
private float da = -0.01f;
private GameObject prompt;
private SpriteRenderer upSprite;
void Awake () {
prompt = GameObject.Find("up"); //箭頭物件參照
prompt.gameObject.SetActive (isShow); //隱藏箭頭
}
void Start () {
upSprite = prompt.GetComponent<SpriteRenderer> ();
}
設計寶箱程式腳本 1/4
52

53. void Update () {
if (isOpen) { //寶箱已被開啟
this.GetComponent<SpriteRenderer> ().sprite = open;
prompt.gameObject.SetActive (false); //隱藏提示箭頭
} else {
if (isShow) {
alpha += da; //淡入淡出動態顯示提示箭頭
upSprite.material.color = new Color (1f, 1f, 1f, alpha);
if (alpha>1.0f || alpha<0.0f) da = -da;
}
}
設計寶箱程式腳本 2/4
53

54. void OnTriggerEnter2D (Collider2D other) { //玩家到達寶箱位置
if (other.gameObject.name == "Ninja") {
isShow = true;
prompt.gameObject.SetActive (isShow); //顯示提示箭頭
}
}
void OnTriggerExit2D (Collider2D c) { //玩家離開寶箱位置
if (c.gameObject.name == "Ninja") {
isShow = false;
prompt.gameObject.SetActive (isShow); //隱藏提示箭頭
alpha = 0.0f;
}
}
}
設計寶箱程式腳本 3/4
54

55.  將AssetsSpritestreasures1素材(寶箱開啟圖片)拖曳到寶箱之
Treasure Control下的Open屬性
設計寶箱程式腳本 4/4
55

56.  更新NinjaController程式腳本，到達寶箱處按空白鍵開啟寶箱
public class NinjaController : MonoBehaviour{
...
void OnTriggerStay2D (Collider2D other) {
if (other.gameObject.tag == "treasure") //主角在寶箱處
if (Input.GetKeyDown (KeyCode.Space)) //按下空白鍵取得寶藏
c.gameObject.GetComponent<TreasureControl>().isOpen = true;
}
}
更新忍者程式腳本
56

57.  PlayerPrefs可以在應用程式內做資料存取的動作，可存取的資料型
態包括int、float、string三種類型
 儲存資料
 PlayerPrefs.SetInt("儲存名稱I", 整數變數);
 PlayerPrefs.SetFloat("儲存名稱F", 浮點數變數);
 PlayerPrefs.SetString("儲存名稱S", 字串變數);
 讀取資料
 整數變數 = PlayerPrefs.GetInt("儲存名稱I");
 浮點數變數 = PlayerPrefs.GetFloat("儲存名稱F");
 字串變數 = PlayerPrefs.GetString("儲存名稱S");
設計儲存點 1/2
57

58.  清除全部資料
 PlayerPrefs.DeleteAll();
 清除個別變數資料
 PlayerPrefs.DeleteKey("儲存名稱I");
設計儲存點 2/2
58