在SwiftUI视图中显示SpriteKit分数

基础概念

SwiftUI 是苹果推出的一个声明式 UI 框架，用于构建 macOS、iOS、watchOS 和 tvOS 应用程序的用户界面。它提供了一种简洁的方式来描述用户界面，而不需要编写大量的视图控制器代码。

SpriteKit 是苹果的一个 2D 游戏框架，用于构建高性能的 2D 图形、动画和游戏。它提供了丰富的功能来处理图形渲染、物理模拟和音频播放。

类型

SwiftUI 视图: 声明式 UI 组件，如 Text, Image, Button 等。
SpriteKit 场景: 游戏的主要容器，包含所有的游戏元素和逻辑。

应用场景

在 SwiftUI 视图中显示 SpriteKit 分数通常用于将游戏得分集成到应用的主界面或其他 UI 组件中。

如何在 SwiftUI 视图中显示 SpriteKit 分数

要在 SwiftUI 视图中显示 SpriteKit 分数，可以使用 ViewRepresentable 协议将 SpriteKit 场景嵌入到 SwiftUI 视图中。以下是一个简单的示例：

import SwiftUI
import SpriteKit

struct GameScoreView: View {
    var score: Int
    
    var body: some View {
        VStack {
            Text("Score: \(score)")
                .font(.largeTitle)
                .foregroundColor(.white)
                .background(Color.black)
                .cornerRadius(10)
                .padding()
            
            GameSceneView(score: score)
        }
    }
}

struct GameSceneView: ViewRepresentable {
    var score: Int
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    func makeUIView(context: Context) -> SKView {
        let view = SKView()
        let scene = GameScene(size: view.bounds.size)
        scene.scaleMode = .aspectFill
        scene.score = score
        view.presentScene(scene)
        return view
    }
    
    func updateUIView(_ uiView: SKView, context: Context) {
        // Update the scene if needed
    }
    
    class Coordinator: NSObject {
        var parent: GameSceneView
        
        init(_ parent: GameSceneView) {
            self.parent = parent
        }
    }
}

class GameScene: SKScene {
    var score: Int = 0
    
    override func didMove(to view: SKView) {
        // Initialize your game scene here
        let label = SKLabelNode(fontNamed: "Arial")
        label.text = "Score: \(score)"
        label.fontSize = 24
        label.position = CGPoint(x: frame.midX, y: frame.maxY - 50)
        addChild(label)
    }
}

遇到的问题及解决方法

问题: 在 SwiftUI 视图中嵌入 SpriteKit 场景时，分数没有正确显示。

原因: 可能是因为分数没有正确传递到 SpriteKit 场景中，或者在更新分数时没有正确刷新 UI。

解决方法:

确保分数正确传递到 GameScene 中。
在 GameScene 中使用 SKLabelNode 显示分数，并在分数更新时调用 setNeedsDisplay() 或 setNeedsLayout() 方法刷新 UI。

class GameScene: SKScene {
    var score: Int = 0 {
        didSet {
            updateScoreLabel()
        }
    }
    
    private var scoreLabel: SKLabelNode?
    
    override func didMove(to view: SKView) {
        updateScoreLabel()
    }
    
    private func updateScoreLabel() {
        if let label = scoreLabel {
            label.removeFromParent()
        }
        
        scoreLabel = SKLabelNode(fontNamed: "Arial")
        scoreLabel?.text = "Score: \(score)"
        scoreLabel?.fontSize = 24
        scoreLabel?.position = CGPoint(x: frame.midX, y: frame.maxY - 50)
        addChild(scoreLabel!)
    }
}