26.JPG

很多人學程式,是為了要做遊戲,

如果你是要做遊戲,

其實有很多很方便的工具,可以幫助我們快速開發的

Unity、Unreal、Cocos2D.....

 

 

要跟大家介紹,最近很熱門的遊戲製作工具 - Unity

為什麼要選Unity呢?

1. 跨平台支援 

iOS、Android、Web,寫好一個遊戲可以在各平台發表

2. 架構完善

物理系統、動畫系統,可以快速實現你的創意

3. 國內多數企業採用

很多知名遊戲都是用Unity製作的!

 

本篇會一步一步帶大家完成一個2D小遊戲

每個步驟都有圖片說明,看起來很多,實際操作大概只要20分鐘

這個教學會分成3~4篇發佈

 

這篇教學分4個小節:

1. 安裝程式

2. 帶入物件

3. 移動飛機

4. 限制飛機移動的牆壁

 

1. 安裝程式

首先,當然就是下載Unity了

https://store.unity.com/

選Individual,然後選Personal

2_1.jpg

 

選Start here

3_1.jpg  

 

點了以後會下載Unity hub,安裝後開啟程式

先在右上角登入你的帳號,沒有帳號就申請一個

登入後,選ACTIVE NEW LICENSE

 4_1.jpg

 

選Unity Personal

然後小選項選哪個都沒差

5_1.jpg

 

註冊完後

選Install,然後點ADD

6_1.jpg

 

選最新的Official Releases

7_1.jpg

 

我們之後會用到Android套件,所以Android Build Support打勾

其他的套件如果有需要,也可以之後再下載

按NEXT

12_1.jpg

 

同意條款,按DONE

8_1.jpg

 

等待下載

9_1.jpg

 

下載完後,選Project,點NEW

10_1.jpg

 

我們要做一個類似小蜜蜂的射擊遊戲

1. 選2D

2. 輸入專案名稱

3. 選擇存放位置

4. 按 Create 

11_1.jpg  

 

打開之後會看到這樣的畫面

可能會稍微有點不一樣,版面是可以自由移動的

主要幾個重要的版面,物件、場景、屬性、素材

實際使用過後就會了解其功用了

 

這邊需要設定一下程式的環境,請參考這篇 Visual Studio設定Unity環境

5_1.jpg  

 

2. 帶入物件

遊戲的圖片,考量到不是每個人都有繪圖軟體

所以用小畫家來製作

1. 拉出一個600 X 800像素的空白區域

2. 選油漆桶,然後選黑色,點一下空白區域,把整個區域塗黑

3. 存成png格式

遊戲的背景就完成了!

5_2.jpg  

 

然後我們把背景圖片,直接拖曳到素材(Asset)那個區域

6.JPG  

 

然後再把素材裡的背景圖片拖曳到場景(Sense)

我們的遊戲場景就有背景了!

6_1.JPG  

 

我們可以看到物件(Hierarchy)那邊多了背景的物件

6_2.JPG  

 

點選背景物件,屬性(Inspector)那邊就會出現背景的屬性

把Position的XYZ都設0,背景就會在畫面中間了

7.JPG  

 

在Sorting Layer這邊開一層新的Layer來放我們的背景 

按Add Sorting Layer

8.jpg  

 

1. 按[+]圖示

2. 設定Layer名稱,打Background

3. 把Background移到Default上面,如下圖順序。如果順序不對,你之後放的東西都會被背景蓋住

9.JPG  

 

新增了之後,點一下background物件

選取剛剛新增的sorting layer

10.jpg  

 

3. 移動物件

背景做好了之後,開始用小畫家畫戰鬥機(50X50像素)

用小畫家沒辦法產生透明的區域

所以只能做出方型的物件

這個遊戲裡,背景是全黑的,看不出這個問題

13.JPG  

 

畫好之後,一樣存成PNG格式

拖曳到素材區

14.JPG  

 

然後再拖到場景裡

15.JPG  

 

戰鬥機的起始位置放在中間偏下,在Position的地方

X設0,Y設-3,Z設0

15-2  

 

然後我們要給他一個可以碰撞(Collider)的屬性

這樣他才能被其他東西碰到,像是敵人或是敵人的子彈

Add Component的下拉選單,選Physics 2D

16-1    

 

選Box Collider 2D

17.jpg  

 

選完之後,我們可以看到碰撞的外框

大小可以自由調整

18.JPG  

我們把他調小一點,從0.5調到0.45

讓他被擊中的判定不要那麼嚴格,可以看到畫面裡的方框變小了

18_1.JPG  

 

接著我們加入他的剛體(rigidbody)性質

讓他可以移動

Physics 2D裡的Rigidbody 2D

19.jpg  

 

我們用不到重力

所以Gravity Scale選0

飛機不旋轉

Constraintsv下拉式表單打開

Freeze Rotation Z 打勾

36.JPG    

 

接著我們要寫程式來控制飛機

Add Component選 New Script

21.jpg  

 

輸入檔案名稱

語言選C# (新版本不用選程式語言)

然後按下面的Create and Add

22.jpg  

 

在素材那邊就會出現C#的檔案

雙點可開啟程式編輯器

新版的Unity是用微軟的Visual Studio,所以畫面會有點不一樣

程式的內容是一樣的

23.JPG  

 

程是主要分三個部分

使用套件:程式會用到的套件

void Start()區塊是啟動時會執行

void Update()區塊是更新時會執行,會即時確認

24.JPG  

 

我們要讓飛機,按右箭頭就往右移動

按左箭頭就往左移動

所以寫在Update底下

if(Input.Getkey(KeyCode.RightArrow))
        { 
            gameObject.transform.position += new Vector3(0.1f, 0, 0);
        }

 25.JPG

if (Input.GetKey(KeyCode.RightArrow))

if 如果

Input.GetKey 輸入.取得按鍵

KeyCode.RightArrow 按鍵碼.右箭頭鍵

這句的意思就是:如果按下右箭頭鍵,就會執行大括號{}裡面的敘述

 

gameObject.transform.position += new Vector3(0.1f,0,0);

gameObject.transform.position 物件位置

+= 加上

new Vector3  新的3D向量

(0.1f,0,0) (X方向, Y方向, Z方向),X方向移動 0.1 個單位的意思

後面加 f 代表是小數 (floating point numbers),有用到小數點後面都要加 f,不然電腦會看不懂

這句的意思就是:物件的位置X方向增加0.1,也就是往右移動0.1的意思

Y方向, Z方向移動0個單位,代表這兩個方向不會有改變

   

寫完之後 

回到Unity,畫面中間上方有一個三角型的Play鍵

按下去執行,看看按右鍵飛機會不會往右移動

25_1.JPG  

注意!程式碼的大小寫要完全一樣

如果不能執行,看一下畫面最下方有沒有錯誤訊息

25_2.jpg

如果我把GetKey的K大寫打成小寫,就會出現上面的錯誤訊息

這個錯誤訊息是說:ShipControl.cs的程式有錯誤,Input這個類別裡找不到Getkey的定義

因為K打成小寫,所以電腦找不到

如果你不確定哪邊有打錯,你可以直接複製網誌裡的程式

 

輕按幾下右箭頭,飛機可以往右移動

代表程式正常運作

26.JPG

 

確認可以往右後,我們再回到Visual Studio

寫往左的部分

if (Input.GetKey(KeyCode.LeftArrow))
        {
            gameObject.transform.position += new Vector3(-0.1f, 0, 0);
        }

 

基本上都跟右邊的一樣,用複製就好

然後再把RightArrow改成LeftArrow

0.1f 改成 -0.1f

 27.JPG  

 

然後我們再執行一次,確認可以左右移動

25_1.JPG  

 

4. 限制飛機移動的牆壁

你在移動飛機的時候,可能會發現一個問題

飛機會跑到宇宙場景的外面!

所以我們要加個邊界

28.JPG

 

GameObject -> Create Empty 開啟一個空的物件

29.jpg    

 

我們會在物件裡看到一個新的GameObject

點左鍵,選Rename 更改名稱

改成RightSide

30.jpg  

 

然後我們給這個物件碰撞屬性Add Component -> Physics 2D -> Box Collider 2D

跟飛機的碰撞屬性一樣,忘記怎麼做的人可以拉上去看

場景中間出現框框就是我們的碰撞物體

31.JPG  

更改他的位置和大小

Position的X改成3,剛好是畫面邊邊

碰撞體的Size的X改成0.5,Y改成8,變成一個長條型

32.JPG  

我們的飛機有碰撞屬性,邊界也有碰撞屬性

飛機就會撞到邊界,而不會飛出我們的場景

按PLAY,測試功能是否正常

25_1.JPG  

 

然後我們在左邊也加上一樣的邊界

33.JPG

 

OK,教學到這邊差不多要結束了

儲存檔案吧

File -> Save Scene

34.jpg

 

然後就會在素材那邊看到我們新儲存的場景

下一次,我們要講飛彈和敵人的產生

35.JPG   

 

前往下一篇

Unity教學 2D小遊戲製作 part 2

 

 

arrow
arrow

    讀樂島主 發表在 痞客邦 留言(53) 人氣()