2DToolkit官方文檔中文版打地鼠教程


初始設置

創建一個Unity項目,並導入2D Toolkit插件。

導入完成后,在Project窗口會顯示TK2DROOT文件夾(后續版本文件夾名稱或許會有變動)。

導入素材游戲,你可以從這里下載。下載完成后,將素材導入到項目中。

設置攝像機

制作游戲的第一步,就是創建一個游戲攝像機。雖然Unity已經在Hierarchy窗口給我們提供了一個默認攝像機MainCamera,但為了簡單,我們使用2D Toolkit中已經為2D游戲場景優化過的攝像機。

  1. 刪除默認的Unity攝像機MainCamera,我們使用tk2dCamera。如果兩個攝像機都在場景中,在未正確配置的情況下會產生沖突。

  2. 在創建tk2dCamera之前,設置Game窗口的分辨率,以便tk2dCamera能夠自動匹配設置。在Game窗口左上角有一個下拉選項,單擊並選擇Standalone。如果你沒有看到這項設置,可能當前並非PC Mac and Linux Standalone,請先進行切換,然后選擇Standalone。

  3. 在Unity菜單欄中點擊 GameObject > Create Other > tk2d > Camera 創建攝像機,默認名稱為 tk2dCamera 。

  4. 如果Game窗口沒有被設置為Standalone,那么你將看到一些警告,例如:the camera has not been able to detect some of the settings. 選中Hierarchy窗口中的tk2dCamera,查看Inspector窗口中的設置,如下圖:

    在本教程中將始終使用Standalone模式以及1024*768的分辨率。

    Tk 2d Camera (Script)組件中的Native Resolution,是游戲開發階段的分辨率。

    Preview Resolution,是你的預覽分辨率,你可以修改這里來預覽不同分辨率下的顯示效果。

  5. 2D游戲的投影模式為Orthographic模式,如果不是的話你需要通過下拉選項將其修改為Orthographic。當前游戲中,我們只有單屏幕以及沒有滾動等其他效果,Pixels per Meter設置值為1即可。

  6. Origin(原點)決定我們為游戲對象定位時的測量起點,我們將原點設置為屏幕的左下角,在Origin字段的下拉列表中選擇Bottom Left。攝像機設置結束后,應該像下圖一樣:

  7. Camera選項卡:

    - Background Color背景顏色值將會顯示在游戲的任何透明區域,你可以通過單擊選擇一個新的顏色。

    - Clipping Planes值定義攝像機的Z軸可視深度,默認值為 Near:0.3 和 Far:10 。我們的所有游戲對象都應該在攝像機的可視范圍內。

Sprite Collections 精靈集合

之前我們已經導入了游戲素材,在Project窗口,你可以看到Mole文件夾。打開里面的Textures文件夾,你會看到圖片列表。

為了在項目中使用這些圖形,我們將它們做成Sprite Collection精靈集合。

  1. 在Project窗口,新建一個文件夾,命名為Sprite Collections。

  2. 選中Sprite Collections文件夾,單擊 Create > tk2d > Sprite Collection,在Sprite Collections文件夾創建一個SpriteCollection資源。

  3. 選中SpriteCollection資源,重命名為Land,用來存放land相關的圖片。

    注意:盡管我們的游戲相當非常簡單,但是如果你想做更大更復雜的游戲的話,思考如何將精靈分組是非常重要的。Unity內置動態分配系統,會自動減少draw請求,通過Z值可以非常高效的組織Sprite。在多個精靈集合中存在重復精靈時將增加draw請求次數,請不要將精靈添加到多個精靈集合。

  4. 在Inspector窗口中,單擊Open Editor將會打開SpriteCollection窗口。為了更方便的拖拽精靈到窗口中,你可以將窗口固定。

  5. 在Project窗口中,打開並選中 Mole > Textures 文件夾,拖拽下面的精靈到SpriteCollection窗口中Drop sprite here位置。你可以單獨拖動一個,也可以多個一起拖動:

    Cloud_01

    Cloud_02

    Cloud_03  

    Field_Background

    Field_Foreground

    Field_Midground

    Field_Ploughed

    Fields

    Grass_01

    Grass_02

    Sky_Burst

    Sky_Colour

    Stone_01

    Stone_02

    Stone_03

    Stone_04

    Stone_05

    Tree_01

    Tree_02

 

在Sprites列表下,你可以選擇其中一個精靈,它將會顯示在主窗口中。

  1. SpriteCollection窗口中,點擊Settings按鈕打開設置,這里的設置影響集合中的所有精靈。

  2. 在早期的2DToolkit版本中,為了讓游戲對象正確的顯示在屏幕上,你需要選中 Use tk2DCamera 選項。不過,在當前版本的2DToolkit中,精靈集合會自動檢測tk2DCamera是否使用。單擊 Commit 按鈕保存我們所進行的修改。

  3. 你可能會看到一個彈窗警告:unable to fit textures in the requested atlas area ,單擊OK按鈕。這里提示我們紋理過多,合並后的圖片可能超出大小,一般是指2048*2048這種。如果你做過圖片合並壓縮,可能會理解我的意思。

  4. 我們有兩種途徑解決此問題:在Atlas Settings中增加Atlas的大小,或者把大圖分割成多個小圖,或者兩種辦法同時使用。

  5. 在Spite列表中的選中一個精靈,能在主窗口的右下角看到圖片的大小。通過查看各個sprite,我們可以看到 Field 精靈尺寸最大。

  6. 選中Field的多個精靈,在右邊窗口中把 Render Mesh 值從 Default 修改為 Diced 。

  7. 它將會提供給我們兩個可供改變的值:Dice X 和 Dice Y。修改他們兩個的值為64並點擊Apply按鈕。這會將每個圖片分割為64*64的塊,不過不用擔心,2d Toolkit會在他們需要顯示時,將它們重新組合在一起。下面的圖片展示了修改之前和之后的樣子:

    正如你所看到的,精靈存儲為切割圖譜原始圖像而在切塊圖集中已進行切割。

  8. 返回Settings設置,並且將Atlas Settings中的Max Size值修改為2048並單擊Commit,圖集就會被創建。對於其他精靈圖集你可能需要經過試驗來找到合適的切片及圖集大小。

  9. 重復步驟2開始創建包含以下詳細內容精靈集合:

     

    Mole: Mole_Hit, Mole_Hole, Mole_Hole_Mud, Mole_Normal
    Dust: Animated_Dust_01 to Animated_Dust_16

記住確定你的修改!

將精靈加入到游戲中

現在,我們已經創建好了精靈集合。

  1. 在Hierarchy窗口中,點擊 Create > tk2d > Sprite 創建精靈。初始精靈可能會從2DToolkit中的Demo Sprite中選擇一個。

  2. 在Hierarchy窗口中選中精靈對象,在Inspector窗口中修改Collection值為Land,並將Sprite值改為Fileds。將精靈名稱修改為Landscape。

  3. Transform > Postion 里面的Z值,在2D游戲中表示游戲對象的深度。tk2dCamera的默認Z值為-10,所以為了能夠看到我們的精靈,這里的Z值要比攝像機的Z值大,Z值越大對象越遠,這里Z值設置為10。

  4. 你可能還需要調整Transform > Position中的X和Y值,它們可以調整精靈在屏幕上的顯示位置。默認的,Feild精靈的錨點被設置為精靈的中心點。你可以點擊tk2d Script下面的e按鈕來修改錨點位置,這里我們修改為Lower Left(記住Commit提交修改)。

  5. 重復上面的步驟來添加sky、trees、grass、rocks到游戲中。記得調整精靈的Transform Position的Z值來進行正確排序,越大的Z值離攝像機越遠,你可以改變錨點讓你更容易的放置精靈。像下圖一樣添加完成所有精靈。

:Static Sprite Batcher 靜態精靈批處理

  1. 在Hierarchy窗口點擊 Create > tk2d > Static Sprite Batcher,將名稱改為Background。

  2. 在Hierarchy窗口,拖拽每一個之前創建的背景對象到你剛添加的Static Sprite Batcher里。

  3. 將所有對象添加到Static Sprite Batcher后,選中它,之后在Inspector中點擊Commit按鈕提交修改。

    img/batcher_inspector_window.png

  4. Hierarchy窗口中的所有背景精靈會消失,只留下Background這個Static Sprite Batcher。

如果之后你需要修改Static Sprite Batcher中的精靈,你可以在Inspector窗口中單擊Edit按鈕。所有單獨的精靈會再次在Hierarchy窗口中出現,然后你就可以對其進行修改。

添加地鼠

我們已經有了背景,現在需要將地鼠加入游戲中。

每一個“地鼠”包括三個部分:地鼠、洞穴和洞旁邊的泥。我們將這三種組合成一個單元Unit。

  1. 首先創建一個洞穴,在Hierarchy窗口中點擊 Create > tk2d > Sprite ,在Mole精靈集合中選擇Mole_Hole精靈,並命名為Hole。調整Scale及Position讓他顯示在土地中間。目前攝像機設置為1024*768分辨率,所以將X和Y值分別修改為512和260。記住修改Z值讓洞顯示在背景圖片之前。

  2. 之后,確保在Hierarchy窗口中已經選中了Hole對象,點擊Create > tk2d > Sprite,在Mole精靈集合中選擇Mole_Hole_Mud精靈,調整Scale、Position並進行命名,讓它顯示在洞穴之前。這一步中,我們將泥創建為了Hole的子對象,所以所有的Transform值都是相對於洞穴的,它顯示在洞穴的中間而不是游戲屏幕的左下角(決定於Sprite的錨點)。而Z值也同樣相對於洞穴,調整Z值,讓它顯示在洞穴前面。

  3. 現在到了地鼠本身,因為地鼠會從洞里鑽進鑽出,所以我們遇到了一個問題:當地鼠鑽到洞里后,你仍然可以在屏幕上的洞下面看到它, 因此為了實現地鼠消失在洞里,我們將使用裁剪后的精靈。在Hierarchy窗口選中洞穴對象,點擊Create > tk2d > Clipped Sprite,然后從Mole精靈集合中選擇Mole_Normal精靈。

    調整地鼠的Position,讓它顯示在洞外面,可以將Y值設置為60。然后調整Z值讓它顯示洞前面、泥后面。同樣,你需要給鼴鼠添加一個碰撞盒子,我們使用碰撞盒子來檢測地鼠是否被打中。完成后應該如下圖一樣:

如果你點擊了Unity中的Play按鈕,游戲會運行,但不會顯示任何東西。我們需要添加一些腳本到地鼠對象中來讓他完成一些事情,之后我們會添加更多的地鼠。

如果你想將你的游戲工程與我們的進行對比,你可以從這里下載

腳本

在Hierarchy窗口點擊Create > tk2d > Empty GameObject,並重命名這個新對象為MoleUnit。在Inspector窗口修改Transform Position X/Y/Z值。在Hierarchy窗口,拖拽MoleHole到MoleUnit游戲對象,地鼠和泥游戲對象會自動跟隨。

提示:如果你修改X和Y並不容易,這里有另外一種方法:

在Hierarchy窗口中拖拽這個空游戲對象到MoleHole對象上,空游戲對象的X和Y值將會改變。

 

  • 選中空游戲對象,並將Inspector窗口中的X和Y值修改為0。

  • 在Hierarchy窗口中,選中並拖拽空游戲對象到MoleHole上,它將會和MoleHole擁有同樣的X和Y值。

  • 選中並拖拽MoleHole對象到空游戲對象中。MoleHole將會成為空游戲對象的一個子對象,並且Hole的X和Y值會變成0。

 

在Project窗口中,新建文件夾並命名為Scripts。選中Scripts文件夾,創建C#,並命名為MoleScript。

編輯腳本文件,並將代碼替換為下面文件中代碼:MoleScript C# version

當然,你也可以使用Javascript(UnityScript)代碼。Javascript代碼使用Create > Javascript來創建。Javascript版本的代碼可以從這里找到。tk2d的代碼是使用C#編寫的,但同樣可是使用你編寫的任何Javascript文件,在Unity菜單欄中,選擇2DToolkit > SetupForJs。

新建一個名為MainGameScript的C#腳本,之后編輯腳本並將MainGameScript這里的代碼復制進去。我們會在下一節中看到腳本的更多信息,但現在我們只需要編譯MoleScript。

你可以在這里找到MainGameScript的Javascript(UnityScript)版本

當保存完所有的腳本之后,在Project窗口選中MoleScript並拖拽到Hierarchy窗口的MoleUnit對象上,腳本會被添加到游戲對象中。

由於tk2dClippedSprite中包含一個名為Sprite的公共變量,所以我們可以把這個腳本和MoleScript腳本關聯起來。在Hierarchy窗口中,選中MoleUnit游戲對象並將它拖拽到Mole對象的MoleScript腳本中的Sprite字段中。

想了解MoleScript是如何工作的,點擊這里

如果你想將你的游戲工程與我們的進行對比,你可以從這里下載

Prefabs 預設體

我們已經有了Mole游戲對象以及腳本來控制它移動,為了讓后續更快速及簡單的重復使用,我們將它制成Prefab預設體,本質上它是一個模板,我們使用它來制作副本。

  1. 在Project窗口,創建一個名為Prefabs的文件夾。

  2. 在Hierarchy窗口,選中MoleUnit對象並拖拽到Prefabs文件夾。Hierarchy窗口中的MoleUnit、Hole、Dirt和Mole對象會變成藍色,這是因為這些對象已經是Prefab預設體了。

  3. 你可以從Project窗口拖拽MoleUnit到Hierarchy窗口來將它添加到游戲中。

  4. 你可以根據自己的需要添加不同數量的Hole和Mole游戲對象,記得修改每一個MoleUnit對象的X和Y坐標,直到你向下面一樣添加完成:

創建精靈動畫

到目前為止,除了Dust精靈集合,我們已經使用精靈創建了很多精靈集合。這些精靈與我們打地鼠時一個接一個顯示的不同,它是一個動畫。

  1. 在Project窗口,點擊Create > Folder創建文件夾並命名為Animations。

  2. 選中Animations文件夾,點擊Create > tk2d > Sprite Animation並命名為DustAnim。

  3. 選中DustAnim對象,點擊Inspector窗口中的Open Editor按鈕。

  4. 在新打開的Open Editor窗口中,點擊Create > Clip創建動畫剪輯。

  5. 將剛創建的動畫剪輯命名為DustCloud,在Collection字段選擇精靈集合Dust,然后設置Sprite字段為Animated_Dust_01。

  6. 點擊Autofill 1..9按鈕,將會自動添加后續編號的剪輯到動畫剪輯中。

  7. 之后再Wrap Mode字段,選擇Once。這個設置的意思是每次動畫被觸發時,動畫只播放一遍然后停止。

  8. 最后,點擊Play按鈕來對動畫進行預覽。你可通過修改frame和time設置來對動畫播放的快慢進行調整。

 

播放精靈動畫

 

之前我們已經創建好了動畫剪輯,我們可將動畫精靈添加到場景了。

  1. 在Hierarchy窗口,點擊Create > tk2d > Sprite With Animator。

  2. 在Inspector窗口中,為精靈動畫設置一個名字:BigDust。

  3. 在Tk 2d Sprite組件中將Collection設置為Dust,將Sprite設置為Animated_Dust_01。

  4. 在Tk 2d Sprite Animator組件中,將Anim Lib值設置為剛才創建的DustAnim。因為我們只想在地鼠被敲時播放動畫,所以不選中Play automatically復選框,選中會讓動畫在游戲開始時立即播放。動畫的位置在這里並不重要,我們會在地鼠被敲時動態的改變它的位置。

 

 

游戲腳本

現在是時候來完成游戲的所有功能了,盡管我們已經控制了每一個地鼠,但我們仍然需要一些東西來控制整個游戲。

  1. 在Hierarchy窗口,點擊Create > tk2d > Empty Game Object並命名為GameScript。

  2. 在Project窗口中,選中MainGameScript並拖拽到Hierarchy窗口的GameScript對象上。

  3. 這個腳本包含游戲攝像機的公共變量,以及一個動畫。選中並拖拽攝像機到Game Cam字段中,同樣拖拽BigDust到Dust Animator字段中。

如果你想了解游戲腳本是如何工作的,點擊這里

現在運行游戲,你就可以看到地鼠從洞里鑽出,而你也可以敲他們了。被敲到的地鼠的精靈圖片會改變,同時dust animation動畫被播放。

 

添加文本

我們的游戲已經可以玩了。地鼠從洞里鑽出來,打中他們后,會消失在一朵煙里。但你想知道你游戲玩得怎么樣,就需要在屏幕上顯示分數。

我們使用2D Toolkit中的一個演示字體,你也可以使用自己喜歡的字體包

在我們添加分數文本之前,我們需要確保他能正確顯示在屏幕上。我們添加一個anchor在我們的攝像機中,讓分數文本能夠更簡單的定位。

  1. 在Hierarchy窗口,選中攝像機對象,並點擊Create > tk2d > Camera Anchor。

  2. 在Hierarchy窗口中,一個Anchor對象被添加為攝像機的子對象。

  3. 我將把分數文本顯示在游戲窗口的右上角,所以讓場景的anchor到右上角。因此在Inspector窗口中的Tk 2d Camera Anchor(Script)的下面,點擊Anchor下拉列表並選中UpperRight。注意設置完之后anchior的x和y會被設置為攝像機的寬和高,那就是屏幕的右上角。

  4. 我們的分數文本的位置將會相對於anchor,在Hierarchy窗口中選中Anchor,然后點擊Create > tk2d > TextMesh。

  5. 在Hierarchy窗口中選中TextMesh,在Inspector窗口中你可以改變它的各種設置,這里需要修改的仍然是Anchor錨點。由於文本默認從左到右顯示,如果我們選擇TopRight,那么文本在屏幕上的位置將會改變。在分數變得更大時,為了容納更多文本,它會變得更大。所以為了使分數顯示在同一個地方,我們選擇Upper Left作為Anchor設置。

     

    從字體下拉列表中選擇GradientFont,並設置它的Max Chars值,這里設置為11,這包括了Score這個詞和后面的分數。注意,MaxChars值設置過大會浪費內存,設置過小會導致文本被裁剪。在文本框中輸入一些文本,我們預覽文本的顯示效果,隨后我們會在腳本中控制文本內容。

    在TextureGradient中選擇一個你喜歡的效果,我這里選擇desert-horizon。

    默認字體很小,所以我們需要對文本進行縮放以顯示在屏幕上適合的大小,我們這里選擇 600 * 500。

  6. 現在,我們有了顯示分數的文本,我們需要能夠改變分數文本。在Project窗口中,創建一個C#腳本命名為ScoreScript,並將這里的代碼粘貼進去。ScoreScript讓我們能夠很簡單的獲取及修改current score分數值。

  7. 在Project窗口中,選中ScoreScript並將它拖動到Hierarchy窗口中的ScoreText對象上。腳本將會被到添加到score文本對象中。

  8. 當打中一個地鼠后,增加10分,但沒有打中時,扣去5分。變量和函數我們已經寫在了腳本中,ScoreScript類使用它時並不需要創建實例,我們可以簡單的使用:

    ScoreScript.Score += 10;

    來更新分數。 因此當打中地鼠后( if(mole.sprite.gameObject.activeSelf && mole.ColliderTransform == hit.transform) ),我們通過在MainGameScript增加下面的代碼來控制分數。我們將使用的方法的核心代碼是:

    ScoreScript.Score += mole.Whacked ? 0 : 10;

    如果洞中的地鼠已被打中過,則0分。

 

為游戲添加聲音

現在我們為游戲添加一些音效。當地鼠被打中、從洞里鑽出以及鑽回洞中時會播放。我們在Projects > Mole > Sounds中已經有了這些音效。關於可用和不可用的音效格式,你可以查看這里

將聲音片段添加到游戲中很容易!

  1. 取消每一個音效的3D Sound選項。

  2. 為beat_mole音效在MainGameScript添加一個AudioClip變量:

    public AudioClip moleHit;

     

     

  3. 然后在打中地鼠的代碼中,也就是分數增加的代碼,增加如下代碼:

    AudioSource.PlayClipAtPoint(moleHit, new Vector3());

     

    此函數接受一個AudioClip和Vector3作為參數。Vector3對3D音效有效果,但我們這里使用的2D聲音,所以我們只新建一個空的Vector3。

  4. 現在在Hierarchy窗口中選中MainGameScript,將會出現一個MoleHit音效字段,我們可以將音效拖到上面。
    img/gamescript_audio_clip.png

  5. 添加mole_down和mole_up音效,在MoleScript腳本下聲明變量。

     

    public AudioClip moleUp;

    public AudioClip moleDown;

  6. 在MoveUp函數的最開始,循環之前,添加以下代碼:

    AudioSource.PlayClipAtPoint(moleUp, new Vector3());

    在MoveDown函數最結尾,循環之后,添加以下代碼:

    AudioSource.PlayClipAtPoint(moleDown, new Vector3());

  7. 同樣,如果我們選中MoleUnit,在Inspector窗口中的MoleScript下面將會可以添加mole_up和mole_down音效。為每一個MoleUnit重復上述步驟。

  8. tk2dCamera應該已經帶有Listener,沒有Listener,我們將無法聽到任何聲音。如果您使用的是舊版本的tk2dcamera沒有附帶Listener,或正在使用Unity相機,需要添加Listener:在Hierarchy窗口中,選中tk2dcamera對象,然后在Inspector窗口點擊AddComponent按鈕,然后選擇Audio > Audio Listener,Listener將被添加到相機,這就是所有你需要完成的事。
    img/add_listener.png

現在我們已經做完開發一個游戲的所有工作了。好吧,雖然它不是Halo 4這樣的游戲,但我們已經覆蓋了創建游戲的所有要點:添加一個相機、添加精靈、添加文本、添加聲音和腳本。如果你沒有游戲美工和游戲音樂師,不用擔心,網上有很多的資源你可以下載下來用到后續的游戲制作中。

 

 

 轉自:http://www.cnblogs.com/trlanfeng/p/4111843.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM