系統綜述
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。復制下面代碼。
[C#] 純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
TutorialSpriteScript.cs
using UnityEngine;
using System.Collections;
public class TutorialSpriteScript : MonoBehaviour {
tk2dSprite sprite;
void Start () {
sprite = GetComponent<tk2dSprite>();
}
void Update () {
if (Input.GetKeyDown(KeyCode.A))
{
sprite.color = Color.red;
}
if (Input.GetKeyDown(KeyCode.S))
{
sprite.color = Color.white;
}
}
}
|
? 將腳本綁定到精靈上。運行游戲,測試效果。
? 以下代碼可以動態的縮放精靈
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 動畫綁定腳本
? 通過腳本控制各個參數和讓它播放各個切片。新建腳本,代碼如下:
[C#] 純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49 |
TutorialAnimController.cs
using UnityEngine;
using System.Collections;
public class TutorialAnimController : MonoBehaviour
{
tk2dAnimatedSprite anim;
void Start () {
anim = GetComponent<tk2dAnimatedSprite>();
}
bool walking = false;
void HitCompleteDelegate(tk2dAnimatedSprite sprite, int clipId)
{
if (walking)
{
anim.Play("walk");
}
else
{
anim.Play("idle");
}
}
void Update ()
{
if (Input.GetKeyDown(KeyCode.A))
{
anim.Play("hit");
anim.animationCompleteDelegate = HitCompleteDelegate;
}
if (Input.GetKeyDown(KeyCode.D))
{
anim.Play("walk");
anim.animationCompleteDelegate = null;
walking = true;
}
if (Input.GetKeyDown(KeyCode.W))
{
anim.Play("idle");
anim.animationCompleteDelegate = null;
walking = false;
}
}
}
|
? 運行,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
[C#] 純文本查看 復制代碼
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
using UnityEngine;
using System.Collections;
public class TextMeshExample : MonoBehaviour {
tk2dTextMesh textMesh;
int score = 0;
void Start () {
textMesh = GetComponent<tk2dTextMesh>();
}
void Update () {
if (Input.GetKey(KeyCode.Q))
{
score++;
textMesh.text = "SCORE: " + score.ToString();
textMesh.Commit();
}
}
}
|
? 將腳本綁定到場景中的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