cocos2d study #02

무작정 따라하기


오늘의 목표는 튜토리얼 따라하기이다.


Hello World까지는 만들었으니, 이제 조금이나마 게임 냄새가 나는 프로그램을 만들어보자는 결심을 했다.

일단 작은 png 그림 파일을 화면에 띄우는 것까지는 성공했다.

그림 파일은 블로그에서 그대로 긁어와서 Xcode의 Resources 폴더에 넣어주었다.

그리고 아직은 의미를 알 수 없는 몇 줄의 소스 코드를 넣었다.

init 함수이니 무언가 초기화의 의미일 것이다.


대부분은 뭔 소리인지 알 수 없었고, 중간의 png 파일명과 Rect가 있는 부분은 파일명과 그림 사이즈일 것 같다.

어쨌든 연습 겸 익숙해질 겸 직접 코딩 후 Build and Run!

화면에 선글라스를 쓴 고릴라가 하나 보였다.

후후 성공이다.



스크린샷은 귀찮아서 그냥 퍼왔다. – 어차피 똑같다. 내 시뮬레이터가 아이폰 4라는 것만 빼면.




약간 뜬금없지만 좌표계에 대해 기록.

OpenGL 좌표계는 화면의 좌하단의 x, y 좌표가 (0, 0)이다.

아이폰에서는 이와 다르게 좌상단이 (0, 0)이다.


이외에도 강좌에 더 내용이 있지만 이해가 안 되니 우선은 패스.

init에서 아래와 같이 수정하라고 되어 있어 그대로 실행.

if ((self=[super initWithColor:ccc4(255,255,255,255)])) {



보통 RGB 색상 코드에서 255,255,255이면 흰색을 뜻하므로, 아무래도 흰색으로 도배가 될 것이다. 255가 4번 나오는 이유는 색상을 뜻하는 R, G, B 외에 Alpha 값이 포함되어 있어서일 것이다.

튜토리얼이 끝났으므로 오늘의 기록은 여기까지.



PS

튜토리얼에 뜬금없이 많은 용어가 갑자기 쏟아져 나와 혼란스럽다.

스프라이트는 알겠는데 (아마 옛날 8비트 컴퓨터에서 2d 게임을 만들 때의 그것일 듯) 다른 건 제대로 된 설명이 없었다.

아래에 그것들을 적어두었다.


레이어, 앵커포인트(anchor point), 프레임(frame), 바운드(bound), 위치(position), 모서리 반경(corner radius)


아직은 정확한 개념을 알 수 없으니 나중에 이 녀석들을 정확히 파악해야겠다.

'개발 > 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 #01  (0) 2012.10.22

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
초보 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 관련 책을 읽다 보면 언제 어디서 외계어가 튀어나올지 모른다.

+ Recent posts