프로그래밍 언어 입문서가 아닌 프로그래밍 기초 개념 입문서
문과생, 비전공자를 위한 프로그래밍 입문책입니다.
jobGuid 꽃미남 프로그래머 "Pope Kim"님의 이론이나 수학에 치우치지 않고 실무에 곧바로 쓸 수 있는 실용적인 셰이더 프로그래밍 입문서 #겁나친절 jobGuid "1판의내용"에 "새로바뀐북미게임업계분위기"와 "비자관련정보", "1판을 기반으로 북미취업에 성공하신 분들의 생생한 경험담"을 담았습니다.
Posted by ozlael

cocos2d-x는 다양한 확장 기능들을 포함하고 있습니다. http통신을 편하게 사용할 수 있는 httprequest, 에니메이션 및 UI를 효율적으로 편집하고 사용할 수 있는 cocostudio, 앵그리버드로 유명한 2D 물리 라이브러리인 BOX2D 등 그 종류도 다양합니다. 하지만 project-creator로 프로젝트를 생성하면 기본적으로는 이러한 확장 기능들에 대한 설정이 되어 있지가 않습니다. 아무리 코드에서만 기능들을 사용해도 라이브러리 및 헤더 파일 관련 설정이 되어 있지 않으면 컴파일 단계에서 오류가 나게 마련이죠

이 글에서는 이러한 기능들을 사용하기 위한 win23 및 android 프로젝트에서의 설정을 다루고자합니다. iOS는 다음 기회에;;

이하부턴 음슴체를 사용토록 하겠습니다. 모바일 사용자를 배려하여 데이터를 줄이기 위함입니다. 저어어어얼~~~대 귀챦아서 그런거 아님돠 ㅋㅋ


win32

솔루션 탐색기 > 솔루션에서 우클릭 > add > 기존프로젝트 추가

필요한 win32 프로젝트들을 추가


ex >

PROJECT\cocos2d\cocos\editor-support\cocostudio\proj.win32

PROJECT\cocos2d\extensions\proj.win32

PROJECT\cocos2d\cocos\gui\proj.win32

PROJECT\cocos2d\network\proj.win32


추가한 프로젝트들은 라이브러리 프로젝트들임. 라이브러리를 참조토록 설정해야 함.

솔루션 탐색기 > 프로젝트에서 우클릭 > 속성 > common property > refrences에서 Add New Refrence를 선택하여 새로 추가한 프로젝트들의 라이브러리 선택


헤더파일을 사용하기위해 추가 포함 디렉터리 설정이 필요함

솔루션 탐색기 > 프로젝트에서 우클릭 > 프로퍼티 > Configuration > C/C++ > additional include directories

아래 그림과 같이 디렉터리 추가


http 통신을 위해 curl을 이용하는 경우 라이브러리를 별도로 추가해줘야함

솔루션 탐색기 > 프로젝트에서 우클릭 > 프로퍼티 > Configuration > Linker > input > additional  dependices > libcurl_imp.lib 추가



android

cpp 및 h 파일들이 추가되면 PROJECT/proj.android/jni/android.mk에 일일이 기술해줘야 함. 그렇게하면 귀챦으므로 디렉터리 내 파일들을 자동으로 포함되도록 수정. 다음 라인을

LOCAL_SRC_FILES := hellocpp/main.cpp \

               ../../Classes/AppDelegate.cpp \

                ../../Classes/HelloWorldScene.cpp

다음과 같이 수정

GAME_SOURCE_DIR := $(LOCAL_PATH)/../../Classes

GAME_SOURCE_FILES := $(foreach file, $(notdir $(wildcard $(GAME_SOURCE_DIR)/*.cpp)), ../../Classes/$(file))

LOCAL_SRC_FILES := hellocpp/main.cpp ../ $(GAME_SOURCE_FILES)

LOCAL_WHOLE_STATIC_LIBRARIES, import-module 부분도 추가

LOCAL_WHOLE_STATIC_LIBRARIES := cocos2dx_static LOCAL_WHOLE_STATIC_LIBRARIES += cocosdenshion_static LOCAL_WHOLE_STATIC_LIBRARIES += box2d_static LOCAL_WHOLE_STATIC_LIBRARIES += cocos_gui_static LOCAL_WHOLE_STATIC_LIBRARIES += cocos_extension_static LOCAL_WHOLE_STATIC_LIBRARIES += cocostudio_static LOCAL_WHOLE_STATIC_LIBRARIES += cocos_network_static … $(call import-module,2d) $(call import-module,audio/android) $(call import-module,Box2D) $(call import-module,gui) $(call import-module,extensions) $(call import-module,editor-support/cocostudio) $(call import-module,network)

기본적으로 생성한 프로젝트가 win32는 chipmunk를 사용하게 설정 되어있는 반면 android는 box2d를 사용하게 설정 되어있는 점 유의할 것



댓글을 달아 주세요

Posted by 케샨

게임을 만들어 보자 0 장

미리 알려 드릴 것은 앞으로 쓸 글들은 Maya ,Photoshop,UDK,Flash에 대해서만 언급합니다. 
물론 기기 기준은 모바일입니다.
(초보 개발자 분들나 일반인 들도 가장 잘 이해 할 수 있도록 언어나 단어가 어렵지 않게 노력하겠습니다. )
요즈음은 개인 개발자들은 점점 사라져 가는 추세. 초기 팀이나 개인 개발자들을 위해 이 글을 써나갈 생각입니다.

간혹 들어 보네요. 게임을 만들고 싶어요. 예!! 만드세요. 게임을 만드는데 필요한 조건은 노력입니다. 엉덩이를 오래 붙이고 앉아 있을 수 있으시다면 게임을 만들 수 있는 조건은 완성된 것입니다. 물론 앉자 있기만 한다면 힘드시겠죠? 가이드가 필요 할 것 같습니다.
이번 장은 게임을 만들때  필요한 것 입니다. 뭐가 필요한지 알아야 자신의 원하는 게임의 목표를 향해 돌진 할 수 있겠죠. 아무 곳이나 뛰어다니면 그 시간 낭비와 노력 ..... 무시하지 못해요. 목표가 있다면 무엇이 필요 한지 부터가 순서입니다. 이 소개는 게임 제작에 중요한 장입니다. 

게임제작에 필요한 것은 컴퓨터 입니다. 라고 말하면 돌날라 올 것 같은
게임은 2D와 3D로 나뉩니다 전 역시 별차이 없다고 생각하는데 앞으로 2D 게임은 영원할 것이 지만 모바일에서도 3D가 대세가 될 날이 얼마 남지 않았습니다 이미 대세로 가고 있죠.
둘다 기획, 아트, 프로그래밍, 엔진, 사운드, 그리고 너 머리가 필요합니다.

-기획에 필요한 것 .

작업 기획은 간단하게 하십시요.
작업 기획은 절대 한눈에 알아 볼 수 있게 하십시요. 초기 단계 기획을 대기업 기획 처럼 탄탄하게 할 필요 없습니다. 이유는 한가지 입니다. 생각 보다 힘에 붙여 우회 할 경우가 많습니다. 예! 겨드랑이털 빠지게 기획해 놓고 다시 붙여야 하는 결과를 낼 수도 있으니 말이죠. 특히나 새로 생긴 팀 같은 경우 서로의 실력은 잘 모르죠. 안다고 해도 궁합이 안맞을 경우가 있으니. 
지극히 개인 개발자나 팀, 소기업체들은요. 할게 많으니 실수를 줄여나가야 합니다!.

세계관이나 전반적인 게임 내부의 스토리.
이 요소는 중요합니다. 게임의 재미와 전체적인 분위기를 구성합니다. 게임은 재미 입니다.
게임의 방식 RPG면 RPG의 action 이면 action Game의 설정등등등
UI의 방식 < 생각안나면 나중에 하셔도 됨.>
케릭터들의 특성 (케릭터 공격력,방어력,마법등),
케릭터들 얼굴 의상 설정 대략 어떤 얼굴인지. 의상인지 (자료 모음),
케릭터들의 무기설정 (대략 어떤 무기인지),
배경.지형 (지도를 그릴것)
소품(자료모음).   
자료 모음이라는 것은 비슷한 물건이나 비슷한 의상들에 대한 사진이라던지 아니면 스케치를 모으는 것을 말합니다.


일단 위의 것 들만 합니다.
제발 가장 먼저 여러 스테이지에 기획을 만들지 마십시요.
아직 당신과 팀의 능력이 검증되지 않았습니다.
물론 여유가 있으신 분들이라면 한번에 완벽하게 해서 실패 할때마다 수정하는 것도 좋은 방법이지만 그렇게 권장드리진 않습니다.
가장 좋은 방법은 자신과 팀이 원하는 방식을 찾는 것이 중요하겠죠? 이런 방식으로 안하셔도 됩니다. 방식은 너 자유.!
(물론 회사에선 가이드가 있고 그 틀에 맞춰 줘야 해야 하기때문에 자유는 없습니다. 그 회사의 양식에 맞게 사셔야 합니다)
정말 간단한 게임의 경우 앞에 써놓은 모든 것이 필요 없겠죠? 그림 한장이면 가능 할 겁니다.
기획을 짧게 하라고 했지 기획을 등한시 하라는 것이 절대 아닙니다. 이 부분 명심하세요.
게임의 재미를 주는 것은 기획 그 자체 입니다. 아무리 아름다운 모델로 게임제작해도 게임은 재미를 줘야 하는 요소이기 때문에 기획을 절대 등한시 하시면 안된다는 것을 명심하시면서.


-아트에 필요 한 것.

공통의 부분.
그래픽 아트의 경우는 감각이 우선입니다. 그림을 그릴 줄 알아야 합니다.
 물론 그림을 못 그리더 라도 아주 아주 개......성적인 그림으로도 가능은 합니다.
그러나 현재 모바일 업계도 수준이 아주 아주 높아 졌습니다. 쉽게 말해 너건 안 삽니다.

2D의 경우 일러스트 전문 프로그램을 다룰 줄 알아야 합니다.
툴 같은 경우는 ADOBE사 제품만 알아도 표현이 가능합니다..
툴은 그냥 편리성에 의한 도구 일뿐입니다. 자신이 편한걸 찾아서 하시면 됩니다.
가장 간단한 프로그램은 Flash로 제작 할 수도 있고 실제로 Flash에서 바로 IOS 나 안드로드, 윈도우폰 기기등에서 즐기게 할수도 있습니다.
플레시같은 경우 3D게임의 UI를 제작 할 수 있는 스케일폼과 연동이 됩니다.
이 부분에선 다음에 상세히 다루도록 하겠습니다.

3D의 경우 Maya,Max,Softimage 등이 있습니다..

더 많은 것들이 있지만 가장 많이 사용하는 툴이 이 세가지라 다른 것은 언급하지 않겠습니다. 우리나라에선 Max를 가장 많이 쓰죠,
그래픽 툴은 역시 자신이 가장 편하게 느껴지시는 것으로 하는 것이 가장 좋고 유리 합니다.
그외의 필요한 z블러쉬입니다. 물론 리얼리티 게임을 만들때 쓰는 것이니 강좌에서는 다루진 않겠습니다.
앞으로 전 Maya 에 대해선 어느 정도 소개만을 해 드 릴 생각입니다. 사실 어느 정도 해야 할지 조절 중입니다. 그래픽 강의를 하면 한도 끝도 없으니 말이죠. 기능도 많고 가장 필요 한 것만 설명할 생각.
3D 그래픽에선 모델링(케릭터,배경,소품), 맵핑, 에니메이션, 특수효과 등으로 분류됩니다. 
더 나눈다면 엄청나게 나눠야 하므로 이 정도만 나누겠습니다. 예! 우린 인력이 부족하니까요. ~

-프로그래밍에 필요 한 것.

[스크립트(Script)은 코딩이라고 하기엔 민망한 수준입니다.  민망한 수준이라는 것이 너무 나도 쉽죠.
그 정도로 시간을 절약 할 수 있는 중요한 요소 입니다]


프로그래밍을 익히기에 올바른 순서는 C, C++,C# 을 해야 합니다. java도 있지만 제외 합니다. 물론 내가 급 게임이 제작이 마려워요. 당장 쌀 것 같아요. 하시는 분들은 C#정도만 하셔도 됩니다. 가비지에 대한 이해만 하시면 그다지 어렵진 않습니다. 다만 응용력이 부족해 질 수도 있습니다. 메모리에 대한 부분을 가비지에만 맡기다 보면 프로그래밍에 대한 응용력은 많이 떨어지는 편입니다. 사실 스크립트(Script)는 가비지 컬렉터도 필요 없습니다.....
물론 저는 엔진을 다룰 테니 C#정도만 공부해 오실 것을 부탁 드립니다.
코드로 따지자면 그다지 C#도 필요 없지만 최소한의 이해를 가지고 코드를 만져야 자신이 어느 정도 원하는 게임을 만드실 수 있습니다.
여기선 가장 짧게 썼지만 기획과 디자인을 뒷 받침을 해주는 가장 중요한 역활 종국에 가선 프로그래밍의 능력이 없으면 좋은 게임이 나오긴 힘듭니다. 없다면 가장 길게 헤메이는 싸움이기도 하죠.

제가 UDK를 선택한 이유는 많은 요소 들도 있지만 UDK를 다루는 근본적인 이유는 언젠가 언리얼 엔진으로 갈아 탈 수도 있기 때문이죠. 뭔가 더 발전을 원하는 것이 있으니.
물론 유니티로 하셔도 되고 다른 엔진을 사용 하셔도 됩니다. 엔진을 선택하는 것은 역시 또 자유입니다.
다만 엔진을 고르는 순간 그 엔진으로 작은 게임이라도 끝까지 제작 해 내셔야 합니다. 그래야 남는 것이 있습니다. 중도에 포기하면 다른 엔진을 갈아 타도 그 수준으로 밖에 못갑니다. 
하나의 엔진을 다루게 되면 게임이라는 근본은 같아서 그다지 어렵지 않게 다른 엔진들도 습득 합니다.

-사운드에 필요한 것.

대부분 상용 WAV DVD를 구입하시거나 인터넷에서 구입하시던지. 아니면 프리 사이트에서 배포하는 WAV를 다운 받으십니다.
샘플링을 따로 만들진 못합니다. 장비도 비쌀뿐더러 오히려 그렇게 해서 위의 방법을 동원한 결과보다 못하다면 구지 만들 필요가 없지요. 돈낭비 시간낭비 제가 제일 싫어 하는 대목이라.
전 이 다운 받은 것을 얼마나 게임이 자신의 게임에 어울리게 WAV를 편집 할지에 대해서만 설명할 생각입니다.
사운드 포지 이외 론 설명 안 드릴 생각입니다.

-마지막으로 정리 해 드리겠습니다.

작업 기획  한눈에 알아 볼 수 있게 한다.
그래픽 아트 감각적이게 한다. 케릭터, 배경, 소품, 에니메이션, 이펙트를 소화 할수 있는 인력이나 능력이 필요하다.
프로그래밍. 스크립을 다루더라도 가급적이면 각각의 전문 지식을 갖춘다.
사운드. 게임에 맞게 편집한다.
.
다음 연재 될 글은 실제 게임 제작을 하기 위한 관문인 기획부터 시작 할 것입니다.
저와 함께 천천히 미니 게임을 만들면서 실력을 쌓아가며 올라가 더욱 발전 시킬 게임을 제작 하실 수도 있겠습니다.
다음 한 주 동안 위의 것을 돌아 보면서 개인이라면 내가 필요한 것이 무엇인지.
팀에 구성 요소 중 어느 부분이 빠졌는지에 대해서 생각 해 보시길 바랍니다.

댓글을 달아 주세요

  1. 연필이 2014.02.03 15:51  댓글주소  수정/삭제  댓글쓰기

    기대됩니다. 특히 개발전 준비(기획)가 제일 궁금했어요.

  2. 케라케라 2015.11.09 11:42  댓글주소  수정/삭제  댓글쓰기

    감사합니다.

Posted by 대마왕J

-프로시져 텍스쳐란 입력된 변수 값을 근거로 컬러 패턴을 만들어 내는 컴퓨터의 알고리즘이다 (GPU GEMS 3권)-

 

 

3D max과 같은 프로그램에서 메터리얼 에디터에 보면, 노이즈나 마블, 체커와 같이 기본으로 들어있는 메터리얼 (텍스쳐로 존재하던가..?) 들이 있다. 이녀석들은 그림 이미지가 아니라 수학적 계산으로 만들어진 이미지로 - 프렉탈 같은걸 끼얹던가... - 여러가지 장단점을 가지고 있다.

 

실시간 게임에서는 사용 못하는 거라고 그냥 오해하고 있었는데... 생각해 보면 안될 것도 없었다?!??!?

뭐 이미 섭스턴스 (substance)  라고 하는 플러그인이 나와서 돌아다니고 있으니 말이다. 실제로 게임에서도 사용되었고. 어떤 프로그래머 분은 이 유니티 섭스턴스 (Unity Substance) 에 대해 극찬을 하시던데... 아티스트가 보면 완전히 홀딱 반할거고 장점밖에 없다고...

 

 

하지만 아티스트 입장에서 볼 때 장점밖에 없는건 아니다. 단점도 충분히 존재한다.

 

일단 이렇게 수학적으로 만들어진 텍스쳐 이미지의 장점과 단점은 다음과 같다... 자세한건 다음에 써 보고.. 오늘은 간략하게

 

 

 

 

장점 : 이론적으로 무한대의 해상도를 지닌다. 수학적 연산이기 때문에 벡터처럼 해상도의 제한 자체가 무의미하다. 즉 엄청나게 선명한 해상도의 이미지를 만들 수 있다는 것.

 

단점 : 그에 반해 기계적으로 생성된 텍스쳐라는 것을 잊으면 안된다. 즉 손으로 터칭한 텍스쳐와 적절히 섞어서 사용하지 않으면, 기계적인 이질감이 나올 수도 있다는 것을 알아야 한다.

 

장점 : 수학 연산이기 때문에 코드 몇 줄이면 무한대의 이미지가 생성 가능하다. 다시 말해서 텍스쳐 용량을 엄청나게 줄일 수 있다는 말이다. 게임의 전송 용량이 엄청나게 줄어든다

 

단점 : 수학 연산이라는 말은 결국 CPU에서 실시간으로 연산이 필요하다는 말이다. 즉 메모리가 아닌 CPU의 부하를 유발할 수가 있다. 프로시져 텍스쳐의 기계적인 이질감을 숨기려면 상당히 복잡하게 연산하는 쪽이 좋은데, 그렇게 된다면 CPU부하가 눈에 띌 가능성이 있다. 다운로드 사이즈가 획기적으로 줄어드는 것은 사실이지만, 게임 플레이 중에 런타임으로 계산하지 않으려면 결국 프로시져 텍스쳐를 연산해서 메모리에 얹어 두곤 하는데, 그렇게 하면 비디오 메모리 절약은 기대하기 힘들게 되는 면도 있다.

 

장점 : 게임중에 실시간으로 애니메이트 시킬 수 있다. 이것은 텍스쳐를 직접 실시간으로 조작하는 것으로,셰이더를 이용한 텍스쳐 에니메이션과는 비교할 수 없을 정도로 강력한 기능이다

 

단점 : 분명 텍스쳐의 실시간 에니메이트는 강력한 기능이다. 그러나 그런 것이 가능하기 위해서 아티스트가 미리 셋팅해 놔야 하는 텍스쳐 작업이 만만치 않다. 또한 요령도 필요하다 (익숙해지면 괜찮지만) 그리고 이 기능을 잘 사용하기 위해서는 가급적 손으로 터칭한 텍스쳐를 같이 이용하는 것을 최소화 시켜야 한다는 점이 존재한다. 프로시져 텍스쳐란 손으로 그리는 것이 아닌 '기계로 그리는' 그림이기 때문이다. 때문에 잘 훈련된 Technical Artist가 존재하는 팀에서나 이 기능을 잘 사용할 수 있을 것이다. '아티스트가 전적으로 사용해야 함에도 불구하고 기술적 이해도가 꽤 필요한 기능' 이기 때문이다. 

 

 

결론 : Procedural Texture를 실시간 게임에서 사용이 가능하게 된 것은 매우 획기적인 변화임에 틀림없다. 잘 사용한다면 매우 인상적인 결과를 낼 수 있을 것이다. 그러나 이 기능이 만병통치약이 아님을 알아야 한다. 기계로 그리는 것이 사람이 그리는 것보다 훨씬 나은 점 밖에 없으면 수많은 텍스쳐 아티스트들이 왜 와콤 타블렛을 계속 긁어대고 있겠는가?

 

 

 

 

http://chulin28ho.egloos.com/tb/5569234

http://chulin28ho.egloos.com/tb/5569287

 

댓글을 달아 주세요

Posted by ozlael

이 글은 2014년 1월 V3.0 beta0 기준으로 작성되어 있습니다. cocos2d-x는 나날이 버젼이 바뀌고있으며 그에 따른 변화도 만만치 않습니다. 따라서 이 글의 내용이 언제까지 유효할 지 보장하지 못합니다. 미래에서 오신분이라면 이 점 감안하시고 봐주시길 바랍니다.

작년 말 cocos2d-x Ver.3이 공개되었고 업데이트가 거듭되면서 얼마 전 beta0가 릴리즈되었습니다. 버젼 메이져 넘버가 바뀐 만큼 Ver.2.x와는 코드 및 기능 상 많은 차이점들이 존재합니다. 뿐만 아니라 빌드 환경도 많이 바뀌었습니다. 물론 아직 beta인만큼 본격적으로 상용 프로젝트에 사용하기에는 무리가 있을 것입니다. 하지만 매력적인 기능이 많아 슬슬 살펴보기 시작하긴 해야겠습니다. 물론 cocos2d-x를 입문하시는 분이라면 당연히 Ver.3부터 보는게 나을것이구요.

coco2d-x의 설치 환경에 대한 글을 많긴 하지만 모두 Ver.2.x 기준으로 되어있어서 Ver.3에서는 다소 다른 부분들이 많습니다. 그런 반면에 Ver.3의 설치 환경에 대한 글이 없어 따로 정리해둡니다. 다만, 윈도우즈와 안드로이드(android)에 대한 내용만 있고 맥과 iOS빌드에 관한 내용은 빠져있는 점 양해부탁드립니다.

우선 coco2d-x를 다운받습니다. 아래 링크로 가면 v2.2.2와 v3.0 beta이 있는데 이 글은 v3 기준이므로 v3.0 beta를 받읍시다. 바탕화면에 두면 경로에 공백이나 한글이 섞이게 될 소지가 있으므로 c:나 d: 적당한 곳에 폴더를 만들어서 압축을 풀어줍니다. 이제부터 바탕화면은 잊읍시다. 바탕화면은 죄악입니다. c:\program files도 죄악입니다. 폴더명에 한글이랑 공백이 섞여서 좋을거 하나두 없어요. 

http://www.cocos2d-x.org/download


프로젝트 생성

이제 프로젝트를 하나 생성해봅시다. 그러려면 우선 파이썬(python)이 필요합니다. 아래 사이트에서 파이썬을 다운받습니다. 파이썬은 Ver. 2.x대와 3.x대가 공존합니다. 하지만 Ver. 2.x대가 주로 사용되고 V.3은 미운오리새끼 취급받으므로 Ver. 2.x.x대에서 최신버젼을 설치합시다. 

http://www.python.org/download/

설치 후 어디 서든 파이썬을 수행 할 수 있도록 환경 변수를 등록해줘야 합니다. 아마 설치 후에 기본적으로 등록되어 있을 테지만 혹시 모르니 확인을 해봅시다. 컴퓨터 >속성 > 시스템설정 > 고급 > 환경변수를 통해 환경 변수 편집 창을 열거나  시작> 프로그램 파일 검색 > 시템의환경변수를 입력하여 창을 열 수 있습니다.

시스템변수의 목록 중 Path를 선택하고 편집합니다. 설정되어 있는 값 뒤에 ;로 구분하여 파이썬이 설치 된 위치를 입력해줍니다. 기존 값을 덮어쓰지 않게 주의합시다.

이제 프로젝트를 생성해봅시다. 이는 간단합니다. 파이선 스크립트 하나만 실행시켜주면 됩니다. 코코스 폴더의 tools\project-creator에 있는 create_project.py를 실행시켜줍시다. alpha에서는 커맨드툴이였는데 beta에서는 GUI로 바뀌었네요. 빈칸을 입력하고 create를 누르면 생성이 완료됩니다.

projectName : 말 그대로 프로젝트의 이름을 써줍니다. 디바이스에 설치하는 앱의 노출 이름이 됩니다. 하지만 앱이 노출 이름은 바꿀 수 있으므로 너무 고심해서 만들 필요는 없습니다.

packageName : 앱의 고유 이름이라고 생각하시면 됩니다. 스토어에 등록 시 구분이름이 되므로 겹칠 일이 없게 만들어줍시다. 강제적인 포맷은 없지만 일반적으로 회사 프로젝트면 com.회사명.프로젝트명 형식으로 만들고 개인 프로젝트면 pe.이름.프로젝트명 형식으로 네이밍합니다.

projectPath : 프로젝트가 만들어질 위치를 지정합니다. 예전 버전까지는 project폴더에 자동으로 만들어지는 걸로 강제되었었는데 v.3 beta부터는 원하는 위치에 만들 수 있게 되었습니다. 대신 프로젝트 폴더에 cocos2d가 통채로 같이 복사됩니다.

language : C++로 진행할 것이므로 cpp를 선택해줍니다.


win32 빌드

이제 프로젝트를 만들었으니 빌드하고 실행해봅시다. 우선 win32용은 간단합니다 그냥 비주얼스튜디오(visual studio, 이하 VS)만 있으면 됩니다. MS 페이지에 가서 VS 2013을 받아서 설치합시다

http://www.visualstudio.com/

win32 프로젝트는 생성한 프로젝트의 proj.win32 디렉터리에 있습니다. 프젝트명.sln 솔루션 파일을 수행합니다. 그러면 아래와 같은 메시지가 뜹니다. cocos에서 생성한 프로젝트는 VS2012기준으로 만들어져 있기때문에 VS2013에서 사용하기 위해서 업그레이드 한다는 뜻이므로 군말없이 OK해 줍니다.

그러고나서 sloution explorer에서 프로젝트가 시작프로젝트로 설정되어 있는 것을 확인합니다. 이미지와 같이 lib프로젝트가 아니라 생성한 프로젝트가 bold처리 되어 있으면 정상적으로 된 것입니다. 

F5를 눌러서 빌드하고 실행해주면 끝!


안드로이드 빌드

실행이 복잡하지 않은 win32에 비해서 안드로이드 프로젝트는 설치해야 할 것이 몇 개 추가적으로 필요합니다. 그나마 V.3.0 beta가 되면서 많이 간소화되었긴 하지만 여전히 귀챦은 것이 많은 게 사실입니다. 개발 플랫폼과 타겟 플랫폼이 다른지라 어쩔 수 없으니 숙명이라 생각하고 그냥 해봅시다 ㄱㄱ 


JDK 설치

일단 안드로이드는 자바로 개발합니다. cocos2d-x는 c++로 개발하긴 합니다만 최종적으로는 java로 만들어집니다. 그러므로 JDK(Java Development Kit)를 설치하여야합니다. 아래 링크로 가서 windows 버젼을 설치합니다. 본인의 PC에 맞게 x86 x64 잘 구분해서 받습니다. 설치 시 디렉터리 위치를 C:\Java 등 간단하게 설정해주는 것이 좋습니다. 앞서 언급했다시피 디렉터리 이름 사이에 공백이나 한글 등이 들어가면 꼬일 소지가 많습니다.

http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html


ADT 설치

안드로이드 프로젝트이므로 안드로이드 SDK를 설치합니다. ADT(Android Develper Tool)라고 불리는 것이 안드로이드 SDK입니다. 아래 링크에서 다운로드 후 c:나 d:등 적당한 위치에 압축을 풀어줍니다. 

http://developer.android.com/sdk/index.html

그 후 디렉터리 내에 있는 SDK Manager.exe를 수행시켜 API들을 설치합니다. 설치할 API들을 선택하고 Install packages를 눌러서 설치를 진행하면 됩니다. Tools, 4.0(API14), 2.3.3(API10), 2.2(API8)를 선택하여 설치합니다. API14는 안드로이드에서 권장하는 버전이고 API10은 타겟을 API14로 설정 시 사용 가능한 최소 레벨입니다. API8은 사실상 현존하는 최저 레벨입니다.


NDK 설치

그 후 NDK(Navite Development Kit)를 설치합니다. 

안드로이드는 달빅가상머신(dalvik virtual machine, DVM)상에서 JAVA 코드를 돌립니다. NDK는 C/C++같은 네이티브 코드 언어를 이 가상머신에서 사용할 수 있도록 해주는 툴셋입니다. cocos2d-x는 C++로 개발하므로 NDK가 필수로 필요합니다. 

역시 다음 사이트에서 다운로드 후 적당한 위치에 압축을 풀어줍시다. 아마 ADT가 설치 된 후에야 다운로드가 가능 할 겁니다.

http://developer.android.com/tools/sdk/ndk/index.html

예전에는 NDK 빌드를 하기 위해서는 cygwin을 설치해서 쉘스크립트를 실행하여야했습니다. 하지만 cygwin은 V.3 beta가 되면서 필요가 없어졌습니다. 어쨌든 cygwin은 필요가 없어지긴 했지만 여러모로 쓸모가 많으므로 설치해둬서 나쁠건 없어요 :-) 

http://cygwin.com/install.html


ANT 설치

NDK까지 설치를 마쳤으면 이제 apache ANT를 설치하여야 합니다. 다른 글들에서는 이클립스(eclipse)를 이용하는데, 이 글에서는 일단 건너뛰겠습니다.(사실 이미 앞서 설치한 ADT에 이클립스도 포함되어있습니다.) 안드로이드 네이티브 기능 연동을 개발 시에는 이클립스가 필요하긴 하지만 일단 당장은 ANT만 설치해도 apk(Android Package) 빌드가 가능합니다. 

ANT는 크로스 플랫폼에 대응하여 만들어진 JAVA 기반의 빌드 커맨드 툴입니다. 안드로이드의 apk 역시 ANT로 빌드가 가능하며 cocos2d-x 프로젝트에서도 이를 사용할 수 있게 구성되어있습니다. 다음 링크로 가서 current Release of Ant에서 압축 파일을 받아 풀면 됩니다. 재차 언급하는것이지만 이름이 한글로 된 디렉터리나 바탕화면은 피해야 합니다. 

http://ant.apache.org/bindownload.cgi


환경 변수 설정

JDK, ADT, NDK, ANT 등의 설치를 모두 마쳤으면 이제 이들이 서로 유기적으로 돌아갈 수 있도록 환경변수를 설정해줘야합니다. 빌드과정에서 환경변수들을 사용하므로 셋팅이 되어 있지 않으면 빌드가 제대로 이루어지지 않습니다.

앞서 파이썬 패스 등록 시 열었던 환경변수창을 다시 엽니다. Path 변수에다가 JDK의 bin폴더, NDK폴더, ANT의 bin 폴더를 추가적으로 등록해줍니다. 저는 C:에 풀어놔서 다음과 같이 추가해줬습니다. 참고해서 각자의 설정에 맞게 추가해줍시다.

;C:\Java\jdk1.7.0_45\bin;C:\ndk;C:\ant\bin

ADT 디렉터리는 Path 변수가 아니라 전용 변수를 따로 추가해줍니다. 환경변수창에서 새로만들기를 누른 뒤 ADT의 sdk폴더를 ANDROID_HOME에 등록해줍니다.

이와 마찬가지로 다음 목록의 변수들을 추가해줍니다. 세부 폴더 위치는 참고해서 각자의 환경에 맞게 추가해주세요

ANDROID_HOME : C:\adt\sdk

CLASS_PATH :  ;(레알 이게 땡임)

JAVA_HOME : C:\Java\jdk1.7.0_45

NDK_MODULE_PATH : D:\cocos2d-x-3.0beta;D:\cocos2d-x-3.0beta\cocos\2d\platform\android

NDK_ROOT : C:\ndk

수고많으셨습니다. 이제 실제로 빌드를 해봅시다.


NDK 빌드

일단 명령프롬프트(윈도우버튼 > 프로그램파일검색 창에서 cmd)를 엽니다. 다음과 같이 cd 명령을 수행해서 앞서 새로 만든 프로젝트의 proj.android폴더로 이동합니다.(역시 폴더 이름은 각자의 것에 맞게)

이제 NDK 빌드를 하기 위해 파이썬 스크립트를 수행합니다.

> build_native.py

그럼 컴파일이 쫙쫙쫙 수행됩니다. 빌드 후 메시지가 다음과 같이 나오며 proj.android\libs\armeabi에libcocos2dcpp.so 파일이 생성되면 NDK 빌드가 완료 된 것입니다.


설정 파일 변경

이제 libcocos2dcpp.so를 Java와 연결하고 빌드하여 APK 파일을 생성하면 됩니다. 그 전에 설정 좀 바꿔줘야 할 것이 있습니다.

일단 AndroidManifest파일의 수정이 필요합니다. 안드로이드 프로젝트의 속성 파일이라고 생각하시면 됩니다. proj.android 디렉터리에 있는 AndroidManifest.xml 파일을 문서편집기로 열어 다음과 같이 sdk 버젼이 9로만 되어 있는 것을 

<uses-sdk android:minSdkVersion="9"/>

다음과 같이 target을 14로, min을 10으로 바꾸어줍시다.

<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="14"/>

여기서 가리키는 SdkVersion은 앞서 ADT에서 설치했던 API 레벨을 의미합니다. 수정 전에 입력되어 있던 9는 전설속에만 존재하는 API고, 우린 전설을 믿지 않으니 수정해 주는겁니다. 기왕이면 target SDK를 구글에서 권장하는 14레벨로 설정합니다. API14는 4.0 아이스크림샌드위치인데 그럼 그 이하 버젼은 지원을 안하는 것이냐!? 그건 걱정하지 맙시다. 하위 OS 호환성을 위해서 targetSdkVersion과 minSdkVersion이 따로 있습니다. 최소 지원 SDK 값을 10으로 지정해줘서 2.3.3 생강빵 이상에서 돌아가게 해줍니다. 사실상 현존하는 최소 버젼은 API8 2.2 프로요이긴 하지만 target을 14로 설정하면 8의 설정과 충돌나는 부분이 있어서 애석하게도 사용하지 못합니다. 2.2 프로요는 아직 점유율이 2.7%나 되서 버리기에는 조금 아깝긴합니다. 하지만 타겟을 4.0 아이스크림샌드위치로 설정해야 태블릿에서 검색 가능하기때문에 살을 내주고 뼈를 취하는게 낫습니다.

configChanges도 건드려줘야 합니다. AndroidManifest.xml 파일에서 configChanges도 다음과 같이 되어있던 것을

android:configChanges="orientation|screenSize|smallestScreenSize"

다음과 같이 바꿔줍시다

android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize"

configChanges는 Activity가 직접 handle하는 configuration 변경에 대한 리스트입니다. 말이 조금 난해하네요. 안드로이드는 가로세로모드 변경 혹은 키보드 창 등 뭔가 변경이 일어나면 액티비티가 재생성됩니다. 하지만 이곳에 명시된 변경들은 액티비티가 직접 처리한다는 것입니다. cocos2d-x는 게임 렌더링이 하나의 activity에서 일어나는데 이것이 재생성되버리면 펑 하고 터져버립니다. 그렇기때문에 여기에 추가를 해줘야 합니다. 

keyboard|keyboardHidden는 키보드 입력에 관한 것입니다. cocos2d-x는 extension에서 키보드 입력을 지원해주는데 키보드에 대한 속성이 빠져있어서 추가해줍니다. 

uiMode|‌​screenSize|smallestScreenSize는 전원 버튼이 눌리어서 lock되었을때 발생하는 행위들입니다. 이걸 추가해주지 않으면 화면이 잠김상태로 간뒤 터져버립니다.

이제 proj.android 폴더에 있는 project.properties를 편집해줘야합니다. 이 파일은 ANT 빌드 시 사용되는 프로퍼티 파일입니다. 빌드 타겟이 10으로 되어있던 것을 다음과 같이 14로 바꿔줍시다.

target=android-14


ANT 빌드

자 이제 다왔습니다. 이제 ANT를 수행하면 됩니다. 명령프롬프트에서 위치가 proj.android인지 확인하고 다음과 같이 입력하여 최종 빌드를 수행합시다. 스토어에 올릴 apk를 빌드시에는 release로 하여야 하지만 일단은 폰에 띄워보는게 목적이므로 debug로 빌드합시다. release 빌드 시에는 키스토어 셋팅이 추가적으로 들어가야해서 귀챦습니다;; 

> ant -Dsdk.dir=%ANDROID_HOME% debug

다음과 같이 빌드 성공이라고 나오면 proj.android/bin 디렉터리에 프젝트명-debug-unaligned.apk 파일이 생성됩니다. 이것을 폰에 복사하고 설치하면 끝입니다.


마치며

정말 수고가 많으셨습니다. 빌드가 순탄치많은 않네요. 하지만 그나마 이클립스랑 cygwin이 생략되서 이정도입니다. ㅎ 시간이 지나면서 점점 개선이 되고 있고 통합 인스톨러도 개발중입니다.  얼마 후에는 이 글도 필요가 없어지겠네요.

cocoa china developer conference 중

생성한 프로젝트에서 기본적으로 사용하는 라이브러리 외 extension 기능 등을 사용하거나 라이브러리등을 추가하면 설정해줘야 하는 것 들이 또 발생하는데 그건 다음시간에 다루기로 합시다. iOS 빌드도요. 근데 사실 iOS빌드는 따로 다룰 필요가 있을까 싶을정도로 간단해서;;

일단 그럼



댓글을 달아 주세요

  1. ㅇㅇ 2014.01.20 15:14  댓글주소  수정/삭제  댓글쓰기

    잘봤습니다~ 그럼 코딩은 vs로하고 빌드만ant로해주는건가요? 이클립스 설정땜에 며칠동안 고생해서 포기상태였는데 함 해봐야겠네요ㅎㅎ 감사합니다~

    • Favicon of https://gamedevforever.com ozlael 2014.01.29 20:04 신고  댓글주소  수정/삭제

      ㅎ 네 안드로이드전용 피쳐 개발이나 디버깅때는 이클립스가 필요하긴 하겠지만 일단은 ANT만으로도 빌드는 가능해요 ㅎ

  2. 지나가다 2014.01.28 12:51  댓글주소  수정/삭제  댓글쓰기

    잘봤습니다~~~ 덕분에 설치 엄청 편하게 했네요

  3. Favicon of https://hajechoa.tistory.com 하제초아 2014.01.29 21:36 신고  댓글주소  수정/삭제  댓글쓰기

    3.0beta로 이클립스로 하려니.. c++ analysis가 제대로 안되서 아에 끄고 했었는데..
    win32로 vs하면 되겠군요 감사합니다 __)

  4. 청천벽력 2014.03.07 22:01  댓글주소  수정/삭제  댓글쓰기

    Unable to Resolve proiject Target android-14

    라고 뜹니다 ㅠㅠ

    지금까지 하라는건 다 따라 했는데....

  5. 청천벽력 2014.03.07 22:01  댓글주소  수정/삭제  댓글쓰기

    Unable to Resolve proiject Target android-14

    라고 뜹니다 ㅠㅠ

    지금까지 하라는건 다 따라 했는데....

Posted by 대마왕J

가르치고 있던 학생한테 긴급하게 카톡으로 질문이 들어왔길래 이래저래 알려 줬는데, 사정의 여의치 않을 수도 있으니 .. 만약 프로그래머 도움을 기대할 수 없거나 급할 때 아티스트가 간단히 쓸 수 있도록 튜터리얼을 만들어 봅니다. 2side shader는 아티스트한테 많이 필요한데, 정작 유니티에서 간단하게 설정할 수는 없게 되어 있으니까 말이죠.

 

1. 일단 이런걸 만들었다 칩시다.

 

보통 나무 만들때들 이런 일이 생기죠.

아래 그림을 보면 분명 plane이 하이어라키에서는 6개인데 에디터 화면에는 3개밖에 보이지 않습니다.

나머지 3개는 지금 분명 화면에 있지만, 뒤집혀져 있어서 보이지 않습니다.

이럴때 아티스트들은 외치죠 '2side 쉐이더를 만들어 줘!!'

 

 

2. 일단 shader를 확인해 봅시다.

 

알파를 썼으니, 분명 alpha testing이겠지요. 유니티에서는 cg 문법을 따르기 때문에 cutout 이라는 말을 씁니다. transparent / cutout / diffuse 쉐이더군요. 물론 다른 쉐이더를 쓰실 수도 있습니다.

알파 없이 가는 텍스쳐면 그냥 diffuse , 조명 연산 없을때는 Unlit 계열 텍스쳐를 쓰셨겠지요.

여기에 나오는 쉐이더 이름을 기억합시다.

 

 

 

3. 쉐이더를 다운받읍시다.

 

내장된 쉐이더를 사용했을때는, 쉐이더 이름옆의 edit 버튼을 눌러서 수정하거나 할 수 없습니다. 컴파일 되어 있어서요. 그래서 원본 쉐이더를 받아야 합니다.

내장 쉐이더를 받을 수 있는 곳은 여기입니다.

 

http://unity3d.com/unity/download/archive

 

여기에 본인의 유니티 버전과 맞는 Built-in shader를 받습니다. zip이므로 압축을 풀면 됩니다.

 

4. 원하는 쉐이더를 찾읍시다.

 

위 쉐이더 이름에 부합하는 쉐이더를 찾읍시다.

보통 압축을 풀고 DefaultResourcesExtra 라는 폴더를 찾으면 그 안에 대부분의 내장 쉐이더들이 있습니다.

이름이 약간 다르게 되어 있는 것을 주의해야 합니다.

예를 들어 Normal-Diffuse.shader 라고 하는 파일명은 노말맵을 쓴 Diffuse 쉐이더를 의미하는 것이 아니라,

여기서의 Normal은 그야말로 '보통' 을 의미하므로 '그냥 Diffuse' 를 의미합니다.

노말맵을 쓴 것은 'Bumped' 라는 이름을 씁니다.

 

 

 

 

찾기 어려우면 일일히 열어보는 무식한 방법도 괜찮습니다.

유니티와 같이 깔리는 프로그래밍 툴인 'MonoDevelop'를 실행시킨다음에, 적당한 쉐이더를 하나씩, 실행된 MonoDevelop 로 드래그해서 열어 봅니다.

 

 

 

 

맨 첫 줄에 게임에서 사용되는 쉐이더의 이름이 있으므로, 이 중에서 원하는 쉐이더의 이름을 찾읍시다.

위 경우에는  transparent / cutout / diffuse

를 찾았습니다.

 

찾았습니다. 쉐이더 이름은 AlphaTest - Diffuse 이고, 열어보니 맨 첫줄에 찾던 이름인

"Transparent/Cutout/Diffuse' 가 있었습니다. '/' 마크는 하위 폴더를 만든다는 명령이란걸 알았습니다.

 

 

 

 

5. 새 쉐이더를 만듭시다.

 

이제 쉐이더를 찾았으니 새 쉐이더를 만들어 봅시다. 2side가 되는 놈으로요.

그러려면 일단 기본 쉐이더를 만드는 편이 낫습니다.

 

프로젝트 창에서 오른클릭하고, 아래 그림처럼 새로운 shader를 만듭니다.

 

 

 

새 쉐이더가 만들어 졌습니다. 적당히 이름을 바꿔줍시다.

유니티 규칙과 비슷하게 만든다면 AlphaTest-Diffuse2side 쯤 되겠군요. 뭐 적당히 만드세요.

(저는 AlphaTest-Diffuse2side 로 바꿨습니다)

 

 

 

그리고 새로 만든 그 쉐이더를 더블클릭해서 열어보세요. MonoDevelop가 뜨면서 그 쉐이더가 나올 겁니다.

자동으로 생성된 쉐이더입니다. 내용은 일반 diffuse 쉐이더이죠. 우리는 이게 필요 없습니다. 그러므로 내용을 다 지웁시다.

 

 

 

깨끗해졌습니다.

 

그리고 아까 불러놓은 AlphaTest-Diffuse 쉐이더의 내용을 몽땅 긁어다 붙여 놓습니다.

 

 

 

Transparent/Cutout/Diffuse 라고 되어 있는 부분의 이름을 바꿔야 합니다.

그대로 두면 기존의 Transparent/Cutout/Diffuse 과 충돌납니다.

Transparent/Cutout/Diffuse2side 쯤으로 바꾸죠 .

 

 

 

이대로 저장하고 다시 유니티로 돌아옵시다.

Ctrl+S로 저장하는거 잊지 마세요

 

6. 새 쉐이더를 적용시켜 봅시다.

 

제대로 했다면, Transparent폴더의 Cutout 폴더의 아래에 Diffuse2side라는 쉐이더가 생겼을 겁니다.

이놈을 나무잎에 적용해 봅시다.

 

 

 

아무 변화가 없습니다!!!

만약 분홍색이 나왔다면 복사를 잘못한 것입니다. 다시 깨끗하게 복사해 보세요.

 

우리는 기존의 2side 안되던 쉐이더를 그냥 이름만 바꿔 복사한 것이기 때문에, 지금 상태에서 변화가 있으면 안됩니다. 아무 변화 없이 쉐이더의 이름만 바뀌어야 잘 된 것입니다.

 

그냥 이름만 바꾼 , 똑같은 쉐이더가 생긴 것입니다. 그래야 수정하지요.

 

 

7. 이제 진짜 2side 옵션으로 만들어 봅시다.

 

쉐이더 이름 옆의 Edit... 버튼을 눌러도 되고, MonoDevelop에서 따로 불러도 상관 없습니다. 어쨌건 우리가 새로 만든 쉐이더를 열기만 하면 됩니다.

 

 열면 아래와 같이 나옵니다. 쉐이더 이름을 다시 한 번 확인하세요.

코딩의 대부분의 문제는 오타와 이름 착각에서 나옵니다.

 

 

자, 그럼 이 코드중에 아래 부분에다가 cull off 라고 써 주세요. (;라고 뒤에서 쓰지 않았음을 주의하세요)

CGPROGRAM 이전, Tags 아래부분에다가요. 적당히.

 

그리고 저장하고 유니티로 돌아가 주세요 .

여태까지 한 게 이거 한 줄 써주려고 한 겁니다 ;;;

 

 

 

 

 

짠, 드디어 2side 쉐이더가 되었습니다!

이런식으로 존재하는 어떤 쉐이더이건간에 2side로 만들 수 있게 되었습니다.

 

 

 

 

댓글을 달아 주세요

  1. Favicon of https://gamedevforever.com ozlael 2014.01.20 01:56 신고  댓글주소  수정/삭제  댓글쓰기

    오오 연재글의 출발이신건가요 >ㅈ<

  2. 더케이 2014.05.19 20:08  댓글주소  수정/삭제  댓글쓰기

    애먹고있었는데 좋은정보 감사드려요 ㅎ

  3. 하얀새벽 2014.05.27 19:43  댓글주소  수정/삭제  댓글쓰기

    대마왕님의 강좌내용을 대부분 봤는데.. 저 같은 초보에게 아주 도움이 됩니다.. 감사합니다. 몇가지 질문이 있는데요..
    저는 지금 마야를 배우고 있는 중입니다.. 쉐이딩 개념이 약간 좀 혼란스러운데요..
    쉐이딩에서 버텍스 쉐이딩, 지오메트리쉐이딩 등에 대해서 개념적으로는 대략 이해가 가는데..
    이 외에 volume 쉐이더( 또는 효과), glow, blur 등은 쉐이더의 개념에 포함이 되는 겁니까?
    displacement shader도 매핑자료를 바탕으로 폴리곤에 변화를 주는 것이라 완전히 쉐이더의 개념이라 보기는 좀 어려울 것 같고..
    외곽선 표현에서 2pass를 통한 것도 결국은 또다른 지오메트리를 이용하는 것이라.. 완전한 쉐이더라 보기는 어려울 것 같네요..
    음....그래서..... 질문의 요지는 쉐이딩 언어만으로 volume, glow, blur, displacement 등의 효과를 줄 수 있는지 궁금합니다. 좀 더 구체적으로는 외곽선에 임의의 효과들을 쉐이딩 언어만으로 구현이 가능한지 궁금합니다..

    • Favicon of https://gamedevforever.com 대마왕J 2014.06.15 02:22 신고  댓글주소  수정/삭제

      말씀하신 모든게 셰이더라고 볼 수 있습니다.
      shader라고 하는 것은 결국 그래픽 카드를 통해서 출력되는 모든 픽셀의 함수를 제어하는 것이므로, 모두 같습니다. 지오메트리 변화까지도 셰이더 영역이므로 디스플레이스먼트도 사실 셰이더 영역입니다. (사실 테셀레이션이라고 부르지만요) 볼륨이나 글로우, 블러 같은 것은 post - effects 라고 부르는 후처리 효과입니다만, 이것 역시 사실 shader의 한 영역이라고 불러도 크게 무리가 없습니다.

Posted by ozlael

저는 COCOS 2D-X로 개발을 하고 있습니다만, 유니티는 교양(?)으로 알아두어야 할 것 같아서 만지작거려볼까 하는 중입니다. 그래서 유니티 포럼이나 웹을 돌아다니다보니 라이팅에 관한 질문이 가끔 보이더군요.

유니티의 라이팅이 안이뻐요.

유니티의 라이팅이 딱딱해요.

유니티의 라이팅이 입체감이 없어요.


이번 포스팅에서는 이에 대한 이야기를 해볼까 합니다. 사실 이 주제가 유니티에만 국한되어 하는 이야기는 아닙니다. (제목 낚시 ㅈㅅ) CG 특히 게임같은 실시간렌더링(real-time rendering)은 은 자연 그대로의 빛을 표현하는 것을 불가능하기때문에 어느정도 간략화하여 묘사하는 알고리즘을 쓰고 있고, 많은 엔진들이 제공하는 기법들은 비슷비슷합니다. 동네 표준이란게 있어서;; 그렇기때문에 본 포스팅에서 언급되는 이야기는 Unity 3D에만 국한 된 것이 아니라 통상적인 실시간 렌더링에 관한 이야기이며, 보여드리는 자료도 Unity 3D에만 국한되지 않음을 미리 말씀드립니다.

또한 직접조명(direct light)에 관해서만 다룰것이며 구면조화함수(spherical harmonics)나 앰비언트큐브(ambient cube)등의 라이트프로브(light probe)를 이용한 지역조명(local light)에 관해서는 다루지 않을 것입니다. 당연히 실시간 GI(global illumination) 역시 마찬가지이구요. 이미 그걸 찾으시려는 분은 이 글을 읽을 필요가 없어요.



Default Directional Light

일반적으로 엔진들에서 기본적으로 제공되는 디렉셔널 라이팅은 모두 딱딱해보이고 입체감이 부족해보입니다. 기본 라이팅이 너무 간략화되서 표현 된 라이팅이기 때문이죠. 일단 다음 그림을 보시죠.

빛은 보시는바와 같이 단순하지가 않습니다. 기본적인 음영 외에도 반사광, 역광, 강세 등등 다양한 빛의 요소가 존재합니다. 하지만 엔진의 기본적인 디렉셔널라이트에는 그러한 것이 생략되어 있습니다. 단순히 빛의 방향을 보는 면은 밝고 그 반대 방향 즉 빛을 등지는 부분은 어둡게 표현하는게 다입니다. 그렇기때문에 빛이 “딱딱하게” 보이는 것 입니다.

거기다가 문제가 더 있습니다. 빛의 반대면은 단순히 어둡기만 한 것이 아니라 어두운 부분은 명암이 아예 사라진다는 것입니다.




빛의 명암은 빛 벡터와 면의 노말 벡터와의 내적값을 사용합니다. 정확히는 물체에서 빛을 보는 방향의 벡터와 면의 노말 벡터를 내적하는 값이죠. (벡터와 내적에 대한 개념을 모르신다면 대마왕님의 시리즈 글을 읽어보시길 권장합니다. 아티스트 프로그래머 모두에게 도움이 될 것입니다. 프로그래머시면 맥스의 디테일한 내용은 건너 뛰고 설명만 보세요. 시작! http://www.gamedevforever.com/228)

음영값 = N(면의 노말) dot L(면에서 태양으로의 방향)

두 벡터가 같은 방향을 보고 있으면 1이 나오고, 직각을 이루고 있으면 0이 나오고, 반대방향을 보고 있으면 -1이 나옵니다. 따라서 내적 값을 음영값으로 사용하게 되면 빛을 보는 면은 1의 값 즉 제일 밝은면이 됩니다. 근데 빛의 정 반대면은 -1이 나오게 됩니다. 이런 경우에는 음수 조명은 존재하지 않으므로 0 이하의 값은 그냥 0으로 취급해버립니다.

diffuse = max(0, dot(L, N));

그러다보니 빛의 반대 영역은 음영이 존재하지 않고 죄다 까맣게 되어버리는 것이지요. 그러다보니 어두운 영역의 입체감이 존재하지 않아서 “입체감이 없다”고 느껴지는 것입니다.

하이엔드 PC게임 렌더링에서는 역광, 반사광, AO 등의 간접조명들이 처리되어 이러한 현상이 보완됩니다. 하지만 그러한 성능이 나오지를 못하는 모바일에서는 현실적으로는 디렉셔널라이트같은 직접조명만 처리가 가능하기때문에 다양한 방식이 필요합니다.



Half Lambert

어두운 영역이 죄다 0으로 되어 음영이 죽어버리는 현상은 하프램버트를 적용해줘도 크게 완화됩니다. 빛 벡터와 노말 벡터의 내적 음영값이 1~0~-1로 나와서 0이후부터는 0으로 채워버리니까 애초에 결과 값을 0~0.5~1로 나오게 하면 되는 것이지요. N dot L의 식을 조금만 손봐주면 됩니다.

halflambert_diffuse = max(0, (dot(L, N) + 1) / 2);

렇게 하면 암부 영역의 음영이 살아나게되서 널리 쓰이곤 합니다.


다만 쉐도우맵 방식의 그림자와는 궁합이 안맞아서 신중히 생각해봐야 한다는 문제는 있지만 모바일에서 아직 쉐도우맵은 사치일테니 우선 당장은 고민거리는 아닐 것 같네요.


참고 자료 :

http://www.valvesoftware.com/publications/2006/SIGGRAPH06_Course_ShadingInValvesSourceEngine_Slides.pdf



Diffuse Wrap

음영을 아티스트가 직접 그려넣는 방식도 있습니다. 음영 스펙트럼을 직접 아티스트가 선택하여 칠한 텍스쳐를 오브젝트에 감싸는 것이지요. 앞서서 언급했듯이 자연상태의 빛은 직접조명만 존재하는 것이 아니라 주변 사물에 빛이 반사되어 들어오는 간접조명들도 존재합니다. 따라서 음영의 스펙트럼이 단순히 선형적인 흰색~검은색만 되는 것이 아닙니다. 텍스쳐로 음영을 표현하면 이러한 색의 스펙트럼을 직접 제어가 가능해져서 아티스트들이 선호합니다.

방식도 간단합니다. 다음과 같은 라이팅 스펙트럼 텍스쳐를 준비해놓습니다. 위의 하프램버트 값을 바로 음영 값으로 사용하는 것이 아니라 스펙트럼 텍스쳐의 U좌표로 사용하면 땡인 것이지요. 큰 노력 들이지 않고도 아티스트느님께 이쁨받을 수 있어요 하앍하앍

더 나아가서 큐브맵(Cube-Map)을 통채로 라이팅 결과로 사용하는 IBL(Image Based Lighting) 방식이 이용되기도 합니다. 큐브맵은 일반적으로 쓰는 2차원 텍스쳐와는 달리 상하좌우앞뒤 6면을 가지고 있는 텍스쳐입니다. 보통 스카이박스가 큐브맵으로 만들어집니다. 

이러한 큐브맵에 그림 대신 라이팅을 새겨넣고 오브젝트의 면에 바로 입혀버리는 것이지요.

위의 1차원 방식과는 달리 간접조명을 동서남북위아래 모두 반영할 수 있어서 아티스트의 자유도가 더 높아져서 더 높은 퀄리티를 낼 수 있습니다. 하지만 큐브맵은 추가적인 성능이 요구되니 사양을 고려해서 사용해야 합니다.


참고 자료:

http://www.gamedevforever.com/150

http://www.gamedevforever.com/269

http://www.gamedevforever.com/272

http://www.gdcvault.com/play/1014362/Cinematic-Character-Lighting-in-STAR

http://pds8.egloos.com/pds/200803/05/32/TeamFortress2mitchell.pdf

http://www.slideshare.net/valhashi/2011-03-gametechtadptforpdf



Hemisphere Lighting

다소 저렴한 방법으로 간접조명을 흉내 낼 수 있는 방법으로 반구조명(Hemisphere Lighting) 기법이 존재합니다. 월드를 감싸는 구를 반토막 내서 하늘에서 수직으로 내려오는 및과 땅에서 수직으로 올라오는 빛이 존재한다고 가정하는 것입니다. 수직으로 향하는 각각 다른 컬러를 가지는 라이트를 디렉셔널라이트에 추가적으로 더해주는 것입니다.

그러한 컨셉과 마찬가지로 디렉셔널 라이트를 여러개를 추가해버리는 방법도 가능합니다.


관련 자료:

http://www.slideshare.net/ozlael/deferred-rendering-case-study

http://digitalerr0r.wordpress.com/2009/05/09/xna-shader-programming-tutorial-19-hemispheric-ambient-light/

http://www.gamasutra.com/view/feature/2817/hemisphere_lighting_with_radiosity_.php



Sub-Surface Scattering

아무리 빛을 이래 저래 만지작거려봐도 인간형 케릭터에게는 어색함이 사라지지 않을 수도 있습니다. 얼굴이나 팔 등의 피부가 느낌이 안살아서 그러는 것이지요.

손을 전등이나 태양을 향해 대보세요. 빛이 완전 차단되는 것이 아니라 조금은 반영되어 보일것입니다. 또한 음영을 자세히 살펴보세요. 어두운 영역과 밝은 영역 사이에 붉은 영역이 존재할 것입니다. 피부는 완전 불투명한 재질이 아니라 반투명 재질이 여러겹으로 구성되어 있기때문에 빛이 직선으로 통과되는 것이 아니라 빛이 산란되어 통과됩니다. 그 안에 존재하는 모세혈관들이 산란된 빛을 통해 비춰지면서 특이한 느낌이 나는 것입니다. 그러한 피부 재질을 단순한 방식으로 표현하려니 어색함이 존재하는 것이지요.

이러한 현상을 표면하산란(Sub-Surface Scattering,SSS)라 부르고 비실시간 렌더링에서는 이를 시물레이션해서 표현합니다. 하지만 게임에서는 이를 시뮬레이션하는 수준까지는 못하고 대충 흉내내는 방식을 사용합니다.(fake SSS) 음영 사이에 붉은 빛이 도는 느낌을 표현해주는 것이지요.

이 느낌을 코드 공식으로 만들어 내는 것도 복잡하지는 않습니다만 그냥 텍스쳐로 표현해버리세요. 모바일에서는 텍스쳐로 표현하는게 더 싸게 먹힐꺼예요. 느낌 아니까~


관련 자료:

http://http.developer.nvidia.com/GPUGems/gpugems_ch16.html

http://blog.naver.com/PostView.nhn?blogId=sorkelf&logNo=40146367692&redirect=Dlog&widgetTypeCall=true&topReferer=http%3A%2F%2Fblog.naver.com%2FPostView.nhn%3FblogId%3Dagebreak%26logNo%3D60149081175%26redirect%3DDlog%26widgetTypeCall%3Dtrue%26top

http://www.slideshare.net/ozlael/deferred-rendering-case-study




Color Correction ( or Color Grading)

컬러커렉션(Color Correction) 혹은 컬러그레이딩(Color Grading)으로 화룡정점을 찍어보는 것도 괜챦습니다. 컬러그레이딩은 엄밀히 따지자면 조명 연산이 아니라 색의 톤을 조절하는 방식입니다. 모바일에서는 성능 문제로 무리가 있을 것이라 생각했었는데 기기의 성능들이 좋아지면서 가능해졌습니다.

상단이 컬러그레이딩을 적용하기 전이고 하단이 컬러그레이딩을 적용한 후의 이미지입니다. 적용하고 나니 뭔가 파스텔톤의 느낌이 나고 훨씬 그래픽이 부드러워진 느낌이 납니다. 추가적인 비용 부담도 존재하긴 하지만 시각적인 효과가 뛰어나서 옵션으로 적용하는 등 여건만 된다면 적용해볼 만 합니다. 원리는 간단합니다. 디퓨즈까지 반영 된 최종 픽셀의 값을 스펙트럼 텍스쳐로 매핑해서 보여주면 땡입니다.  




관련 자료:

http://http.developer.nvidia.com/GPUGems/gpugems_ch22.html

http://docs.unity3d.com/Documentation/Components/script-ColorCorrectionEffect.html



마무리

이래 저래 조명 방식들을 설명해드렸습니다만 프로젝트에 적합한 조명 방식을 정하는 것은 쉬은일이 아닙니다. 게다가 한번 정해지면 다시 변경하기란 불가능에 가깝습니다. 조명이 바뀌면 거기에 맞춰서 만들어져왔던 리소스들을 다시 엎어야 하는 상황들이 발생하기 때문이죠. 따라서 프로젝트 초반에 프로그래머와 아티스트가 함께 테스트를 해보며 신중히 결정하여야 할 것입니다. 그럼 모두들 즐삽질~!


지금까지 설명 드린 기능들의 유니티 관련 페이지

http://docs.unity3d.com/Documentation/Components/script-ColorCorrectionEffect.html

http://docs.unity3d.com/Documentation/Components/SL-SurfaceShaderExamples.html

http://docs.unity3d.com/Documentation/Components/SL-SurfaceShaderLightingExamples.html

http://www.unitymanual.com/thread-1272-1-1.html

http://www.farfarer.com/blog/2011/07/25/dynamic-ambient-lighting-in-unity/

http://www.farfarer.com/blog/2013/02/11/pre-integrated-skin-shader-unity-3d/

https://www.youtube.com/watch?v=XBTB17hcbio&feature=related






댓글을 달아 주세요

  1. Favicon of https://gamedevforever.com Junios 2013.12.23 09:36 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다 ^^

  2. 최재규 2013.12.23 15:18  댓글주소  수정/삭제  댓글쓰기

    우와~ 내용 정말정말 좋아요!!

  3. Favicon of http://qoooooo.tistory.com Quaggan 2013.12.26 11:06 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다!!

  4. Favicon of https://gamedevforever.com 대마왕J 2014.02.02 00:35 신고  댓글주소  수정/삭제  댓글쓰기

    야호 좋은 정리다

  5. 우와좋다 2014.02.02 15:03  댓글주소  수정/삭제  댓글쓰기

    간결하게 잘 정리하셨네요. ㅋㅋㅋ

  6. Favicon of https://gamedevforever.com Junios 2014.02.06 11:48 신고  댓글주소  수정/삭제  댓글쓰기

    오 잘 보고 갑니다.

    ㅎㅎ