Using SpriteKit inside SwiftUI

Question

I am having an issue when creating a SpriteKit scene within SwiftUI. I created this project initially as a SwiftUI project.

Here is the code I have so far:

ContentView.swift:

/// Where the UI content from SwiftUI originates from.
struct ContentView : View {
    var body: some View {
        // Scene
        SceneView().edgesIgnoringSafeArea(.all)
    }
}

SceneView.swift:

/// Creates an SKView to contain the GameScene. This conforms to UIViewRepresentable, and so can be used within SwiftUI.
final class SceneView : SKView, UIViewRepresentable {

    // Conformance to UIViewRepresentable
    func makeUIView(context: Context) -> SKView {
        print("Make UIView")
        return SceneView(frame: UIScreen.main.bounds)
    }
    func updateUIView(_ uiView: SKView, context: Context) {
        print("Update UIView")
    }

    // Creating scene
    override init(frame: CGRect) {
        super.init(frame: frame)

        let scene = Scene(size: UIScreen.main.bounds.size)
        presentScene(scene)
    }
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

Scene.swift:

/// The scene for the game in SpriteKit.
final class Scene : SKScene {

    override func didMove(to view: SKView) {
        super.didMove(to: view)

        print("Scene didMove:")
    }
}

---

Problem

The problem is that the scene is reloading multiple times, as shown by the logs (because there are prints in the code):

Scene didMove:

Make UIView

Scene didMove:

Update UIView

---

As you can see, Scene didMove: is printed twice. I only want this to be called once, as I want to create my sprites here. Any ideas?

Answer 1

You SceneView implementation is incorrect.

SwiftUI uses structs to builds views in its DSL - not views.

You want to create a struct that conforms to UIViewRepresentable.

struct SceneView: UIViewRepresentable {

    let scene: SKScene

    func makeUIView(context: Context) -> SKView {
        // Let SwiftUI handle the sizing
        return SKView(frame: .zero)
    }

    func updateUIView(_ uiView: SKView, context: Context) {
        uiView.presentScene(scene)
    }
}

For more info on how to port UIKit-based views to SwiftUI, see this excellent WWDC 2019 video: Integrating SwiftUI.

Answer 2

Here's a SpriteKit container View which can be used this way:

SpriteKitContainer(sceneName: "MainScene")

struct SpriteKitContainer : UIViewRepresentable {

    let sceneName: String

    class Coordinator: NSObject {
        var scene: SKScene?
    }

    func makeCoordinator() -> Coordinator {
        return Coordinator()
    }

    func makeUIView(context: Context) -> SKView {
        let view = SKView(frame: .zero)
        view.preferredFramesPerSecond = 60
        view.showsFPS = true
        view.showsNodeCount = true

       //load SpriteKit Scene
       guard let aScene = SKScene(fileNamed: sceneName)
       else {
            view.backgroundColor = UIColor.red
            return view
       }
       aScene.scaleMode = .resizeFill
       context.coordinator.scene = aScene
       return view
    }


    func updateUIView(_ view: SKView, context: Context) {
       view.presentScene(context.coordinator.scene)
    }

}
#if DEBUG
struct ContentView_Previews : PreviewProvider {

   static var previews: some View {

      // Replace "MainScene" with your SpriteKit scene file name
      SpriteKitContainer(sceneName: "MainScene")
         .edgesIgnoringSafeArea(.all)
         .previewLayout(.sizeThatFits)
      }
}
#endif