Placeholder Image

字幕列表 影片播放

  • In Unity 4.3 we're launching our first set of 2D features.

    Unity 4.3 我們發佈了第一階段的2D工具

  • 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動畫