Sprite Kit Programming

iOS SDK 7에 포함된 SpriteKit을 이용한 프로그래밍을 학습합니다.

Sprite Kit Programming iOS SDK 7에 포함된 SpriteKit을 이용한 프로그래밍을 학습합니다.
본 토픽은 현재 준비중입니다. 공동공부에 참여하시면 완성 되었을 때 알려드립니다.

Hello Sprite Kit

XCode 5에 포함된 Sprite Kit 템플릿을 이용하여 Sprite Kit 응용프로그램을 만들어 보고, 그 내부를 들여다보며 Sprite Kit의 개괄적인 내용에 대해 알아봅니다.

템플릿으로 뼈대 만들기

먼저 XCode5에서 제공하는 Sprite Kit 템플릿으로 첫 번째 Sprite Kit 응용 프로그램을 만들어 보겠습니다.

1. File > New > Project로 프레젝트를 생성합니다.

2. Sprite Kit 템플릿을 선택하고 Next 버튼을 누릅니다.

3. 앱 정보를 입력하고 Next를 누릅니다.

여기서는 Product Name을 HelloSpriteKit으로, Device는 iPhone으로 진행합니다.

4. 프로젝트가 저장될 위치를 선택하고 Create를 누릅니다.

이제 첫 번째 Sprite Kit 응용프로그램이 생성되었습니다. 

샘플 프로젝트 살펴보기

우선은 실행 환경을 시뮬레이터 iPhone Retina (4-inch)로 맞추고 응용프로그램을 실행해 보겠습니다.

시뮬레이터가 다음과 같이 실행되는 모습을 볼 수 있습니다.

시뮬레이터 화면 아무곳이나 터치(클릭)해 봅니다.

화면에 전투기가 나타나 빙글빙글 도는 것을 볼 수 있습니다.

우측 하단에는 현재 몇 개의 노드가 표시되고 있으며 초당 몇 프레임으로 화면이 출력되고 있는지 표시됩니다. 위 화면에서는 총 3개(Hello World 텍스트 + 전투기 * 2대)의 노드가 출력되고 있음을 확인할 수 있습니다.

아주 간단한 예제입니다만, 여기서 우리는 Sprite Kit이 제공하는 몇 가지 내용을 확인할 수 있습니다.

  • Sprite Kit 장면(SKScene)을 표시하기 위한 뷰(SKView) 설정
  • Sprite Kit 노드를 표시하기 위한 장면(SKScene) 설정
  • 문자열을 출력하기 위한 라벨 노드(SKLabelNode)의 간단한 사용법
  • 스프라이트를 출력하기 위한 스프라이트 노드(SKSpriteNode)의 간단한 사용법
  • 사용자 인터랙션에 관한 간단한 처리방 법
  • 노드의 행동을 제어하기 위한 액션(SKAction)의 간단한 사용법

이제 샘플 프로젝트의 내부를 간단히 살펴보겠습니다.

샘플 프로젝트의 안쪽

다음은 Sprite Kit을 이용해 작성한 Sprite Kit 응용프로그램의 구조입니다. 

중요하지 않은 파일은 없겠지만, 여기서는 아래 파일들을 중심으로 살펴봅니다.

  • MyScene.h, MyScene.m : 실제 Sprite Kit 노드들을 표시하기 위한 장면(SKScene) 클래스 파일
  • ViewController.h, ViewController.m : Sprite Kit Scene (SKScene)을 표시하기 위한 SKView를 추가한 뷰컨트롤러 클래스

먼저 ViewController.m의 viewDidLoad를 살펴보겠습니다. 

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Configure the view.
    SKView * skView = (SKView *)self.view;
    skView.showsFPS = YES;
    skView.showsNodeCount = YES;
    
    // Create and configure the scene.
    SKScene * scene = [MyScene sceneWithSize:skView.bounds.size];
    scene.scaleMode = SKSceneScaleModeAspectFill;
    
    // Present the scene.
    [skView presentScene:scene];
}

여기서 하는 일은 아주 간단합니다. 

  • Sprite Kit 뷰(SKView)를 설정하고
  • Sprite Kit 노드를 표현할 수 있는 장면(SKScene)을 생성한 후
  • 해당 SKScene을 출력합니다.

SKView의 정체

SKView는 Sprite Kit 콘텐츠를 표시하는 뷰이며, 콘텐츠는 SKScene 객체에 의해 제공된다,라고 정의되어 있습니다. 잠시 SKView의 선언부를 살펴보면 아래와 같습니다.

#if TARGET_OS_IPHONE
SK_EXPORT @interface SKView : UIView
#else
SK_EXPORT @interface SKView : NSView
#endif

눈치채셨겠지만, SKView는 iPhone의 경우 UIView를 상속받고 있으며 맥 OSX의 경우 NSView를 상속받고 있습니다. UIView(혹은 NSView)의 서브클래스이미로 기존 UIView(혹은 NSView)가 가지고 있는 대부분의 View 관련 메서드들은 익숙한 방식 그대로 작동합니다. 이것이 의미하는 바는, SKView를 다루는 방법이 다른 UIView(혹은 NSView)을 다루는 것과 크게 다르지 않다는 것을 의미합니다. SKView의 주요 용도는 Sprite Kit 콘텐츠를 출력하는 SKScene을 표시해주는 것입니다.

  • 봤어요 (0명)

댓글

댓글 본문
작성자
비밀번호
버전 관리
위지氏
현재 버전
선택 버전
graphittie 자세히 보기