Unity3D教學 - 使用免費工具來開發2D遊戲(教學二)

本文轉載自 www.rocket5studios.com，版權歸原作者所有，UnityBuster.blogspot.com整理翻譯。轉載請註明出處！

本教學內容是要來教你如何使用一些免費的軟體工具在Unity3D中製作2D遊戲. 此一教材共分成五個部分, 連結與大綱分列於下:





使用免費工具來開發2D遊戲 - 教學一: 介紹本教學使用的工具和Unity3D的插件
使用免費工具來開發2D遊戲 - 教學二: 製作sprite(圖素原件)和第一個level(關卡)
使用免費工具來開發2D遊戲 - 教學三: 製作一個角色動畫sprite(圖素原件)並與控制腳本連結
使用免費工具來開發2D遊戲 - 教學四: 製作一個 "pickup" 物品以及計分介面並和與計分腳本連結
5: 使用 "A*尋徑" 的啟始敵人智能判斷



使用免費工具來開發2D遊戲 - 教學二

接下來我們要開始製作 "圖素原件" (sprite)和你的第一個 "關卡" (level)

專案的初步設定
在我們真正開始前, 要先進行以下的設定


設定 "Build" :
File -> Build Settings...
點選 "Web Player" 然後點選 "Switch Platform"
關閉 "Build Settings" 視窗

設定 "Player" :
Edit -> Project Settings -> Player
在 "Per-Platform Settings" 點選小地球圖 (假設在前一步選的是 Web Player )
點選 "Resolution and Presentation" 然後將 "Screen Width" 改為 800, 將 "Screen Height" 改為 600

設定 "Render" :
由於2D遊戲不會用到Unity3D的燈光系統, 所以我們只會調整環境光
Edit -> Render Settings...
點選 "Ambient Light" 後改變 color 為 (255, 255, 255, 255)


Orthello 2D 的初步設定
在 "Project" view中, 到 "Orthello -> Objects" 然後拖曳 "OT prefab" 放入 "Scene" view 或 "Hierarchy"
在 "Hierarchy", 將 OT 物件旁的小箭頭往下拉, 然後點選 "View"
將 "Pixel Perfect Resolution" 改為 800x600 (與 player設定相同)
將 "Custom Size" 改為 10

如果你現在點選 "Hierarchy" 中的 "Main Camera", 你會發現投射方式(projection)已經被設為 "Orthograph", 而 "Size" 也變成 10. 當你將OT加入scene中時, Orthello 會自動將Unity預設的 "Perspective" 改為 "Orthographic".

我個人的經驗得出的結論是: 當螢幕解析度為 800x600, 而 "Orthographic Size" 為 10 之時, 一個 比例為 1x1x1 之Cube (立方體) 在螢幕上顯示的大小剛剛好是 30 pixel (畫素), 這也剛好就是我們在建立關卡(level)時所要使用 "圖素原件" (sprite)的大小. 用來嵌合到格線中剛好.

到這一階段, 你的專案看起來應該和下圖差不多. 圖中的方型則是用來當做對比用.

製作原件圖集 (Sprite Atlas)
我們的遊戲關卡只用了幾個簡單的方塊圖: 磚塊(digable), 水泥塊 (un-digable), 梯子, 和繩索.
在此下載所需之檔案: 圖素原件檔. 下載之後解壓縮存放在你的電腦中.
執行 TexturePacker 後從 "sprites/level" 目錄中將這些 .png 圖檔拖曳到 "Sprites panel" 中.
從 "sprites/shoot" 目錄中將所有 .png 圖檔也拖曳到 "Sprites panel" 中.

Texture Settings / Layout:
將 Algorithm 設為 Basic
取銷 Trim
取銷 Enable Auto Alias

Texture Settings / Output:
保留 Data 格式為 cocos2d
在 Data File, 點選 "..." 按鈕, 看看要把這些圖素原件存在本專案的 "Asset" 目錄的哪裡. (我是存在 Assets/SpriteAtlases), 將其取名為 "level" 後點選 "Save" 儲存
TexturePacker 會將Data File的副檔名自動設為 .plist, 但由於 Unity 希望是 .xml檔, 所以我們在文字欄中將 .plist 改為 .xml.
除非有 .png 副檔我們無能為力之外, 貼圖檔路徑應該已經設成和 .xml 同一路徑了

到此, 在 TexturePacker 之畫面應類似以下圖片:

如果你現在在 TexturePacker中按下 "Publish" 並轉回 Unity3D, 你應會看到包括了原件圖集(sprite atlas) 和圖素原件檔的 "SpriteAtlases" 目錄出現在 "Project" 中.

我們還要在Unity中對原件圖集(sprite atlas) 做些改變
在 "Project" view中, 選擇 "level.png", 然後將 "Inspector" 中的 "Filter Mode" 改成 "Point"
點選 "Override for Web" 將 "Format" 改成 "Truecolor" 後, 按 "Apply"


製作關卡圖素原件 (Level Sprites)
接下來是要用 Orthello 將 "原件圖集" 轉變成 "圖素原件"(sprite)

圖素原件存放箱 (Sprite Container)
在 "Project" view中, 到 "Orthello" 目錄: Orthello -> Objects -> Sprites -> SpriteAtlas 之後將 SpriteAtlas-Cocos2D 物件拖曳放入 "Hierarchy"
在 "Hierarchy" 中, 展開 "OT" 物件以及 "Containers" 物件, 你會發現你的新存放箱 (Container" 被命名為類似 "Container (id=-6840)" 的名稱. 我們由原件圖集(sprite atlas)製作出來的 "關卡圖素原件" 將會放入此存放箱中, 你可以將其改名為, 如 "level".
從 "Project, SpriteAtlases" 目錄中將 "level.png" 拖曳並放入 "OTSprite Atlas Cocos 2D" 腳本的 "Texture" 槽中.
從 "Project, SpriteAtlases" 目錄中將 "level.xml" 拖曳並放入 "Atlas Data File" 槽中. 如果你現在將 Atlas Data 的小箭頭往下拉, 會發現已被 TexturePacker 產生之原件圖集內的資料所充滿了.

製作磚塊動畫
遊戲中當磚塊被摧毀了或重生時我們動畫來讓玩家看到變化.

從 Orthello -> Objects -> Sprites 中將 "Animation"物件拖曳放入 "Hierarchy". 如此會在 OT -> Animations 增加一個名為 "Animation (id=-4320)" 之類的新物件, 將其更名為 "level anims".
趁著OTAnimation還被選取, 依下圖更改其設定
在 Framesets 中, 將 Size 改成 3
將 "level" 物件從 OT -> Containers 中拖曳放入 Container field 以將其發佈到 Container field
從 Orthello -> Objects -> Sprites 中將 "AnimatingSprite" 物件拖曳放入"Hierarchy". 如此會在 OT -> Animations 增加一個名為 "AnimatingSprite (id=-23050)" 之類的新物件, 將其更名為 "brick".
趁著brick 物件還被選取,將 "level anims" 物件拖曳放入 "Animation" 槽, "Sprite Container" 槽會自動被一個參考到 "level" container 物件填滿


現在應可看到一個磚塊的圖素原件出現在畫面, 如果在Unity中按 "Play"即可看到動畫, 由於我們並不要在開始就播動畫, 因此取銷 "Play On Start" 之勾選

在磚塊原件加入碰撞(抗力 collision)屬性
一些磚塊需要加上抗力屬性如此角色才可以踩踏在其上

趁著brick 物件還被選取, 勾選 "Collidable" 項,   將 "Box Collider" 和 "Rigidbody" 加入圖素原件中
還要將物件標上特殊標籤並加到一個 "Layer" 中. 到 Edit -> Project Settings -> Tags 打開 "標籤管理員" (Tag Manager)
在最上方的 "Tags", 將小箭頭往下拉並在 "Element0" 欄位輸入 "Ground" 後按 Enter. 同時, 還要加入 "Ladder" 和 "Rope" 兩個標籤.
我們也需要一些 "Layer", 因此在 "User Layer 8" 輸入 "Ground", 在 "User Layer 9" 輸入 "Ladder"
點選磚塊物件後, 在 "Inspector" 拉下 "Tag" 清單並選取 "Ground", 從 "Layer" 下拉清單中點選 "Ground"

將磚塊原件變成 Prefab

接下來將新增一些東西到磚塊物件並對其做些改變. 因此將磚塊變成 "Prefab" , 而後當你用此磚塊原件來製作出關卡後, 一但你對磚塊物件做了任何變動, 該一關卡中所有的磚塊原件都會跟著改變. 製作一個 Prefab 非常簡單且會在之後為你省下許多時間.

在你的 "Project" 中產生一個新的 folder 並取名 "Prefabs"
將 "brick" 物件從 Hierarchy 中拖曳放入Project 的 Prefabs 目錄中

製作靜態的關卡圖素原件 (Level Sprites)
接下來我們需要製作水泥塊, 梯子, 和繩索方圖. 這些也同樣使用之前的存放箱 (Container). 不過不同於 AnimatedSprite 的顯示, 我們將使用圖素原件 (Sprite object).

水泥塊方圖

如果你的磚塊物件還位於畫面的中央, 請移到旁邊.
將 "Sprite" 物件從 Orthello -> Objects -> Sprites 中拖曳放入 Hierarchy 或 Scene 中, 從而會產生一個名為 "Sprite (id=-3700)" 之類的新物件, 將其更名為 "concrete"
將之前產生的 level 物件從 OT -> Containers 拖曳放入 Inspector 的 "Sprite Container" 槽中
你的Sprite會出現, 不過看起來會和之前作的磚塊原件差不多, 這是因為磚塊圖是原件圖集中的第一張圖. 選取水泥物件後, 用鼠標按住 Inspector 中的 "Frame Index"並向右拖曳到原件圖集中的14號的水泥圖案. 現在水泥物件就會是水泥外觀了.
勾選 "Collidable" 將抗力屬性加入水泥物件
下拉 Inspector 中的 Tag 清單並選取 Ground 後, 再從 Layer 的下拉清單中點選 Ground
從 Hierarchy 中將 "concrete"物件拖曳放入Project 中的 "Prefabs" 目錄因而得以由該物件產生 Prefab

梯子和繩索方圖
梯子和繩索方圖的製作步驟和水泥圖差不多:

如果你的水泥物件還位於畫面的中央, 請移到旁邊.
將 "Sprite" 物件從 Orthello -> Objects -> Sprites 中拖曳放入 Hierarchy 或 Scene 中, 將其更名為 "ladder"
將之前產生的 level 物件從 OT -> Containers 拖曳放入 Inspector 的 "Sprite Container" 槽中
將 "Frame Index"並向右拖曳到原件圖集中的15號的梯子圖案. 現在物件就會是梯子外觀了.
製作繩索物件和梯子同, 只是取名為 "rope". 將 "Frame Index"並向右拖曳到原件圖集中的17號的繩索圖案. 現在物件就會是繩索外觀了.
從 Hierarchy 中將 "ladder" 和 "rope" 物件拖曳放入Project 中的 "Prefabs" 目錄因而得以由該物件產生 Prefab

製作底部邊界
製作關卡所需的 sprite 圖素原件已經完成了, 接下來要製作一個邊界物件用來放在螢幕底邊. 這個物件提供角色和怪物站立的地方同時也提供參考格子的依據.
到 Game Object -> Create Other -> Cube 並更名為 "border bottom"
將 Transform Position 改為 X: 0, Y: -10.3, Z: 0
將 Transform Scale 改為 X: 26, Y: 1, Z: 1
將 "border bottom" 物件從 Hierarchy 中拖曳放入 Project 中的 Prefabs 目錄並將其轉成一個 prefab

有一小部分的方塊會出現在遊戲畫面底端, 由於預設的顏色是白色的, 看起來有些唐突, 我們將其改為和磚塊相似的色彩

在 Project 中產生一個新目錄並取名為 "Materials"
在 Materials 按滑鼠右鍵後到 Create -> Material 並更名新材質為 "border"
選取此一新材質然後在 Inspector 中點選小眼滴旁白色部分以打開色彩選擇器
將 RGBA 設為 R: 159, G: 2, B: 0, A: 255 後關閉
將 "border" 材質拖曳置於 Hierarchy 中的 "border bottom" 物件上將此材質賦予

改變背景顏色
將背景改為黑色:
選取 Main Camera 後 點選 Background 旁的 color swatch
將 RGBA 設為 R: 0, G: 0, B: 0, A: 255

製作關卡
最後就只剩角色, 怪物, 寶物和其他一些小東西了! 不過現階段就先將磚塊, 水泥, 梯子, 和繩索分別複製並依設計擺放到關卡中. 以下是一些注意事項:
1. 在 Scene view中, 直接點選 "Scene" 正下的下拉選單, 它或許會顯示像是 "Textured" 及更改選項到 "Tex-Wire"
2. 你可以使用 "Vertex Snap" 來對齊物件 - 在 Scene view中, 按住 "V" 鍵, 移動滑鼠讓它能圈到方塊的任一角, 這樣就會自動向最近角對齊. 當控制柄碰到Sprite之一角時按住滑鼠左鍵將sprite拖往要對齊 sprite之一角就會自動向最近角對齊
3. 你可以用螢幕底邊的邊界物件當基底來放置 sprite. 如此逐個放置就會成格狀對齊
4. 你可以 shift+left click 或 選取一個區域來多選數個 sprite.
下圖是由下往上繪製關卡的樣子

下圖則是關卡完成的樣子

本階段範例檔可在此下載: http://www.rocket5studios.com/files/Rocket5_2DGame_blogPt2b.zip


本文轉載自www.rocket5studios.com，版權歸原作者所有，UnityBuster.blogspot.com整理翻譯。轉載請註明出處！