點點滴滴

系統綜述
2D Toolkit分為兩個系統：運行時組件（runtime components）和腳本編輯器。腳本編輯器在Assets目錄下產生資源，運行時腳本在場景中產生objects。

兩者關系如下圖：



術語和介紹
精靈集（sprite collections）
精靈集是2D Toolkit的核心，可以把它想象成存放sprite的文件夾，sprite collection界面設置精靈及其關聯屬性，包括碰撞區。精靈集產生一個或多個貼圖圖集，替代你的原圖片從而提高性能。

精靈（sprite）
精靈集中的獨立組件視為精靈。這些應該和你的原圖片統一，盡管內部可能有各種變化。你可以把精靈綁定在其他精靈上，或通過其他手段來控制它們。

靜態精靈批處理器（Static Sprite Batcher）
批處理器把精靈集中的多個精靈聯合在一起，合并它們成為一個物體。這個合并操作是無損的，日后可以逆操作（解散操作）再次使用它們。設置在精靈集中的碰撞區信息被直接轉換到批處理器中。

精靈動畫（Sprite Animation）
精靈動畫包含動畫切片。動畫切片是一段時間內的sprite序列。動畫切片在播放時可觸發事件，這個事件你可在代碼中響應。比如人物腳踩地，播放一個音效。動畫切片可使用精靈集中的任意sprite。

帶動畫的精靈（Animated sprites）
帶動畫的精靈在場景中被創建并綁定了精靈動畫。帶動畫的精靈可以播放綁定的所有動畫切片。

字體（Fonts）
Font objects transform text or xml BMFonts to be consumed by TextMeshes

文字網格（Text Meshes）
文字網格使用字體對象顯示字符串。文字網格定義了可顯示的最大長度，所以它不用不斷的新建內存。

快速開始
1. 精靈
1.1 創建精靈集
精靈集是2D Toolkit的一個基礎形式。它以列表形式展示貼圖和關聯屬性。精靈集可處理圖集的創建和各種用戶參數。一旦創建，精靈的任何改變都會自動重構圖集。V1.6起可以加入字體到精靈集合中。添加到精靈集中的字體不能使用漸變，因為需要單獨材質。

接下來通過2D Toolkit提供的資源創建一個簡單的精靈集合。
? Project視圖中點擊“Create > tk2d > Sprite Collection”來創建精靈集。也可在菜單欄中通過“Assets > Create > tk2d > Sprite Collection”來創建。（在文件夾中創建精靈集會是你的工程更整潔）

? 創建好精靈集后起一個合適的名字，本例中叫它“TutorialSpriteCollection”好了。

? 點擊“Open Editor…”打開編輯器

? 把精靈加入到精靈集里，拖拽資源圖片到“Drop sprites here”虛線框中。本例中拖入了demo里的資源圖片，你也可以放入任何目錄下的任何圖片。

? 拖拽后這三張圖片被選中，你可以改變其參數。然后點擊“Commit”。

當你在此界面（精靈集編輯界面）做了任何修改都請點擊“Commit”。
順便說一下，點擊Commit后Project界面中生成了“TutorialSpriteCollection_Data”文件夾。



到此，通過資源圖片創建的精靈集已完成。若資源圖片改變了，這些精靈集中的圖集及關聯參數將自動重構。
注意：精靈集合默認是為960*640分辨率創建的，如果設備分辨率不同，請改變后重新Commit。



1.2 創建精靈
? Hierarchy界面中點擊“Create > tk2d > Sprite”創建精靈。

? 創建好的精靈出現在Hierarchy界面中，并根據可用信息自動為其分配了名字。

? 選中場景中剛建好的精靈，或在Hierarchy界面選中它，將在右側出現Inspector界面。

如果2D Toolkit沒有為你自動選擇正確的精靈集，你可以自行設置（如上圖）。選擇精靈集后選擇一個精靈。場景中的實例將立刻改變。如果你的精靈集設置了碰撞區，則相應的碰撞區也會在場景中自動創建。

注意：將攝像機參數設置為和精靈集一樣。默認參數為size為1的正交攝像機，目標分辨率為960*640。如果你的攝像機以這個參數創建，則你的精靈將完美呈現。




1.3 為精靈綁定碰撞區
? 選擇精靈集，然后點擊“Open Editor…”

? 你可以設置各種參數，諸如：錨點、切割和填充算法。你可以同時選中多個精靈來編輯。

? 改變碰撞區類型為“Box Trimmed”（盒子邊框型），這將在貼圖四周創建邊框。如想更多的控制其位置，請選擇“Box Custom”，便可拖拽邊框。

? 點擊Commit。
每次做了改變都請點擊Commit，以便重構圖集和頂點數據。
? 關閉精靈集編輯窗口，此時場景中的精靈已經綁定了碰撞區。用該精靈創建和即將用該精靈創建的實例都會綁定碰撞區。

1.4 創建多邊形碰撞區
? 在場景中添加石頭精靈，至于如何創建，可參考前面的教程。

? 這個石頭無法用box來精確表現，所以我們將創建多邊形碰撞區。選擇精靈集合然后點擊“Open Editor…”。
? 在編輯器中選擇石頭。
? 選擇Collider Type為“Polygon”。將產生一個box框住貼圖，我們來塑造它。
? 切換到“Sprite View”到碰撞區編輯模式。

? 通過點擊、拖拽多邊形控制點粗略的適配到石頭的形狀。別忘了滾輪縮放，在mac系統的2手指滾動手勢。
? 雙擊多邊形的邊可以添加控制點。更多的快捷鍵列表在右側面板。
? 重復剛才步驟達到精確匹配這塊石頭。

? 點擊Commit保存。場景中的石頭將出現你定義的網格。


1.5 精靈腳本
你可以通過代碼來控制各種參數，從而控制精靈。本例中將檢測按鍵并改變box的顏色。
? 創建C#文件，命名為TutorialSpriteScript。復制下面代碼。

? 將腳本綁定到精靈上。運行游戲，測試效果。
? 以下代碼可以動態的縮放精靈
sprite.scale = new Vector3(xScale, yScale, zScale);
? 以下代碼可改變要顯示的精靈
sprite.spriteId = newSpriteId;
? 以下代碼可以得到id
sprite.spriteId = sprite.GetSpriteIdByName("Rock");

2. 靜態精靈批處理器（Static Sprite Batcher）以下簡稱“批處理器”
2.1 使用批處理器
? 首先在場景中建立多個精靈。

? 隨著我們添加很多復雜的精靈，性能將急劇下降。為了避免這種現象我們可以用批處理器。這讓你批處理很多數量的精靈（目前僅限于一個精靈集合中的精靈）成為一個大的網格（mesh）。物理碰撞區將被自動拷貝下來。
? 在Hierarchy窗口中點擊“Create > tk2d >Static Sprite Batcher” 來創建批處理器。

? 將之前創建的精靈拖到Static Sprite Batcher中

? 然后選中Static Sprite Batcher，點擊Inspector界面中的Commit，將看見精靈都被移除了，只剩下Static Sprite Batcher。

? 任何時候想復原，再編輯精靈，點擊“Edit”按鈕即可。編輯完成后別忘了Commit。

2.2 關卡創作技巧（Level Creation Tips）
? 如果關卡貫穿好幾屏內容，僅僅用一個批處理器是不夠的。unity將描畫整個批處理器（即使只有1%可見），換而言之不可見部分也描畫了。按邏輯劃分它們（建立多個批處理器），保持unity高效的繪制。
? 碰撞區表示了不可通行區域。如下圖，別忘了Commit。




3. 含有動畫的精靈（Animated Sprites）
3.1 創建精靈動畫
? 我們用額外的精靈舉例，資源可以從這里下載：http://2dtoolkit.com/doc/tutorial/img/charactersprites.zip
? 將圖片放到你的工程中，本例放在\Assets\Test\AnimationPic

? 創建精靈集，命名為“AniCollection”，然后“Open Editor…”，把圖片拖進去。（此處和官方教程不太一樣，官方教程的做法實在找不到怎么做的，可能是版本不同）
? 接下來創建動畫，在Project窗口選擇“Create > tk2d > Sprite Animation”，起名為“CharacterAnims”。
? 選中“CharacterAnims”，然后在Inspector窗口點“Add clip”。

? 創建空閑切片。如下圖：

? 為行走循環添加新切片。點擊“+”按鈕，命名為“walk”。將Frame rate改為7，然后下拉菜單中選擇“anicollication”和“walk1”，然后點擊“AutoFill”，剩下的所有幀將被自動選擇。

? 同樣方式添加“hit”動畫。

3.2 創建帶動畫的精靈
? Hierarchy窗口中點擊“Create > tk2d > Animated Sprite”

? 選擇剛建立的動畫精靈，右側參數“Play Automatically”為游戲運行時就播放。適合背景動畫。本例以idle為例。

3.3 動畫綁定腳本
? 通過腳本控制各個參數和讓它播放各個切片。新建腳本，代碼如下：

? 運行，AWD鍵測試效果。

4. 字體（Font）
4.1 準備字體
? 2D Toolkit支持xml和text字體格式。唯一限制是它僅支持單頁貼圖。最大ASCII字符默認為128，如果需要額外字體你可以在Font object增加這個值。
? 用以下配置達到最好效果：
? BMFont – 導出選項：32 bit, Channels A - outline, RGB - one (no outline) or glyph (when an outline has been set up).
? Hiero - In Gylph Cache, Set page width and height so you end up with 1 page exactly. Increase padding around characters.
? 在Project窗口點擊“Create > tk2d > Font” ，最好導出在同一目錄（這不是必須的），然后命名為TutorialFont。

? 給字體對象指定xml/text字體和貼圖。自從V1.51后材質不是必須的。如果沒有一個可用的，2D Toolkit將自動為你創建。

? 點擊commit。現在你可以在場景中TextMeshes中使用字體了。

4.2 創建和使用TestMesh
TextMesh用指定字體描畫字符串。
? 在Hierarchy窗口中點擊“Create > tk2d > TextMesh” 創建TextMesh。

? Font下拉菜單中選擇我們創建的字體，然后填寫想要在TextMesh上顯示多少個字符。如果超過這個限制你的字符串將被刪減。這里還可調節其他參數。

4.3 使用漸變和內部風格的變化
? 你可以使用漸變貼圖產生高質量的漸變。除此之外，2Dtoolkit還支持內部風格的變化：一個TextMesh中漸變。
? 為TutorialFont添加一個漸變。設置漸變塊數，本例有8塊。這是本例中用的漸變圖：



? 點擊Commit。任何TextMeshes用這個字體都將有漸變。
? 在場景中創建TextMesh并選擇TutorialFont。你將可以選擇任意漸變塊來給TextMesh著色

? 在TextMesh的Inspector界面勾選“Inline Styling”。可以使用內部風格，可挑選前10個漸變。例如輸入Let us go!!效果如下：

（注意Text的內容中^1 ^2是指定用第幾個漸變塊的命令，漸變塊索引從0開始。）
? 這也可以使用在sprite中，功能很強大。

4.4 TextMesh綁定腳本
? 本例用Q鍵來增加分數，代碼如下：
TextMeshExample.cs

? 將腳本綁定到場景中的TextMesh上，執行，測試效果。
? 另外，縮放代碼：
textMesh.scale = Vector3(xScale, yScale, zScale);
? 顏色代碼：
textMesh.color = Color.red;
? 如果允許漸變，設置第二顏色如下：
textMesh.color2 = Color.green;
? 注意：雖然你可以在代碼中改變Max Chars的值，但是你應該避免這樣做，因為運行時會重新分配內存。



5. 高級技巧（Advanced）
5.1 導入字體到精靈集
? 你可導入字體到精靈集中以便將來描畫。但這種方式不能使用漸變。
? 新建精靈集，并“Open Editor…”，或使用一個現成的精靈集。
? 點擊“Create > Font”。
? 我們用之前的小人動畫這個精靈集來演示。

? 拖入bmfont的xml/text文件到“BM Font”。（這里我們拖入之前創建的fnt文件）
? 拖入字體貼圖到“Font Textture”。如果格式不對，將有錯誤提示。

? 記住：這是一個全局操作，這將影響到所有font實例。如果你打算在其他方法中使用相同字體，復制這個來使用將很方便。
? 如果你沒有data object將提示新建一個。點擊create并選擇一個目標文件寫入，如下圖：

? “保存”后，如下圖：

? 點擊Commit，就可以使用這個font了。
比如選中之前Hierarchy中創建的TextMesh，可在Inspector界面看到;


5.2 導入精靈表（Spritesheet）
? 你可以導入精靈表到2D Toolkit直接使用。下面來演示。使用這張圖：

? 新建精靈集，然后“Open Editor…”，或使用現成的精靈集。
? 我們還是以小人動畫為例，點擊“Create > Sprite Sheet”

? 拖入貼圖，如果沒有正確建立，將提示。點擊“Set up”讓2D Toolkit自動做必要的改變。

? 設定tile的參數，改變參數后將以紅色覆蓋切片。如下圖：

? 圖示說明參數意義：

? 參數設置完成后點擊“Apply”，編輯器將切割圖片。并切換為“編輯模式（Edit Mode）”
? 該模式中，可在精靈表中選擇塊并單獨設置參數。可單選或用Ctrl來復選，或框選。我們可以選中黑色無用的塊，并點擊“Delete”刪掉它們。

? 這些貼圖不會在最終圖集中使用。想重新編輯圖塊的話，切換到“Config”面板就好了。

? 若編輯完成點擊Commit。便可使用精靈集了。原圖的任何改變都會引起重構精靈集。


5.3 一個精靈集多種材質（Multiple Materials in a Sprite Collection）
? 某些情況下，將多個精靈合并到一個圖集是有益的，這些精靈保持不同的材質。比如，導入切片圖塊到一張切片地圖。它們大多數是實體（可能指整個圖塊不透明），簡單的分配實體著色器到這些精靈將獲得顯著的GPU收益。
? 打開精靈集編輯器，點擊“Setting”

? 點擊“+”材質列表。這將復制材質，并將拷貝保存在同一目錄。你可以點擊材質，改變其著色器。你可以建立任意多個拷貝。

（可選擇一些現有著色器，也可點擊“Edit…”來編輯代碼實現著色器效果）
? 在Project界面選中新建的材質，點擊delete鍵，便可刪除你復制的材質。
? 選中精靈，你可以看到Material下拉菜單。可以選擇精靈材質。

? 點擊“Select”按鈕，可以將有相同材質的精靈都選中。然后可以批量編輯材質，然后點擊新出現的“Apply”按鈕來確認改變。

6. 攝像機（Camera）
6.1 tk2dCamera
? tk2dCamera是使之以像素為單位工作的很好的解決方案，并在無用戶干預的情況下自動適配各種分辨率。
? 為了使精靈無縫的與tk2dCamera工作，需要在Inspector界面勾選“Use tk2d Camera”項。（選中精靈時沒找到，選中font時有這個選項）

? 請記住，tk2dCamera與舊方法建立的精靈也兼容。勾選“Use tk2d Camera”選框來創建的精靈不會在標準正交攝像機中自動調整大小。
? 在Project窗口點擊“Create > tk2d > Camera”來創建tk2dCamera，也可在菜單中“Assets > Create > tk2d > Camera”來創建。

? 如果你打算把這個作為游戲的主攝像機，請確保場景中沒有其他攝像機。
? 添加精靈


添加一個精靈到場景中。設置精靈集合為DemoCameraSpriteCollection。
把精靈放到100，100位置

無論屏幕分辨率，精靈將被放在100，100

有事改變分辨率后，不會馬上刷新，請按播放，停止就好了。

錨點
Tk2d攝像機支持錨點。支持9個點“田”。你也可以指定錨點的像素偏移。錨點坐標系統和攝像機坐標系統一致。
選擇tk2dCamera
在inspector界面點擊create anchor，來創建錨點。

設置錨點，如下圖

任何sprites父化到這個錨點，將被固定到錨點的相對位置。下面的心固定到top right 錨點，
480*320

320*240