날로 먹는 iPhone dev 일기 #1

Drawing@2D 

애플은 iPhone의 3D API로 openGL | es를 사용합니다. 익히 아시다시피 openGL은 'os비종속적인' 표준 3D 라이브러리죠. 물론 3D뿐만 아니라 2D 이미지를 표시할 때도 Quartz보다 openGL | es 사용이 권장됩니다.

openGL(es)로 2D 이미지를 그리는 것은 개발자 입장에서 썩 효율적인 일은 아닙니다. openGL의 3D 좌표계에서 2D 좌표를 직관적으로 사용할 수 없는 것은 물론이고, 애초에 2D 이미지 = z뎁스 고정된 rect위의 텍스쳐이기 때문에 이미지 크기에 대한 제한(텍스쳐 이미지의 크기는 power of 2이어야 합니다. 32*32, 64*64, 128*128, ...) 등으로 이것 저것 신경써야 할 것이 많습니다.

물론, 어느 개발사건 상용게임 혹은 그에 준하는 게임을 만들 때 openGL (혹은 directX) 만을 가지고 만들지는 않습니다. 라이브러리에서 제공하는 기본 API 자체로는 개발자가 일일이 해야할 것이 많기 때문이죠. 보통 '엔진'으로 불리우는, 보다 하이레벨의 라이브러리 셋을 얹어 쓰게 됩니다.

보통 iPhone 개발용으로 자주 언급되는 엔진으로는 oolong, sio2, cocos2d 등-모두 open source-이 있는데요, 그중 2D 관련해서는 cocos2d 가 가장 많이 다뤄지고 있습니다. 제가 살펴보니 실제 게임을 구현하는데 조금 애매한 부분이 있습니다. 어딘가 불필요한 부분도 많고, 반대로 조금 모자란 부분도 있습니다. 그저 쉽게 이미지 몇장을 화면에 배치하고 이동이나 회전 등의 제어를 하는 것으로 만족한다면 모를까, 이대로는 게임 엔진을 구성할 수는 없는 수준입니다. 결국 많이 손을 보아야하는데, 이미 누군가에 의해 높이 쌓아져 올린 동전 더미를 건드리는 것보다, 새로 동전을 쌓는 것이 수월할 때도 있습니다. 

외국의 dev 포럼을 보면 보통 2D 기반의 작업에 대해서, cocos2d의 texture2D 클래스만 가져와서 개발을 하는 경우를 종종 볼 수 있습니다. texture2D 클래스를 어디서 구할 수 있느냐 물어보는 사람들도 자주 있구요.

컨셉자체가 '날로먹는' 것이므로 자세한 설명과 친절한 예제등은 생략하고 바로 Texture2D를 이용해서 화면에 이미지를 찍어보도록 하겠습니다. 

준비물 : 

1) 애플에서 제공하는 GLSprite 샘플코드

 : Welcome to Xcode 창의 iPhone Dev Center > iPhone Sample Code 섹션에서 찾아들어가시거나, 여기(로그인 필요) 에서 받으면 되겠습니다.

2) Texture2D관련 파일들 - Texture2D.h / Texture2D.m / PVRTexture.h / PVRTexture.m

: cocos2d-for-iphone 소스를 받아서 그 안에서 추출. http://code.google.com/p/cocos2d-iphone/

GLSprite 프로젝트를 열고, Add > Existing Files > 해서 4개의 Texture2D 파일들을 추가합니다. 이 때 필요시 타겟 폴더에 아이템을 복사함Copy items into destination group's folder (if needed)에 체크하세요.

이제 EAGLView.m 을 들여다 보도록 하겠습니다.

살짝 살펴보면,  GLSprite 어플은 

 

어플이 시작되면

(id)initWithCoder:(NSCoder*)coder;

-> [self setupView];

-> [self drawView];

그리고 매 timeout마다

(void)drawView;

이렇게 돌아가는 것을 알 수 있습니다. *한번 돌려 [CMD-R] 보세요. 4각형에 텍스쳐가 매핑되어서 빙글빙글 돌고 있습니다.

- (void)setupView

이곳에서 스프라이트(이미지)의 로딩과 기본적인 openGL|es 세팅이 이루어집니다. 중간에 스프라이트를 읽어오는 부분을 살펴봅니다.

spriteImage = [UIImage imageNamed:@"Sprite.png"].CGImage; 

Sprite.png파일을 UIImage로 읽어서, 그것을 CoreGraphics Image로 가져오는 코드입니다. 하지만 이 때 image 파일들은 8비트, 32비트 rgb(a)칼라여야 하고, power of 2의 사이즈를 가져야 합니다. 이것 저것 따지는 게 많고 귀찮습니다.

이제 Texture2D 클래스를 이용해서 쉽고 편하게 2D이미지를 읽어와서 화면에 뿌려보도록 하죠.

EAGLView.h 에 Texture2D 헤더를 임포트 선언합니다.

#import "Texture2D.h"

그리고 EAGLView 클래스 선언 내부에 Texture2D 객체를 하나 추가해줍니다.

Texture2D *tex;

그리고 원하는 이미지 파일을 Resources 폴더 밑에 추가해줍니다.  Add > Existing Files > 마찬가지로 이 때 필요시 타겟 폴더에 아이템을 복사함Copy items into destination group's folder (if needed) 을 체크.

그리고  - (void)setupView 를 다음과 같이 추가/변경합니다.

그리고 - (void)drawView 를 고쳐 보죠.

이 때, 이미지의 기준 좌표는 좌측 하단이며, 전체 화면은 x: -1.0 ~ 1.0, y: -1.5 ~ 1.5 를 차지하고 있습니다. 대강 감이 오시죠? (-1.0, -1.5) 부터 넓이 2.0, 높이 3.0의 Rect에 텍스쳐를 그리라는 것입니다. 참고로 커멘트 되어있는 부분- [tex drawAtPoint:CGPointMake(-1.0, -1.5)]; 는 한 점CGPoint 위에 텍스쳐를 그리는 것으로, cocos2d 안에 있는 Texture2D소스를 바로 가져왔을 때 한 두라인을 수정해야 화면에 제대로 보입니다. 

제가 넣은 이미지를 띄워보았습니다. =) 

이것으로 화면에 '내가 원하는 이미지'를 '원하는 위치'에 띄우는 것이 가능해졌습니다. 이제 기존에 자신이 쓰던 스프라이트/리소스 툴과 연계하여 보다 편리하고 보다 효율적으로 돌아가는 스프라이트 엔진을 짜는 것이 필요하겠죠.