SKSceneの背景をグラデーションさせたい。

Question

主題の通り、SKSceanの背景の色をグラデーションさせたいです。
CAGradientLayer()を使いグラデーションのレイヤを作成し、viewのレイヤを変えることを試してみたのですが、どうやってもその方法だとSKScean内のオブジェクトが塗り潰されてしまいます。
一応、グラデーションの写真をjpgなどで作成しSpriteNodeを使うことで実現はできそうなのですが、
できれば、コードで作成したグラデーションをそのまま使い、背景をグラデーションに変えたいです。
いい方法を知っている方、よろしくお願いします。

下のコードは現状のSKSceanが塗り潰されてしまうコードです。

import UIKit
import GameplayKit
import SpriteKit
import AVFoundation

class stage05ViewController: UIViewController,AVAudioPlayerDelegate{
    var bgmplayer:AVAudioPlayer!
    //画面幅
    let w = UIScreen.main.bounds.size.width
    //画面高さ
    let h = UIScreen.main.bounds.size.height
    //ステージ幅
    let stagew = 4
    //ステージ高さ
    let stageh = 4
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let ws = w * CGFloat(stagew)
        let hs = h * CGFloat(stageh)
        let wd = -CGFloat(stagew - 1) * w / 2
        let hd = -CGFloat(stageh - 1) * h / 2
        
        //ステージBGMの設定
        do{
            let audioPath = Bundle.main.path(forResource: "SKY", ofType: "mp3")
            let bgmurl = URL(fileURLWithPath: audioPath!)
            bgmplayer = try AVAudioPlayer(contentsOf: bgmurl)
        }catch{
            print("error")
        }
        bgmplayer.play()

        //Viewの作成
        let sv = SKView(frame: CGRect(x: wd , y: hd , width: ws, height: hs))
        
        //グラデーションの作成
        let gradL = CAGradientLayer()
        gradL.frame = CGRect(x:0, y:0, width: ws, height: hs)
        let color1 = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1).cgColor
        let color2 = UIColor(red: 120/256.0, green: 150/256.0, blue: 256/256.0, alpha: 1).cgColor
        gradL.colors = [color1,color2]
        gradL.startPoint = CGPoint.init(x: 0.5, y: 0)
        gradL.endPoint = CGPoint.init(x: 0.5 , y: 1 )

        //Sceneの作成
        let ss = stage05(size: sv.frame.size)
        sv.presentScene(ss)
        
        //Viewのレイヤをグラデーションに変更
        ss.view?.layer.insertSublayer(gradL, at: 0)
        
        view.addSubview(sv)
        
        //バックボタンの作成
        let backButton = UIButton(frame: CGRect(x: 0,y: 0,width: w / 5,height:w / 10))
        backButton.setTitle("back", for: .normal)
        backButton.backgroundColor = UIColor.black
        backButton.addTarget(self, action: #selector(stage05ViewController.back(_:)), for: .touchUpInside)
        view.addSubview(backButton)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    @objc func back(_ sender: UIButton) {
        self.dismiss(animated: false, completion: nil)
    }
}

Comments

[fuzzball]

作ったグラデをUIImage経由でSKTextureにするのではダメ？

Answer 1

下にすりゃいいのかな？

//Sceneの作成
let ss = stage05(size: sv.frame.size)
sv.presentScene(ss)

//背景用View
let bgView = UIView(frame: gradL.bounds)
bgView.layer.insertSublayer(gradL, at: 0)

//背景が下になるようにadd
self.view.addSubView(bgView)
self.view.addSubview(sv)

※動作未確認です

Comments

[Ponkiti27]

回答ありがとうございます。
実は背景用のビューを作って下に配置することは一回試したことがあったのですけど、
その場合は背景が黒く（何も背景が設定していない時に表示されるやつ）表示されるだけで、
グラデーション が表示されませんでした。
今回書いてくださったコードも試してみたのですが同様の結果でした。

すいません、色々試したことも書いておくべきでした。

[fuzzball]

Sceneの背景は透明にしてます？

[Ponkiti27]

Sceneは透明にしてないです。
透明にする必要があるんですか？
Sceneの背景はどうやったら透明にできますか？

[fuzzball]

グラデを下に敷いたんだから、透明にしないと見えませんよね？

質問のコード（ViewController側）でやるなら、
ss.backgroundColor = .clear
sv.backgroundColor = .clear
でいいかと。

[Ponkiti27]

何度もありがとうございます。
そうですよね、透明にしないと見えないですよね(^_^;)

背景を透明にしたら、ちゃんとグラデーションが表示されました。
本当に助かりました。
ありがとうございます。