iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Mobile Development

從零開始的8-bit迷宮探險!Swift SpriteKit 遊戲開發實戰系列 第 8

從零開始的8-bit迷宮探險【Level 8】與 SpriteKit 的初次見面 (一)

今日目標

  • 認識 SpriteKit
  • 創建 Game Playground
  • 認識 SKView 及 SKScene

SpriteKit 是什麼?

SpriteKit 是 Apple 提供可以幫助開發2D動畫及2D遊戲的一個框架,非常適合用來製作 iOS 遊戲。它可以幫助我們輕鬆創建遊戲場景、在場景中繪製圖形、圖片、文字等等,可以製作動畫效果,也有好用的物理效果可以套用,將遊戲場景變成一個具有地心引力的世界。

如果有用過 Cocos Creator 開發遊戲的人應該可以很容易上手,一些基本的元素像是:Scene、Node、Sprite、Label...等,以及座標系統、Anchor Point 的概念,都是非常相像的。像筆者本身是先學習 SpriteKit,才接觸 Cocos Creator 開發,同樣一款遊戲,在已經寫好 Swift SpriteKit 的版本後 (即程式邏輯、素材都已有),重新用 Cocos Creator 開發一次,只花了一週就可以寫出約90%相似度的遊戲作品。所以我相信有了 SpriteKit 的開發經驗後,要用其他種語言或開發工具製作遊戲,應該沒有什麼大問題。


友善的開發環境

Xcode 提供了一個非常無痛入門的環境,在新增一個專案 (Project) 時,可以選擇 Game 模板 (Template),就可以輕鬆快速建立一個可執行的遊戲專案。
Xcode 也提供新增 Playground 時,可選用 Game 模板,讓開發者可以快速地感受 SpriteKit 的威力。


新增 Playground

我們馬上來新增一個遊戲模板的 Playground:
首先在 Xcode 上排工具列點選 File -> New -> Playground
https://imgur.com/jc7rLAS.png

選擇 Game template,點擊 Next
https://imgur.com/b59MBBZ.png

接著選擇你要儲存的位置,點擊 Create,就創建完成了
可以看到 Xcode 已經自動建立程式碼了,接著點擊下方的 Execute Playground 按鈕後,就可以看到以下畫面:
https://imgur.com/BvfQJvN.png

接著,我們開始進入SpriteKit的世界吧!


import

要使用 SpriteKit,首先要引入:

import SpriteKit

SKView

SKView 可以呈現 SKScene 的畫面,只需要透過呼叫 presentScene 方法即可。通常我們會在專案的 View Controller 中的 viewDidLoad 方法中加上以下程式碼,就可以呈現 GameScene 的畫面了。
附註:fileNamed 帶入的 "GameScene" 是指專案中建立的場景檔名 (GameScene.sks)

override func viewDidLoad() {
    super.viewDidLoad()
    if let view = self.view as? SKView {
        if let scene = SKScene(fileNamed: "GameScene") {
            view.presentScene(scene)
        }
    }
}

SKView 除了呈現 SKScene 的畫面之外,還可以加上場景之間轉場的效果
SKTransition 類別提供了許多種轉場的方法可以套用
例如加上淡入的轉場效果:

let transition = SKTransition.fade(withDuration: 3)
self.view?.presentScene(nextScene, transition: transition)

SKScene

剛剛已經建立好 SKScene 了,SKScene具有一些屬性可以設定,常用的如下:

使用 scene.size 可以設定場景的尺寸。
例如設定等於 view 的尺寸:

scene.size = view.bounds.size

使用 scene.scaleMode 可以設定縮放模式。
例如設定 aspectFill 讓場景尺寸進行等比例縮放,並填滿畫面:

scene.scaleMode = .aspectFill

使用 scene.anchorPoint 可以設定 Scene 的定位點。
例如設定定位點位置在畫面的左上角:

scene.anchorPoint = CGPoint(x: 0, y: 1)

新增一個繼承 SKScene 的類別

目前我們已經了解如何透過 SKView 呈現 SKScene了,接著要帶大家認識如何在場景中加上東西。在場景中加上東西有兩種方法,第一種是直接在.sks檔案中新增 node ,另一種是目前要介紹的:新增一個類別,透過程式碼在場景上加東西。

SKScene 提供了一些方法可以覆寫:

  • func sceneDidLoad():當場景被呈現時
  • func didMove(to: SKView):當場景被 view 呈現時
  • func willMove(from: SKView):當場景將要被 view 移除時
  • func didChangeSize(CGSize):當場景的 size 發生變動時

在這些方法裡印出 log,可以觀察到 sceneDidLoad 會比 didMove 早觸發,當此場景換到下個場景時,可以收到 willMove。而當改變場景的 size 時,會收到 didChangeSize。可以依照個人需求使用。

那就來新增一個 GameScene 類別吧,並加上一個藍色的 SKSpriteNode:

class GameScene: SKScene {
    override func didMove(to view: SKView) {
        let spriteNode = SKSpriteNode(color: .blue, size: CGSize(width: CGFloat(20), height: CGFloat(20)))
        self.addChild(spriteNode)
    }
}

新增完之後,記得必須在 GameScene.sks 的右側 Custom Class 欄位填上 GameScene
https://imgur.com/JWbrzD1.png

執行看看結果:
https://imgur.com/eu36HAE.png

畫面上成功出現了藍色小方塊!
以上,是 SKView 跟 SKScene 的基本介紹,明天將會介紹一些基本的 Node 用法。


參考來源:
SpriteKit Framework


上一篇
從零開始的8-bit迷宮探險【Level 7】Swift 基礎語法 (五)
下一篇
從零開始的8-bit迷宮探險【Level 9】與 SpriteKit 的初次見面 (二)
系列文
從零開始的8-bit迷宮探險!Swift SpriteKit 遊戲開發實戰30

尚未有邦友留言

立即登入留言