How to transition from a SwiftUI Page to a SpriteKit Scene?

Question

Created Apr ’21

Replies 3

Boosts 0

Views 1.9k

Participants 3

Hi, I am applying for this year's WWDC 2021 swift student challenge. I am creating a Mac Xcode Playground. I have created a start menu in Swift UI and a game in SpriteKit, I was wondering how I would go about transitioning between them when a button is clicked in the view.

Right now I am using this code to display the SwiftUI view

Code Block swiftPlaygroundPage.current.setLiveView(
  ContentView()
    .frame(width: 800, height: 750)
)

I was thinking I could transition like this:

Code Block swift   func goToGameScene() {
    let sceneView = SKView(frame: CGRect(x:0 , y:0, width: 800, height: 750))
    if let scene = GameScene(fileNamed: "GameScene") {
      sceneView.showsNodeCount = true
      sceneView.showsFPS = true
      scene.scaleMode = .aspectFit
      sceneView.presentScene(scene)
    }
    PlaygroundPage.current.needsIndefiniteExecution = true
    PlaygroundSupport.PlaygroundPage.current.liveView = sceneView
  }

I am not sure if this is a good approach. And this method does not give space for animated transitions as well. I was wondering if there is a better way to transition between these views, thank you so much in advance!

Boost

Answer 1

S_dnomseD OP

Apr ’21

I think it'll be better if you use UIViewRepresentable and a .fullScreenCover like so:

Code Block Swiftstruct Test: UIViewRepresentable {
    func makeUIView(context: Context) -> SKView {
        let sceneView = SKView(frame: CGRect(x:0 , y:0, width: 800, height: 750))
        your code
        return sceneView
    }
    func updateUIView(_ uiView: SKView, context: Context) {
    }
}
struct SwiftUIView: View {
    @State var show = false
    var body: some View {
        Button(action: {
            show.toggle()
        }) {
            Text("Go to Game Scene")
        }.fullScreenCover(isPresented: $show) {
            Test()
        }
    }
}

0

Answer 2

DecoderDE OP

Apr ’21

I have created the playground for MacOS, so UIKit is not available. Thus, UIViewRepresentable and Context are not available. Is there a way to do it with just SwiftUI and SpriteKit? I am also getting this error 'fullScreenCover(isPresented:onDismiss:content:)' is unavailable in macOS. Because its a MacOS Playground
Thanks!

0

Answer 3

dudamello OP

Apr ’21

I don't know how you do this for playgrounds, but that's how you integrate spritekit with swiftUI, you use a spriteView:

Code Block swift// A simple game scene with falling boxes
class GameScene: 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: SKColor.red, size: CGSize(width: 50, height: 50))
        box.position = location
        box.physicsBody = SKPhysicsBody(rectangleOf: CGSize(width: 50, height: 50))
        addChild(box)
    }
}
// A sample SwiftUI creating a GameScene and sizing it
// at 300x400 points
struct ContentView: View {
    var scene: SKScene {
        let scene = GameScene()
        scene.size = CGSize(width: 300, height: 400)
        scene.scaleMode = .fill
        return scene
    }
    var body: some View {
        SpriteView(scene: scene)
            .frame(width: 300, height: 400)
            .ignoresSafeArea()
    }
}

Hope it helps :)

0