SwiftUI and Spritekit integration

Question

Berandgames OP

Created Jun ’19

Replies 3

Boosts 0

Views 4.2k

Participants 4

Hello,

Do you know if you can use the swiftUI framework with Spritekit framework ? like using the SwiftUI interface to display spritekit scenes?

Thanks !

Boost

Answer 1

GSilvaC OP

Jul ’19

This should definitely be possible since SKView is an UIView, but it should not be very easy 😟.

Check this documentation on how to merge SwiftUI and UIViews.

Hope they make this task easier in the near future.

Cheers

0

Answer 2

vlego OP

Jul ’19

It sure is possible, and might get much better when the final Xcode 11 is going to be released.

Take a look at my long answer here:

https://medium.com/@vladlego/spritekit-swiftui-7fb24d3141aa

0

Answer 3

dudamello OP

Sep ’20

It is possible.
You'll need to create a SpriteKitContainer.swift:

Code Block swiftimport SwiftUI
import SpriteKit
struct SpriteKitContainer: UIViewRepresentable {
    typealias UIViewType = SKView
    
    var skScene: SKScene!
    
    init(scene: SKScene) {
        skScene = scene
        self.skScene.scaleMode = .resizeFill
    }
    
    class Coordinator: NSObject {
        var scene: SKScene?
    }
    
    func makeCoordinator() -> Coordinator {
        let coordinator = Coordinator()
        coordinator.scene = self.skScene
        return coordinator
    }
    
    func makeUIView(context: Context) -> SKView {
        let view = SKView(frame: .zero)
        view.preferredFramesPerSecond = 60
        view.showsFPS = true
        view.showsNodeCount = true
        
        return view
    }
    
    func updateUIView(_ view: SKView, context: Context) {
        view.presentScene(context.coordinator.scene)
    }
}
struct SpriteKitContainer_Previews: PreviewProvider {
    static var previews: some View {
        /*@START_MENU_TOKEN@*/Text("Hello, World!")/*@END_MENU_TOKEN@*/
    }
}

After that, you need to create your skscene that will be something like this:

Code Block swiftimport UIKit
import SpriteKit
class SpriteScene: SKScene {
    
    /*change the code below to whatever you want to happen on skscene*/
    
    override func didMove(to view: SKView) {
        physicsBody = SKPhysicsBody(edgeLoopFrom: frame)
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let touch = touches.first else { return }
        
        let location = touch.location(in: self)
        let box = SKSpriteNode(color: .red, size: CGSize(width: 50, height: 50))
        box.position = location
        box.physicsBody = SKPhysicsBody(rectangleOf: CGSize(width: 50, height: 50))
        addChild(box)
    }
}

And this is how you will call the spritekitscene in your ContentView:

Code Block swiftimport SwiftUI
struct ContentView: View {
    var body: some View {
        SpriteKitContainer(scene: SpriteScene())
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

PS: you'll only see the spritekitscene working in the simulator, it won't work in the preview

2