SpriteKit基礎介紹之一: 場景(Scenes)、節點(Nodes)、標籤(Labels)和座標點(Points)


建置應用程式很不簡單,但是做遊戲其實更難,特別是開發者本身不是一個玩家,雖然每當我開始學習遊戲編程時,都會這樣對自己說,最終卻都退卻了。今年,我終於意識到我做錯了:過去太專注在建立一個大的東西,因此從一開始就害怕眼前的巨大任務,但應該是從小的部分開始,保持愉快的開發步調。我們想製作有趣的遊戲,所以如果沒有享受創造它們的樂趣,那如何抓得到重點呢?因此,我得到了啟發:你不必從頭開始創建一個完整的遊戲,你只需要想到一些簡易的任務來起頭,其餘的就會自然發展下去。

在這個系列教程中,你會面對一個簡單的挑戰:藉由SpriteKit與Apple的2D遊戲框架,當你點擊螢幕時,將會同時讓標籤移動,縮放和旋轉,以下為本文讀者需要了解的概念:

  • Scenes
  • Nodes
  • Labels
  • Points
  • Gesture recognisers
  • Actions

這些概念實際上是相當豐富的,所以讓我們開始吧! :)

本系列教程介紹

在本系列的第一個部分中,透過將標籤(labels)置中在螢幕畫面的動作,來了解關於場景(scenes)、節點(nodes)、標籤(labels)和座標點(points)的所有知識。第二部分藉由移動,縮放和旋轉標籤,來教你關於手勢識別和動作的全部用法。

center label

你可能會想,為什麼我會在系列教程的第一部分,教你如何將標籤置中。這不是很容易嗎?

學習顯示並置中標籤的動作,是剛開始學習場景和節點並且將它們融會貫通最簡單的方法。在學習進階內容(如手勢識別和動作)之前,先了解如何定位標籤,以及操作節點和場景是非常重要的。

如果你沒有理解和正確地掌握基本知識,那介紹更進階的東西(如碰撞檢測和物理動作)也是沒有意義的。讓我們從基礎開始吧!

你的第一個SpriteKit專案

學習一個framework最好的方法就是使用它。所以,現在來創建我們第一個SpriteKit專案。請先啟動Xcode並從iOS專案選單中選擇Game的模板(template),如下所示:

Xcode Project Template

下一步進入專案設定:

project-settings-spritekitdemo

在這裡,最重要的事情是選擇Game Technology項目欄位-確認你在對應的選單中選擇了SpriteKit

menu

現在請儲存你的專案,完成 – 該是整理它的時候了!

整理你的專案

遊戲模板會提供樣板程式碼便利你的初始工作,但讀者將從頭開始編寫所有內容,因此,請清除GameScene.swiftGameViewController.swift文件中的所有內容。

GameScene.sksActions.sks文件可幫助你更直觀的設計場景和動作。但是,先以編程方式創建它們會更容易理解,所以現在請先刪除這兩個文件 – 你將在另一個教程學習如何使用SpriteKit編輯器。請確保在提示時將文件永久移動到垃圾桶,而不是僅僅從項目中刪除它們的引用:

這些就是我們前期需要做的專案整理工作 – 編寫程式碼的時候到了!

建立視圖控制器

因為我們已經清空GameViewController.swift,我們現在將從頭開始創建視圖控制器(view controller),將以下這段程式碼添加到GameViewController.swift文件,開始我們的編碼動作:

這裡我們import SpriteKit的框架進來,並且進行類別宣告,該類別是一個標準的視圖控制器,它的主要作用是在控制器的視圖加載後呈現遊戲場景,因此將viewDidLoad()方法添加到class裡面:

讓我們一步一步介紹上述程式碼的意義:

Line #1 – 你覆寫了視圖控制器裡面的viewDidLoad()方法 – 它在視圖控制器加載到內存後立即運行。
Line #2 – 你使用GameScene類別內指定的初始化方法(designated initialiser)創建場景:它貼滿整個螢幕畫面,因此它與控制器視圖的frame相同大小。

注意:此時Xcode會顯示錯誤:Use of unresolved identifier “GameScene”,因為您尚未實現GameScene類別,接下來我們會盡快解決這個問題。

Line #3 – 強制將控制器的視圖轉型為SpriteKit視圖 – 這是唯一呈現SpriteKit內容的視圖類型。在這種情況下,因為我們正在使用遊戲模板,所以轉型動作大多會是成功的,因此將控制器視圖的類別預設為SKView,而不是storyboard裡面的UIView

view

Line #4 – 在螢幕畫面上呈現遊戲場景(scene)。在一個完整的遊戲中,你將透過轉換來呈現多個場景,但現在為了保持專案的簡潔,將只會使用一個。

以上為視圖控制器的設置作業。 現在,讓我們繼續創建一個場景。

創建一個場景

同樣,我們將GameScene.swift文件的內容清空。我將在這裡教你如何從頭開始創建它。請先將以下程式碼添加到GameScene.swift文件中,開始我們的建置作業:

你將SpriteKit框架import進來,並且定義了類別,它是標準SpriteKit場景的子類別(即SKScene)。前一個錯誤已經被修復,所以構建和運行專案,查看你場景的呈現結果:

empty scene

注意:我使用iPhone 5s模擬器來運行這個專案,讀者可以隨意挑選你最喜歡的模擬器。[/ ecko_alert]

場景看起來是空的,除了本身做為場景之外,它沒有其他節點連接到它。Okay,現在停止這個應用程序,並返回到編輯器,添加第一個節點到這個場景!

替場景添加一個節點

第一個節點只是一個簡單的標籤(label)。在GameScene類別中,宣告一個名為label的label屬性:

當遊戲需要在某一時點顯示文本(text),SpriteKit提供了一個類別名為SKLabelNode來顯示文本標籤。上面的代碼只是實例化一個SKLabelNode物件,並將其初始字符串設置為Hello SpriteKit!,但是,除非在視圖控制器呈現場景時,將其添加到場景的節點樹,否則不會發生任何事情。換句話說,您必須提供額外的實作,才能在螢幕畫面上顯示標籤。

現在向類別添加一個名為didMove(to:)的新方法:

我們覆寫場景的didMove(to:)方法。它是在場景由其相應的視圖呈現之後立即運行的方法。在方法實作中,我們調用addChild方法將標籤做為子節點添加到場景的節點樹。

現在,再次運行這個應用程式,你應該會在螢幕畫面上看到標籤:

label

但是這邊出現一個問題:這個標籤被切掉了,因為它的位置預設值被設置為(0,0)。

好的,現在讓我們繼續本教程的最後一部分,更改一些設定讓標籤能置中顯示。

將標籤置中

在標籤添加到場景之前,將下列這一行程式碼添加到didMove(to:)方法中:

你可以使用視圖的寬度和高度來確定標籤的座標,藉此將其放置在畫面中心。螢幕的尺寸不是寫死的,所以標籤可以正確放置在所有iPhone模擬器上。

運行並且瞧瞧畫面的顯示結果!標籤應該會在螢幕上完美呈現。

center label

除了標籤的position屬性,還有很多屬性可以調整更改標籤樣式。舉例來說,你可以更改其字體大小,類型和顏色,如下所示:

結論

本教程的第一部分已經接近尾聲 – 讀者已經在SpriteKit使用場景、節點、標籤和座標點,讓標籤在螢幕畫面上居中顯示。 在下一部分中,你將使用手勢辨識器(gesture recognizers)和動作(actions),移動、縮放和旋轉標籤。敬請關注,在此期間如果讀者有任何問題或問題,請讓我知道。

以供參考,讀者可以在GitHub下載完整專案


Cosmic Pupăză 在部落格 cosminpupaza.wordpress.com 分享有關 Swift 和 iOS 開發文章,以及參與了 raywenderlich.com 和 appcoda.com 兩個平台的 Swift 教學團隊。平日喜歡玩結他和研究二戰歷史。可以透過電郵:[email protected],在Facebook,Twitter 及 Google+ 找到 Cosmic。

blog comments powered by Disqus
訂閲電子報

訂閲電子報

AppCoda致力於發佈優質iOS程式教學,你不必每天上站,輸入你的電子郵件地址訂閱網站的最新教學文章。每當有新文章發佈,我們會使用電子郵件通知你。

已收你的指示。請你檢查你的電郵,我們已寄出一封認證信,點擊信中鏈結才算完成訂閱。

Shares
Share This