本文轉載自 www.rocket5studios.com，版權歸原作者所有，UnityBuster.blogspot.com整理翻譯。轉載請註明出處！本教學內容是要來教你如何使用一些免費的軟體工具在Unity3D中製作2D遊戲. 此一教材共分成五個部分, 連結與大綱分列於下:
使用免費工具來開發2D遊戲 - 教學一: 介紹本教學使用的工具和Unity3D的插件
使用免費工具來開發2D遊戲 - 教學二: 製作sprite(圖素原件)和第一個level(關卡)
使用免費工具來開發2D遊戲 - 教學三: 製作一個角色動畫sprite(圖素原件)並與控制腳本連結
使用免費工具來開發2D遊戲 - 教學四: 製作一個 "pickup" 物品以及計分介面並和與計分腳本連結
5: 使用 "A*尋徑" 的啟始敵人智能判斷
使用免費工具來開發2D遊戲 - 教學三
有了關卡, 接下來就要有角色可以在遊戲裡跑來跑去了.
製作角色原件圖集 Sprite Atlas
由這個連結下載圖檔解開後放在硬碟中使用: (如果你在教學二已經加入專案就可省略)
http://www.rocket5studios.com/files/Rocket5_2DGame_LevelSprites.zip
啟動 "TexturePacker", 從 sprites/player 目錄把所有的 .png 檔拖曳到 Sprites panel 中.
Texture Settings / Layout:
將 Algorithm 設為 Basic
將 Border Padding 設為 1
將 Shape Padding 設為 1
取銷 Trim
Texture Settings / Output:
保留 Data 格式為 cocos2d
在 Data File, 點選 "..." 按鈕, 看看要把這些圖素原件存在本專案的 "Asset" 目錄的哪裡. (我是存在 Assets/SpriteAtlases), 將其取名為 "player" 後點選 "Save" 儲存
TexturePacker 會將Data File的副檔名自動設為 .plist, 但由於 Unity 希望是 .xml檔, 所以我們在文字欄中將 .plist 改為 .xml.
除非有 .png 副檔我們無能為力之外, 貼圖檔路徑應該已經設成和 .xml 同一路徑了
TexturePacker 現在看起來應該是這樣:
如果你現在在 TexturePacker中按下 "Publish" 並轉回 Unity3D, 你應會看到原件圖集(sprite atlas) 包括了 player.png 和 player.xml 圖素原件檔的 "SpriteAtlases" 目錄出現在 "Project" 中.
如果你現在還沒在Unity中打開你的專案, 打開它後把你在教學二製作的 level1.scene 載入
我們需要對原件圖集 Sprite Atlas 作些更改:
從 Project 中選取 player.png 後, 在 Inspector 將 Filter Mode 設為 Point
點選 Override for Web 方盒, 將 Format 設為 Truecolor 後按 Apply
製作角色圖素原件 Sprite
接下來是要用 Orthello 將 player 的 "原件圖集" 轉變成 "圖素原件"(sprite)
圖素原件存放箱 (Sprite Container)
在 "Project" view中, 到 "Orthello" 目錄: Orthello -> Objects -> Sprites -> SpriteAtlas 之後將 SpriteAtlas-Cocos2D 物件拖曳放入 "Hierarchy"
在 "Hierarchy" 中, 展開 "OT" 物件以及 "Containers" 物件, 你會發現你的新存放箱 (Container" 被命名為類似 "Container (id=-6840)" 的名稱. 我們由原件圖集(sprite atlas)製作出來的 "關卡圖素原件" 將會放入此存放箱中, 你可以將其改名為, 如 "player".
從 "Project, SpriteAtlases" 目錄中將 "player.png" 拖曳並放入 "OTSprite Atlas Cocos 2D" 腳本的 "Texture" 槽中.
從 "Project, SpriteAtlases" 目錄中將 "player.xml" 拖曳並放入 "Atlas Data File" 槽中. 如果你現在將 Atlas Data 的小箭頭往下拉, 會發現已被 TexturePacker 產生之原件圖集內的資料所充滿了.
製作角色動畫
從 Orthello -> Objects -> Sprites 中將 "Animation"物件拖曳放入 "Hierarchy". 如此會在 OT -> Animations 增加一個名為 "Animation (id=-4320)" 之類的新物件, 將其更名為 "player anims".
趁著OTAnimation還被選取, 依下圖更改其設定
將 "player" 物件從 OT -> Containers 中拖曳放入 Container field 以將其發佈到 Container field
製作角色圖素原件(sprite)
從 Orthello -> Objects -> Sprites 中將 "AnimatingSprite" 物件拖曳放入"Hierarchy". 如此會在 OT -> Animations 增加一個名為 "AnimatingSprite (id=-23050)" 之類的新物件, 將其更名為 "player".
趁著player物件還被選取,將 "player anims" 物件拖曳放入 "Animation" 槽, "Sprite Container" 槽會自動被一個參考到 "player" container 物件填滿.
你現在會看到場景中角色的sprite, 按 "Play", 動畫會開始播放. 由於我們並不要在開始就播動畫, 因此取銷 "Play On Start" 之勾選
製作角色碰撞 (抗力) Collision 屬性
趁著player物件還被選取, 勾選 "Collidable" 項, 將 "Box Collider" 和 "Rigidbody" 加入圖素原件中
點選 Physics 旁的下拉式選單並選擇 Custom
在 Transform, 將 Scale Z 設為 1
將 Depth 設為 -1
在 "Box Collider" , 設 Center Y 為 -0.1, 設 Z 為 1, 設 Size X 為 -0.45, 設 Y 為 0.6, 設 Z 為 0.4
設定如下圖:
當角色圖素面對鏡頭位移 1 單位時, 在 "Box Collider" 中將 Depth 設為 -1, 將 Center Z 設為 1 會將 抗力點置於 Z 軸 0 的位置. 如此會產生兩種效果: 將抗力碰撞一直保持設定在 Z 軸之 0 時確認角色一直都會顯現在關卡圖素之前且會保證和 梯子及繩索接觸. 參考下圖:
設定射擊動畫
角色按下射擊鈕時會出現一個子彈動畫從角色發出射往地上
射擊動畫
從 Orthello -> Objects -> Sprites 中將 "Animation"物件拖曳放入 "Hierarchy". 如此會在 OT -> Animations 增加一個名為 "Animation (id=-4320)" 之類的新物件, 將其更名為 "shoot anims".
趁著OTAnimation還被選取, 依下圖更改其設定. 將 "level" 物件從 OT -> Containers 中拖曳放入 Container field 以將其發佈到 Container field. 僅記我們之前已經在教學二中將 shoot sprite animation 加入 關卡圖集中了.
射擊圖素 (Shoot Sprite)
從 Orthello -> Objects -> Sprites 中將 "AnimatingSprite" 物件拖曳放入"Hierarchy". 如此會在 OT -> Animations 增加一個名為 "AnimatingSprite (id=-23050)" 之類的新物件, 將其更名為 "shoot".
趁著shoot物件還被選取,將 "shoot anims" 物件拖曳放入 "Animation" 槽, "Sprite Container" 槽會自動被一個參考到 "level" container 物件填滿
為了讓此圖素出現在關卡圖素前, 將 Depth 設為 -1
將 Frame Index 設為 18
現在應可看到一個 shoot 的圖素原件出現在畫面, 如果在Unity中按 "Play"即可看到動畫, 由於我們並不要在開始就播動畫, 因此取銷 "Play On Start" 之勾選
我們只希望在玩家射擊時才出現 shoot 圖素, 因此取銷shoot sprite上的 "Mesh Render" 之勾選. 如此 shoot sprite 就會被隱藏在場景後面直到被下面教學所寫的腳本叫出
為射擊圖素 (Shoot Sprite) 尋找主人
射擊圖素應是跟著射擊者而動, 且當角色左右轉變方向時, 射擊圖素也會跟著反轉過來:
選擇: Game Object -> Create Empty
將此新物件更名為 "shoot parent" 並確認此新物件 X, Y, Z Position 設為 0
在 Hierarchy, 將 "shoot sprite" 拖曳放在 "shoot parent" 上, 如此 "shoot sprite" 就會成為 "shoot parent" 的追隨者(child).
將 "shoot parent" 物件拖曳放在 "player sprite" 讓它成為 "player sprite" 的追隨者(child).
結果如下圖:
與腳本 Script 結合
現在開始加入可移動角色的腳本
先到此處下載腳本: http://www.rocket5studios.com/files/Rocket5_2DGame_Scripts_Pt3.zip 並解壓存入你的電腦
將解壓後的 "Scripts" 目錄拖曳到你 "Project" 中的 "Asset"目錄中
選擇 "Game Object -> Create Empty" 以建立一個新的遊戲物件並更名為 "Scripts"
從 "Project" 中將 xa.cs 檔案拖曳到 Hierarchy 中的 "Scripts" 物件
從 "Project" 中將 player.cs 和 playerAnims.cs 檔案拖曳到 Hierarchy 中的 "player" 物件
確認 "player" 物件置於磚塊上方如此才有地方站住. 要注意實際上是 "player" 的 "Box Collider" 在與此遊戲世界中的物體發生接觸與碰撞的. 因此方塊需要置於像是類似於 0,0,-1 之處 (x, y, z)中, x, y 可以是任一值, z 則要保持為 -1
現在如果在Unity中按 "Play"即可看 "Player" 是站立在一個磚塊上而不會穿過它而掉落. 當你按左/右鍵時動作會跟著變化.
加入梯子碰撞機 Collider
產生一個梯子:
選擇 GameObject -> Create Other -> Cube 並將 Cube 更名為 Ladder
到 Edit -> Project Setting -> Tags 以打開 "Tag manager"
在最近的可使用的空槽(可能是 Element 1) 中的 "Tags" 填入 "Ladder" 後, 並在緊接其後的空槽中填入 "Rope"
同時還要新增另一個 layer: 在下一個空的 "User Layer" (可能是 User Layer 9) 輸入 "NoDraw"
點選之前產生的 Ladder 方塊並將 Tag 改成 "Ladder" 後將 Layer 變更為 "NoDraw"
將物件隱藏在Game View 中:
碰撞機不需要出現在遊戲畫面中, 我們藉由調整 camera 來達到此目的:
在 Hierarchy 中點選 Main Camera
在 Camera 底下, 下拉 Culling Mask 旁的選單並點擊在 "NoDraw" 上來取銷它的出現.
設定 Ladder 之大小與位置:
場景中的每一個梯子都必需搭配一個這樣的碰撞機並且其 "Scale Y" 值要為 5 (比畫面中的梯子高一個單位)
利用 Vertex Snap 之功能將 "梯子碰撞機" 黏置於底端圖素原件的某一個下角
你可以複製這個物件, 改變 Y 值並黏貼到所有其它位於關卡中的梯子圖素原件上.
梯子會像這個樣子:
現在如果你按 "Play" 並控制角色移動到梯子, 這個角色應該可以在此梯子上下移動並同時配合爬的動畫. 爬到梯子頂端後可以移開, 而爬到一半就左右移動則會落回地面.
加入繩索對撞機 Collider
這裡的步驟和上一步類似.
產生一個繩索:
選擇 GameObject -> Create Other -> Cube 並將 Cube 更名為 Rope
到 Edit -> Project Setting -> Tags 以打開 "Tag manager"
在最近的可使用的空槽(可能是 Element 1) 中的 "Tags" 填入 "Rope" 並將 Layer 變更為 "NoDraw"
設定 Rope 之大小與位置:
假設你的繩索寬度為4個圖素原件: 選擇 "繩索碰撞機" 並將其 "Scale X" 值設要為 4 (Y 和 Z則為 1)
利用 Vertex Snap 之功能將 "繩索碰撞機" 黏置於底端圖素原件的某一個下角
你可以複製這個物件, 改變 X 值並黏貼到所有其它位於關卡中的
繩索 圖素原件上.
繩索會像這個樣子:
現在如果你按 "Play" 並控制角色移動到繩索 , 這個角色應該可以吊在此繩索上左右移動並同時配合吊的動畫. 此時如果暗向下的箭頭, 角色應會向下掉落.
到本階段的專案可在此下載:
http://www.rocket5studios.com/files/Rocket5_2DGame_blogPt3a.zip
如果你想要試試玩這個遊戲目前階段, 可以到以下的網址試玩 (上下左右鍵控制):
http://www.rocket5studios.com/2dgametutorial/Rocket52DGamePart3.html
本文轉載自www.rocket5studios.com，版權歸原作者所有，UnityBuster.blogspot.com整理翻譯。轉載請註明出處！
