Spritekit with swiftui(1)

Spritekit은 2D 컨텐츠를 부드럽게 만들거나 2D게임을 만드는데 사용되는 프레임워크이다.

그렇다면 Unity등 다른것에 비해 장점은 무엇일까? 왜 우린 이걸 공부해야할까? 뭐 물론 유니티에 비해 한계가 있다. 하지만 굳이뽑자면

1. iOS안에 있어서 다른라이브러리를 다운받을 필요 없이 사용할수 있다
2. 무료고 쉽다

그후 구성요소들을 공부해보자. 위에서 부터 크게

1. SKView : Sprite kit의 기본 뷰이다. 이 뷰는 각 장면 컨텐츠를 렌더링하여 표시

2. SKScene : view는 장면들을 전환하여 보여줄수 있다. SKScene은 각 장면에 해당하는 클래스. 화면에 구성하는 노드들 관리. 터치이벤트도 여기서 처리

3. SKNode : 장면 내의 배경, ui요소 등이 여기 해당. 각각의 노드는 액션을 실행하여 애니메이팅.

그런데 노드를 생성할때 addChild를 해주지 않으면 화면에 안나옴! 부모를 지정해주어야함.

또한 Path를 정해주지 않으면 안된다.(노드가 화면에 나타날 위치)

하나의 유닛으로도 다룰수 있고 그룹을 만들어서 회전하거나 이동하는 행동을 하나의 그룹으로도 묶을수 있다.

• InsertChild : Child 사이의 우선순위를 정해서 넣어줄수있음.

간단한 설명은 여기까지 하고 역시 코드를 쓰면서 공부를 해야겠다. 난 swiftui로 개발을 할꺼기에 먼저 스유에 적용하는 법을 배워보자.

import SwiftUI
import SpriteKit
struct ContentView: View {
    var body: some View {
        SpriteKitContainer(scene: SpriteScene())
    }
}

struct SpriteKitContainer : UIViewRepresentable{
    typealias UIViewType = SKView
    var skScene : SKScene!
    init(scene : SKScene){
        skScene = scene
        skScene.size = CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)//사이즈를 안지정해주니까 자꾸 이상해짐
        self.skScene.scaleMode = .resizeFill
    }
    class Coordinator : NSObject{
        var scene : SKScene?
    }
    func makeCoordinator() -> Coordinator {
        let coordi = Coordinator()
        coordi.scene = self.skScene
        return coordi
    }
    func makeUIView(context: Context) -> SKView {
        let view = SKView(frame: .zero)
        view.preferredFramesPerSecond = 60
        view.showsFPS = true
        view.showsNodeCount = true
        return view
    }
    func updateUIView(_ uiView: SKView, context: Context) {
        uiView.presentScene(context.coordinator.scene)
    }
}

SpriteContainer는 SKView type이다. uiviewrepresentable은 이미 한번 공부를 햇으니 여기서는 넘어갈꺼야

import UIKit
import SpriteKit
class SpriteScene: SKScene {
    
    //change the code below to whatever you want to happen on skscene

    
    override func didMove(to view: SKView) {
        self.physicsBody = SKPhysicsBody(edgeLoopFrom: self.frame)
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard let touch = touches.first else { return }
        
        let location = touch.location(in: self)
        let circle = SKShapeNode(circleOfRadius: 30.0)
        
        circle.fillColor = .gray
        circle.strokeColor = .clear
        let box = SKSpriteNode(texture: SKView().texture(from: circle))
        box.position = location
        box.physicsBody = SKPhysicsBody(circleOfRadius: box.size.width/2)
        box.physicsBody?.allowsRotation = true
        box.physicsBody?.restitution = 0.5//다른물체에 부딪힐때 얼마나 에너지를잃는지.
        addChild(box)
    }
}

그 이후의 SKScene에서 터치이벤트를 받고 그 위치에서 box라는 노드를 생성하고 노드를 자식으로 추가한다. 하지만 여기서 처음보는 녀석이 잇다. 바로 physicsBody! 실행해보면 이거때문에 박스들이 아래로 떨어지고 겹쳐지는 현상도 막는것 같은데 아.. 그냥 그렇구나 이렇게 넘어갈 내가 아니다. 

- physicsBody : 노드에 추가해줌으로써 물리계산을 해준다. 여기에는 중력, 마찰, 충돌이 포함된다. scene이 계산을 끝내면 노드오브젝트의 위치를 업데이트한다.

두가지 physics bodies가 있다한다. 1. volume-based 2. edge-based

edge-based : 질량이나 부피가 없으며 시스템의 힘이나 충동의 영향을 받지 않는다. 물리학 시뮬레이션에서 볼륨 없는 경계나 빈 공간을 나타내는 데 사용된다.고로 충돌도 없다.

volume-based : 질량과 부피를 가진 물체를 나타내는 데 사용된다. isDynamic 속성은 중력, 마찰, 다른 물체와의 충돌, 그리고 당신이 직접 적용하는 힘이나 충동의 영향을 받는지 여부를 제어. 균일한 질량을가지고 있다고 가정. 하지만 직접 세팅가능

여기까지 구현한 목록들을 동영상으로 보여주면서 마무리~

next level spoiler!

이전에 했던 CMMotion과 spritekit의 콜라보레이션 기대되면 다음글 구독과 좋아요 눌러주세요