KGC 2011 강연자료 : OpenGL-ES 를 사용해서 iOS에서 90년대 스타일의 픽셀 직접제어 엔진 구현

1. 내 손에 픽셀을 쥐어다오
청강문화산업대학 콘텐츠스쿨 교수
별바람 스튜디오 대표
별바람(김광삼)

2. 내 손에 픽셀을 쥐어다오
iOS에서 OpenGL ES를 이용한 8비트 픽셀 처리와 포팅
청강문화산업대학 콘텐츠스쿨 교수
별바람 스튜디오 대표
별바람(김광삼)

3. 게임을 이식하기로 했다.
난 이제 뭘 해야 하는 거지?

4. 뭘 이식할 생각이었냐면

5. 뭘 이식할 생각이었냐면

6. 뭘 이식할 생각이었냐면
혈십자, 이 저주받은 게임이었죠.

7. 처음엔 쉽게 생각했었다.
어차피 게임이 돌아갈 구조란 뻔하니까.

8. 오브젝티브 씨? 이건 또 뭐야?
어차피 개념은 비슷할테니 어찌 되겠지만..

9. 그냥 귀찮은데 엔진 있지 않나?
제자들을 보니 Cocus2D, Unity3D, UDK등 많이 쓰던데?

10. ..하지만 문제가 있었다
일단 메모리 부터가 문제다

11. 미칠듯한 스프라이트의 압박
캐릭터 하나마다
이런 방식으로
30-40장을 사용
옆의 캐릭터가
그나마 가장 적은데
8비트(!) BMP 파일로
9.45M 의 용량.
적 캐릭터는? 배경은?
음악은? 동작 데이터
는? 캐릭터 보이스는?
그런데 2P, 3P, 4P, 5P, 6P
컬러도 바꿔야..

12. WTF!!! 용량이 문제잖아!!
8비트.. 8비트가 필요해..

13. 하지만 ‘요즘’ 엔진들에게 8-bit는..
누가 그런 걸 쓰냐고?

14. 그래, 나는 노땅이다
그리고 픽셀을 만지지 못하는 코딩이 싫다
메인 루프를 만지작 거리지 않는 구조는 취향이 아냐

15. ..하지만 어찌 될거야
쿼츠 2D가 있잖아
어차피 픽셀만 제어하면 어찌 되거든..

18. 뭐??? 안된다고??!!????!!!

21. 그게 무슨 소리요!! 내가..

22. 어어.. 이거 곤란한데?
좀 더 하부 제어로 내려가지 않으면..

23. 결국 최후의 보루는 OpenGL인가
내 주변에 이거 쓰는 사람은 아무도 없지만..

24. 좌절의 나락에 빠질때 쯤
어느 책의 예제를 보다 깨달았다.
호오.. 텍스춰.. 텍스춰라고? 결국 Array란거잖아?

25. 화면 가득 텍스춰로 잡아놓으면
원하는 좌표에 점을 찍을 수가 있다!!!

27. 즉, OPEN GL의 텍스춰로
백버퍼를 만들어버리는거다!

28. 이 화면을 처음 보았을때 얼마나 기뻤는지 모른다.
(눈에 캐릭터가 보이는 것 같지만 착각입니다.)

29. 이 화면을 처음 보았을때 얼마나 기뻤는지 모른다.
(눈에 캐릭터가 보이는 것 같지만 착각입니다.)

30. “점 하나 그렇게 힘들게 찍는 놈은 처음 본다”

31. ..하지만 문제는 속도야 바보야.
텍스쳐에 일일히 점을 찍는다고?
그게 속도가 나올리가..

32. ..나오더군요.
의외로 빨라서 놀랐습니다.
전체 화면을 2겹으로 계속 갱신해대는데도
100프레임을 훨씬 넘어서는 스피드..

33. 내 손에 픽셀 하나만 쥐어다오.
달인에게 연필을 쥐어주면
사람을 죽일 수 있듯이,
개발자에게 픽셀을 쥐어주면 ..
90년대에는 다들 그렇게 만들었으니까요.

34. 게다가 C++코딩이 가능하다!!
만세!! 기존의 메인 코드는 그대로 옮겨올 수 있어!!

35. 게다가 C++코딩이 가능하다!!
만세!! 기존의 메인 코드는 그대로 옮겨올 수 있어!!

36. 게다가 C++코딩이 가능하다!!
만세!! 기존의 메인 코드는 그대로 옮겨올 수 있어!!
OpenGL 에게 축복을!!

37. 간단히 말하면,
텍스춰를 화면보다 크게(512x512) 잡아서
백버퍼를 만들고 여기에 직접 이미지를 그린다.
이로써 8-bit indexed 컬러의 이미지도
백버퍼(실은 24 혹은 32비트)에 올릴수 있고,
삐~하고 삐~한 장난질이 가능하다!!

38. 잠깐만!! 갑자기 왜 8비트???
지금이 어느 시대인데 8-Bit 컬러를?

39. 다시 이걸 봅시다.
이 그림의 용량은?
8-bit = 640*480+256*3
16-bit = 640*480*2
24-bit = 640*480*3
32-bit = 640*480*4
이런 그림이 캐릭터당
30-40장이 쓰인다면..
쉬운 답은 8-bit 뿐이다

40. 하지만 256컬러는 너무..
아무리 복고풍이 유행이라지만요.

41. 8-BIT INDEXED COLOR?
R,G,B 정보를 8비트에 담는 것은 무리.
(3-3-2로 나눈다고 생각하면 끔찍하죠)
즉, 256개의 프리셋(팔레트)을 만들고,
픽셀은 이 팔렛(프리셋)값을 저장한다.
이미지 하나당 최대 256가지 색만 쓴다면
팔렛에는 자유롭게 R,G,B를 세팅한다.
즉, 이미지가 크지 않다면
무시하기 못할 퀄리티가 나온다.

42. 지금 8BIT를 무시하나여?

43. 소스 데이터로써 8비트
어차피 백버퍼는 24 혹은 32비트라고 가정하면,
스프라이트, 혹은 텍스춰 등의 게임 소스 비트맵을
8비트 데이터로써 메모리에 올릴 수 있다.
이로써 생기는 장점은 메모리 사용의 감소.
그리고, 팔렛변환의 특징인 손쉬운 색상 변환이다.
(격투게임등의 2P, 3P 컬러 같은 것을 구현하기 위해)
스프라이트마다 개별적인 팔렛을 가질 수 있으므로,
최종적인 결과 화면은 256컬러가 아니다!

44. 여기에 RLE 를 사용한다면?
RLE(Realtime Length Encoding)을 기억하시나요?
더 적은 메모리 점유와 빠른 블리팅

45. RLE 의 원리
근본적으로 반복되는 숫자를 횟수로 줄임

46. 그리고 그 결과는?
302KB 가 77KB로!!!
하지만 기억해야 할 것.
최종적인 zip압축률은 비슷하나 약간 손해.
즉, 메모리에 압축상태로 올려야 의미 있음.

47. 이보다 더 효율을 높이려면?
Bit-Flag Compression
BRP(Byulbram-Rupaus Package)..형식
등등 각자 개량하기 나름

48. 그래서 실제로 어떻게 짜는데?
일단 기본적인 코드의 예제를 봅시다.

49. 기본적인 원리
1. OpenGL ES 1.1템플릿의 어플리케이션 생성
2. 화면사이즈보다 크게 GLubyte* 로 백버퍼 선언
3. 백버퍼에 직접 픽셀 쓰기
(백버퍼의 데이터 순서는 좌표 기준으로,
(0,0) R, (0,0) G, (0,0) B, (0,0) A, (1,0) R...의 순서
즉 (X + (Y * Max_X))*BitRate)+color 로 접근.
4. 백버퍼를 glTexImage2D 로 텍스쳐로 만든다.
5. 사각형 폴리곤을 생성하여 화면가득 렌더링
참 쉽죠?

50. 백버퍼 생성 예제 코드
CK2D_Texture CreateBackBuffer()
{
! int i, x, y, ix, iy;
!
! CK2D_Texture tTxr;
!
! tTxr.Width = TEX_SIZE_X;
! tTxr.Height = TEX_SIZE_Y;
!
!
! backbuffer = (GLubyte *) malloc(tTxr.Width * tTxr.Height * BIT_RATE);
! memset(backbuffer, 0, TEX_SIZE_X * TEX_SIZE_Y * BIT_RATE);!
! ix = 0;
! iy = 0;
!
!
! glGenTextures(1, &tTxr.ID);
! glBindTexture(GL_TEXTURE_2D, tTxr.ID);
!
! glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, tTxr.Width, tTxr.Height, 0, GL_RGB, GL_UNSIGNED_BYTE, backbuffer);
!
! glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
! glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
!
! glEnable(GL_TEXTURE_2D);
!
!
! return tTxr;
}

51. 비트맵 출력 예제
void BITMAPDraw ( int iX, int iY, stcRECT area, int iFlip, int isColorkey, stcBMPDATA bmp)
{
! int iWidth, iHeight;
! if (bmp.isCompressed)
! ! RLEDraw(iX, iY, area, iFlip, isColorkey, bmp);
!
! iWidth = bmp.iWidth;
! iHeight = bmp.iHeight;
<------- 스크롤의 압박으로 클리핑 파트 생략 ----------->
! int iShit, iCrap;
! BYTE bColor;
! int iCal;
! int iCalY;
int iCalY2;
! for ( iShit = 0; area.iHeight > iShit; iShit++ )
! {
! ! iCalY = ((iShit-iY+(MAX_Y-area.iHeight) ) * TEX_SIZE_X );
! ! iCalY2 =( (iShit+area.iY) * (bmp.iWidth + bmp.iSpan) )
! !
! ! for ( iCrap = 0; area.iWidth > iCrap; iCrap++ )
! ! {
! ! ! bColor = bmp.ImageData [ iCrap+area.iX + iCalY2];
! ! ! iCal = (((iCrap+iX) + iCalY) * BIT_RATE);
! ! !
! ! ! if (( bmp.iColorkey != bColor ) || (isColorkey == 0))
! ! ! {
! ! ! ! backbuffer[iCal] = bmp.color [ bColor ].ir;
! ! ! ! backbuffer[iCal+1] = bmp.color [ bColor ].ig;
! ! ! ! backbuffer[iCal+2] = bmp.color [ bColor ].ib;! ! ! ! ! !
! ! ! }
! ! }
! }
}

52. 그럼 정말 쉽게 만들수 있나?
항상 말은 쉽습니다만..

53. 개고생하게 되는 것들
1. 그래픽 리소스 파일 읽어오기.
2. 좌표계가 좀 달라서 헷갈린다.
3. 다양한 압축 포맷의 효율 최적화
4. 한글 구현은 지옥.
간단히 말하면 DOS 시절, 맨땅에 헤딩하던 것은
모조리 다시 한다고 생각하면 된다.

54. 그래서 결과는 어떤가?
Xcode에 처음 손댄게 9월 27일.. 그리고 1달 남짓

55. 그래서 결과는 어떤가?
Xcode에 처음 손댄게 9월 27일.. 그리고 1달 남짓

56. 그래서 결과는 어떤가?
Xcode에 처음 손댄게 9월 27일.. 그리고 1달 남짓
첫 3주일간 CK2D 엔진을 구축
이후 1주일 만에 첫 메인 게임 구동 성공
다시 1주일만에 대부분의 기능 구현

57. CK2D 엔진?
OpenGL ES 1.1 기반
백버퍼/픽셀제어 기반의 2D 그래픽 제어
비압축, RLE8압축 8비트 BMP형식 지원
BRP, BBR(BRP2.0) 압축 스프라이트 지원
반투명, 모션블러 이펙트 지원
3D스프라이트 지원
비트맵 한글 출력 지원

58. CK2D 엔진?
OpenGL ES 1.1 기반
백버퍼/픽셀제어 기반의 2D 그래픽 제어
비압축, RLE8압축 8비트 BMP형식 지원
BRP, BBR(BRP2.0) 압축 스프라이트 지원
반투명, 모션블러 이펙트 지원
3D스프라이트 지원
비트맵 한글 출력 지원
포맷 변환툴, 소스코드 공개 예정

59. 이식 작업을 위한 간단한 팁
1. 먼저 그래픽 출력 기능부터 래핑 코드를 짜자.
2. 모든 그래픽 명령이 래핑되면 컨트롤 파트를.
3. 사운드는 일단 전부 주석처리를 해놓은채로
소스코드를 그래픽/컨트롤 위에 쌓아올린다.
4. 리소스 파일의 경로를 꼭 주의할 것.

60. 작업 하며 느낀 점들
1. iPhone의 성능이 생각보다 강력하다.
2. 웬만한 백버퍼 방식의 90년대 게임은 이식 가능
(제 그녀의 기사단 원작도 이식 가능할 듯)
3. PC와 Mac을 오가며 작업하다 보면 헷갈린다.
(가급적 Visual Studio와 Xcode의 단축키를 통일)
4. 오브젝티브-C 와 단순화된 구조가 싫은 노땅은
OpenGL ES 를 하자.

61. 감사합니다.
blog.naver.com/byulbram
byulbram@ck.ac.kr