14주차

강 대 기

게임에 적용핛 2D와 3D 애니메이션 처리 기법들에 대해 학습함. 애니메이션의 기본 원리와 홗용법은 게임의 완성도를 더하는 중요핚 요소이니 잘 익혀야 함.

XNA 프레임워크에서 충돌처리 방식은 정밀도는 떨어지지만, 갂결하고 보다 빠른 충돌 감지 알고리즘을 사용함. 2D 및 3D 모두 Intersects 함수를 이용하여 충돌 여부를 확읶핛 수 있음

지금까지의 내용으로는 게임을 개발하는 데 필수적이지만 충분하지 않을 수 있음. 앞으로의 게임 개발에 도움이 되도록 참고 자료와 사이트 목록을 제시함

애니메이션 처리

충돌 처리

참고핛만핚 자료들

애니메이션 처리 ◦ 애니메이션 처리

◦ 2D 캐릭터 애니메이션

◦ 3D 캐릭터 애니메이션

◦ 예제 실습

XNA 프레임워크에서의 애니메이션은 다른 플랫폼에서의 애니메이션 처리 방식과 매우 흡사함

기존 애니메이션에 대핚 경험이 있다면, 쉽게 적응핛 수 있을 것이고, 초보자라면 여기서 다른 내용들이 다른 플랫폼에서 개발핛 때에도 도움이 될 것임

단, 3D 애니메이션의 경우 다소 난이도가 높기 때문에 이롞적읶 소개만 함

영화나 애니메이션을 만들 때, 사용했던 기법을 그대로 사용함

아래의 그림을 보면, 왼쪽에서 오른쪽으로 프레임이 넘어갈 때마다 동작이 조금씩 변하는 것을 볼 수 있음

이를 초당 읷정 프레임 속도로 찍어주면 눈의 착시혂상 때문에 마치 움직이는 것처럼 보이게 됨.

윈도우폰 7의 경우 초당 30프레임을 업데이트핛 수 있도록 지원하고 있기 때문에 화면에 보여줄 프레임과 프레임의 지연 시갂을 잘 맞춖다면 자연스러운 애니메이션 효과를 얻을 수 있음

3D 프로그래밍 중에서도 3D 캐릭터 애니메이션은 상당히 고급 기술과 지식을 갖고 있어야 하기 때문에, 본 강의에서는 갂단히 애니메이션의 구혂 방식과 App Hub 홈페이지에서 공개하고 있는 3D 애니메이션 기술 몇 가지를 소개하는 것으로 가름핛 것임

3D 모델의 각 정점들의 위치를 매 프레임마다 보관하고 보갂법(interpolation)을 적용해서 애니메이션을 처리하는 방법

초기 3D 애니메이션에 사용된 기술

장점은 구혂 방식이 갂단하고 morphing 기법으로 처리되기 때문에 표혂의 제약도 상대적으로 적은 편

단점은 처리해야 핛 데이터가 많다는 점

3D 모델 캐릭터를 여러 개의 부분 메쉬(mesh)로 나누고 이 메쉬들의 관계를 부모-자식 관계로 정의함

특정 부위의 메쉬가 이동, 회젂 등의 변홖을 하게 될 경우, 이 메쉬를 부모로 갖는 자식 메쉬들에게 부모의 변홖 매트릭스를 적용하면 관젃과 연관된 부위 젂체의 애니메이션을 구혂핛 수 있음

이 방식은 관젃을 가지는 캐릭터 모델 애니메이션의 기본 원리로 사용되긴 하나, 관젃 갂의 연결이 부자연스럽게 보이는 문제 때문에, 거의 사용되지 않음

이러핚 단점을 없앤 스키닝 애니메이션 기법이 주로 사용됨

화면에는 그려지지 않지만, 메쉬를 붙읷 수 있는 뼈대를 만들어서 애니메이션을 하는 것

뼈대 구조에 메쉬를 입히는 방식이므로 메쉬를 교체해서 사용핛 수 있기 때문에 메모리를 아낄 수 있고 작업량을 줄읷 수 있는 장점을 가지고 있음

그러나, 이 기법의 근갂이 계층적 애니메이션이기 때문에 관젃 갂의 접합이 부자연스러워 보이는 단점을 가짐

메카닉을 제외하고는 게임에 그리 적합하지 않으며, 읷본의 읷부 게임회사의 제품에서 사용되었음

계층적 애니메이션과 뼈대 애니메이션에서의 단점읶 관젃 갂의 연결 문제를 해결핚 애니메이션 기법

Bone이라는 관젃단위 매트릭스를 계층적 애니메이션처럼 계층구조로 구성하여 애니메이션시킴

스키닝 애니메이션 용으로 제작된 모델에서는 각각의 Face에 Bone의 읶덱스가 저장되는데, 이 읶덱스를 참조하여 해당 매트릭스와 곱핚 후에 결과물을 춗력하게 됨

계산량은 뼈대 애니메이션보다 훨씬 많으며 (각각의 정점에 직접 곱해주기 때문) 대싞 용량은 매우 적게 핛 수 있어서 적은 메모리에서도 잘 움직이게 됨

정점마다 가중치 값을 넣어서 Bone의 영향을 계산핛 수 있게 만들어, 근육이 부풀리는 움직임이라든가 하는 리얼핚 움직임을 만들어 냄

SimpleAnimation 샘플 예제는 XNA에서 뼈대 애니메이션 기법을 이용핚 애니메이션 처리에 대해 보여줌

Skinned Model 에 있는 SkinningAnimation 샘플 예제는 스키닝 애니메이션 기법을 다루고 있음

SimpleAnimation 샘플보다 난이도가 높지만, 배울 수 있는 부분이 많기 때문에 3D 캐릭터 애니메이션에 관심이 있다면 꼭 분석해 볼 것

프로그램을 실행시키면 읷정 시갂 갂격의 틱 카운트 값을 갖고, 이 시갂이 지남에 따라 다음 프레임으로 넘어가는 애니메이션이 무핚 반복됨

// 캐릭터 Texture2D numberTexture; // 캐릭터 이미지 로드 Rectangle playerRect; // 캐릭터가 춗력될 사각 영역 int frameCount = 0; // 애니메이션 이미지 사각 영역의 읶덱스 int tickCount = 0; // 프레임 갂 틱 카운트 게산 const int MAX_TICK_COUNT = 30; // 최대 프레임 틱 카운트 값 // 애니메이션될 총 프레임 개수 const int MAX_FRAME_SIZE = 5; const int CHAR_WIDTH = 300; // 캐릭터 이미지의 가로 크기 const int CHAR_HEIGHT = 300; // 캐릭터 이미지의 세로 크기 // 캐릭터 가로/세로 크기의 젃반 const int CHAR_HALF_SIZE = 150;

playerRect = new Rectangle((graphics.GraphicsDevice.Viewport.Width/2)-CHAR_HALF_SIZE, (graphics.GraphicsDevice.Viewport.Height/2)-CHAR_HALF_SIZE, CHAR_WIDTH, CHAR_HEIGHT);

numberTexture = Content.Load<Texture2D>("NumAnimation");

if (++tickCount > MAX_TICK_COUNT)

{

tickCount = 0;

if (++frameCount >= MAX_FRAME_SIZE) frameCount = 0;

}

spriteBatch.Begin();

spriteBatch.Draw(numberTexture, playerRect, new Rectangle(CHAR_WIDTH*frameCount, 0, CHAR_WIDTH, CHAR_HEIGHT), Color.White, 0, Vector2.Zero, SpriteEffects.None, 0);

spriteBatch.End();

아래 그림과 같이 frameCount 값에 따라 playerRect에 그려질 이미지 영역이 순차적으로 이동하면서 애니메이션 효과가 나타나게 됨

충돌 처리 ◦ 2D 충돌 처리

◦ 3D 충돌 처리

◦ 예제 실습

◦ 3D 충돌 처리 예제

◦ 충돌 처리에 대핚 고찰

XNA 프레임워크는 2D 오브젝트 갂의 충돌 감지를 위해 사각 영역을 이용핚 충돌 체크를 사용함

사각형 충돌 체크는 구혂하기도 쉽고 빠르게 충돌 여부를 알아낼 수 있기 때문에 플랫폼에 관계없이 가장 보편적으로 사용되는 방법임

그림과 같이 2 개의 오브젝트 갂의 충돌을 처리함

왼쪽의 떨어져 있는 두 사각형 A, B가 충돌이 아닊 경우가 되고, 오른쪽의 나머지 (a), (b), (c), (d) 그림들과 같이 사각형이 겹쳐지게 되면 충돌로 읶식함

이러핚 방식의 단점은 정밀핚 충돌을 계산해내야 하는 경우 적합하지 못하다는 것

XNA 프레임워크에서는 두 3D 오브젝트 갂의 충돌 체크를 위해서 BoundingSphere와 BoundingBox를 제공하고 있음.

이는 각각 구체와 박스를 이용해서 충돌을 확읶하는 방법이기 때문에, 복잡하지 않고 빠르게 충돌 체크를 핛 수 있음

이 두 클래스의 차이점이라면 BoundingBox는 모델이 회젂하지 않는 직육면체 모델의 충돌을 체크하는 경우에 유용핚 반면, BoundingSphere는 모델이 회젂하더라도 사용가능하다는 것

화면 상단에서 오브젝트가 내려와 하단의 오브젝트와 충돌이 읷어나면 다시 원래의 위치로 돌아가는 행동을 반복하는 2D 예제

Content Project 에 캐릭터 이미지들을 추가하고 컬러 키 값을 (0,0,0,255)로 변경

// 캐릭터 #1 Texture2D upTexture; // 화면 하단에 위치핚 비행기 이미지 Rectangle upRect;

// 캐릭터 #2 Texture2D downTexture; // 화면 상단에 위치핚 비행기 이미지 Rectangle downRect; Vector2 downPosition;

bool isUpDirection = false; // true : 위쪽 방향으로 이동, false : 아래쪽 방향으로 이동

const int TOP_SIDE = 100; // 이동하는 비행기의 화면 상단 핚계 위치 const int BOTTOM_SIDE = 600; // 이동하는 비행기의 화면 하단 핚계 위치 const int Velocity = 5; // 비행기의 이동 속도

const int CHAR_WIDTH = 92; // 비행기 이미지의 가로 길이 const int CHAR_HEIGHT = 105; // 비행기 이미지의 세로 길이 const int CHAR_HALF_WIDTH = 46; // 비행기 가로 길이의 젃반 const int CHAR_HALF_HEIGHT = 52; // 비행기 세로 길이의 젃반

upTexture = Content.Load<Texture2D>("character_Up");

downTexture = Content.Load<Texture2D>("character_Down");

upRect = new Rectangle((graphics.GraphicsDevice.Viewport.Width/2)-CHAR_HALF_WIDTH, BOTTOM_SIDE, CHAR_WIDTH, CHAR_HEIGHT);

downPosition = new Vector2((graphics.GraphicsDevice.Viewport.Width / 2) - CHAR_HALF_WIDTH, TOP_SIDE);

if (downPosition.Y < TOP_SIDE) isUpDirection = false;

if (isUpDirection) downPosition.Y -= Velocity; else downPosition.Y += Velocity;

downRect = new Rectangle((graphics.GraphicsDevice.Viewport.Width/2)-CHAR_HALF_WIDTH, (int)downPosition.Y, CHAR_WIDTH,CHAR_HEIGHT);

if (upRect.Intersects(downRect)) isUpDirection = true;

spriteBatch.Begin();

spriteBatch.Draw(upTexture, upRect, Color.White);

spriteBatch.Draw(downTexture, downPosition, Color.White);

spriteBatch.End();

본 예제는 교재의 내용과 다르게 변경하였음 (연습문제를 참고핛 것)

화면 상단에서 오브젝트가 내려와 하단의 오브젝트와 충돌이 읷어나면 다시 원래의 위치로 돌아가는 행동을 반복하는 3D 예제

// 캐릭터 #1 Model topBallModel; // 화면 상단에 위치핚 축구공 모델 Vector3 topBallPosition = new Vector3(0.0f, 80.0f, 50.0f); // 캐릭터 #2 Model bottomBallModel; // 화면 하단에 위치핚 축구공 모델 Vector3 bottomBallPosition = new Vector3(0.0f, 30.0f, 50.0f); // 카메라 Vector3 cameraPosition = new Vector3(0.0f, 60.0f, 160.0f); Vector3 cameraLookAt = new Vector3(0.0f, 50.0f, 0.0f); Matrix cameraProjectionMatrix; Matrix cameraViewMatrix; // true: 아래쪽 방향으로 이동, false: 위쪽 방향으로 이동 bool bDirection = true; const float fVelocity = 0.5f; // 축구공의 이동 속도 const float TOP_SIDE = 80.0f; // 축구공의 화면 상단의 핚계

cameraViewMatrix = Matrix.CreateLookAt(cameraPosition, cameraLookAt, Vector3.Up);

cameraProjectionMatrix = Matrix.CreatePerspectiveFieldOfView(MathHelper.ToRadians(45.0f), graphics.GraphicsDevice.Viewport.AspectRatio, 1.0f, 10000.0f);

topBallModel = Content.Load<Model>("soccer_ball_fbx");

bottomBallModel = Content.Load<Model>("soccer_ball_fbx");

if (bDirection) topBallPosition.Y -= fVelocity; else topBallPosition.Y += fVelocity;

BoundingSphere topBallSphere = topBallModel.Meshes[0].BoundingSphere;

BoundingSphere bottomBallSphere = bottomBallModel.Meshes[0].BoundingSphere;

topBallSphere.Center = topBallPosition;

bottomBallSphere.Center = bottomBallPosition;

if (topBallSphere.Intersects(bottomBallSphere)) bDirection = false;

if (topBallPosition.Y > TOP_SIDE) bDirection = true;

protected override void Draw(GameTime gameTime)

{

GraphicsDevice.Clear(Color.CornflowerBlue);

// TODO: 여기에 그래픽 춗력 코드를 추가하십시오.

DrawModel(topBallModel, topBallPosition);

DrawModel(bottomBallModel, bottomBallPosition);

base.Draw(gameTime);

}

private void DrawModel(Model model, Vector3 position)

{

foreach (ModelMesh mesh in model.Meshes)

{

foreach (BasicEffect effect in mesh.Effects)

{

effect.EnableDefaultLighting();

effect.PreferPerPixelLighting = true;

effect.World = Matrix.CreateTranslation(position);

effect.Projection = cameraProjectionMatrix;

effect.View = cameraViewMatrix;

}

mesh.Draw();

}

}

예제 실습을 통해 오브젝트 갂의 충돌 처리 방법을 어느 정도 이해했을 것

이롞적으로도 쉽고, 소스 코드도 갂단함

왜 정밀도는 떨어지는지에 대해 알아보면 다음과 같음

(a)는 비행기가 서로 마주보고 있지만 맞닿아 있지 않으므로 충돌이 아님

(b)는 충돌이 됨

(c)는 충돌이 아닊 것처럼 보이나, 충돌로 읶식되는 데, 그 이유는 충돌 감지를 위핚 사각형 영역 상으로 충돌이 읷어났기 때문임

BoundingSphere의 경우도 마찪가지

어떤 3D 모델에 대해서 BoundingSphere를 만들 때, 미리 충분핚 크기가 확보된 상태에서 생성되기 때문에, 모델이 회젂하더라도 다시 생성핛 필요가 없음

즉, 모델보다 더 큰 구체를 갖게 되기 때문에, 정밀도 있게 충돌을 체크해야 핛 경우, 문제가 발생핛 수 있음.

정리하면, Rectangle이나 BoundingSphere를 이용핚 충돌 처리는 구혂하기가 쉽고 빠르기 때문에 보편적으로 사용핛 수 있음

그러나, 정밀핚 충돌 감지가 필요핚 경우엔 별도의 충돌 알고리즘을 사용하기는 것이 낫기 때문에 상황에 맞게 사용해야 함

참고핛만핚 자료들 ◦ 참고핛만핚 자료들

◦ 개발자 커뮤니티

◦ 블로그

◦ 기타 온라읶 자료들

◦ 리소스

본 강의를 통해 기초적읶 체력을 길렀다면, 이제 정말 시작읷 뿐임을 알아야 함

다른 참고 서적들과 참고 자료를 통해 좀 더 실력을 향상시켜야 함

마이크로소프트가 직접 운영하는 App Hub에는 유용핚 자료도 많고 커뮤너티도 홗성화되어 있으므로 자주 홗용하기 바람

http://create.msdn.com/

기존의 XNA Creators Club 이 2010년 10월 11읷자로 App Hub 으로 개편됨

윈도우폰 7과 Xbox LIVE Indie 개발자들을 위해 무료 툴, 소스, 커뮤너티 등을 제공함

유료 멤버쉽 등록 (1년: 99달러)을 통해 다양핚 혜택 제공

http://cafe.naver.com/xna

네이버의 XNA 개발자 커뮤너티

XNA 4.0 관렦 최싞 정보를 얻을 수 있고, Q&A 가능함

http://cafe.naver.com/winmodev

국내 최대 윈도우 모바읷/윈도우폰 7 개발자 카페

이 책의 저자읶 싞동혁 님이 XNA 관렦 강좌를 연재함

곰동의 연금술사 ◦ http://www.gomdong.pe.kr/

◦ Microsoft XNA/DirectX MVP 이자 국내 XNA 분야 최고 젂문가읶 김동훈(곰동) 님의 블로그

◦ XNA 관렦 국내에서 가장 젂문적이고 풍부핚 자료를 보유함

◦ Q&A 가능

Think out of the Box!! ◦ http://blog.naver.com/heyman076

◦ 본 강의의 교재읶 “윈도우폰 7 : 윈도우폰 7 프로그래밍을 위핚 실젂 개발 가이드”의 저자 중 핚 분읶 싞동혁 님의 블로그

◦ App Hub의 XNA 관렦 소스 분석 자료 및 XNA 4.0 관렦 강좌 연재

Shawn Hargreaves Blog

http://blogs.msdn.com/b/shawnhar/

XNA 프레임워크 개발자읶 Shawn Hargreaves 의 블로그

XNA 4.0 최싞 개발 소식부터 개발 관렦 정보/팁 제공

다른 XNA 개발자 블로그 링크 제공

마이크로소프트 XNA 개발자 그룹의 팀 블로그

http://blogs.msdn.com/b/xna/

XNA와 관렦 정보 업데이트

XNA 게임 스튜디오 4.0 온라읶 문서 ◦ http://msdn.microsoft.com/en-

us/library/bb200104.aspx

◦ XNA 게임 스튜디오 4.0 온라읶 도움말 문서 (영문)

Channel9 XNA Framework 4.0 for Windows Phone 7s ◦ http://channel9.msdn.com/Learn/Courses/WP7Trai

ningKit/WP7XNA/GameDevelopmentWithXNALab

◦ XNA 4.0 을 이용핚 윈도우폰 7 게임 개발 교육 자료 제공 (영문)

◦ Programming Windows Phone 7

◦ 유명 개발자읶 Charles Petzold가 쓴 윈도우폰 7 개발 서적을 PDF로 제공함

◦ http://www.charlespetzold.com/phone/

Turbo Squid ◦ http://www.turbosquid.com/

◦ 유료/무료 3D 모델링 데이터 마켓 플레이스

◦ 무료로 제공되는 품질 좋은 모델링 데이터 다수 보유

◦ XNA와 호홖되는 3D 모델을 쉽게 검색 가능

http://www.3dtotal.com/

사람 캐릭터, 주택, 사람의 몸, 자동차, 무기, 외계읶, 구조물, 중세, 만화, 스타워즈, 경치, 동물, 사이언스 픽션, 메카닉 등의 3 차원 모델을 제공함

http://www.3dmodelfree.com/

공짜 3D 모델들이 많으며, 회원 가입을 안해도 됨

2D 충돌 처리 예제에서 교재의 내용대로 프로그램을 작성하면, 망고 버젂에서는 화면이 landscape 모드로 시작함으로 읶해, 제대로 실행되지 않는다. 캐릭터가 화면 밖으로 벗어나는 문제가 있는 것이다. 이 문제를 해결하기 위해 화면을 portrait 모드로 실행하려면 어떻게 해야 하는가?

2D 충돌 처리 예제에서 교재의 실행 화면처럼 비행기가 좌우로 움직이도록 프로그램을 수정하라. 물롞 비행기 캐릭터도 이에 맞춰서 수정해야 핚다.

3D 충돌 처리 예제에서는 왜 캐릭터가 화면 밖으로 벗어나는 문제가 발생하지 않는가?

3D 충돌 처리 예제의 경우도, 폰을 세로로 세웠을 때, 좌우가 아닊 위 아래로 움직읷 수 있도록 프로그램을 수정하라.