이 문장에 관하여

SpriteKit에서 게임을 개발할 때 몇 년 전에는 Xcode의 GUI를 사용하지 않고 삐걱삐걱 인코딩하는 것이 당연하였지만 최근에는 GUI의 보조가 충실해져 유니티처럼 개발할 수 있게 되었다.
이 글에서 우리는 SpriteKit에서 게임 개발의 첫 번째 단계인'보기에서 장면 보이기'부분에 중점을 두었다.

뷰 및 장면

UIKit 응용 프로그램을 개발할 때 노선 보기에 끊임없이 보기를 추가합니다.
이때의 근시도는 UIView류이고 자시도는 주로 UIView의 자류이다.
이에 비해 SpriteKit의 게임 개발에서 근시도는 SKView이다.
또한 게임 자체는 장면이라고 불리는SpriteKit의SKScene류에서 묘사된다.
즉, (보기) SKView (장면) 을 표시합니다.
이때 루트 보기SKScene는 장치 화면 사이즈여야 하지만 장면SKView은 개발자가 적당한 사이즈로 재조정해야 한다.

작업 환경

Swift3.0.1
Xcode8.2
iOS10.2

프로젝트 준비

iOS SKScene 에서 새 항목 만들기Single View Template 파일 이름 바꾸기ViewController.swift(탐색 영역)
클래스 이름 GameViewController.swift 에서 ViewController (편집기 영역) 으로 변경
뷰 컨트롤러의 루트 뷰를 GameViewController로 변경(검사기 영역)

GameScene 클래스 정의

메뉴 모음에서 "File > New > File...> iOS > Cocoa Touch Class"를 선택하여 저장SKViewGameScene.swift

import SpriteKit

class GameScene: SKScene {
    // something to do
}

새 장면 파일 만들기

메뉴 모음에서 "File > New > File...> iOS > Resource > SpriteKit Scene"을 선택하여 저장합니다GameScene.swift.

앵커 포인트 및 크기

그림새 장면 파일

크기(w:750, h:13334), 닻점(X:0.5, Y:0.5).
사이즈는 아이폰7의 4.7인치 상태이고 닻점은 장면 중앙의 십자인이다.
참고로 4.7인치 보기 컨트롤러의 보기 크기는 (X:375, Y:667)입니다.
이를 통해 알 수 있듯이 장면은 픽셀 단위, 보기 컨트롤러는 점 단위이다.

장면 표시

이 상태에서 뷰에 장면을 표시하면 어떤 모습을 볼 수 있을까.
장면에 표시할 적절한 이미지를 준비합니다.
그림적절한 이미지(background.png)

그림을 프로젝트로 가져온 다음 장면으로 드래그합니다.
장면에 이미지를 배치하면 엘프 노드가 됩니다.
엘프 노드를 장면으로 확장하여 프레임과 일치시킵니다.
그림장면 속의 정령 노드

이 장면은 아이폰7(4.7인치)의 화면 크기다.
아래와 같이 무음기에 표시됩니다.
GameViewController.swift

import UIKit
import SpriteKit

class GameViewController: UIViewController {

    let gameScene = GameScene(fileNamed: "GameScene")

    override func viewDidLoad() {
        super.viewDidLoad()

        if let skView = view as? SKView {
            skView.presentScene(gameScene)
        }
    }

}

구축

시뮬레이터가 iPhone 7을 선택합니다.

중앙에 가까워 전체적으로 드러나지 않았다.
코드를 수정합시다. 아래와 같습니다.
GameViewController.swift

class GameViewController: UIViewController {

    let gameScene = GameScene(fileNamed: "GameScene")

    override func viewDidLoad() {
        super.viewDidLoad()

        if let skView = view as? SKView {
            gameScene?.scaleMode = .aspectFill
            skView.presentScene(gameScene)
        }
    }

}

이제 장면과 보기를 완전히 일치시킬 수 있습니다.