SwiftUIでSpriteKit

はじめに

iOS 14 から SpriteView を使って SwiftUI でもかんたんに SpriteKit が使えるようになりました

簡易実装

下記のように実装すると SKScene を表示できます。

struct ContentView: View {

    var body: some View {
        GeometryReader {
            SpriteView(scene: FirstScene(size: $0.size))
        }
    }
}

final class FirstScene: SKScene {

    override func didMove(to view: SKView) {
        backgroundColor = .systemRed
        let text = SKLabelNode(text: "First")
        text.position = view.center
        addChild(text)

    }
}

こんな感じ。

オプション

SKView であった showsNodeCount や showsPhysics はイニシャライザの debugOptions 引数で設定できます。

SpriteView(scene: FirstScene(size: $0.size),
           debugOptions: [.showsNodeCount, .showsPhysics])

オプションは下記があるようです。

SpriteView.DebugOptions

static let showsDrawCount: SpriteView.DebugOptions
static let showsFPS: SpriteView.DebugOptions
static let showsFields: SpriteView.DebugOptions
static let showsNodeCount: SpriteView.DebugOptions
static let showsPhysics: SpriteView.DebugOptions
static let showsQuadCount: SpriteView.DebugOptions

SKView であった allowsTransparency などはイニシャライザの options 引数で設定できます。

SpriteView(scene: FirstScene(size: $0.size),
           options: [.shouldCullNonVisibleNodes, .allowsTransparency])

オプションは下記があるようです。

SpriteView.Options

static let allowsTransparency: SpriteView.Options
static let ignoresSiblingOrder: SpriteView.Options
static let shouldCullNonVisibleNodes: SpriteView.Options

遷移処理

SKScene の遷移処理は下記のように SKScene 側でやればできます。

final class FirstScene: SKScene {

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        view?.presentScene(SecondScene(size: size), transition: .doorway(withDuration: 2.0))
    }
}

こんな感じ。

SKTransition には色々あるので下記をご参考ください。

SKTransitionまとめ（Swift）

おわりに

SwiftUI でもこんな感じでかんたんに SpriteKit が使えるようになりました

（クリスマス仕様ファフロッキーズ）