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

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

input in to the Speed parameter of our animator.

然後增加一個剛體讓它有重力往下掉

The transition between Idle and Run

箱子增加碰撞體用來探測它的著陸時機 和玩家撿起的時機

in our simple state machine requires

著陸之後 播放第二段動畫讓降落傘消失

that the Speed parameter is above 0.1.

跟遊戲其他地方一樣 動畫器控制物件的狀態

When it is, the animator blends from Idle

我們可以看到預設的情況下 它會播放FloatDown動畫

in to the Run state.

然後當Land = True時會切換到著陸狀態

We then go on to add forces to the player's

在腳本裡，我們使用onTriggerEnter函數 透過標記來檢測是否碰到地面

2D physics component, the rigidbody2D,

我們也將補給箱從父物件中分離 並給它一個剛體

in order to move him around.

它就可以和環境互動 比如降落在一個斜坡上就會斜停在坡上

We also handle which direction the character is facing

接下來看看炸彈

based on the value of Horizontal input,

撿起炸彈箱的動作是箱子上的 BombPickup腳本處理的

checking whether it is above or below 0.

透過角色身上的LayBombs腳本 增減主角擁有的炸彈數量

This is because in Unity, holding the left input key

LayBombs腳本負責檢查是否攜帶著炸彈 並負責產生並放置炸彈

returns a value of -1, where right returns positive 1.

炸彈設有定時裝置，在爆炸之前 透過BombDetonation裡的yield倒數計時

Depending on input, we then call a simple flip function,

爆炸函式執行幾個動作

which reverses the X scale of the character,

它會重置bombLaid參數 允許產生另外一個炸彈箱

giving him the appearance of facing the opposite direction.

它會通知產生器補充新的炸彈箱 並炸死範圍內的敵人

To decide whether the player is grounded

來看看最後一部分怎麼運作的

we added a layer in Unity called Ground

因為炸彈對敵人來說是致命的 不管他們的生命值剩下多少

and applied it to all of our walkable foreground surfaces.

我們用Physics.OverlapCircleAll方法收集 在爆炸範圍內所有標記為敵人的對象

We then used the Linecast function in 2D

然後為每一個敵人執行迴圈

to check whether something on the Ground layer

設定他們的血量為0 從爆炸地點到敵人算出一個向量並施加外力

is below the character's feet.

一旦迴圈跑完，就可以播放視覺效果

To customise this more easily we created

播放一段音效同時摧毀炸彈

an empty game object to use as a point

爆炸視覺效果有兩部分

at which to check for the ground.

主要部份是一個簡單的圓形 短暫的出現後摧毀

By adding a gizmo to this empty object

第二部分是星星狀的粒子系統 重複用相同圖片呈現火箭爆炸

we are able to manipulate how far below

效率上我們保持粒子系統持續在場景中 需要時我們用程式移動到指定位置播放

the character we'll check for the ground.

這樣可以讓粒子系統存在記憶體裡 使遊戲比較有效率

From a gameplay perspective this means that

這麼做主要是因為這個範例 同時只會有一個爆炸在場景中

the character can only jump when grounded.

因為玩家只能一次丟一個炸彈

Check out the rest of the comments in the script for more

這就是為什麼將粒子系統保持在場景中 並重複播放的原因，比起建立後移除有效率

information on the control of the player.

但如果是火箭爆炸，因為可以重複發射 因此需要建立後移除

We will discuss the player's weapon

讓我們看看主角殺死敵人 怎麼計算分數

later in this video.

這分為兩個部分，動畫顯示獲得100分 以及增加UI的分數計算

Next, let's take a look at how the camera

分數動畫由1和0兩個數字組成

tracks the player in our demo.

將它們放到場景中的空白物件

In 2D games, much like 3D, the motion of

給予一個簡單的得分動畫 並用程式讓它們在動畫完成後消失

the camera tracking the action can make

我們放置摧毀腳本在動畫事件尾端

or break your game.

ScoreUI單純是個GUI文字元件 帶有管理玩家分數的腳本

For a classic 2D platformer, we looked at the mechanics

Score是全域變數，代表隨時可以 檢查當敵人被殺死時增加100分

of one of the most interesting camera in 2D gaming history,

說到敵人，讓我們仔細看看他們

the camera from Super Mario World on the Super Nintendo

在我們的遊戲裡，有兩種類型外星敵人

or Super Famicom.

一種是綠皮膚的鼻涕蟲

In Super Mario world the camera tracks

另一種是會搭著飛船保護自己 的智慧型外星怪物

horizontally, but uses a dead zone

這些角色會共用一種腳本

or margin in the centre of the viewport

因為他們行為相似

in which the character can move a little

我們可以檢視它們的全域變數 並設定不同的移動速度和生命

without the camera tracking.

每個敵人都有自己的移動動畫

Once the character moved beyond this margin

鼻涕蟲有一個可以活動的尾巴 飛船內的敵人會前後搖擺移動

the camera tracks back toward the player.

對鼻涕蟲來說，我們匯入圖形 並把尾巴切為獨立圖形

The Super Mario World camera used particular heights

這樣我們就可以單獨縮放它 不會影響到整個圖片

to snap to vertically, but we didn't need this

軸心設定到右邊 我們可以漂亮的伸展收縮尾巴

kind of detail for our game as we

上下移動眼瞼

do not have a long level in the X axis

然後使用Z軸來排序 眼睛就會在眼瞼底下了

but more of a stage on which the action takes place.

就可以製作眨眼動畫

For this reason our camera employs

第二個外星人的動畫要簡單的多 我們只需要前後轉動它

similar tracking vertically as it does horizontally.

關於這些敵人的移動技術 我們透過改變剛體的速率來移動它們

Take a look at the CameraFollow script on the

當它們遇到一個牆壁這樣的障礙物時 會呼叫Physics.OverlapPoint函式來檢測

mainCamera game object to see comments

檢查是否有重疊到像是 牆壁和兩邊的塔被標記的障礙物

on how it achieves this effect.

當函式偵測到時，就會呼叫Flip函式

There are several effects in the game,

函式會翻轉敵人的X軸縮放 讓它轉到不同方向

but most important is our heroes ability

要殺死敵人，當敵人和火箭相撞時 在撞擊時會呼叫Hurt函式

to slay the alien onslaught he's faced with.

這個函式我們從敵人身上扣1點血

Our hero shoots a bazooka which has animated recoil.

並持續呼叫函式保持敵人持續扣血

This action is made up of several parts.

如果血條降到0，就會呼叫死亡函式

First we listen for key input and when the Fire key is

當他們死後，就會執行一些函式

pressed we instantiate a rocket,

會先停用所有的圖形渲染 因為2D角色大多都有動畫

play an audio clip and trigger an animation state to play.

這是為了把動畫物件換成單張死亡圖片

Let's break this down even further.

我們在圖形渲染器將圖片改為deadEnemy

in order to play the Shoot animation while other

然後我們幫Score全域變數增加100

animations such as Run are playing we

然後增加扭轉讓他們死亡時扭曲

created a separate layer within our animator

因此我們要讓這些敵人死後 掉入環境的河中

called Shooting.

我們找到物件上所有碰撞體 並設定IsTrigger = True

By setting the Weight property to 1 here

這樣他們就會穿過所有環境往下掉

we can totally override motion in the base layer

然後播放死亡音效之後展示一個分數動畫

on any parts of our character that are animated

要將已死亡的敵人從場景中移除

by clips on the shooting layer.

我們使用killTregger物件