SwiftUI中SpriteKit GameScene无法设置透明背景问题

尝试将GameScene背景设为透明，从而在GameView中展示其下方的滑动背景，但设置.clear后背景仍为黑色；将背景改为绿色时可正常覆盖滑动背景，调整Z轴位置也无法解决问题。

相关代码 #

GameScene.swift #

class Gamescene: SKScene, ObservableObject, SKPhysicsContactDelegate {
    weak var gameDelegate: GamesceneDelegate?
    
    // score functions
    private var score: Int = 0
    private var scoreLabel: SKLabelNode!
    
    override init(size: CGSize) {
            super.init(size: size)
        self.backgroundColor = .clear
            self.zPosition = -1
            self.physicsWorld.contactDelegate = self
        print("Gamescene initialized with size: \(size)")
        }
        
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    
    override func didMove(to view: SKView) {
        super.didMove(to: view)
        view.allowsTransparency = true
        backgroundColor = .clear
        self.zPosition = -1
        setupScene()
        print("Gamescene did move to view")
        
    }
    
    private func setupScene() {
        print("Gamescene setup complete")
        }

GameView.swift #

import SwiftUI
import SpriteKit

struct GameView: View {
    @StateObject var scene: Gamescene
    let backgroundNames = ["background1", "background2", "background3", "background4", "background5"]
    @State private var offset: CGFloat = 0

    let animationDuration: Double = 10.0

    init() {
        let gameScene = Gamescene(size: CGSize(width: 400, height: 700))
        gameScene.scaleMode = .fill
        _scene = StateObject(wrappedValue: gameScene)
        print("GameView initialized")
    }

    var body: some View {
        ZStack {
            
            // Sliding background
            GeometryReader { geometry in
                HStack(spacing: 0) {
                    ForEach(0..<(backgroundNames.count * 2), id: \.self) { index in
                        Image(backgroundNames[index % backgroundNames.count])
                            .resizable()
                            .frame(width: 1000, height: geometry.size.height)
                            .scaledToFill()
                    }
                }
                .frame(width: 1000 * CGFloat(backgroundNames.count * 2), height: geometry.size.height, alignment: .leading)
                .offset(x: offset)
                .onAppear {
                    startAnimation(totalWidth: 1000 * CGFloat(backgroundNames.count))
                    print("GameView appeared")
                }
            }

            // SpriteView containing the game scene
            SpriteView(scene: scene)
                .frame(width: 400, height: 700)
                .background(Color.clear)
                .edgesIgnoringSafeArea(.all)
                .onAppear {
                    if let skView = scene.view {
                    skView.allowsTransparency = true
                        print("SKView allows transparency: \(skView.allowsTransparency)")
                    }
            }
        }
    }

    func startAnimation(totalWidth: CGFloat) {
        offset = 0
        withAnimation(.linear(duration: animationDuration).repeatForever(autoreverses: false)) {
            offset = -totalWidth
        }
    }
}

struct Gameview_Previews: PreviewProvider {
    static var previews: some View {
        GameView()
    }
}

解决方案 #

问题核心在于SwiftUI的SpriteView默认不启用透明渲染，即使设置了SKScene的背景为.clear，SpriteView本身的背景仍会是黑色。需要通过以下步骤修复：

1. 给SpriteView添加透明选项
   在初始化SpriteView时，显式传入.allowsTransparency选项，这会让内部的SKView启用透明：

   SpriteView(scene: scene, options: [.allowsTransparency])
       .frame(width: 400, height: 700)
       .background(Color.clear)
       .edgesIgnoringSafeArea(.all)
   

2. 移除错误的Z轴设置
   删掉GameScene中self.zPosition = -1的代码（两处：init和didMove方法中）。这个设置会让整个场景的层级低于默认值，可能导致场景内容被遮挡或显示异常，保持默认的zPosition（0）即可。

3. 简化SKView透明设置
   通过SpriteView的options设置后，内部的SKView会自动启用allowsTransparency，因此可以移除GameScene的didMove(to view:)方法中的view.allowsTransparency = true，以及GameView中onAppear里的相关代码，避免冗余设置。

修改后，GameScene的背景透明会生效，SwiftUI层的滑动背景就能正常透过SpriteView显示出来。

内容的提问来源于stack exchange，提问作者ECN