簡介

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

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

準備工作

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

目前，該游戲還只是剛剛開始;到本教程結尾之時，你會控制一輛小車，你將駕駛小車通過一片令人興奮的風景區去拯救那些令人討厭的鴨子。

現在，請構建并運行一下你下載的上述程序。此時，你會看到你有一輛小車，而且小車可以響應你的觸控。你可以通過觸摸把車送到一個特定的位置，或平移它讓車跟隨觸摸軌跡。目前，背景只是純灰色的。但別擔心!你會隨時改變的。

何謂瓦片地圖(Tile Map)?

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

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

使用瓦片地圖的優點

控制：以前，每一個瓦片都對應一個新的SKSpriteNode，因此僅僅放置這些結點就是一場噩夢。

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

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

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

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

在本教程中，你制作的游戲背景環境使用草和水瓦片，它們對于汽車的運動會產生不同的影響。此外，你還要創建瓦片鋪成的區域，鴨子會隨機放置在那里，由你開車來拯救它們。

瓦片地圖類型

游戲中共有四種類型的瓦片集。具體地說，你可以創建網格型、等距型、 六角形尖型或六角形扁平型的瓦片集。實際開發中，你只需根據你的游戲的樣式選擇瓦片類型即可。

本文中的Rubber Ducky Rescue游戲使用的是一個正方形網格。這是一個自上而下的游戲，但是你也可以使用網格瓦片來實現左右滾屏。

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

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

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

如何創建瓦片地圖

在橡膠鴨子救援游戲中，你會先用草和水畫兩個簡單的背景瓦片地圖，取代當前的灰色背景。以后，你將在后臺編碼中使用汽車需要收集的對象來創建新的瓦片地圖。

要創建瓦片地圖，你首先需要一些瓦片圖像。幸運的是，有一些可以免費使用的資源網站提供給開發人員免費使用一些現成的游戲圖像數據。

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

使用Asset Catalog管理圖像數據

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

瓦片圖像存在于紋理地圖集中，而不是獨立存在于文件夾下。紋理地圖集的外觀和行為就像一個文件夾，只是其對應的圖標是四個小方塊，而不是一個大方塊。

使用紋理地圖集的優點是性能方面。當渲染你的游戲時，SpriteKit會針對你發送給它的每一個紋理向GPU發送“繪制調用”命令。如果將多個圖像組合到一個紋理中——稱為紋理地圖，那么將產生唯一的一次“繪制調用”命令，而不是多次調用，從而具有更高的效率。

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

在本游戲中，你也將使用Asset Catalog中的圖像來創建瓦片集。

創建瓦片集合

在深入討論細節之前，你將先快速了解一下瓦片創建和繪畫過程。以后，你會學習創建和繪制一個更復雜的瓦片集。

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

命名瓦片集合為Tiles，然后點擊“Create”命令。

接下來，從工程導航器中選擇文件Tiles.sks，系統將為你自動創建一個網格瓦片集和瓦片組。對應于每一個瓦片集都有一個組。在本教程中，你需要為草和水創建組。

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

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

然后，在屬性檢查器下部，選擇Media Library。如果你之前沒有使用過媒體庫，你很快就會發現用它來創建瓦片集是很方便的。

定位到WaterCenter圖片文件，把它拖動到空的瓦片區。

 

[注1]瓦片集編輯器允許你在設計時將圖像直接從Finder中拖動到Tile Group中。這看起來好像能夠正常工作，但是當你運行應用程序時，它們會顯示一個紅色的 X。要避免這種情況，需要將你的圖像導入到Asset Catalog中，然后通過媒體庫在瓦片集編輯器中找到它們。

上面定義的是第一個瓦片組，現在你將創建第二個瓦片組。

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

現在，請在集合列表面板中選擇Ground Tiles，單擊底部的加號(+)，然后選擇“New Single Tile Group”，請參考下圖。

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

使用瓦片變體(Tile Variants)

用鼠標左鍵單擊屏幕中央的草瓦片，見下圖。

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

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

現在，你已經創建了你的第一個瓦片集，接下來的任務就是進行繪制了。

瓦片地圖編輯器

請選擇文件GameScene.sks。目前，該場景中僅包含一個小車精靈。然后，從右下部的對象庫中把一個Tile Map結點拖動到場景中。

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

雙擊場景編輯器中的瓦片地圖節點啟動瓦片編輯器?；蛘撸谶x定瓦片地圖節點的情況下選擇Editor\Edit Tile Map也可以啟動瓦片編輯器。如果你已經建立了瓦片地圖節點層的話，第二種菜單選項方式更方便。

如果你沒有看到一個網格，你可以放大場景編輯器，直到看到為止。

在場景編輯器視圖的頂部有一個新的工具欄，其中的刷子工具已經被選中，而且默認使用了水瓦片。現在，你可以在瓦片地圖上點擊并拖動開始繪制了。

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

繼續繪制。你會注意到已經繪制了三個隨機的Grass變體。當然，稍后你會看到更有趣的事情。

工具欄上的圖標類似于其他繪制程序中的圖標，一般都是從左向右使用的。

l 抓手工具(Hand)允許你隨意拖動場景。

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

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

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

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

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

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

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

l 隨機工具(Randomize)能夠清除現有瓦片并使用當前所選的瓦片隨機繪制。這也是繪制大區域的好方法。

當你已經完成試驗后(如果第一次使用，你可以先隨意地試用一下)，選擇水瓦片來填充整個地圖。你可以迅速填充空白區域。這將生成游戲背景。當然，你可能通過第二瓦片地圖節點實現覆蓋更多細節。

現在，你已經了解了如何創建和繪制瓦片，接下來我們要使用邊緣瓦片創建一個更復雜的瓦片集。