新聞中心 - 聯成電腦｜政府認定 AI 培訓班，轉職Python/室內設計課程首選

Unity 2D介紹(四)-角色控制與動畫

文/圖：林昭自前言在上一篇的介紹中，我們完成了場景的設置，同時也把角色身體的部位準備好(利用Sprite Editor來切割)，在本篇技術文章中，我們將設置好角色物件，並且利用Animator來編輯。組合出角色物件首先建立好Hero空物件來當成角色的根物件。接著依序加入下列的Sprite Renderer子物件：Bazooka(火箭炮)，hat(小帽)，leftEye(左眼)，leftLeg(左腳)，leftHand(左手)，rightEye(右眼)，rightFoot(右足)，rightHand(右手)，tache(鬍子)，body(身體)。組合完身體之後，為了讓角色有基本的碰撞，我們在根物件上加上Rigidbody 2D以及Box Collider2D兩個組件，但考慮到地形有可能有起伏，為了讓角色移動能更加平順，我們可以在角色的底部加上Circle Collider2D，用一個圓形來跟地形碰撞，可以提高整體移動的流暢性。另外為了避免角色旋轉，我們可以把Rigidbody 2D上面的Fixed Angle勾選起來，讓此Rigidbody 2D固定住角度，不要隨意旋轉。接著我們在Hero物件上加上Animator組件，Animator組件是Unity4所提出的新的動畫組件，有了Animator組建搭配Animator Controller我們可以更有彈性地編輯動畫。我們在Project視窗中，建立一個Animator Controller名為Character，接著我們可以透過Animation工具替角色編輯動畫，在這個階段，我們先編輯Idle(待機)，Run(跑步)以及Jump跳等動畫。接著在Animator編輯器中，我們可以編輯這三種動畫的關係，概念上角色播放動畫可以當成一種有限狀態機(Finite - State - Machine)，Animator 編輯器就是採用了有限狀態幾的概念，每一種不同的動畫，可以被視為是角色不同狀態，當發生特定事件時，角色會去播放不同的狀態的動畫。所謂特定的事件，在Animator編輯器中，是透過設定參數來達到的。以這個簡單的小範例來說，我們可以新增一個參數叫做速度，接著我們檢查速度這個參數的值，如果速度大於零，代表角色在移動，此時就播放移動的動畫，如果速度等於零，代表角色應該是靜置，此時就播放跑步的動畫，再切換動畫(狀態)的過程中，Unity同時會利用動畫混合的技術，讓動畫在轉換的過程中，可以更加的平滑，讓玩家不會有很突兀的感覺。結論在這篇文章中，我們把英雄的Sprite組合出來，在下一篇文章中，我們將為各位深度分析整個範例專案與製作流程。痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w

名師專欄 Unity 林昭自

名師專欄：Unity 2D範例(三)-基本概念

文/圖：林昭自前言在前幾篇的介紹中，我們說明了關於場景中背景的設置方式，在本篇技術文章中，我們將繼續帶您往下學習去。前景跟上一篇所說明的背景相似，我們先新增一個空物件取名為foregrounds，當作前景的群組物件，在foregrounds物件底下，我們將需要的Sprite設置上去：env_CloudTop(前景的雲朵)，env_PlatformBridge(有平台的橋樑)，env_PlatformTop(鐵橋樑)，env_TowerFull(前景的大鐘塔)，env_PlatformUfo(幽浮的機身)，env_UfoLegs(幽浮的腳)等物件。在這些前景物件中，大部分會跟玩家物件發生碰撞，因此除了加入Sprite Renderer組件之外，我們還需要加入Box Collider 2D，請注意，這邊我們不是利用之前常用的Box Collider，原因是如果是一個2D場景，Unity可以改用2D的物理引擎(Box2D)來加速運算，而Box Collider 2D或是Rigidbody 2D等就是專門給2D物理所使用的組件。另外在新版的Unity中，引進了一種新的組件叫Polygon Collider 2D。由於我們場景中需要碰撞的形狀不一定是可以用基本形狀來滿足，這類物件可以用Polygon Collider 2D來描述他的碰撞形狀，而且Unity會自動去計算碰撞的形狀，類似在3D物理中的Mesh Collider。當然如同Mesh Collider的效能議題，這類自定形狀的Collider在遊戲引擎的計算上一定會比簡單的幾何要慢得多，因此還是建議一般的情況下，儘量使用簡單幾何來當作碰撞。製作主角角色物件有了場景之後，我們可以來開始製作角色，角色的貼圖位於Project - Assets/Sprites/_Character/char_hero_beanMan.png，我們會發現這個角色貼圖的身體都是被拆開的，這種把同一個物件需要的貼圖部分，通通放在同一張貼圖的技術叫做Sprite Sheet，理由是為了效能議題，在Import Setting中，我們要指定這一張圖是Sprite Sheet，所以將Texture Type設定成Sprite (2D \ uGUI )，Sprite Mode指定為Multiple，Packing Tag指定為 characters，Pixel To Units指定為100。接著打開Sprite Editor，用匡選的方式，將不同部位匡選出來，定義出角色的身體不同的部位，同時給他們命名，例如Left Leg，Body等。全部匡選完畢之後，會發現剛剛匡選完的Sprite會出現在圖檔底下，代表這些是準備好可以被使用的 Sprite，我們可以利用這些Sprite來組合出我們的英雄。結論在這篇文章中，為各位示範了前景，以及英雄的Sprite，在下一篇文章中，我們將為各位深度分析整個範例專案與製作流程。痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w

名師專欄 Unity 林昭自

名師專欄：Unity 2D範例(二)-場景設置

文/圖：林昭自本文轉載自聯成電腦技術論壇，歡迎點選此連結，前往駐站專欄與講師互動。前言在上篇文章中，我們已經將此範例所需要的所有素材準備好了，也認識了Unity2D的基本操作，在此篇技術文章中，我們將繼續為各位介紹如何建構我們的場景。背景首先建立一個空物件命名為backgrounds(背景)，所有的背景物件都會是此物件的子物件，由於是2D遊戲，基本上大部分看得到的物件，都是一種Sprite物件，新增Sprite的方式可以由選單 - GameObject - Create Other - Sprite，或是新增一個空物件，再加上Sprite Renderer組件即可。在Sprite Renderer組件中，Sprite欄位便是要用來顯示的圖片，所有背景所需要的圖片都會被放在Assets/Sprites/_Environment這個資料夾中，為了要讓Spire Renderer能正確渲染2D的圖片，所有要被指定到Sprite的圖片，必須先透過Import Setting中的設定轉換成適合Sprite Renderer的貼圖格式。步驟是請先由Project中選擇圖片，之後會在Inspector中看到此圖片的Import Setting，在第一個選項Texture Type中，我們必須選成Sprite (2D \ uGUI )格式，這個格式便是專門給Sprite Renderer使用的格式。接著在第二個選項Sprite Mode的地方，如果是一張圖片只有包含一個Sprite，請選擇Single Mode，如果一張圖片包含了多個Sprite，那麼請選擇Multiple。在目前製作背景的情況，我們所需要的Sprite基本上都是Single Mode。背景群組中所需要的Sprite有： env_Clouds(雲朵)，env_bg(天空背景)，env_Gherkin(城鎮的遠景)，env_BigBen(大笨鐘)，env_Bank(河岸)，env_RiverBase(河流的底圖)，env_Fog(霧)，env_RiverMid(河流的中景)，env_RiverTop(河流的前景)等物件，將這些Sprite加入background物件中。另外為了控制所有Sprite物件的先後關係，在Sprite Renderer組件中提供了Sorting Layer以及Order in Layer等兩個選項供我們設定。Sorting Layer可以幫助我們管理分類，有點類似圖層的概念，Sprite的先後順序排序會先依照不同的Sorting Layer先排一次，接著在相同的Sorting Layer中，則透過Order in Layer來決定，Order in Layer的值越大，Sprite會被放在越上面。因此請將在background群組中的物件都指定到Background的Sorting Layer，Order in Depth則根據需求來調整。結論在這篇文章中，為各位講解了建構場景的背景，在下一篇文章中，我們將為各位深度分析整個範例專案與製作流程。痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w

名師專欄 Unity 林昭自

名師專欄：Unity 2D範例(一) 基本概念

文/圖：林昭自前言在前幾篇的介紹中，Unity是一套通用型的遊戲引擎，因此2d遊戲其實也可以透過Unity來製作。在Unity4.0公佈之後，引擎本身針對製作2D遊戲做了不少改良，從遊戲製作的流程，到物理的整合都有大幅的提升。在本系列技術文章中，我們將借由官方的一個範例，來分析學習新一代製作2D遊戲的流程與方式。事前準備在開始之前，我們需要先從官方的Asset Store下載此範例，請由Unity中的Window - Asset Store選單將Asset Store開啓，接著搜尋關鍵字2D Platformer，找到如右圖所示的官方範例之後下載並且匯入到Unity之中。在Unity4之後，我們首先可以注意到在Scene View選單中，多了一個2D的開關，當此開關被開啟時，意味著我們進入了2D遊戲的製作模式，正是因為如此，你會發現原本的Gizmo消失了，同時攝影機只能夠平移，不再能夠旋轉。如此我們可以專注在2d空間中，而不需要去煩惱怎麼樣旋轉攝影機才是正確的。當然此開關是可以被切換的，我們可以隨時回到原本的3d模式。在Unity還沒有引進2d製作流程時，我們要製作2D遊戲，往往會利用內建的Quad物件，貼上摟空的貼圖，來製作2D物件。由於這樣的方式，會間接導致我們必須要建立對應的材質，在物件數量很多的情況下，勢必導致Draw Call的上昇，(見前一篇的Atals技術原理)，因此不是一個很理想的做法。因此Unity官方將Atlas技術導入到新版的Unity中，並且加入了一種新的Component取名為Sprite Redenderer，當我們要製作一個角色時，我們可以先將此角色會動的地方拆開，然後全部畫在同一張圖上，這張圖就是我們所指的Atlas，也有人稱Sprite Sheet，接著我們可以藉由內建的Sprite Editor，來指定個別Sprite。除了引進了新的Sprite組件之外，Unity將目前火熱的2D物理引擎Box2D整合至引擎中，同時為了2D物理引入新的剛體與碰撞體，分別是Rigidbody2D與Collider2D，這些是專門用在2D物理之中的組件，因此不能夠與原本的Rigidbody以及Collider混用。這是要特別注意的地方。結論在這篇文章中，為各位先介紹Unity2D的概念，在下一篇文章中，我們將為各位深度分析整個範例專案與製作流程。痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w

名師專欄 Unity 林昭自

NGUI介紹(五)-Atlas及 Atlas Maker

文.圖：林昭自前言在前幾篇的介紹中，我們陸陸續續為各位示範許多NGUI內建的元件，但是目前我們在使用這些內建元件時，都是用NGUI所提供的圖片，在這篇技術分享文章中，我們將為各位說明要如何自己來製作這些圖片，讓我們的不管是按鈕，或是底圖，都能使用我們自己的美術圖檔。關於Atlas 所謂的Atlas，在遊戲業界或是圖學的領域中，是指由許多小圖片所組合成的大圖片，一般說來，會使用Atlas的原因主要都是因為效能上的需求，對於Rendering Pipeline中，切換材質是相對昂貴的工作，許許多多的小圖往往意味著在Rendering Pipeline中會導致過度頻繁的材質切換，而導致效能不彰。(關於這個議題可以參考遊戲引擎設計或是圖學的書籍)因此一個商業等級的遊戲在製作上往往會選擇使用Atlas來作為顯示UI圖片的方式，NGUI這個外掛也提供了相同的功能，讓我們來使用。製作Atlas的步驟如下： 1.首先將我們要用的圖片匯入Unity中，通常就是那些按鈕的圖片。 2.接著在場景中加入一個空物件，並且在此空物件中，加入UIAtlas腳本，這個UIAtlas腳本是NGUI事先提供好的，我們直接加入即可。 3.接著新增一個材質，這個材質是要給我們的Atlas使用的，Shader可以設定成Unlit/Transparent Colored(不打光，並且具有透明屬性)，新增完畢之後，將此材質指定到Atlas中的Material欄位。 4.接著將此物件重新命名，並拖曳到Project中，使這個物件變成Prefab。 5.接著我們由上方選單 NGUI - Open - Atlas Maker，將Atlas Maker打開。 6.Atlas Maker用來編輯我們的Atlas包含哪些圖片，如果目前不是選擇到我們剛剛所製作的Atlas的話，可以利用Show All的功能，NGUI會去更新清單。 7.接著在Unity的Project View中挑選你要的圖片，由Atlas Maker中的Add Update功能，Atlas Maker便會將此圖片加入到我們的Atlas中。 8.製作完的Atlas我們便可以由Sprite元件中來挑選指定。結論在這篇文章中，為各位介紹NGUI中的兩個通用控制項，在下一篇文章中，我們將為各位繼續介紹其它好用的元件。痞客邦Blog：http://lccnetvip.pixnet.net/blog FB粉絲團：https://www.facebook.com/lccnetzone 菜鳥救星：https://www.facebook.com/greensn0w

名師專欄 Unity 林昭自

搜尋近期熱門

搜尋近期熱門

關於我們

友站連結

AI賦能專區

產學就業班

單元證照班

政府公費班

企業服務

特別企劃

Unity

Unity 2D介紹(四)-角色控制與動畫

名師專欄：Unity 2D範例(三)-基本概念

名師專欄：Unity 2D範例(二)-場景設置

名師專欄：Unity 2D範例(一) 基本概念

NGUI介紹(五)-Atlas及 Atlas Maker