1. 程式人生 > >C#程式設計師整理的Unity 3D筆記(二十):2D Toolkit之官方教程《Whack a Mole》

C#程式設計師整理的Unity 3D筆記(二十):2D Toolkit之官方教程《Whack a Mole》

在上篇部落格中,簡單整理了一下Unity Native 2D功能:《C#程式設計師整理的Unity 3D筆記(十九):Unity 3D的Native 2D》. 本文開始學習2D商用比較廣泛的2D Toolkit外掛.

2D Toolkit外掛在2D中的地位,猶如UI中NGUI對Unity GUI一樣:雖然官方原生的2D還不錯,但這是最近1年新版本才有的功能,2年前Unity 2D的王道還是得用外掛的,故《2D Toolkit》就成了目前商業不錯的選擇。

在上週剛開始看的時候,就給自己提了3個問題 (1周後,自己給自己嘗試做了回答):

  1. 2D Toolkit是類似NGUI的東西嗎?

    答:是的,類似NGUI;2D toolkit是第三方外掛,廣泛用於2D的遊戲開發;其還包括了UI,可不用NGUI就能進行不錯的UI開發。

  2. 對比Unity Native 2D,2D Toolkit是否優勢已經喪失;或者是類似UGUI和NGUI關係?

    答:這個目前不得知。 粗淺的看,Unity Native 2D比較簡單,開發起來便捷,畢竟和Unity無縫整合的,且原生,另外還省錢;但是2D Toolkit都演變到2.5.2版本了,商用應該比較成熟,如其tk2dCamera簡直無敵了–能自適應各種螢幕、大大節約了編碼。

  3. 2D Toolkit能夠和Unity Native 2D同存否?

答:目前不知道。應該可以吧,2D toolkit已經於2015.5.24 釋出2.5.2版本,宣告支援Unity 5了。

2D ToolKit簡歷

2D ToolKit是第三方2D外掛,能處理圖集打包(Atlas Package)、精靈渲染(Sprite)、2D動畫(Sprite Animator)、2D UI,目前中文資料少得可憐。

2D Toolkit簡稱為TK2D,其功能據說是2D下最強大的,assetstore的下載點評竟然超過1200個,這個資料非常驚人,要知道售價價格要75美金呢。其外掛提供了C#程式碼,原始碼之內,了無祕密。

TK2D在assetstore的”編輯器擴充/2D與圖片管理”分類下,排名第一

image

我摘錄了部分官方官網assetStore點評:

low draw calls

pixel perfect camera:Unity 4.6 pro sprite package

get a response with 24 hours

manages multiple resolutions of sprite images (1x, 2x, 4x)

Very nice package

greatly sped up my animating process.

really streamlined my workflow.

organise all your sprites how you like in collections.

It’s fast at updating and rendering too.– opitimization

The best support、comunity

other:spline、NGUI

其點評大多集中在以下幾個方便

  • 降低了DC
  • 正版的售後服務好
  • 圖集打包很爽
  • 2D下效率高

正文開始–本文就官方教程《Whack a Mole》進行小結:

注:因為官方問答截圖、文字描寫清楚,我這裡為節約大家時間,不會寫的很細,請先預覽一下官方教程。

官方提供的Whack a Mole 材質下載地址

步驟1:瞭解官方文件對TK2D做的系統概括:

  1. Tk2D在編輯期間生成指令碼–Assets目錄
  2. Tk2D執行指令碼生成物件–場景

image

  1. 上面這張圖包含了TK2D的7個知識點 (術語) 的6個(除了Tilemaps外)
  • Sprite Collections: 精靈(2D下的圖片)集合,用於組織圖片,一般同z軸值的放在一起,效率高。
  • Sprites:精靈,任何需要在Scene顯示的均需要精靈元件,目前包含4種Sprite

image

  • Static Sprite Batcher:靜態化精靈–不參與碰撞的,可明顯減少DC
  • Sprite Animations:動畫精靈
  • Fonts:字型
  • Text Meshes:顯示文字
  • Tilemaps
  • 步驟2:tk2d camera 自動佈局的攝像機
  • 刪除新建Unity 2D工程的Main Camera,新增tk2dCamera,並設定tag為“Main Camera”。

image

  • 修改tk2dCamera引數如下:

image

  1. Native Resolution :1024*768
  2. Projection:Orthographic
  3. Type:Pixels Per Meter
  4. Pixels Per Meter:1
  5. Origin:Bottom Left
    • 例如:

pixel per meter – so 100×100 world units = 100×100 pixels from the bottom left

  • tk2dCamera實際上是對Unity的Camera進行了擴充套件,
這裡有詳細的對比說明和tip技巧。
  • 步驟3:精靈集合(Sprite Collections)、精靈(Sprite )、靜態精靈批處理(Static Sprite Batcher)
  • 要使用圖片,則需要首先新增Sprite Collections,它有3個作用:

1 把圖片組織管理起來–如果你有上百個圖片就會發現它的價值。

2 同z軸的組織起來,方便Unity引擎優化降低DC

  1. 3 自動進行圖集打包–減少圖片佔用空間
  • 為什麼要用Sprite Collection? 我認為比Unity Native 2D的預設能生成精靈而言,多了2個步驟。

img/spritecollection.png

  • 要新增精靈,需要先Check out–如我這裡使用Perforce原始碼管理。

image

  • 新增精靈很簡單,選擇、拖放即可:

img/spritecollection_drag.png

  • 針對當前Sprite Collection,進行Settings,然後一定要記得Commit:

image

  • 注意:這裡的Size和Pixels Per Meter,需要和上面的tk2DCamera保障一致。
  • Settings最下面有Platforms的設定,這個我沒有看明白:

image

  • 網上搜了一段程式碼,好像是為了適應不同螢幕的全域性設定:

image

  • 點選Commit後,就生成1了資料夾,包含3個檔案:*.prefab 、*.png、*.mat。

image

  • 使用Sprite就簡單多了,新增Tk2D Sprite物件或者新增TK2D Sprite元件,選擇Collection和Sprite即可:

image

  • 如果有n個Sprite,需要組織管理起來,預設會想到空的物件(EGO), 如果不參與碰撞等動態監測,可使用Static Sprite Batcher。 選擇需要靜態化的Sprite,拖放為Batcher的子物體,在Inspator檢視點選Commit,即可完成處理。
  • 有2點
神奇之處:

1 原來n個Sprite變為1個了,即僅僅是Static Sprite Batcher可見,其子物體消失了(點選Edit即可編輯)

2 明顯的減少了DC。

imageimage

步驟4: 程式碼實現 Clipped Sprite

    • Clipped Sprite是Sprite的一種,可動態實現隱藏、可見。
image
    • 通過動態設定Clipped Sprite的ClipRect的y值(y值範圍0.0~1.0f之間)
    • 同時調整其localPostion的y軸,可模擬圖片的隱藏、顯示效果。
  • 另外,這個思想也挺有趣的,使用n個return null代替waitforSecond.

private IEnumerator WaitForHit() 
        { 
            float time = 0.0f;

            while (!whacked && time < timeLimit) 
            { 
                time += Time.deltaTime; 
                yield return null; 
            } 
        }

  • 步驟5:精靈動畫(Sprite Animation)

Sprite Animation也是基於Sprite Collection的。

img/clip_settings.png

顯示動畫,需要用Sprite With Animator元件,下面這張圖一覽無餘:

img/animated_sprite_inspector.png

本文的整理到這裡就結束了,完整的請參閱官方教程–《Whack a Mole

注,本文使用的開發環境:

  • Unity 4.6.3
  • 2D toolkit 2.4.0