[SpriteKit #1] SpriteKit을 이용해서 Hello Coding Campus 문자열 출력하기

첫 번째 SpriteKit 프로젝트
프레임워크를 사용하여 학습하는 더 좋은 방법은 없습니다. 이제 첫 번째 SpriteKit 프로젝트를 만들어 시작해 보겠습니다. Xcode를 실행하고 다음과 같이 iOS 프로젝트 메뉴에서 게임 템플릿을 선택합니다.

 

 

다음으로 프로젝트 설정을 입력하세요.

 

여기서 가장 중요한 것은 게임 기술 옵션입니다. 해당 메뉴에서 SpriteKit을 선택해야 합니다.

 

이제 프로젝트를 저장하면 작업이 완료됩니다. 이제 조금 정리할 시간입니다!

프로젝트 정리
게임 템플릿은 시작하기 위한 상용구 코드를 제공합니다. 모든 것을 처음부터 작성할 것이므로 GameScene.swift 및 GameViewController.swift 파일 내의 모든 내용을 삭제하세요.

GameScene.sks 및 Actions.sks 파일은 장면과 동작을 시각적으로 디자인하는 데 도움이 됩니다. 그러나 먼저 프로그래밍 방식으로 생성하는 방법을 이해하는 것이 더 쉽기 때문에 지금은 두 항목을 모두 삭제하세요. SpriteKit 편집기를 사용하는 방법은 다른 튜토리얼에서 배우게 됩니다. 프로젝트에서 해당 참조를 제거하는 대신 파일을 영구적으로 휴지통으로 이동하라는 메시지가 표시되면 파일을 휴지통으로 이동하십시오.

 

이제 프로젝트 정리가 끝났습니다. 

 

Creating the View Controller

Since we have emptied GameViewController.swift, we will now create the view controller from scratch. Add the following block of code to the GameViewController.swift file to get started:

 

 

Here we import the SpriteKit framework and declare the class, which is a standard view controller. Its main role is to present the game scene right after the controller’s view is loaded, so add the viewDidLoad() method to the class:

 

이 모든 것을 단계별로 살펴보겠습니다.

라인 #1 - 뷰 컨트롤러의 viewDidLoad() 메서드를 재정의합니다. 이는 뷰 컨트롤러가 메모리에 로드된 직후에 실행됩니다.
라인 #2 – GameScene 클래스 지정 초기화 프로그램을 사용하여 장면을 생성합니다. 전체 화면을 채우므로 컨트롤러의 뷰 프레임 1과 동일한 크기를 갖습니다.

 

Note: Xcode displays an error at this point: Use of unresolved identifier “GameScene” because you haven’t implemented the GameScene class yet. We will fix that soon.

 

3행 – 컨트롤러의 뷰를 SpriteKit 뷰로 강제 다운캐스트합니다. 이는 SpriteKit 콘텐츠를 렌더링하는 유일한 뷰 유형입니다. 이 경우 게임 템플릿을 사용하고 있기 때문에 캐스트가 항상 성공하므로 컨트롤러 보기 클래스는 기본적으로 스토리보드의 UIView 대신 SKView로 설정됩니다.

 

4번째 줄 - 화면에 장면을 표시합니다. 전체 게임에서는 전환을 사용하여 여러 장면을 거치게 되지만 지금은 단순하게 유지하고 하나만 사용하겠습니다.

이것이 바로 뷰 컨트롤러 설정입니다. 이제 장면을 만들어 보겠습니다.

 

Creating a Scene

다시 한번, 이전 섹션에서 GameScene.swift를 비웠습니다. 여기에서는 처음부터 만드는 방법을 보여 드리겠습니다. 작업을 시작하려면 GameScene.swift 파일에 다음 코드를 추가하세요:

 

 

SpriteKit 프레임워크를 가져오고 표준 SpriteKit 장면(예: SKScene)의 하위 클래스인 클래스를 정의합니다.

 

프로젝트를 빌드하고 실행하여 실제 장면을 확인하세요.

 

참고: 저는 프로젝트를 실행하기 위해 iPhone 14 Pro iOS 16.4 시뮬레이터를 사용합니다. 대신 좋아하는 시뮬레이터를 자유롭게 사용해 보세요.

 

Scene는 Root Node를 제외하고는 연결된 Node가 없기 때문에 Scene은 아무것도 없는 텅빈 화면이 출력이 됩니다.  이제 앱을 중지하고 편집기로 돌아가 첫 번째 Node를 Scene에 추가하세요!

 

Adding a Node to the Scene

첫 번째 노드는 단순한 레이블입니다. GameScene 클래스에서 label이라는 레이블 속성을 선언합니다.
 

 

모든 게임은 특정 시점에 텍스트를 표시해야 합니다. SpriteKit은 텍스트 레이블을 표시하기 위해 SKLabelNode라는 클래스를 제공합니다. 위의 코드는 단순히 SKLabelNode 개체를 인스턴스화하고 초기 문자열을 Hello SpriteKit!으로 설정합니다. 뷰 컨트롤러가 장면을 표시하자마자 장면의 노드 트리에 추가하지 않는 한 자체적으로는 아무 것도 수행하지 않습니다. 즉, 화면에 레이블을 표시하려면 추가 구현을 제공해야 합니다.

 

이제 클래스에 didMove(to:)라는 새 메서드를 추가합니다.

장면의 didMove(to:) 메소드를 재정의합니다. 장면이 해당 뷰에 의해 제시된 직후에 실행되는 방법입니다. 메소드 구현에서 addChild 메소드를 호출하여 장면의 노드 트리에 하위 노드로 레이블을 추가합니다.

이제 다시 앱을 실행해 보겠습니다. 화면에 다음과 같은 라벨이 표시되어야 합니다.

 

 

하지만 문제가 있습니다. 라벨이 잘립니다. 기본적으로 위치가 (0, 0)으로 설정되어 있기 때문입니다.

좋습니다. 이제 튜토리얼의 마지막 부분으로 이동하여 라벨을 중앙에 배치하도록 몇 가지 변경을 해보겠습니다.

라벨 중앙에 맞추기
장면에 레이블을 추가하기 직전에 didMove(to:) 메서드에 다음 코드 줄을 추가하세요.

 

 

뷰의 너비와 높이를 사용하여 라벨의 좌표를 결정하고 화면 중앙에 배치합니다. 화면의 크기는 하드코딩되어 있지 않으므로 모든 iPhone 시뮬레이터에 라벨이 올바르게 배치되어 있습니다.

빌드하고 실행하면 짜잔! 라벨은 화면에 완벽하게 렌더링되어야 합니다.

 

 

레이블의 위치 속성 외에도 레이블 스타일을 변경하기 위해 조정할 수 있는 여러 속성이 있습니다. 예를 들어 다음과 같이 글꼴 크기, 유형 및 색상을 변경할 수 있습니다.

 

 

 

 

소스코드

 

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