SwiftUIとSpriteKitでクリスマスツリー作る #Swift

こんにちは、
オークファンAdvent Calendar 24日担当のRickyです。

19新卒として入社して半年強が経ちました。
先週人生初の日本忘年会を体験しました。

そういえば明日クリスマスですね。
この前Advent Calendar 12日の記事を書き終わったら、
うちの同期に24日の記事でなんかクリスマスに関する記事を書いてくださいよと
煽られましたから今日はSwiftUIとSpriteKitでクリスマスツリーを作りましょう。

ちなみに、
持っているMacBookAirのOSは10.14.6なのでSwiftUIのCanvasは使えない。。。。

環境

Xcode 11.2
Swift 5
IOS 13.2

流れ

１、雪背景SpriteKitParticleとイリュミネイションSpriteKitParticle作成
２、雪のUIView作成
３、クリスマスツリーUIView作成
４、ギフトUIView作成
５、文字UIView作成
６、SwiftUIのContentViewに纏める

１、雪背景SpriteKitParticleライトイリュミネイションSpriteKitParticle作成

SnowParticle.sks作成

StarParticle.sks作成

値設定

Light1Particle.sks作成

値設定

Light2Particle.sks作成

値設定

２、雪のUIView作成

SnowBackgroundView.swift

import SwiftUI
import SpriteKit

struct SnowBackgroundView: UIViewRepresentable {
       class Coordinator: NSObject {
          var scene: SKScene?
       }
       func makeCoordinator() -> Coordinator {
           return Coordinator()
       }
       func makeUIView(context: Context) -> SKView {
           //SkView作成
           let skView = SKView()
           //FPSの表示
           skView.showsFPS = true
           //ノード数表示
           skView.showsNodeCount = true
           //シーン作成
           let scene = SKScene()
           //spriteの中心を設定する
           scene.anchorPoint = CGPoint(x: 0.5, y: 1)
           //ノードを作成
           let emitterNode = SKEmitterNode(fileNamed: "SnowParticle")
           //シーンにノード入れる
           scene.addChild(emitterNode!)
           scene.scaleMode = .resizeFill
           //シーンをこのviewの内容に設定
           context.coordinator.scene = scene

           return skView
       }

       func updateUIView(_ view: SKView, context: Context) {

          view.presentScene(context.coordinator.scene)
       }
}

struct SnowBackgroundView_Previews: PreviewProvider {
    static var previews: some View {
        SnowBackgroundView()
    }
}

３、クリスマスツリーUIView作成

TreeView.swift

import SwiftUI
import SpriteKit

struct TreeView: UIViewRepresentable {
       class Coordinator: NSObject {var scene: SKScene?
       }
       func makeCoordinator() -> Coordinator {
           return Coordinator()
       }
       func makeUIView(context: Context) -> SKView {
           //SkView作成
           let skView = SKView()
           //シーン作成
           let scene = SKScene()
           //クリスマスてツリーノードを作成
           let treeNode = SKSpriteNode(imageNamed: "tree")
           treeNode.position = CGPoint(x: UIScreen.main.bounds.size.width/2, y: UIScreen.main.bounds.size.height/3)
           //スターノードを作成
           let starNode = SKSpriteNode(fileNamed: "StarParticle")
           starNode?.position = CGPoint(x: 0, y: treeNode.position.y-50)
           //ライトノードを作成
           let lightNode1 = SKSpriteNode(fileNamed: "Light1Particle")
           lightNode1?.position = CGPoint(x: 0, y: starNode!.position.y-120)
           let lightNode2 = SKSpriteNode(fileNamed: "Light2Particle")
           lightNode2?.position = CGPoint(x: 0, y: starNode!.position.y-200)
           //クリスマスツリーノードにスターノードとライトノードを入れる
           treeNode.addChild(starNode!)
           treeNode.addChild(lightNode1!)
           treeNode.addChild(lightNode2!)
           //シーンクリスマスツリーノードを入れる
           scene.addChild(treeNode)
           scene.scaleMode = .resizeFill
           //シーン背景色を透明で黒色にする
           scene.backgroundColor = UIColor.init(displayP3Red: 0, green: 0, blue: 0, alpha: 0.1)
           //シーンをこのviewの内容に設定
           context.coordinator.scene = scene
           return skView
       }

       func updateUIView(_ view: SKView, context: Context) {
          view.presentScene(context.coordinator.scene)
       }
}

struct TreeView_Previews: PreviewProvider {
    static var previews: some View {
       TreeView()
    }
}

４、ギフトUIView作成

GiftView.swift

import SwiftUI

struct GiftView: View {
    var body: some View {
        ZStack{
            //重ねるギフトの絵作成
            Image("gift")
           .position(x: 130, y: 440)
            Image("gift1")
           .position(x: 150, y: 450)
            Image("gift2")
           .position(x: 220, y: 450)
        }
    }
}

struct GiftView_Previews: PreviewProvider {
    static var previews: some View {
        GiftView()
    }
}

５、文字UIView作成

TextView.swift

import SwiftUI

struct TextView: View {
    var body: some View {
        //文字作成
        Text("Merry Christmas")
            //フォント設定
            .font(.largeTitle)
            //フォント太さ設定
            .fontWeight(.bold)
            .padding()
            //文字の色
            .foregroundColor(Color.white)
            //枠の線
            .background(Color.red)
            //文字と距離設定
            .padding(10)
            //枠の線の太さと色設定
            .border(Color.gray, width: 5)

    }
}

struct TextView_Previews: PreviewProvider {
    static var previews: some View {
        TextView()
    }
}

６、SwiftUIのContentViewにまとめる

ContrntView.swift

import UIKit
import SwiftUI
import SpriteKit
struct ContentView: View {
    //@Stateプロパティを使ってUIの状態自動に同期
    @State private var displayTree = false

    var body: some View {
        //Z軸にビューを並べるコンポーネント
        ZStack{
            //縦軸にビューを並べるコンポーネント
            VStack{
                if(displayTree) {
                    ZStack{
                        //クリスマスツリーとギフトviewを呼び出す
                        TreeView()
                        GiftView()
                    }
                }
                Button(action: {
                    //ON/OFFを制御するコンポーネント
                    self.displayTree.toggle()
                }, label: {
                       TextView()
                })
            }
            //雪のviewを呼び出す
            SnowBackgroundView()
            //雪のviewを半透明にする
            .opacity(0.5)
        }.background(SwiftUI.Color.black.edgesIgnoringSafeArea(.all))

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()

    }
}

SwiftUIとSpriteKitでクリスマスツリー作る

環境

流れ