iOS7 Sprite Kit을 이용한 스마트폰 게임 개발

창원대학교 정보통신공학과 박동규dongupak@gmail.com

http://ivis.cwnu.ac.kr/tc/dongupak

스마트 앱 개발자 포럼 세미나2013. 11.

내용• 정의와 특징

• Cocos2d와의 장,단점 비교

• 장면 그래프 구조 알아보기

• 텍스쳐 아트라스, 액션, 사운드 기능 알아보기

• 물리 시뮬레이션, 파티클

• 3-4 가지의 실습 과정으로 구성됨

Sprite Kit란?

• 애플사에서 개발한 스프라이트 API

• OS X Mavericks, iOS 7에서 사용가능한 새 API

• 2D 게임 개발도구로 Cocos2d와 매우 유사한 구조임

• 스마트 폰 기반 게임 시장의 성장과 Mac 운영체제의 확산으로 인하여 효율적인 게임 개발도구의 필요성이 제기됨

iOS 7 게임 컨트롤러 API

• iPhone 5 이상의 기기에서 사용가능함http://www.macrumors.com/2013/11/19/first-ios-7-game-controller-moga-ace-power-now-available/

특징• 고성능 2D 렌더링 프레임워크

• 내장 물리 시뮬레이션, 파티클 시스템 지원

• OS X, iOS 지원(크로스 플랫폼 개발도구)

• 실행 환경, 개발을 위한 패키지

• 스프라이트, 텍스쳐 아트라스 지원

• 비선형 애니메이션 지원

• 오디오, 비디오를 비롯한 비주얼 효과를 지원함

장점

• iOS 게임개발을 위한 추가 라이브러리가 필요없다

• 텍스쳐 아트라스, 파티클, 물리 시뮬레이션을 xcode가 자체적으로 제공한다

• 이미지 효과나 마스크와 같은 복잡한 작업을 제공되는 기능으로 쉽게 할 수 있다

• iOS에서 처음 게임을 개발하려는 개발자라면 좋은 시도가 될 수 있다

단점

• Cocos2d나 Unity와는 달리 iOS 생태계에서만 사용할 수 있다.

• 안드로이드 포팅을 위해서는 별도의 작업이 요구된다

• Cocos2d와 같은 폭넓은 사용자 커뮤니티가 “아직” 형성되어 있지 않다.

Introduction

장면 그래프• 화면에 나타나는 객체들을 어떻게 구조화 할 것인가?

• 트리구조를 이용하여 부모-자식관계를 형성하여 구조화 시키자

• 트리구조의 장점

• 객체들을 계층적으로 구성할 수 있어서 객체의 삽입과 제거, 이동등을 손쉽게 할 수 있다.

• 예전부터 3D, 2D객체를 구조화하는데 이용되던 방법

• Maya, AutoCAD, VRML, Open Inventor, X3D, OpenSG,..

장면 그래프• 현재 활성화된 Sprite Kit의 모든 노드의 계층적인 구조

• 모든 노드는 하나의 부모 노드를 가진다.

• 자식 노드는 여러개의 하위노드를 가질 수 있다.

• 장면 그래프는 고수준 그래픽스 시스템이나 게임 프로그래밍에서 널리 사용되던 방법

• Cocos2d, Cocos2d-x등

Scene GraphSKScene

SKSpriteNode SKLabelNode SKSpriteNode

Demo

Project Template 생성

기본 템플릿 살펴보기

뷰 컨트롤러

SKView의 정보활용

뷰 컨트롤러 살펴보기• SKView의 FPS, nodeCount를 보여줄 것인가 아닌가를 결정

• 이 부분은 디버깅시에 유효하다.

• 애니메이션과 렌더링은 SKView 객체가 수행한다

• SKScene을 생성하여 이 Scene을 SKView에서 present 한다.

• 게임 콘텐츠 구성은 SKScene이 담당한다

• 게임 개발자는 Scene위에 스프라이트와 레이블, 메뉴등을 담을 수 있다

SKScene

SKScene의 초기화

SKScene의 초기화

SKScene의 초기화SKScene의 배경색상

SKScene의 초기화SKScene의 배경색상

SKScene의 초기화SKScene의 배경색상

레이블 노드 생성

SKScene의 초기화SKScene의 배경색상

레이블 노드 생성

SKScene의 초기화SKScene의 배경색상

레이블 노드 생성

레이블 노드를 장면 그래프에 추가

SKScene의 초기화SKScene의 배경색상

레이블 노드 생성

레이블 노드를 장면 그래프에 추가

터치 이벤트 처리와 액션

터치 이벤트 처리와 액션터치좌표를 touches NSSet으로부터 읽는다

터치 이벤트 처리와 액션터치좌표를 touches NSSet으로부터 읽는다

터치 이벤트 처리와 액션터치좌표를 touches NSSet으로부터 읽는다

스프라이트 노드 생성

터치 이벤트 처리와 액션터치좌표를 touches NSSet으로부터 읽는다

스프라이트 노드 생성

터치 이벤트 처리와 액션터치좌표를 touches NSSet으로부터 읽는다

스프라이트 노드 생성

액션객체를 생성한다. 회전 액션

터치 이벤트 처리와 액션터치좌표를 touches NSSet으로부터 읽는다

스프라이트 노드 생성

액션객체를 생성한다. 회전 액션

터치 이벤트 처리와 액션터치좌표를 touches NSSet으로부터 읽는다

스프라이트 노드 생성

액션객체를 생성한다. 회전 액션

스프라이트 노드가 액션을 수행하게된다

터치 이벤트 처리와 액션터치좌표를 touches NSSet으로부터 읽는다

스프라이트 노드 생성

액션객체를 생성한다. 회전 액션

스프라이트 노드가 액션을 수행하게된다

터치 이벤트 처리와 액션터치좌표를 touches NSSet으로부터 읽는다

스프라이트 노드 생성

액션객체를 생성한다. 회전 액션

스프라이트 노드가 액션을 수행하게된다

매 프레임마다 수행할 게임로직

터치 이벤트 처리와 액션터치좌표를 touches NSSet으로부터 읽는다

스프라이트 노드 생성

액션객체를 생성한다. 회전 액션

스프라이트 노드가 액션을 수행하게된다

매 프레임마다 수행할 게임로직

결과 보기

노드 클래스• SKScene, SKSpriteNode, SKLabelNode, 등은 모두

SKNode의 하위 클래스이다.

• 노드 클래스 자체는 화면에 나타나는 기능이 없으나, 장면 그래프를 구조적으로 만드는데 필요한 기능을 가지고 있다

• 자식 노드의 추가, 삭제, 읽기등의 기능을 할 수 있다.

• 장면 그래프 내에서 자식 노드는 부모 노드의 위치, 액션등이 변할 경우 영향을 받는다

실습-액션 바꾸기

스프라이트 노드의 속성변경

스프라이트 액션

텍스쳐 아트라스

• 스프라이트 이미지가 수백장에 달하는 게임이 있을 경우 여러개의 이미지로 만들어서 여러번 읽는 것은 비효율적이다

• 하나의 이미지를 만들어서 이 이미지를 한번 읽은 다음 여러개의 스프라이트로 나누는 것이 바람직하다

스프라이트 이미지들

...

MB_01.png MB_02.png MB_03.png MB_03.png

스프라이트 이미지가 100장 있을 경우매번 번들로부터 이미지를 읽어오는 것은 비효율적이다.또한 각 이미지를 저장하는 공간의 낭비가 발생한다.

기존 방법

텍스쳐 아트라스를 자동 생성하는 도구를 이용함

메타데이터 이용(plist)

메타데이터 이용(plist)

메타데이터 이용(plist)

메타데이터 이용(plist)

메타데이터 이용(plist)

메타데이터 이용(plist)

메타데이터 이용(plist)

in your code(Cocos2d)

in your code(Cocos2d)

in your code(Cocos2d)

in your code(Cocos2d)Sprite sheet file

in your code(Cocos2d)Sprite sheet file

in your code(Cocos2d)Sprite sheet file

in your code(Cocos2d)Sprite sheet file

Sprite file

in your code(Cocos2d)Sprite sheet file

Sprite file

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

Animation contain frames

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

Animation contain frames

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

Animation contain frames

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

Animation contain frames

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

Animation contain frames

Animate frames

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

Animation contain frames

Animate frames

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

Animation contain frames

Animate frames

in your code(Cocos2d)Sprite sheet file

Sprite file

Sprite frame from sprite cached sheet

Animation contain frames

Animate framesrepeats animation forever

in your code(Cocos2d)

in your code(Cocos2d)

in your code(Cocos2d)

in your code(Cocos2d)

in your code(Cocos2d)

텍스쳐 아트라스

• 파인더에 .atlas 라는 확장자를 가지는 폴더 아래에 이미지들을 넣는다

• 이 폴더를 xcode 리소스로 넣게 되면 xcode가 자동으로 텍스쳐 atlas 이미지를 생성한다

텍스쳐 아트라스

• 텍스쳐 아트라스의 최대 크기는 2000x2000 픽셀이다

• 최대 크기보다 큰 아트라스 이미지가 있을 경우 별도의 파일을 생성한다

텍스쳐 아트라스

[이미지 출처 : Raywenderich 블로그]

빌드 설정

Enable Texture Atlas Generation : YES

게임 사운드

게임 사운드

SKAction 클래스를 이용하여 게임 사운드를 로딩한다

runAction 메소드를 이용하여 사운드 재생

액션

액션 추가하기

• 정적인 스프라이트 보다는 스프라이트를 움직이거나 회전시키는 것과 같은 액션을 통해 게임을 동적으로 만들 수 있다

• SKAction을 이용한다

SKAction

• 노드의 위치와 방향을 변화시킨다

• 노드의 크기와 스케일 속성을 변화시킨다

• 노드의 보여짐, 투명도를 변화시킨다

• 스프라이트 노드의 콘텐츠를 변화시키는 방법으로 애니메이션을 만들 수 있다

• 스프라이트 노드의 색상을 변화시킨다

SKAction

• 간단한 사운드를 재생시킨다

• 노드트리에서 노드를 제거시킨다

• 오브젝트의 selector나 block을 만들어서 자체적인 액션을 만들 수 있다

• 하나이상의 액션들을 조합하여 연속적인 액션을 만들거나, 반복액션을 수행할 수 있다

장면 사이의 이동• 장면(Scene)은 게임을 만드는 기본적인 틀을 제공하고 있다.

• 예) 게임시작 장면, 메뉴 장면, 사용설명, 게임, 게임종료, 랭킹장면,...

• 게임을 위한 여러 장면을 만든 후 이 장면들 사이의 이동이 필요하다.

• Sprite Kit은 장면 전환기능을 지원한다

장면전환

• 다른 콘텐츠가 로딩되는 동안의 로딩화면 표시기능

• 메인 메뉴 장면

• 사용자가 선택가능한 게임의 종류(mode)

• 게임 플레이

• 게임 종료등의 장면이 있을 수 있다

SKTransition

• 장면전환시에 필요한 다양한 효과를 생성할 수 있다.

• crossFace

• doorsCloseHorizontal/Vertical

• doorsOpenHorizontal/Vertical

• doorway

• fade/faceWithColor

• ....

Demo

물리 시뮬레이션• Cocos2d의 물리 시뮬레이션

• Box2d, Chipmunk 등의 3rd party 프레임워크를 이용함

• Sprite Kit의 경우 물리시뮬레이션 키트를 포함

• 장면에 물리시뮬레이션이 필요할 경우 Physics body를 넣어야 한다.

물리 시뮬레이션

• 3D 물리 시뮬레이션은 불가능

• 2D 물리시뮬레이션

• 물리 시뮬레이션을 위한 physics world가 필요함

• 중력을 적용

• 물리적 객체에 필요한 제동력(damping)을 적용

• 마찰력(friction) 계수를 적용함

파티클

• 불꽃, 연기, 안개, 구름등과 같은 비정형 물리객체

• Sprite Kit에는 파티클 시뮬레이션 기능을 내장하고 있다.

• SKEmitterNode를 이용함

SpriteKit Particle File 제공

Lab(실습)

실습 코드

비디오 노드

• 장면 내에서 비디오 재생을 지원하는 SKVideoNode를 제공함

• 비디오 플레이기능, 필터를 이용한 가공이 가능함

기타 기능등• Crop 노드를 이용한 이미지 마스킹 기능

Good Reference

참고자료

• Raywenderich Blog

• http://www.raywenderlich.com/

• WWDC 2013 발표자료

• http://cocos2dDev.com/

Questions?