cocos2d study #01

Hello World


오늘 드디어 cocos2d에 처음 도전하려 한다.

MVC 모델, 객체, objective-C 프로그램의 구조 등… 그 동안 아이폰 앱 개발에 대한 공부는 어느 정도 이루었다고 생각하였기에, 이제는 본격적으로 cocos2d를 공부하겠다. OpenGL ES부터 시작하는 것이 좋겠지만, 빠른 시일 내에 결과물을 보기 위해서 cocos2d를 선택했다.

첫 날이니 오늘은 맥에 cocos2d 설치를 하고, 어떤 언어에서든 처음 개발을 시작할 때 만드는 Hello World 프로그램을 만들어 보겠다.

아직은 아는 것이 아무 것도 없으니 구글 검색으로 강좌 블로그를 하나 찾아 보았다.

괜찮은 블로그가 보였다. 무작정 따라 해보기다.

우선 cocos2d 설치부터 도전!

다운로드부터!


cocos2d 다운로드:

http://code.google.com/p/cocos2d-iphone/downloads/list


cocos2d-iphone-1.0.1.tar.gz 파일이 보인다. 최신 버전인 것 같다. 냉큼 다운로드!

이제 설치를 할 순서이다.


터미널을 열고 ./install_template.sh 실행!

./install_template.sh


화면에 뭔가 잔뜩 스크롤이 되었다.

설치가 완료된 것 같다.

Xcode를 열어보니 새 프로젝트에 cocos2d 항목들이 보였다.




강좌에 나오는 것과는 약간씩 이름이 다르긴 하지만, 아무래도 첫 번째 항목인 cocos2d Application이 가장 많이 쓰일 것 같다.

일단 선택해서 HelloWorld라는 이름의 새 프로젝트를 생성했다.




이런 화면을 보니 살짝 겁이...

당황스럽기도 하고, 몇몇 익숙한 단어가 보여서 조금은 반갑기도 했다.

RootViewController나 AppDelegate 파일은 알겠는데, HelloWorldLayer는 뭘까? 포토샵의 레이어 같은 건 아닐지?

구현 파일의 소스에는 익숙한 init, dealloc이 보였다. 아무래도 게임의 초기화와 메모리 해제를 담당할 것 같았다.


나머지 부분은 알 수가 없었다.

그냥 컴파일이나 한 번 해 보자.


Build and Run!

아무래도 파일이 많아서 그런지 컴파일 시간이 꽤 오래 걸렸다.

그런데…

엉뚱하게도 시뮬레이터는 아이패드를 보여주면서 동시에 홈 화면으로 튕겨버렸다.

이유는 알 수 없지만 아무래도 내가 쓰는 Xcode의 버그인지 기본 세팅이 아이패드 시뮬레이터로 되어 있어서 생기는 문제로 추정되었다. 그래서 빌드하기 전에 항상 아이폰으로 바꿔줘야 한다. (확인 결과 Xcode 3.2.6의 버그)




이제 다시 빌드하니 Hello World가 제대로 실행되었다.




단순히 화면에 글자만 뿌리기만 하고 아무런 기능이나 작동은 되지 않는 프로그램이다.

화면 왼쪽 하단부에는 초당 프레임이 표시된다. 지금은 단순한 앱이니 60 프레임을 뽑아주고 있지만, 덩치가 커지면 프레임이 떨어질 수도 있을 것이다.

이런 생각을 하니 벌써부터 흥분이 된다. 내가 만든 게임이 출시되고 많은 사람들이 즐기고, 나는 최적화에 고민해야 하고… :)

어쨌든 목표 달성. 오늘은 여기까지다.



PS

워드로 작성한 글을 블로그로 다시 옮기는 것도 일이다. 관련 툴 다운받고 익히는 것도 여러 가지로 골치 아프고…

'개발 > Cocos2d' 카테고리의 다른 글

cocos2d study #06  (0) 2012.10.23
cocos2d study #05  (0) 2012.10.23
cocos2d study #04  (0) 2012.10.23
cocos2d study #03  (0) 2012.10.22
cocos2d study #02  (0) 2012.10.22

티스토리 스킨을 수정하면 그동안 작업해두었던 css가 날아간다는 것을 깜빡했다. :(

다행히 저장해뒀던 css가 남아있어서 급하게 다시 수정.


뜬금없이 옛날 8비트(?) 시절 녹색으로만 표시되던 모니터가 떠오른다.

줄번호와 함께 PRINT A같은 간단한 BASIC 코드를 입력하는 것 외에는,

달리 할 수 있는 게 없었던 때였는데도

돌이켜 보면 행복했던 시절이었던 것 같다. :)


워드로 작성해둔 문서를 티스토리로 옮기려고 했다가 멘붕왔다.

맥북은 cpu 사용률이 치솟아 터지기 일보 직전까지 가고... :(


시도해 본 방법

가상 머신에서 MS 워드를 띄우고 블로그 게시, 그러나 줄 바꿈이 <p> 태그로 바뀌어 문서 레이아웃이 대엉망. 테이블은 표시도 안 되었다.

Windows Live Writer에 복사 붙여넣기 후 게시, 역시나 이상하게 나타나는 <p> 태그로 인해 문서가 엉망으로 깨짐.


다소 노가다가 있더라도 맥에서 문서를 내보내려고 시도.

맥에서 MarsEdit를 이용해 게시를 하려고 하였으나, 표 기능을 찾을 수 없었다.

아쉬운대로 마크다운 에디터 Mou를 이용해 보려고 하였으나, 이미 작성해둔 문서에 빈 칸 삽입이 불가. (문서를 처음부터 작성하는 경우에는 빈 칸 띄우기가 가능했다...)


결론은, 아무 것도 한 것이 없다.

이 새벽에 뭐하는 짓인지...


조금이나마 편하게 블로그를 쓰기 위해 툴을 알아보고 있는데, 만족할 만한 툴을 찾기가 어려웠다.

유명한 툴은 가격도 비싼 편이고 해서 무료 툴 위주로 알아보다가 ScribeFire라는 툴을 발견했다.


일단 브라우저에 낑겨 들어가는 애드온/익스텐션 형태라 아무래도 가벼울 것 같았고, 무엇보다 무료라는 것이 장점이다. 아무래도, 전문적인 기능면에서는 조금 부실해 보이고 간단한 글쓰기에 적합한 듯 하다. 내 블로그는 소스 코드만 제대로 입력 가능하면 괜찮으니 상관은 없겠지만... 그래도 HTML 편집까진 가능하다.


그리고 맥에서도 쓸 수 있다. (당연히... 애드온이니까)

처음엔 파이어폭스에서만 쓸 수 있는 줄 알았으나, 크롬에서도 사용 가능하다.

아래 홈페이지에서 자신의 브라우저에 맞는 애드온을 다운로드 받으면 된다.


ScribeFire 홈페이지: http://www.scribefire.com


일단 테스트는 더 해봐야겠다.


글쓰기 테스트 중...


얼마 전에 크롬으로 글쓰기할 때는 맥북이 거의 멈추기 직전이라 글 쓰는 것 자체가 불가능했는데 오늘은 일단 이상이 없는 것처럼 보인다.

파이어폭스는 기대보다는 실망.


원인이 뭔지 모르겠지만, 현재 티스토리 글쓰기 할 때 맥북이 폭발하려고 하여 잠시 쉬는 중.


파이어폭스에서는 괜찮다고 해서 테스트 해보는데 사파리 보다 아주 조금 더 나은 수준...


// Hello World!

#include <stdio.h>

int main()
{
	printf("Hello World!\n");
	
	return 0;
}


적용법: HTML 모드에서 다음을 입력
<pre class="brush: c">
// 코드...
</pre>


<는 &lt;로, >는 &gt;로 바꿔야 <stdio.h> 부분이 정상적으로 출력된다.
초보 3D 개발자에게 먼저 다가오는 시련은 용어와의 싸움이다. PC 게임을 많이 해 보았다면 각 Game Option에서 볼 수 있는 여러 가지 그래픽 옵션을 통해 여러 가지 게임 또는 3D 그래픽에 관련된 용어를 접할 수 있을 것이다. (예를 들면, Anti Aliasing 2X 등) 하지만 게이머가 아닌, 개발자에게는 개발에 관련된 수많은 용어가 있고, 개념을 익히고 활용할 수 있는 능력을 키우는 것이 매우 중요하다.

3D Coordinate System (3차원 좌표계)

(1) 왼손 좌표계
x, y는 각각 가로, 세로.
z 좌표는 지금 너의 눈에서 출발하여 모니터의 방향이다.
Direct 3D에서 주로 사용하는 좌표계
(2) 오른손 좌표계
x, y는 왼손 좌표계와 동일.
z 좌표는 너의 눈으로 가는 방향.

Scalar (스칼라)

값으로만 이루어진 것
(예) 길이, 무게, ...

Vector (벡터)

크기와 방향을 동시에 갖고 있는 값
(예) 속도
3D에서의 용도: backface culling, shading, ...
그 밖에 직선, 평면의 방정식 등에도 사용

Vertex (정점)

공간에서의 위치를 나타내는 점
꼭지점이라고도 부르지만, 정점이라는 용어를 더 많이 쓴다.

Transform (변환)

기본적인 변환으로는 transition(이동), rotation(회전), scale(크기) 변환이 있다.
행렬로 표현할 수 있다.

Matrix (행렬)

3차원에서 변환을 하거나 계산 등을 할 때 행렬을 이용하여 연산량을 '엄청나게' 줄일 수 있다.

Polygon (폴리곤)

3개의 정점으로 만든 삼각형

Mesh (메쉬)

폴리곤이 모여서 만든 물체.
박스, 원통, 주전자, 그 밖의 캐릭터 등...

Shading (쉐이딩)

폴리곤에 음영을 넣는 작업
flat shading: 하나의 폴리곤을 단색으로 처리. 빠르지만 각진 모양
gouraud shading: 폴리곤 내부를 정점의 색에 따라 보간하여 칠함으로써 물체를 부드럽게 표현한다.

Texture (텍스처)

폴리곤에 2차원 이미지를 입혀서 좀 더 그럴듯한 물체를 만들 수 있는데, 이 때 맵핑되는 이미지를 텍스처라고 한다.
인체의 피부, 배경의 벽 질감, 금속 물체의 표면 등, ...


위의 용어는 기초 중에서도 완전 기초 용어다. 3D 관련 책을 읽다 보면 언제 어디서 외계어가 튀어나올지 모른다.

꾸미기는 일단 보류하더라도

컨텐츠를 채워가야 할텐데...


쓸 수 있는 고정폭 글꼴이 겨우 Courier New 뿐인가...

좀 더 연구를 해 봐야 할 듯.


+ Recent posts