효율적인 2D 게임 개발을 위한 2d skeletal 구조에 관한 연구 - Spine을 중심으로

2014년 한국게임학회 추계학술대회 논문집 1

효율적인 2D 게임 개발을 위한 2D Skeletal 구조에 관한 연구 – Spine을 중심으로

김현우○*, 임태우, 안종찬, 조원우, 하서지, 현지은, 권순정**

서강대학교 게임교육원[email protected], [email protected]

A Study on 2D Skeletal structure

for efficient 2D game development with Spine™

Hyunwoo Kim○*, Taewoo Lim, Jongchan Ahn, Wonwoo Jo,SeojI Ha, Jieun Hyun, Soonjung Kwon**

Sogang Advanced Game Education

요 약하드웨어 기술의 발전으로 그래픽이 뛰어난 3D 게임이 출시됨에도 불구하고 여전히 2D 게임이 사

랑을 받고 있다. 하지만 HD(High-definition) 해상도에서 스프라이트를 이용하는 3D 그래픽 수준의

2D 게임을 개발하기 위해서는 많은 시간과 비용이 요구되어 개발에 큰 부담을 주고 있다. 이러한 문

제점을 극복하기 위하여 3D 모델과 유사한 형태를 가진 2D Skeletal 구조를 대표적인 소프트웨어인

Spine을 통해 분석하였다.

1. 서 론

잇따른 하드웨어의 발전으로 모바일 환경에서도

콘솔 게임 수준의 HD(High Definition) 해상도와

3D 그래픽을 가진 콘텐츠를 만나 볼 수 있게 되었

다. 이러한 시류 속에서도 2D 그래픽을 가진 게임

이 2D 게임만의 매력을 통해 여전히 많은 사람들

에게 사랑 받고 있다.

하지만 2D 그래픽의 게임을 스프라이트 형태로

HD 해상도에 맞추어 제작하기 위해서는 막대한

자원과 시간이 소요가 되어 3D 게임 제작 환경에

비해 많은 제약을 가진다. 최근에는 이러한 2D 개

발 환경의 한계를 극복하기 위해서 2D Skeletal

구조가 대두되고 있다. 2D Skeletal은 3D에서 사

용되던 본/메시 구조를 응용한 구조로 키 프레임

단위로 애니메이션을 표현하여 고해상도와 부드러

운 애니메이션에 대응할 수 있는 방식이다.

본 논문에서는 시중에 출시된 다양한 2D

Skeletal 적용 콘텐츠와 저작도구를 살펴보고 대표

적인 소프트웨어인 Spine을 통해 출력되는 Json 파

일과 결과물 출력 구조를 분석하였다.

2. 관련 연구

2.1 2D Skeletal 적용 콘텐츠

2.1.1 성검전설 ‘Legend of Mana’ (1999)

몸집이 비대한 보스 캐릭터를 구현하려 하였으

나 당시의 하드웨어로는 스프라이트를 이용한 대형

오브젝트 삽입이 어려워 한계를 극복하고자 [그림

1]과 같은 형태의 2D Skeletal 구조가 도입되었다.

하지만 보스 캐릭터 이외의 오브젝트는 스프라이트

로 제작이 되어 다소 이질감이 느껴진다.

2 효율적인 2D 게임 개발을 위한 2D Skeletal 구조에 관한 연구 – Spine을 중심으로

[그림 1] 성검전설 legend of mana 스크린샷

2.1.2 별이 되어라 (2014)

게임에 사용된 거의 모든 캐릭터와 몬스터들이 일

관성 있게 2D 본 애니메이션으로 구현이 되었다. 별도

의 저작도구를 사용하지 않고 autodesk 3ds max 2012

를 통해서 2D Skeletal 저작 환경을 구축하였다.

[그림 2] 별이 되어라 스크린샷

2.2 2D Skeletal 저작도구

2.2.1 Cocostudio

Cocostudio는 무료 게임 엔진인 Cocos2d-x와 연동

이 되는 통합 그래픽 편집도구로 2D Skeleton 구조를

지원하는 애니메이션 에디터와 UI, 씬, 데이터 에디터

가 같이 결합되어있다. 양질의 예제와 쉬운 사용법을

가지고 있지만 cocos2d-x 이외의 환경에서는 작업물

연동이 힘들다는 단점이 있다.

[그림 3] Cocostudio 스크린샷

2.2.2 Dragonbones

Dragonbones는 Adobe Flash Pro 5.5 이상이 설

치되어 있어야 사용할 수 있는 서드파티 익스텐션으로

플래시 타임라인을 기반으로 한 애니메이션 기능을 제

공한다. 플래시를 사용했었던 사람이라면 누구나 쉽게

기능을 익히고 적용할 수 있지만 플래시 라이센스가

없으면 단일로는 동작하지 않는다.

[그림 4] Dragonbones 스크린샷

2.2.3 Spine

Spine은 현존하는 다른 2D Skeletal 저작도구

중 가장 강력한 저작 도구다. FFD(Free-form

deformation)부터 Skinning, IK(Inverse

kinematic) 등의 기능이 기본으로 지원되며 다양

한 게임엔진 및 프레임워크에 사용가능한 라이브

러리가 기본으로 제공된다. 본 논문에서는 Spine

을 바탕으로 2D Skeletal 구조를 분석하였다.


3. Spine 분석

3.1 Spine의 구성

Spine은 2D Skeletal 구조를 작성하고 편집 할

수 있는 에디터와 결과물, 결과물을 불러 올 수 있

는 런타임으로 구성이 된다.[1]

3.2 에디터

WYSIWYG 형식의 에디터를 통해 다양한 포맷

의 이미지 파일을 불러와 본 구조를 형성하고 키

프레임 단위로 애니메이션을 편집할 수 있다. 또한

메인 프레임 워크는 JRE(Java Runtime

Environment)로 제작되어 다양한 환경에서 구동이

가능하다.

3.2.1 Setup

작업 영역에 사전에 제작된 이미지 파츠를 불러

와 트리 영역에서 리스트 형태로 관리하며 도구

영역을 통해 본 추가 및 제거, 이동, 크기, 각도,

본 간의 관계를 설정 한다.

[그림 5] Setup 작업 영역

3.1.2 Animate

앞서 Setup에서 제작된 본 구조를 이용하여 키

프레임 형태로 애니메이션을 작성하고 편집, 관리

할 수 있게 타임라인과 그래프 영역이 추가된다.

[그림 6] Animate 작업 영역

3.1.2 Export

제작된 결과물은 .spine 확장자를 가진 프로젝트

파일로 관리되며 이미지, 영상, 아틀라스와 텍스쳐

를 결합한 Json 또는 바이너리 형식으로 출력할

수 있다. 대다수의 게임 및 애플리케이션에서 작업

물을 응용하기 위한 출력 형태로 Json을 사용하는

데 이는 제작된 C/C++ 런타임에서 바이너리 포

맷을 지원하지 않기 때문이다.

3.3 Json 분석

Spine을 통해 출력된 Json 파일의 내부는 7가지

항목으로 구성되어 있으며 각 항목의 구체적인 내

용은 다음과 같다.

3.3.1 skeleton

Spine 버전 정보 및 전체 스프라이트의 크기가

명시되어있다. 이 항목은 런타임에서 사용되지 않

는다.

3.3.2 bones

이곳에 전체 본의 데이터가 열거되어있으며 계

층구조에 있어서 최상위(부모가 존재하지 않는) 본

을 선두로 하여 나열되어 있다.


항목 설명

name 본의 이름을 나타낸다.

parent 부모 본의 이름을 나타낸다.

length 본의 길이를 나타낸다.

x, y 본의 좌표를 나타낸다.

rotation

Z축에 대한 회전 정도를 나타낸다.

(60분법으로 표기되며 반시계 방향으로

회전할수록 양의 값을 갖는다.)

scale X, Y본과 결합되는 스킨의 스케일을

나타낸다.(1일 때 원본의 크기이다.)

color

본과 결합되는 스킨과의 색상 곱을

나타낸다.(RGBA순서로 표기되며 각

성분이 8bits인 HEX로 표기된다.)

[표 1] bones 하위 항목

3.3.3 ik

ik는 지정한 본을 중심으로 관절각도 값을 역으

로 계산하는 방식이다.[2] ik로 지정 시킬 본과 그

로 인해 영향을 받는 본들이 나열되어있다. 내부의

IK본 처리는 Ryan Juckett이 작성한 알고리즘을

따른다.[3]

3.3.4 slots

슬롯은 본과 스킨을 연결해주는 매개가 된다. 먼

저 출력되는(레이어 상에서 제일 뒤에 있는) 대상

이 제일 앞에 기록된다.

3.3.5 skins

실질적으로 화면에 보이는 파츠(텍스쳐)이다. 또

한 바운드 영역도 skins에 저장된다.

[그림 7] 같은 본에 스킨만 변경한 형태

단일 스킨인 상태에서 별도로 이름을 지정하지

않으면 기본 네이밍인 default 블록에 스킨 데이터

가 저장이 되며 [그림 7]과 같이 이름을 변경한 상

태에서서로 다른 스킨이 존재하고 같이 공유하는

무기와 같은 파츠가 있을 경우 default 블록에 해

당 파츠가 관리된다.

항목 설명

Placeholder

&

name

default가 아닌 이름의 스킨 블록이

존재하면 플레이스 홀더에는 별칭이

입력되고 name에 실제 텍스쳐의

상대 경로가 기록된다. 그렇지 않은

경우 name은 존재하지 않으며

플레이스 홀더에는 별칭이 아닌 실제

텍스쳐 이름이 사용된다.

x, y텍스쳐의 정 가운데를 0, 0으로 하며,

그로부터 움직인 거리가 기록된다.

rotation Z축에 대한 회전 정도를 나타낸다.

width,

height

화면에 출력되는 텍스쳐의 실제

크기를 나타낸다.

type

이 값을 통해 일반 평면인지, FFD

혹은 바운드 영역인지를 구별한다.

일반 평면은 이 값이 생략되며,

FFD는 버텍스 데이터와 UV값 및

인덱스 데이터 등이 차례로 기록된다.

바운드 영역은 오직 버텍스 데이터

값만 기록된다.

[표 2] skins 하위 항목

3.3.6 events

이벤트는 외부 라이브러리에서 특정 행위를 동

작 시킬 수 있는 지표로 사용되며 int, float,

string의 값을 가진다. 예를 들면 총을 쏘고 탄환

이 나가는 시점의 키 프레임에 이벤트를 삽입해놓

고 게임 프레임워크에서 탄환이 나가는 애니메이션

시점에 이벤트 정보를 불러와 사운드를 재생시키는

등의 방법으로 활용할 수 있다.

3.3.7 animation

각 애니메이션의 이름으로 블록이 묶여있으며 하위

항목으로 slots, bones, ik, ffd, draworder, events

등이 존재한다.


항목 설명

slots

부분적으로 본에 부착되는 스킨을 바꿀

수 있으며, 이를 통해 눈의 깜빡임 들을

표현할 수 있다.

bones

본의 스케일, 회전, 이동 등을 표현한다.

키 프레임 별로 시간과 함께 적혀있는데

키 프레임의 보간 방법 또한 설정할 수

있다.

ik각 ik본의 영향을 받는 본들에 대해 관절

이 굽혀지는 방향 등을 설정할 수 있다.

ffd

Free Form Deformation이 설정된 스킨

에 대한 버텍스 값이 기록되어있다.

Skinning에 의한 가중치 같은 정보는

Spine 런타임 내부에서만 다루어지기

때문에 출력 파일에는 존재하지 않는다.

draworder

이미지를 화상에 그려내는 단계를 관리하

는 항목이다. 기본적으로 앞서 읽은 슬롯

의 순서를 따르나, 특정 슬롯을 선택하고

해당 위치로부터 offset 만큼 표시 순서

를 바꾸는 것도 가능하다.

events이벤트 키 프레임에 설정된 값을 반환하

며, 이들의 값은 보간되지 않는다.

[표 3] animation 하위 항목

3.4 키 프레임 보간

부드러운 애니메이션 움직임을 위해 키 프레임

간의 움직임을 보간하여 처리한다.[4] Spine에서는

두 가지 방식의 보간법이 사용된다.

3.4.1 선형 보간

선형 보간은 y = x그래프의 모양을 취하는 보

간이다. 전체 식은 [수식 1]과 같다. 여기서 v는 t

에 따른 현재 위치이며, t의 범위는 0~1이다.

∙

[수식 1] 선형보간

3.4.2 시간 인자 t가 3차 베지어 곡선인 선형 보간

이 경우 Json 파일에선 [x1,y1,x2,y2]로 기록

된다. 제 n차 베지어 곡선의 n에 3을 대입하고 정

리하면 [수식 2]로 정리할 수 있으며 이 때 P(0)와

P(3)는 처음 점과 끝 점으로 각각 0과 1에 해당한

다.

∙ ∙∙∙∙∙∙ ∙

[수식 2] 3차 베지어 곡선

또한 P(2)와 P(3)는 각각 Json 파일에서 제시된

x1, x2와 y1, y2에 해당된다. 각각 대입한 함수를

Bx(t), By(t)라 하고 선형 보간의 시간 인자를 tl이

라 했을 때 tl은 시간 변화에 따른 By(t)의 값이

되므로 전체 식은 [수식 3]과 같이 나타낼 수 있

다.

∙

[수식 3] 전체 수식

3.5 결과물 출력

런타임에서는 텍스쳐와 아틀라스, Json을 불러

와 결과물을 출력한다. Json에는 파츠를 토대로

구성되는 항목이 있기 때문에 파츠 부분에 해당하

는 텍스쳐와 아틀라스를 먼저 로드한다.

[그림 8] 흐름도


항목 함수 이름 설명

_spUtil_readFile 파일을 읽어서 바이너리 데이터로 반환한다.

_spAtlasPage_createTexturepath를 바탕으로 텍스쳐를 불러온다.

불러온 텍스쳐는 self의 rendererObject에 기록한다.

_spAtlasPage_disposeTexture 불러온 텍스쳐를 해제한다.

spAtlas_createFromFile atlas 및 텍스쳐를 불러온다.

spSkeletonJson_create atlas 데이터로부터 Json 파일을 읽기 위해 준비한다.

spSkeletonJson_readSkeletonDataFile Json 파일을 읽어온다.

spSkeleton_create Json 데이터로부터 스켈레톤을 구성한다.

spAnimationStateData_create,

spAnimationState_create애니메이션을 구성한다.

spSkeleton_update 시간 변화량에 따라 스켈레톤 데이터를 갱신한다.

spAnimationState_update,

spAnimationState_apply시간 변화량에 따라 애니메이션을 갱신, 적용한다.

spSkeleton_updateWorldTransform갱신된 애니메이션, 상태에 따라

Bone의 IK와 SRT 및 행렬을 갱신한다.

spBoundingBoxAttachment_computeWorldVertices,

spRegionAttachment_computeWorldVertices,

spMeshAttachment_computeWorldVertices,

spSkinnedMeshAttachment_computeWorldVertices

Bone의 SRT 및 행렬 값에 따라

각 정점들의 최종 월드 좌표 및 UV, 인덱스를 구한다.

spAnimationState_addAnimation,

spAnimationState_setAnimation재생할 애니메이션을 설정한다.

spAnimationStateData_setMix,

spAnimationStateData_setMixByName

현재 애니메이션과 다음에 재생될 애니메이션을

보간 한다.

[표 4] 주요 함수 목록

3.6 런타임 함수

런타임에서는 [표 4]에 정리된 5개 부류의 항목

의 함수를 호출하여 사용하며 이벤트 영역, 바운드

박스 등의 기능을 불러 올 수 있다.

3.6.1 파일 입력

런타임 구성시 파일 입력을 사용자가 사전 정의

하도록 되어있으며 텍스쳐는 void* 타입으로 제

공된다.

3.6.2 버퍼 구성

유연한 처리가 필요한 FFD 애니메이션을 위해

런타임에서는 초기화 단계에서 버텍스 및 인덱스

버퍼를 미리 구성하지 않으며, 매 프레임마다 각

항목으로부터 정보를 넘겨받아 동적 버퍼를 이용하

여 그리도록 설계되어있다.

3.6.3 이벤트

이벤트는 콜백 함수를 받도록 설계되어 있다.

애니메이션의 키 프레임에 이벤트가 존재하는 순간

에만 발생되며 spAnimationState_apply함수에서

처리된다. 이벤트와 더불어 시작/종료 시점 등의

애니메이션의 상태에 대한 정보도 콜백 함수를 이

용하여 얻을 수 있다.

3.6.3 바운드 영역

바운드 영역은 각 점의 개수와 각 점의 x, y좌표

로 제공되며, 드로우 오더에 포함되기 때문에 그리

는 도중에 얻거나 spSkeleton_getAttachment~ 형

태의 함수로 얻을 수 있다.


4. 적용

[그림 9] 밉맵 자동생성 적용 전

[그림 14] 밉맵 자동생성 적용 후

분석된 구조를 응용하여 자체적으로 Json을 읽

을 수 있는 파서와 런타임을 적용하여 게임 엔진

에 삽입하여 구현해보았다. 실제 게임에 적용 시

원본 텍스쳐 크기보다 오브젝트가 작게 표시되는

경우 [그림 9]와 같이 도트가 뭉개져 보이는 현상

이 발생했다. 이와 같은 현상을 밉맵 자동생성을

추가하여 [그림 10]처럼 개선할 수 있었다. 축소가

이루어지는 오브젝트의 텍스쳐를 DXT5 포맷의

dds로 변환하고 언샵 마스크 필터를 활용해 거리

에 따른 밉맵의 뭉개짐을 최소화 하였다.

5. 결론

본 논문에서는 Spine을 중심으로 2D Skeletal

구조를 분석하였다. 분석한 결과 2D Skeletal 구조

가 기존의 스프라이트 방식에 비해 더욱 효율적으

로 고품질의 2D 콘텐츠를 구현할 수 있다는 것을

알 수 있었다.

향후에는 Mesh와 FFD를 적극적으로 이용하여

3D 와 같은 움직임을 줄 수 있는 2D 인터렉티브

리소스 제작 방식에 대해서 연구하고자 한다.

참 고 문 헌

[1] Esoteric Software, Spine Feature

http://esotericsoftware.com/spine-in-d

epth

[2] 은창수, 3D 컴퓨터 애니메이션을 위한

움직임 연출 연구, 2000

[3] Ryan Juckett, RJ_Demo_IK

http://www.ryanjuckett.com/projects/r

j_demo_ik/

[4] JUNJUN PNAN, SKETCH-BASED

SKELETON-DRIVEN 2D ANIMATION

AND MOTION CAPTURE, pp .37, 2009

효율적인 2D 게임 개발을 위한 2d skeletal 구조에 관한 연구 - Spine을 중심으로

Software

Transcript of 효율적인 2D 게임 개발을 위한 2d skeletal 구조에 관한 연구 - Spine을 중심으로