SpriteKit, 움직이는 커비 이미지 만들기

Xcode를 열어 Game용 프로젝트 하나를 생성한다.

프로젝트 이름을 krbyExample 이라고 입력하고 프로젝트를 생성합니다.

 

Game으로 프로젝트를 생성하면 자동으로 코드들이 생성되어 있다. 우선 Actinos.sks,  GameScene.sks 파일들을 삭제해준다. .sks는 장면 에디터라고 생각하면 될 것 같다. 저희는 그냥 코드로 장면을 만들어줄 것이기 때문에 다음의 파일을 삭제 해 주었다.

 

게임 템플릿은 시작하기 위한 자동으로 생성된  코드를 제공합니다. 모든 것을 처음부터 작성할 것이므로 GameScene.swift 및 GameViewController.swift 파일 내의 모든 내용을 삭제하세요.

(1) GameScene.swift의 내용을 다음과 같이 삭제합니다.

 

(2) GameViewController.swift의  viewDidLoad()함수에 super.viewDidLoad()만 제외하고 모두 삭제 합니다.

 

뷰, 장면 생성 코드 추가

뷰와 장면을 생성하기 위해서  GameViewController에 View와 Scene을 추가 합니다.

class GameViewController: UIViewController {

    override func viewDidLoad() {

        super.viewDidLoad()

        if let view = self.view as! SKView? {

            //캐릭터가 만들어질 장면

            let scene = GameScene()

            

            //장면과 뷰 설정

            scene.scaleMode = .resizeFill

            view.ignoresSiblingOrder = true

            view.showsFPS = true

            view.showsNodeCount = true

            

            //뷰에 장면 출력

            view.presentScene(scene)

        }

    }

}

 

다음과 같이 3개의  view 속성에 값을 설정 합니다. 

ignoreSiblingOrder	부모-자식 혹은 형제 관계가 노드들이 렌더링될 때 그 순서에 영향을 미치는지 아닌지에 대한 설정값
showsFPS	Frame Per Second를 보여주는 것으로, 1초에 화면이 얼마나 출력 해야 하는지에  대한 단위를 화면에 표시할지 아닌지에 대한 설정 값
showsNodeCount	노드의 개수를 보여줄지 말지를 결정하는 설정 값

 

 

Scene 구성하기

atlas 폴더 

다음과 같이 xxxxx.atlas 로 끝나는 폴더를 생성하고 애니메이션 이미지 파일을 복사합니다 

그리고 준비해 놓은 xxxxx.atlas 디렉토리를 프로젝트파일에 끌어다 복사합니다.

 

다음에 사용할 SKTextureAtlas클래스는 .atlas폴더를 알아서 찾아 만들어주기 때문에, 폴더 이름에 .atlas를 붙여주었습니다.

 

벼SKTextureAtlas

불러온 이미지를 텍스처화시켜 배열로 만들어준 후, 배열을 영원히 반복하면서 움직이는 것처럼 보이게 할 것이다.

앞서 말한 SKTextureAtlas를 이용해 이미지를 텍스처화한다.

 

//

//  GameScene.swift

//  KirbyExample

//  Created by Jihun Kang on 2023/12/13.

//

import SpriteKit

import GameplayKit

class GameScene: SKScene {

    override func didMove(to view: SKView) {

        let imageAtlas = SKTextureAtlas(named: "kirby")

        var imageArray = [SKTexture]()

    }

}

 

SKTextureAtlas는 이미지를 렌더링할 때 저장공간과 이미지 그리기를 최적화할 수 있는 텍스처 컬렉션이라고 한다.

지금은 텍스처 컬렉션이기 때문에, 이를 하나씩 텍스처로 만들어서 앞에 선언한 imageArray에 추가 합니다.

 

//

//  GameScene.swift

//  KirbyExample

//

//  Created by Jihun Kang on 2023/12/13.

//

import SpriteKit

import GameplayKit

class GameScene: SKScene {

    override func didMove(to view: SKView) {

        let imageAtlas = SKTextureAtlas(named: "kirby")

        var imageArray = [SKTexture]()

        for i in 1...imageAtlas.textureNames.count {

            let kirbyImage = "kirby_\(i).png"

            imageArray.append(SKTexture(imageNamed: kirbyImage))

        }

    }

}

노드 만들기

이제 노드를 선언하고, 첫 번째 이미지를 지정해주고 노드를 생성합니다.

 let kirby = SKSpriteNode(texture: imageAtlas.textureNamed("kirby_1"))

 

노드 설정하기

노드의 크기나 위치, 이름등을 정해줄 수 있다.

적당한 크기로, 장면의 정 가운데에 위치할 수 있도록 해 주었다.

 

        //노드 설정하기

        kirby.size = CGSize(width: 60, height: 60)

        kirby.position = CGPoint(x: self.size.width/2, y: self.size.height/2)

        kirby.name = “kirby”

 

노드에 움직임 주기

SKAction

장면에 있는 노드에 의해 실행되는 애니메이션을 SKAction이라고 한다. 특정 애니메이션을 줄 텍스처 배열과 프레임 하나당 유지할 시간을 인자로 받는 animate메서드를 이용하면 된다.

 

        let kirbyAnimation = SKAction.animate(with: imageArray, timePerFrame: 0.2)

        kirby.run(SKAction.repeatForever(kirbyAnimation))

        self.addChild(kirby)

 

사용한 이미지 및 소스는  GitHub에서 전체 Xcode 프로젝트를 다운로드 할 수 있습니다.

 

실행화면