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.Wi dth / 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/enus/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 충돌처리예제의경우도, 폰을세로로세웠을때, 좌우가아닊위아래로움직읷수있도록프로그램을수정하라.