簡(jiǎn)介

蘋(píng)果公司在WWDC 2016大會(huì)上向人們展示了一大批新的好東西。其中之一就是SpriteKit Tile Editor。這款工具易于上手，而且看起來(lái)速度特別快。

在本教程中，你將了解關(guān)于Tile Editor中瓦片圖片的所有內(nèi)容，包括如何在Tile Editor中導(dǎo)入和渲染瓦片圖片。具體地說(shuō)，我要介紹在設(shè)計(jì)自己的新游戲Rubber Duckie Rescue(“拯救橡膠鴨子”)時(shí)如何使用這種新技術(shù)來(lái)實(shí)現(xiàn)如何使橡膠鴨子沿著指定線路行走。

準(zhǔn)備工作

首先，請(qǐng)下載游戲Rubber Duckie Rescue的初始工程(https://cdn1.raywenderlich.com/wp-content/uploads/2016/06/RDRescue-Starter.zip)，并確保你已經(jīng)安裝了Xcode 8。注意：本文寫(xiě)作之時(shí)，它僅僅發(fā)行了beta版本。

目前，該游戲還只是剛剛開(kāi)始;到本教程結(jié)尾之時(shí)，你會(huì)控制一輛小車(chē)，你將駕駛小車(chē)通過(guò)一片令人興奮的風(fēng)景區(qū)去拯救那些令人討厭的鴨子。

現(xiàn)在，請(qǐng)構(gòu)建并運(yùn)行一下你下載的上述程序。此時(shí)，你會(huì)看到你有一輛小車(chē)，而且小車(chē)可以響應(yīng)你的觸控。你可以通過(guò)觸摸把車(chē)送到一個(gè)特定的位置，或平移它讓車(chē)跟隨觸摸軌跡。目前，背景只是純灰色的。但別擔(dān)心!你會(huì)隨時(shí)改變的。

何謂瓦片地圖(Tile Map)?

創(chuàng)建背景時(shí)，你可以選擇使用較大的圖像或使用較小的圖像，它們都稱(chēng)為“瓦片”(tiles)。然后，把這些瓦片小心地一塊接一塊地放在一起，便創(chuàng)建一個(gè)完整的圖像。

例如，如果你正在創(chuàng)建一個(gè)高爾夫游戲，你可能需要使用草瓦片和沙坑瓦片。你還可能需要使用定義草和沙坑的邊緣的瓦片。

使用瓦片地圖的優(yōu)點(diǎn)

控制：以前，每一個(gè)瓦片都對(duì)應(yīng)一個(gè)新的SKSpriteNode，因此僅僅放置這些結(jié)點(diǎn)就是一場(chǎng)噩夢(mèng)。

現(xiàn)在，你只需要放一個(gè)SKTileMapNode，然后在它上面渲染瓦片即可。把單個(gè)的瓦片放上去是很容易的，而且在幾秒鐘內(nèi)就可以渲染生成整個(gè)背景。你甚至還可以繪制動(dòng)畫(huà)瓦片呢!

你可以將一個(gè)村莊放在一個(gè)瓦片層上，而把草放到較低層上去。若要實(shí)現(xiàn)從夏天到冬天的更改，只需要把茂盛翠綠的青草層替換成一個(gè)荒涼赤褐色的層即可，而村莊層保持不變。

性能：除了繪制瓦片方便外，性能也將得到很大改善。大圖像會(huì)占用大內(nèi)存，而小瓦片可以重復(fù)使用，因而占用較少的資源。

靈活性：每個(gè)瓦片都可以在代碼中控制。這意味著，你需要清楚了解你的游戲主角所在的瓦片位置。

在本教程中，你制作的游戲背景環(huán)境使用草和水瓦片，它們對(duì)于汽車(chē)的運(yùn)動(dòng)會(huì)產(chǎn)生不同的影響。此外，你還要?jiǎng)?chuàng)建瓦片鋪成的區(qū)域，鴨子會(huì)隨機(jī)放置在那里，由你開(kāi)車(chē)來(lái)拯救它們。

瓦片地圖類(lèi)型

游戲中共有四種類(lèi)型的瓦片集。具體地說(shuō)，你可以創(chuàng)建網(wǎng)格型、等距型、 六角形尖型或六角形扁平型的瓦片集。實(shí)際開(kāi)發(fā)中，你只需根據(jù)你的游戲的樣式選擇瓦片類(lèi)型即可。

本文中的Rubber Ducky Rescue游戲使用的是一個(gè)正方形網(wǎng)格。這是一個(gè)自上而下的游戲，但是你也可以使用網(wǎng)格瓦片來(lái)實(shí)現(xiàn)左右滾屏。

等距的瓦片都是鉆石形狀，就像Ravenwood Fair游戲中使用的那樣。

有兩種放置六角形的方法：把尖部或平面放到上面。下圖中展示的是尖部朝上的六角平鋪網(wǎng)格的示例：

游戲Sid Meier’s Civilization在其Civ 4版本中使用的是等距型網(wǎng)格，而在Civ 5版本中使用的是六角形的。

如何創(chuàng)建瓦片地圖

在橡膠鴨子救援游戲中，你會(huì)先用草和水畫(huà)兩個(gè)簡(jiǎn)單的背景瓦片地圖，取代當(dāng)前的灰色背景。以后，你將在后臺(tái)編碼中使用汽車(chē)需要收集的對(duì)象來(lái)創(chuàng)建新的瓦片地圖。

要?jiǎng)?chuàng)建瓦片地圖，你首先需要一些瓦片圖像。幸運(yùn)的是，有一些可以免費(fèi)使用的資源網(wǎng)站提供給開(kāi)發(fā)人員免費(fèi)使用一些現(xiàn)成的游戲圖像數(shù)據(jù)。

我們的游戲中將使用來(lái)自于kenney.nl(http://kenney.nl/)的資源。這是一個(gè)偉大的網(wǎng)站，它提供了大量的可以免費(fèi)使用的瓦片和其他可用的精靈。

使用Asset Catalog管理圖像數(shù)據(jù)

前面的初始項(xiàng)目中已經(jīng)有一個(gè)資源目錄，名字是Assets.xcassets。其中，包含了本教程所需要的所有瓦片和精靈圖像。

瓦片圖像存在于紋理地圖集中，而不是獨(dú)立存在于文件夾下。紋理地圖集的外觀和行為就像一個(gè)文件夾，只是其對(duì)應(yīng)的圖標(biāo)是四個(gè)小方塊，而不是一個(gè)大方塊。

使用紋理地圖集的優(yōu)點(diǎn)是性能方面。當(dāng)渲染你的游戲時(shí)，SpriteKit會(huì)針對(duì)你發(fā)送給它的每一個(gè)紋理向GPU發(fā)送“繪制調(diào)用”命令。如果將多個(gè)圖像組合到一個(gè)紋理中——稱(chēng)為紋理地圖，那么將產(chǎn)生唯一的一次“繪制調(diào)用”命令，而不是多次調(diào)用，從而具有更高的效率。

Asset Catalog可以自動(dòng)將你的精靈圖像組合到紋理地圖集中，而你不需要擔(dān)心如何算出精靈圖像在紋理地圖中的位置——SpriteKit自動(dòng)為你處理所有相關(guān)操作。

在本游戲中，你也將使用Asset Catalog中的圖像來(lái)創(chuàng)建瓦片集。

創(chuàng)建瓦片集合

在深入討論細(xì)節(jié)之前，你將先快速了解一下瓦片創(chuàng)建和繪畫(huà)過(guò)程。以后，你會(huì)學(xué)習(xí)創(chuàng)建和繪制一個(gè)更復(fù)雜的瓦片集。

首先，請(qǐng)定位到路徑File\New\File，然后選擇iOS\Resource\SpriteKit Tile Set模板并點(diǎn)擊“Next”按鈕。請(qǐng)參考下圖。

命名瓦片集合為T(mén)iles，然后點(diǎn)擊“Create”命令。

接下來(lái)，從工程導(dǎo)航器中選擇文件Tiles.sks，系統(tǒng)將為你自動(dòng)創(chuàng)建一個(gè)網(wǎng)格瓦片集和瓦片組。對(duì)應(yīng)于每一個(gè)瓦片集都有一個(gè)組。在本教程中，你需要為草和水創(chuàng)建組。

首先，選擇Tile Set。隨后，在屬性檢查器中，把瓦片集重命名為Groud Tiles。

現(xiàn)在，在瓦片集列表面板中選擇new tile group。再在屬性檢查器中重命名它為Water Tile。

然后，在屬性檢查器下部，選擇Media Library。如果你之前沒(méi)有使用過(guò)媒體庫(kù)，你很快就會(huì)發(fā)現(xiàn)用它來(lái)創(chuàng)建瓦片集是很方便的。

定位到WaterCenter圖片文件，把它拖動(dòng)到空的瓦片區(qū)。

[注1]瓦片集編輯器允許你在設(shè)計(jì)時(shí)將圖像直接從Finder中拖動(dòng)到Tile Group中。這看起來(lái)好像能夠正常工作，但是當(dāng)你運(yùn)行應(yīng)用程序時(shí)，它們會(huì)顯示一個(gè)紅色的 X。要避免這種情況，需要將你的圖像導(dǎo)入到Asset Catalog中，然后通過(guò)媒體庫(kù)在瓦片集編輯器中找到它們。

上面定義的是第一個(gè)瓦片組，現(xiàn)在你將創(chuàng)建第二個(gè)瓦片組。

[注3]在目前Xcode 8的測(cè)試版中，如果你只是創(chuàng)建一個(gè)瓦片組，那么當(dāng)你繪制瓦片時(shí)場(chǎng)景瓦片編輯器(Scene Tile Editor)可能無(wú)法識(shí)別它。要解決這個(gè)問(wèn)題，你只需要添加第二個(gè)組即可。

現(xiàn)在，請(qǐng)?jiān)诩狭斜砻姘逯羞x擇Ground Tiles，單擊底部的加號(hào)(+)，然后選擇“New Single Tile Group”，請(qǐng)參考下圖。

選擇“new tile group”并在屬性檢查器中把新創(chuàng)建的瓦片組名字更改為“Grass Tile”。然后，定義到媒體庫(kù)的圖像文件GrassCenter1并把它拖動(dòng)到空的瓦片區(qū)。

使用瓦片變體(Tile Variants)

用鼠標(biāo)左鍵單擊屏幕中央的草瓦片，見(jiàn)下圖。

在屏幕底部，你可以添加新的瓦片變體(variant)。當(dāng)你繪制瓦片時(shí)，編輯器將自動(dòng)隨機(jī)選擇這些變體之一;這樣，你在你的地圖中就會(huì)獲得許多變體。每個(gè)變體都可以在屬性檢查器中設(shè)置一個(gè)Placement Weight值。例如，如果你給一個(gè)變體設(shè)置Placement Weight值為1，第二個(gè)變體設(shè)置為2，那么第二個(gè)變體在你繪制時(shí)其水平放置尺寸將成為原來(lái)的2倍。

將圖像GrassCenter2拖動(dòng)到空的變體插槽(slot)處，然后再把GrassCenter3圖像拖動(dòng)到相鄰的空的變體插槽。請(qǐng)參考下圖。

現(xiàn)在，你已經(jīng)創(chuàng)建了你的第一個(gè)瓦片集，接下來(lái)的任務(wù)就是進(jìn)行繪制了。

瓦片地圖編輯器

請(qǐng)選擇文件GameScene.sks。目前，該場(chǎng)景中僅包含一個(gè)小車(chē)精靈。然后，從右下部的對(duì)象庫(kù)中把一個(gè)Tile Map結(jié)點(diǎn)拖動(dòng)到場(chǎng)景中。

在屬性檢查器中你的Ground Tiles集被自動(dòng)選為項(xiàng)目中唯一的瓦片集。其中，Tile Size被自動(dòng)設(shè)置為該瓦片集中瓦片的大小。然后，把地圖的大小更改為32列X24行。確保位置X和Y都設(shè)置為0且X和Y方向的縮放比例都設(shè)置為 1。

雙擊場(chǎng)景編輯器中的瓦片地圖節(jié)點(diǎn)啟動(dòng)瓦片編輯器。或者，在選定瓦片地圖節(jié)點(diǎn)的情況下選擇Editor\Edit Tile Map也可以啟動(dòng)瓦片編輯器。如果你已經(jīng)建立了瓦片地圖節(jié)點(diǎn)層的話，第二種菜單選項(xiàng)方式更方便。

如果你沒(méi)有看到一個(gè)網(wǎng)格，你可以放大場(chǎng)景編輯器，直到看到為止。

在場(chǎng)景編輯器視圖的頂部有一個(gè)新的工具欄，其中的刷子工具已經(jīng)被選中，而且默認(rèn)使用了水瓦片?，F(xiàn)在，你可以在瓦片地圖上點(diǎn)擊并拖動(dòng)開(kāi)始繪制了。

為了改變瓦片，你可以點(diǎn)擊工具欄中的刷子圖標(biāo)左邊的緊鄰的圖標(biāo)并從下拉列表框中選擇Grass瓦片。

繼續(xù)繪制。你會(huì)注意到已經(jīng)繪制了三個(gè)隨機(jī)的Grass變體。當(dāng)然，稍后你會(huì)看到更有趣的事情。

工具欄上的圖標(biāo)類(lèi)似于其他繪制程序中的圖標(biāo)，一般都是從左向右使用的。

l 抓手工具(Hand)允許你隨意拖動(dòng)場(chǎng)景。

l 吸管工具(Eyedropper)用于從那些已經(jīng)繪制的瓦片中挑選某一瓦片。

l 你已經(jīng)看到瓦片選擇工具(Select Tile)和畫(huà)筆工具(Brush)的用法，在此不再介紹。

l 填充工具(Flood Fill)用于使用你所選的瓦片填充連續(xù)的瓦片。

l 擦除工具(Erase)將刪除瓦片。

l 如果你要繪制大片地區(qū)，選擇畫(huà)筆大小工具(Select Brush Size)允許你改變筆刷的大小。

l 兩個(gè)圖章工具很有趣。選擇創(chuàng)建郵票工具(Create Stamp)(標(biāo)記有小圓圈圖章工具)。然后，在一個(gè)正方形中單擊，然后單擊另一個(gè)正方形(右邊且稍往下)從而以矩形選區(qū)方式選擇瓦片(可能多個(gè))?，F(xiàn)在，你已經(jīng)創(chuàng)建了一張郵票。

l 選擇選擇郵票工具(Select Stamp)(標(biāo)記有小圖章工具的那個(gè))，于是，你剛剛創(chuàng)建的所有郵票都會(huì)顯示于一個(gè)下拉菜單中。單擊并選擇一張郵票，然后就可以使用它作畫(huà)了。顯示有陰影的區(qū)域顯示郵票將貼到的位置。這個(gè)工具使得繪制大區(qū)域相當(dāng)容易。

l 隨機(jī)工具(Randomize)能夠清除現(xiàn)有瓦片并使用當(dāng)前所選的瓦片隨機(jī)繪制。這也是繪制大區(qū)域的好方法。

當(dāng)你已經(jīng)完成試驗(yàn)后(如果第一次使用，你可以先隨意地試用一下)，選擇水瓦片來(lái)填充整個(gè)地圖。你可以迅速填充空白區(qū)域。這將生成游戲背景。當(dāng)然，你可能通過(guò)第二瓦片地圖節(jié)點(diǎn)實(shí)現(xiàn)覆蓋更多細(xì)節(jié)。

現(xiàn)在，你已經(jīng)了解了如何創(chuàng)建和繪制瓦片，接下來(lái)我們要使用邊緣瓦片創(chuàng)建一個(gè)更復(fù)雜的瓦片集。