To compliment this we have constructed a

為此,我們用這個工具做了一個2D範例

demo project with these tools.

這個2D範例叫做"鐵橋塔防"

Our 2D platformer is nicknamed 'Tower Bridge Defence'

描述倫敦鐵橋被外星人入侵的故事

It depicts London's Tower Bridge in the midst

範例完全用2D圖片和物理來呈現 讓你了解這些元素如何在Unity裡組合

of an alien invasion.

影片會說明範例裡的背景、前景、角色、特效 鏡頭追跡、動作和腳本程式是如何製作的

It's a completely sprite-based, physics driven

開始之前,先來聊聊基本的Unity 2D工作

2D sample level that we hope will help you

首先,當要製作2D專案,你應該先設定工作環境為2D

understand how 2D games are put together in Unity.

可以在建立新專案時在下拉選單設定

This video will discuss the background and

或是在開發中到Edit - Project Settings - Editor調整

foreground construction, characters, effects,

這代表預設情況下，輸入的材質會 被視為2D圖片，場景視圖也會預設為2D

camera tracking, animation and scripting

這個新的2D模式會採用完全的 正視圖視角來呈現你的2D遊戲

used in the demo.

同時也會把右上角的3D小圖示都隱藏 讓工作空間更大

To begin with, let's discuss the basics

除此之外，Unity 2D的工作流程 是和現有的3D流程整合在一起的

of working in 2D in Unity.

如果你已經會操作原本的Unity 那Unity 2D會很好上手

Firstly, when working in 2D, you should set the

值得一提的是，你也可以混搭2D和3D共用

Editor Behaviour Mode to 2D

所以如果你想要有3D元素在你的2D遊戲裡 或2D元素在3D遊戲裡都沒有問題

for various settings.

現在來看看範例如何建立一個關卡

This can be done when making a new project

我們一開始勾勒關卡設計雛形 然後到Photoshop裡面去把每個圖層做出來

using the drop-down on the project wizard

然後輸出這些圖層 成為新的Sprite類型導入Unity

or during a project by choosing

為了呈現出背景的視差，我們做了一些 背景元素在Sorting Layer裡

Edit - Project Settings - Editor from the top menu.

這是一個2D工具的新功能

This means that by default textures

當所有背景指定到這一層後 我們可以在圖片著色器的圖層排序它們

will be imported as sprites and the

調好位置之後也可以把圖層鎖定不能編輯

Scene View will default to 2D mode.

這樣的話我們編輯前景元素的時候 就不用擔心會不小心動到背景元素

This new mode gives you a completely orthographic

可以從介面右上方的圖層選單來設定

view in which to construct 2D games.

由於背景只是裝飾用的，所以 並不需要在圖片上放任何元件

It also hides the usual 3D gizmo

將它們放到一個空的物件裡

in the top right of the view, giving you more space

並放入一個叫做叫做 BackgroundParallax的腳本來處裡視差

to work in. Aside from these settings the work

更多的細節可以詳查這個已經註解的腳本

flows for 2D have been designed to mirror

接下來製作角色活動的前景空間

existing Unity approaches to 3D game creation.

我們設計了倫敦鐵橋和降落在中間的飛碟

So if you already know a little about Unity

主角處於一個敵人從天而降並到處亂竄的環境

you'll be in a great position to start making

因此，每一個前景元素都需要 碰撞體(Collider)來讓主角在上面行走

2D games right away.

大多數環境用方體碰撞就可以 除了外型比較複雜的飛碟

It's worth noting at this stage that you can

Unity提供多邊形碰撞體(Polygon Collider) 可以根據圖片外型自動產生多邊形碰撞體

still mix 2D and 3D in Unity,

甚至可以調整碰撞體的外型

so if you want to add 3D elements to your 2D game

你可以新增、移動或刪除節點 調整到更適合行走的外型

or vice versa you can do that with no worries.

為了排序前景元素我們建立了前景層 設定顯示在背景之前

Let's take a look at the demo project itself,

接下來看看主角

and how we built it up one stage at a time.

我們的主角也是在Photoshop裡面設計的 一個四肢獨立類似卡通主角雷曼的角色

We began by sketching out the level design

另外一個2D工具的新功能

for this sample level and then went about

是一個以圖表化的動畫工具 可以在Photoshop裡繪製每一節點的圖

recreating the layout in Photoshop.

後面我們會介紹如何用這方法 製造我們的天鵝

Creating and exporting the layers,

因為身體部位分開比較好控制動畫 因此我們希望獨立每個身體部位

we were able to import these in to Unity

所以我們將身體部位獨立切開 好讓Unity在輸入時容易拆離它們

using the new Sprite type.

這代表我們可以為圖片單獨製作動作

In order to create parallaxing in our background later,

把這些部位放入建好的角色層 然後改變Z軸深度來改變前後順序

we kept some of the background elements separate

把這些圖片都放入一個有控制腳本 碰撞體、物理設定等等的物件

and placed them on to a Background Sorting Layer.

一旦做到這裡，就可以到動畫視窗給予圖片動作 建立待機、跑、跳、射擊和死亡的動畫

Yet another new feature of 2D development in Unity.

使用動畫視窗裡新的分鏡表功能 就可以簡單製作動作

Having assigned all of our backgrounds to this layer,

我們在父物件建立一個動畫元件 然後針對每一個子物件建立影格

we could then use the Order In Layer property

移動指標到想要的影格後調整角色部位 就會自動把變量錄到影格上

of the Sprite Renderer to sort them.

可隨時切換分鏡表和動畫曲線 使得它更容易調整設計

Once we were happy with their positions

這些動作建立好之後我們可以 幫我們的角色設計控制狀態

we could lock the Background Sorting Layer

讓我們用程式呼叫角色執行各種動作

so that when we added foreground elements

因為不是驅動3D骨架，所以取消打勾Root Motion

we didn't need to worry about accidentally

也可以打勾Animate Physics如果 動畫要和物理行為相互作用

dragging background elements around.

為了在場景走動，主角腳上有圓形碰撞體 和一個包覆整個身體的方形碰撞體

This is done using the Layers pull-down in the

這樣他可以平順地行走和跳下場景 跳起來的時候頭部也可以判定撞到

top right of the interface.

為了控制角色動作，我們寫了 一個腳本透過2D物理引擎來移動

Because the background elements are purely decorative

這代表在遊戲裡面可以指定主角和敵人 讓遊戲動態更豐富的物理行為

we did not require any additional components

我們用PlayerControl腳本來判斷角色的輸入

on the sprite game object.

我們在此指定物理移動速度 同時也把輸入的值送到動畫控制器

They were parented to an empty game object

判定播放哪些動畫以及 順暢的播放分鏡表上圖片的轉變

that has a simple script to handle parallaxing

使用動畫控制建立圖片動態最大的好處是

called BackgroundParallax.

可以調整動畫速度用來搭配物理速度 不需要額外再作任何判定

For more information you'll find this script

FixedUpdate函式會檢查每一步物理運算

fully commented in the Scripts folder.

在這裡我們第一件要做的事情是 把輸入的水平值傳給動畫的速度參數

Next up came the creation of the foreground elements

在我們的狀態設定裡 待機狀態到跑動需要速度參數大於0.1

that our characters would actually traverse.

當值成立時，動畫就會從待機切到跑步

We designed London's Tower Bridge with a UFO

要讓角色移動，讓它有Rigidbody2D元件 就可以為它加力道移動

landed in the centre.

同時我們也根據輸入的水平值是 大於0或小於0來處理角色面朝的方向

The character has the run of the environment

這是因為在Unity裡，按住左鍵會傳回-1 而按住右鍵會傳回+1

as enemies spawn from the skies and begin

根據輸入值呼叫一個簡單的翻轉函數 來翻轉角色的X軸縮放，讓角色面向反方向

to navigate around the level.

為了判定角色是否著地 我們新增了一個Ground圖層

As such, each piece of the foreground required

並指定給全部可行走的前景物件

a collider for characters to walk upon.

然後使用2D裡面的Linecast函數 檢查Ground圖層是否和角色的腳接觸

For most of the environment we used 2D

為了讓製作更容易，我們建立了 一個空白的物件當作檢查地面的標準點

box colliders for efficiency,

在該物件上增加一個小圖示 我們就可以控制角色到地面的距離

but the UFO itself has a more complex shape.

就遊戲角度來看 角色在地面時只能做跳的動作

Unity's Polygon Collider allowed us to

更多關於角色控制的資訊 可以查看範例腳本裡面的說明

automate creation of the collider itself

影片稍後也會討論角色的武器

based on the shape of the sprite.

接下來看看相機如何追蹤角色

It even meant that we could tweak the shape of

跟3D遊戲一樣，在2D遊戲裡 鏡頭運鏡也左右著遊戲體驗

the collider later.

要呈現經典的2D遊戲運鏡 我們參考了2D遊戲經典大作

Moving, adding or subtracting points

任天堂或超任的超級瑪莉歐的鏡頭運作

of the collider shape to make it more

在超級瑪莉歐世界裡鏡頭會水平移動 除了封閉的空間或關卡邊緣

appropriate to walk over.

在這兩類區域裡角色小幅移動 鏡頭不會追蹤

To sort these foregrounds we created a

一旦角色移出區域 鏡頭又會開始追蹤角色

Foregrounds Sorting Layer, which was drawn

超級瑪莉歐的相機 用特定高度來進行垂直判定

above the backgrounds in the Tags And Layers manager.

但我們的遊戲沒有往上的長度 比較像動作平台，所以不需要這類設定

Next, let's take a look at our hero.

因此我們的相機在垂直判定 採用了和水平一樣的方法

Our player character was yet again designed

請看看主相機裡的CameraFollow腳本 了解鏡頭追蹤更完整的寫法和註解

in Photoshop, and for this demo

遊戲中有許多特效 但最重要的是主角殺死外星人的能力

we chose to make a character with independent

主角會發射一個具有 反作用力動畫的火箭筒

limbs and features in the style of

這個動畫由幾個部分組成

2D hits such as Rayman.

首先檢查輸入，當按下Fire鍵時 產生一個火箭，播放音效並觸發火箭動畫播放

Our other option would have been to design

讓我們進一步分解這些步驟

a sprite sheet-based animation and design each

為了可以播放其他動畫(跑步)時同時播放火箭發射 我們在動畫控制器建立了Shooting的動畫層

each frame in Photoshop,

將Weight屬性設為1，可以 完全覆蓋基本層(Base Layer)所有的動作

an approach we use later for the background Swan,

我們可以從任何狀態中用程式 觸發Shoot參數發射動畫

which we'll discuss later in the video.

來看看負責這工作的Gun腳本

Because our character had independent elements

你可以看到我們寫了驅動事件 觸發Shoot為True

that we wish to animate we finalised the design

觸發後會打開，在下一格重置為關 就可以重複使用，對於射擊動作最好用

and then moved his bodily elements in to separate

除了設定動畫，我們也從腳本中發射火箭

spaces on our canvas to allow Unity to isolate them

播放音效後根據角色的方向 產生火箭並給它一個X軸的正或負速度

as separate sprites in the Importer.

這個Gun腳本被放在主角身上的空物件

This meant that we could then arrange all of

像這樣將腳本放到一個空物件上 可以輕易的定位火箭發射位置

our sprites as separate elements to be animated.

我們將物件放到火箭筒發射口 然後以他自己的座標當作發射點

We placed these on to a new Character Sorting Layer

火箭本身有2D剛體 我們給它一個速度讓它移動

that we created, and then used Z values in the

它也有火焰噴射動畫和粒子系統做的煙霧

transform to sort their rendering depth.

粒子系統也接受新的Sprite圖片

All of these sprites are then arranged under an

所以可以將煙霧的圖片切好後加到材質 並指定到粒子系統的Texture Sheet Animation

empty game object, which has all of our

就有煙霧特效讓粒子系統發射

controls scripting, colliders, physics, excetera attached to it.

當火箭命中敵人或環境時 火箭本身會引起爆炸並被摧毀

Once we'd done this we were able to use the newly

爆炸是我們製作的爆炸動畫物件

upgraded Animation window to create

排序位置在前景的最後面

Idle, Run, Jump, Shoot and Death animations

要建立這類動畫，可以從專案點選圖片 然後在屬性Sprite Mode選擇Multiple

by animating each of the character's sprites over time.

這功能允許我們編輯圖片 手動或是自動裁切圖片大小

With the new Dopesheet View in the Animation window

一旦完成裁切後

this is easier than ever.

只需要點擊Apply Unity會自動產生圖片並作為子物件

We simply add animation to the parent object

這就是火箭製作過程

and then create keyframes for any of the child objects.

稍後我們將在影片中討論 殺死敵人的動畫技法

Moving the playhead to where we want

現在先讓我們回到主角 看看如何處理血條補血和扣血

and then moving the various parts of the character

血條被定義為一個浮點數(Float) 每次碰到敵人就會呼叫TakeDamage函式

to automatically keyframe the animation.

為了避免觸發太快造成死亡 我們用repeatDamagePeriod來間隔觸發時間

The ability to switch between Curve and Dopesheet

為了讓角色顯示受傷 並容易從敵人手中逃脫

representation of our animation makes it easier than

我們建立了受傷的動作 並在物理上彈飛主角

ever to adjust timing and design.

要做到這點，TakeDamage函式 會阻止角色跳躍

With these animations created we can

並從主角與敵人之間找到一個向量位置

then design a state machine for our character

指定一個物理力量往指定方向擊退

so that when called upon in code, differing animations

hurtForce是一個全域變數，可以隨時從介面調整 而不用從腳本裡調整

could be played.

除了擊退主角之外，我們同時 也扣掉角色的血量並更新血條

the animator controller for the character is

為了呈現扣血，我們把血條的寬度縮減 用一個公式計算讓綠色轉變到紅色

not driving a 3D biped, so we simply deselect

透過當下的血量和總量算出一個百分比

Apply Root Motion and select Animate Physics

血條是由兩個圖片組成 一個顯示血量，另一個顯示外框

in order to drive our animations in time with

這也是在Photoshop裡做的 然後輸出兩個單獨的圖片

the physics engine.

導入圖形的時候，設定圖形軸心在左邊 所以當它按比例減少時，就會往左縮

In order to traverse the environment our hero has a

這兩個圖片放在一個空物件底下 給予一個簡單腳本，讓它顯示在角色頭上

circle collider at his feet and a box collider

將血條位置設定與角色相同

to cover the rest of his body outline.

並加上偏移用的全域變數 好在檢視介面進行調整

This means he can smoothly walk up and down hills

當主角血量為0時，設定碰撞體的isTrigger = true 主角就會往下跌到水上

and when he jumps his head will hit the ceiling.

同時將主角排序推到UI層上 主角會移到畫面最上層

In order to control the character and it's animations

UI層是我們製作的層 是用來表示像UI的前面的物件

we wrote a script that moves him via 2D physics forces.

當腳色死亡時，我們有兩個動畫

This means that we can apply physics to him

一個叫Death，會失去帽子和槍 另外一個叫Falling

and the enemies during the game for more

用Exit Time當作動畫的切換條件 一旦Death播完就會切到Falling動畫

dynamic game play.

最後，在播放死亡動畫時 為了阻止玩家移動角色或射擊

In our PlayerControl script for the character

我們會禁用PlayerControl和Gun腳本

we check for player input.

由於Die函式是全域可以從任何地方呼叫 例如玩家掉入水中

We use this to apply physics forces

要在主角接觸水面時重置遊戲，我們 用一個由觸發器和腳本組成的KillTrigger物件

for movement and also send the value of the input

在大多的情況下 Remover腳本移除掉入河中的敵人

to the animator, which in turn defines which

並播放一個水花動畫和音效

animation should be playing and smoothly transitions

但如果是主角被觸發器偵測到時

between the different animation clips that

就會呼叫PlayerHealth腳本裡的Die函式

we've created as states.

並禁用CameraTracking同時將角色移出螢幕 並呼叫co-routiene函數(停止2秒)

The great thing about using the animator to

然後重生在出生點

create states from animation clips is

接下來焦點轉移到角色生存

that we can go and tweak speeds of animation

來看看它是如何生存 和我們給予它甚麼生存工具

to match our physics velocities

遊戲中有兩種幫助玩家的補給箱 一種箱子是炸彈，另一種可以補血

without having to reanimate anything

補給箱由箱子和降落傘兩個部分組成

The FixedUpdate function evaluates with

這兩個元素放入一個空白物件 我們就可以一起觸發動畫

each physics step, and the first thing we

我們定位這兩個圖片 降落傘的軸心位於父物件的中心

do with this is to feed the value of Horizontal

這樣動畫可以左右搖擺 讓降落傘是浮在空中的感覺