遊戲筆記|類似小朋友下樓梯的休閒遊戲《Speed Down》|Unity 2D

耳東
4 min readOct 9, 2021

這次要一起學習開發的小遊戲是M Studio (Mchael Wang)製作的《SpeedDown》系列教程,類似小朋友下樓梯的休閒遊戲ヽ(^-^ ),
素材連結 Pixel Adventure 1

📁文章大綱

閱讀說明

學習筆記

單元一:項目介紹與場景搭建
畫面設定新增背景讓背景動起來、❓建立頂部的尖刺障礙

單元二:用物理組件製作平台(Joint 2D)
設置基礎平台設置關卡障礙平台讓平台向上移動感應消除物件

單元三:製作遊戲人物與可視化範圍檢測
添加角色動畫動畫事件切換設定角色與場景物件互動

單元四:LineRenderer組件與一些小調整
在鐵鍊和鐵球間畫線 Line Renderer建立Prefab(預製物件)

單元五:隨機生成平台與代碼
隨機生成物件、❓Prefab物件生成資料夾設定限制生成數量

單元六:遊戲管理與UI(GameManager)
計時功能重新開始離開遊戲切換面板(Panel)

推坑區

後記

閱讀說明

  1. 本次遊戲開發使用以下資源學習,使用資源同時別忘了為創作者按Like。
    · Unity 2D遊戲教程/創作者M Studio (Mchael Wang)
    · Unity Asset Store下載素材 Pixel Adventure 1/創作者Pixel Frog
  2. 本文非遊戲開發教學,請觀看遊戲教程僅提供個人學習筆記供參考,如果有誤歡迎更正。
繼續閱讀 | 回文章大綱

學習筆記

單元一:項目介紹與場景搭建

畫面設定新增背景讓背景動起來建立頂部的尖刺障礙

1. 畫面設定

· 製作手機遊戲需切換平台
File> BuidSetting> Platform:Android> Switch Platform
· 在Game視窗調整寬高比Aspect
· [05:59] 調整MainCamera的Size大小以檢視完整遊戲畫面

2.新增背景

新增3DQuad物件,將選定圖片加入材質球並設置於背景。
[02:10] 建立背景 新增3DQuad修改長寬作為背景
[04:00] 背景圖設定 以選定圖片分辨率設定Pexels Per Unit> Apply
[04:58] 背景圖設定 進階(Advanced): 循環模式(Wrap Mode)>Repeat
[03:11] 材質球 添加材質Create Material,修改Shader為Unit Texture
[05:08] 材質球 Base(RGB) Tilling調整X.Y設定圖片重複數

3.讓背景動起來 Base(RGB) Offset

[06:20]新建腳本拖進Background

4.建立頂部的尖刺障礙

1. unit4[00:20]
尖刺圖片設定 進階(Advanced):
循環模式(Filter Mode)>Point(no filter)調整前為Bilinear看起來會模糊。

2. [12:14] 讓物件於畫面中對齊的方法
選取物件按w切換成移動,長按V並晃動滑鼠可選取到物件邊緣,
(保持繼續按著V)拖曳物件可貼齊網格。

3.[13:00] 添加碰撞器

(1)為所有尖刺新增Polygon Collider 2D(2D多邊形碰撞器)
並啟用Used By Composite。
(2)新增Composite Collider 2D(2D複合碰撞器)修改Offset的x.y值
以調整碰撞器邊緣。
(3)新增Composite Collider 2D的同時Component會一併新增
Rigidbody 2D(2D剛體),將齊設置為Static 靜止。
(4) unit2[16:47]
Composite Collider 2D要勾選is Trigger 讓他判斷碰撞但沒有實際效果

繼續閱讀 | 回文章大綱

單元二:用物理組件製作平台Joint 2D

設置基礎平台設置關卡障礙平台讓平台向上移動感應消除物件

1.設置基礎平台

進入關卡後玩家角色會降落在初始平台

初始平台 BasicPlatform

(1)添加素材
分辨率設定16 Pexels Per Unit> Apply,拖曳至Hierarchy新增物件。
(2)建立動畫 (保存在Assets>Animation>Platform)
Animation>Create>BasicPlatform,調整採樣率20~50
(3)添加碰撞器Collider:Box Collider 2D

2.設置關卡障礙平台

玩家角色站在旋轉平台 上會傾斜。

旋轉平台 RotatePlatform
(1)添加素材
分辨率設定16 Pexels Per Unit> Apply,拖曳至Hierarchy新增物件。
(2)建立動畫- 儲存路徑和採樣率參考基本平台設定
Animation>Create>RotatePlatform
(3)添加碰撞器Collider:Box Collider 2D
(4)添加Hinge Joint 2D(繞著軸心旋轉)修改轉速100、角度45。

玩家角色站在風扇平台 上會向上彈跳。

風扇平台 FanPlatform
(1)添加素材
分辨率設定16 Pexels Per Unit> Apply,拖曳至Hierarchy新增物件。
(2)建立動畫 - 儲存路徑和採樣率參考基本平台設定
Animation>Create>Fan_idle 生成時為閒置(默認狀態)
Animation>Create>Fan_run 玩家採在平台上才開始運轉
(3)新增FanPlatform.cs以設定動畫
(4)添加碰撞器Collider:Box Collider 2D,
使用OnCollisionEnter2D判斷碰撞。

玩家角色碰觸 鐵球 會切換dead動畫並打開GameOverUI。

鐵球 SpikeBall
(1)添加素材
分辨率設定16 Pexels Per Unit> Apply,拖曳至Hierarchy新增物件。
(2)將鎖鏈和鐵球以Distance Joint 2D 等距離連接
(3)添加碰撞器Collider:Circle Collider 2D(碰撞事件發生時,物件本身不會動)。

3.讓平台向上移動 MovePlatform()

Platform.cs 調整遊戲物件y軸使平台往上升

4.感應消除物件

Platform.cs 利用偵測TopLine的Y軸完成消除物件
繼續閱讀 | 回文章大綱

單元三:製作遊戲人物與可視化範圍檢測

添加角色動畫動畫事件切換設定角色與場景物件互動

1.添加角色與動畫

(1)添加素材
分辨率設定32 Pexels Per Unit> Apply,拖曳至Hierarchy新增物件。
(2)添加碰撞器Collider:Box Collider 2D
(3)建立動畫
Animation>Create>idle 生成時為閒置(默認狀態)
Animation>Create>run
Animation>Create>fall
Animation>Create>dead

2.動畫事件切換設定

新增PlayerController.cs以設定動畫
(1) Run
左右移動時切換run動畫([03:05]記得更改面朝方向)
(2) Fall
添加感應器CheckPoint 切換fall動畫
以Gizmos.DrawWireSphere繪製感測區域範圍(遊玩時不會顯示)
添加bool isOnGround=Physics2D.OverlapCircle();判斷是否在地面上
(3) Dead
使用OnTriggerEnter2D判斷碰撞”Spike”標籤,觸發”dead”動畫。
開啟Animator在dead動畫的最後一加入事件PlayerDead();

3.角色與場景物件互動

[16:37]玩家碰到風扇平台FanPlatform(Tag"Fan")會向上彈跳

繼續閱讀 | 回文章大綱

單元四:LineRenderer組件與一些小調整

在鐵鍊和鐵球間畫線 Line Renderer建立Prefab(預製物件)

1.在鐵鍊和鐵球間畫線 Line Renderer

2.建立Prefab(預製物件)

[04:50]建立Prefab的方法

繼續閱讀 | 回文章大綱

單元五:隨機生成平台與代碼(Spawn Platforms)

隨機生成物件Prefab物件生成資料夾設定限制生成數量

1.隨機生成物件Instantiate

建立遊戲物件生成位置StartLine(添加Box Collider 2D)
撰寫隨機生成的腳本

Spawner.cs從StartLine的X軸隨機生成平台清單內的物件

2.Prefab物件生成資料夾設定

讓Prefab物件生成時建立在Hierarchy中的StartLine的方法如下:
(❓如果沒有這樣做的話,物件會直接在Hierarchy中生成)

 GameObject newPlatform =Instantiate(platforms[index],spwanPosition,Quaternion.identity); 
//生成(內容,位置,角度)
newPlatform.transform.SetParent(this.gameObject.transform);

3.限制生成數量

繼續閱讀 | 回文章大綱

單元六:遊戲管理與UI(GameManager)

計時功能重新開始離開遊戲切換面板(Panel)

建立Empty遊戲物件為GameManger,並撰寫GameManger.cs

1.計時功能

添加UI>Text >命名為Time,顯示秒數00

timeSinceLevelLoad在場景加載的時候會重新計算時間
timeScore.text = Time.timeSinceLevelLoad.ToString(“00”);

計時功能

設計遊戲結束的Panel,包含RestartGame和Quit兩個Button,
寫進GameManger.cs,寫完記得將方法添加進GameObject裡面:

2.重新開始 RestartFame() [04:30]

public void RestartGame()
{
 SceneManager.LoadScene(SceneManager.GetActiveScene().name);
 Time.timeScale = 1;
}

3.離開遊戲 Quit() [05:04]

public void Quit()
{
 Application.Quit();
}

4.切換面板(Panel) [05:53]

遊戲結束的Panel平常不用打開,是透過遊戲結束的判斷呼叫這個面板的,因此先把Inspector的核取方塊取消掉,然後在GameManager.cs撰寫(bool dead)去觸發gameOverUI.SetActive。

public class GameManager : MonoBehaviour{
 public GameObject gameOverUI; //記得宣告gameOverUI
 .
 .(略)
 .
 public static void GameOver(bool dead)
 {
  if (dead)
  {
  instance.gameOverUI.SetActive(true);
   Time.timeScale = 0f;
  };
 }
}

PlayerController.cs進行調用

public class PlayerController: MonoBehaviour{
 .
 .(略)
 . 
 public void PlayerDead()
 {
  playerDead = true;
  GameManager.GameOver(playerDead);
 }
 .
 .
}
繼續閱讀 | 回文章大綱

後記

加入Unity工程師學習群組後,我很想利用這樣的機會紮好底子在日後完成更多實踐,除了和群組一起學習的時間以外,也幫自己挖坑(網路上有很多大神提供的詳細教學)。

自學的過程除了功能實現的瞬間獲得成就感以外,也會不小心進入感到枯燥無力的自我懷疑迴圈,如果你正在透過這份筆記學習,希望能讓你感覺到我們正一起努力(˶‾᷄ ⁻̫ ‾᷅˵)。

如果你完成這個小遊戲歡迎分享心得 https://reurl.cc/GbAy5d

繼續閱讀 | 回文章大綱

--

--

耳東
0 Followers

𝙃𝙖𝙫𝙚 𝙁𝙪𝙣 𝙖𝙣𝙙 𝙀𝙣𝙟𝙤𝙮 𝙇𝙞𝙛𝙚.