3      개발 툴 설치 및 환경설정

3.1    윈도우 환경과 맥 환경의 차이점

윈도우 환경의 장점은 많은 사용자가 사용하는 비주얼 스튜디오 환경을 사용하여 개발할 수 있다는 점입니다. 또한 이미 윈도우 환경을 사용하고 있다면 비주얼 스튜디오 Express를 무료로 사용할 수 있으므로 추가적인 비용이 필요하지 않습니다. 즉 윈도우에서는 비주얼 스튜디오를 이용하여 개발하며 쉽게 안드로이드로 포팅할 수 있습니다.

반면 iOS 퍼블리싱을 위해선 맥 OS가 필요합니다. 애플의 비싼 맥 제품을 구매해야 한다는 단점이 있는 것입니다. 맥에서는 비주얼 스튜디오 대신 Xcode로 개발하게 됩니다. 통합적인 개발 환경을 구성하고 나면 따로 추가 비용 없이 안드로이드, iOS 퍼블리싱을 모두 할 수 있다는 점은 장점입니다.

안드로이드 및 iOS 포팅은 부록에서 따로 다루도록 하겠습니다.

 

3.2    비주얼 스튜디오 2013 설치

비주얼 스튜디오는 마이크로소프트 윈도우에서 작동하며 C, C++, C# 등 다양한 언어로 프로그래밍할 수 있는 마이크로소프트의 통합개발환경(IDE)입니다. Cocos2d-x의 경우 C++ 언어로 개발합니다.

윈도우에서 개발 환경을 구축하는 경우 비주얼 스튜디오를 추천합니다. Cocos2d-x 3.4 버전은 비주얼 스튜디오 2012 이상 버전을 사용하도록 권장하므로, 최신 버전인 비주얼 스튜디오 2013 버전을 설치하여 진행하겠습니다.

비주얼 스튜디오 2013 Express 버전은 30일 동안 무료로 사용할 수 있고, 간단한 이메일 인증을 받으면 평생 무료로 사용할 수 있습니다.

 

3.2.1 비주얼 스튜디오 2013 Express 버전 다운로드 및 설치

먼저 다운로드 페이지에 접속합니다. 주소는 http://www.visualstudio.com/downloads입니다. 아래로 스크롤을 내리면 Express 제품군 목록이 나옵니다. 이 책에서는 비주얼 스튜디오 Express 2013을 이용하여 진행할 것입니다. 데스크탑 어플리케이션을 사용하기 때문에 ‘for Windows’ 버전이 아닌 ‘for Windows Desktop’ 버전을 클릭합니다. ‘for Windows’ 버전은 윈도우 스토어 및 윈도우폰 앱을 만들기 위한 버전입니다.

Figure 3‑1 비주얼 스튜디오 제품군 다운로드 페이지]

 

그럼 다운로드에 앞서 언어 선택 화면이 펼쳐질 것입니다. ‘다운로드 언어’가 한국어로 설정되어있는지 확인하고 아래의 ‘지금 설치’를 클릭합니다. 마이크로소프트 로그인 화면이 나온다면 계정이 없는 분은 회원가입을 먼저 하고 진행해야 합니다. 그다음 화면에서 ‘귀하의 선택 제품’에서 ‘Express 2013 for Windows Desktop’ 버전을 확인하고 다운로드를 시작하면 됩니다.

다운로드한 파일을 실행하면 검은색 창이 뜨고 설치가 시작됩니다. 먼저 설치 경로를 정해준 다음 하단의 ‘사용 약관 및 개인 정보 취급 방침에 동의합니다.’에 체크하고 가장 아래 ‘설치’를 클릭합니다. 설치는 환경에 따라 몇 분에서 몇십 분까지 소요됩니다. 설치가 완료되면 ‘시작’을 클릭하여 비주얼 스튜디오 2013을 실행합니다. 그러면 흰색 창에 환영한다는 메시지가 나올 겁니다. [로그인] 버튼을 클릭하여 로그인하거나 ‘나중에 로그인’를 선택하여 로그인하지 않고 진행해도 됩니다.

  

Figure 3‑2 설치 화면

 

드디어 비주얼 스튜디오 2013 설치가 완료되었습니다!

Figure 3‑3 설치 완료된 모습

 

3.2.2 줄번호 표시

이후 비주얼 스튜디오에서 코드를 편집할 텐데, 이때 줄번호가 표시되면 편리합니다. 기본값으로 줄번호 표시 기능이 비활성화되어 있으므로 이를 활성화하겠습니다. 비주얼 스튜디오의 상단 메뉴에서 ‘도구>옵션’으로 들어갑니다. 옵션 창에서 좌측의 ‘텍스트 편집기>모든 언어’를 선택하고 ‘설정’에서 ‘줄 번호’에 체크하고 [확인] 버튼을 누르면 됩니다.

Figure 3‑4

이후에 파일을 열면 창 왼쪽에 줄번호가 표시되는 것을 볼 수 있습니다.

 

3.3    Cocos2d-x 설치

다운로드 페이지인 http://www.cocos2d-x.org/download에 접속합니다. 여기서 Cocos2d-x의 각종 제품군을 확인할 수 있습니다. 우리에게 필요한 건 가장 좌측의 Cocos2d-x이며, 이 책에서는 안정된 3.4 버전을 이용하여 개발할 것입니다. 책을 집필하는 동안 3.5 및 이후 버전들이 출시되었지만, 기능 면에서 큰 차이는 없습니다. 업데이트 내용에 따라 클래스명이나 사용법이 다를 수 있으므로 변경사항을 확인하고 최신 버전으로 진행하여도 큰 무리는 없습니다만, 초급자의 경우 책의 설명을 그대로 따라 할 수 있도록 3.4 버전을 내려받아 사용하기를 권장합니다. 3.4 버전은 하단의 ‘Looking for an older version?’을 클릭하면 찾을 수 있습니다.

Figure 3‑5 Cocos2d-x 다운로드 페이지

 

내려받은 zip 파일을 C:\에 압축 해제합니다. 다른 곳에 풀어도 되지만, 그럴 경우 경로를 꼭 기억해두기를 바랍니다. 특히 경로명에 공백이나 한글은 사용하지 않는 것을 권장합니다. 다른 툴도 마찬가지지만 Cocos2d-x 폴더는 특히 그렇습니다. 이 책에서는 이후 C:\cocos2d-x-3.0 폴더에 Cocos2d-x를 설치했다고 가정하고 실습을 진행하겠습니다. 만약 다른 곳에 설치하신 분은 해당 경로를 확인하시고 실습 시 그 경로에 맞추어 진행해야 합니다.

Figure 3‑6 압축 해제한 모습

 

압축 프로그램을 사용해 압축을 풀 때, 압축 파일명과 똑같은 폴더를 만들고 그 아래에 내용을 푸는 경우가 자주 있습니다. 압축 파일 안에 이미 대상 폴더가 포함된 경우 이렇게 압축을 풀면 똑같은 폴더명이 이중으로 생길 수 있습니다. Cocos2d-x 압축 파일에도 cocos2d-x-3.4라는 하나의 폴더가 있고 그 아래에 다른 파일들이 들어 있으므로, 압축을 풀 때 cocos2d-x-3.4/cocos2d-x-3.4에 내용이 위치하지 않도록 조심해야 합니다.

Figure 3‑7 C:\cocos2d-x-3.0 폴더에 들어가본 모습

 

3.4    파이썬 설치

3.4.1 파이썬 다운로드 및 설치

Cocos2d-x는 프로젝트 생성이나 빌드를 할 때 파이썬을 이용합니다. 파이썬 파일인 .py 파일은 파이썬이 설치되어 있어야 실행할 수 있으므로 파이썬을 설치할 것입니다.

파이썬의 버전과 관련하여 주의할 점이 있습니다. Cocos2d-x에서 사용하기 위해서는 파이썬 3.x 버전이 아니라 2.7 버전을 설치해야 한다는 점입니다. 두 가지 버전을 함께 설치해도 안 됩니다.

이제 파이썬 다운로드 페이지인 https://www.python.org/downloads에 접속합니다. 현재 2.7대의 최신 버전인 2.7.9 버전을 다운로드합니다. 추후 새로운 버전이 나올 수도 있으나 2.7.x의 버전이기만 하면 상관없습니다. 다운로드한 설치 파일을 실행하면 설치가 시작됩니다. 설치 화면이 나오면 기본적으로 윈도우의 모든 사용자가 사용할 수 있도록 ‘Install for all users’에 체크되어 있을 것입니다. [Next] 버튼을 클릭합니다.

Figure 3‑8 파이썬 버전 선택

 

다음으로 설치 경로를 물을 텐데, 기본값 그대로 C:\Python27\에 설치하도록 하겠습니다. 경로명을 바꿀 경우 다면 꼭 기억해두기 바랍니다. [Next] 버튼을 클릭합니다.

다음 화면에서는 필요한 요소를 골라서 설치할 수 있습니다. 바로 뒤에서 환경 변수에 대해 살펴볼 텐데요, 여기서 파이썬 경로를 환경 변수에 추가할 수도 있지만, 환경 변수 추가하는 연습을 위해 기본값 그대로 두고 [Next] 버튼을 클릭하겠습니다.

Figure 3‑9 경로 선택

 

다음 화면에서는 [Finish] 버튼을 눌러 설치를 마칩니다. 이제 탐색기에서 C:\를 보면 Python27 폴더가 생성된 것을 확인할 수 있습니다.

Figure 3‑10 파이썬 2.7 설치 폴더

 

3.4.2 파이썬 환경 변수 설정

파이썬을 설치했으면 환경 변수를 설정해야 합니다. 환경 변수란 프로세스가 컴퓨터에서 동작하는 방식에 미치는 동적인 값들의 모임을 말하며, 그중 중요한 환경 변수는 Path입니다. Path 환경변수는 애플리케이션들이 사용하는 경로를 지정해놓고 복잡한 경로를 쉽게 가져올 수 있게 하는 역할을 합니다. Cocos2d-x를 비롯하여 개발하는 과정에서 자주 다루게 되는 환경 변수이므로, 다음 과정을 잘 따라 해보고 이해해야 합니다.

먼저 윈도우 ‘시작’ 버튼을 누르고 ‘컴퓨터’를 오른쪽 클릭한 뒤 ‘속성’으로 들어갑니다.

Figure 3‑11 ‘시작’ 버튼>컴퓨터>오른 클릭

 

좌측에서 ‘고급 시스템 설정’을 누르면 시스템 속성 창이 뜹니다(관리자 권한이 필요합니다).

Figure 3‑12 고급 시스템 설정

 

시스템 속성 창에서 하단의 [환경 변수] 버튼을 클릭하여 환경변수 창을 엽니다.

Figure 3‑13 시스템 속성 창

 

아래 ‘시스템 변수’ 중에서 Path를 찾아 더블클릭을 합니다.

Figure 3‑14 환경 변수 창

 

시스템 변수 편집 창이 떴습니다. 여기서 변수 값의 맨 뒤에 ;(세미콜론)을 추가하고 파이썬의 경로를 입력해야 합니다. 앞에서 기본값 그대로 설치했다면 C:\Python27\입니다. 기본값과 다르게 설치했다면 해당 경로를 입력해주세요. 탐색기 주소를 복사해서 붙여넣어도 됩니다.

Figure 3‑15 Path 시스템 변수 편집 창

 

파이썬이 설치된 경로를 추가했으면 [확인] 버튼을 눌러 환경 변수 창을 닫고, 시스템 속성 창에서도 [확인] 버튼을 눌러 설정을 윈도우에 반영합니다. 이제 어느 경로에서나 파이썬을 실행할 수 있습니다.

Figure 3‑16 파이썬 경로를 추가한 모습

 

환경 변수가 제대로 설정되어 있는지 확인하기 위해 명령 프롬프트를 실행하여 python –V를 입력해보겠습니다. –V는 파이썬의 버전을 출력하는 옵션입니다(대문자 V입니다). 그림과 같이 버전이 출력된다면 환경 변수 설정이 제대로 된 것입니다.

Figure 3‑17 명령 프롬프트 화면

 

참고로 명령 프롬프트란 시작 버튼을 누른 다음 cmd라고 검색하여 실행할 수 있습니다. 더 빠르게 단축키를 이용하려면 윈도우 키 + R을 누르고 cmd라고 입력해도 됩니다.

Figure 3‑18 명령 프롬프트 실행

 

3.5    Cocos2d-x 환경 변수 설정

Cocos2d-x 3.x 버전에서는 명령 프롬프트에서 Cocos2d-x의 명령어를 이용하여 통합 프로젝트를 생성합니다. 통합 프로젝트에 대해서는 뒤에서 설명할 것입니다. 현재 알아둘 것은 Cocos2d-x의 명령어는 cocos로 시작한다는 점입니다. cocos 명령어 역시 어느 경로에서나 편리하게 사용하려면 환경 변수를 설정할 필요가 있습니다.

Cocos2d-x는 윈도우의 환경 변수를 참조하여 다른 개발 툴들의 경로명을 알아냅니다. 이 과정을 편리하게 해주는 것이 파이썬으로 만들어진 setup.py 파일입니다. 이 파일은 그림과 같이 Cocos2d-x가 있는 폴더에 있습니다. 이 setup.py 파일을 실행하면 복잡한 환경 변수 설정을 자동으로 처리해줍니다.

Figure 3‑19 setup.py 파일 위치

 

탐색기에서 직접 setup.py 파일을 클릭해도 실행할 수 있지만, 명령 프롬프트와 친해지고 기본적인 명령어를 익히기 위해 명령 프롬프트에서 실행해보겠습니다. 먼저 명령 프롬프트를 실행하고 다음과 같이 입력합니다. 명령 프롬프트를 실행하면 사용자 폴더로 이동하는데 이 폴더가 기본적으로 C: 드라이브에 있다고 가정합니다.

Figure 3‑20 명령 프롬프트에서 Cocos2d-x 폴더로 이동

 

그림과 같이 다음 명령어를 입력하면 cocos2d-x-3.4 폴더로 이동합니다. cd란 ‘change directory’의 약자로, 폴더를 이동하는 dos 명령어입니다. 따라서 cd /는 루트 폴더로 이동하고, 그다음 cd cocos2d-x-3.4은 cocos2d-x-3.4 폴더로 이동하라는 뜻입니다.

 

처음부터 특정한 위치에서 명령 프롬프트를 여는 방법도 있습니다. 탐색기에서 특정 폴더를 시프트 키를 누르고 오른쪽 클릭하면 ‘여기서 명령 창 열기’ 메뉴를 선택하면 됩니다.

 

Cocos2d-x 폴더로 이동했다면 setup.py라고 입력하여 환경 변수 설정을 진행합니다.

setup.py는 자동으로 찾은 경로를 환경 변수에 추가합니다. 자동으로 추가되지 않는 경로들을 직접 입력해야 합니다. 그림을 보면 COCOS_CONSOLE_ROOT(Cocos2d-x 설치 경로) 등은 자동으로 설정이 됐지만, NDK_ROOT(NDK 설치 경로)는 자동으로 찾지 못해 사용자의 입력을 기다리고 있습니다. NDK_ROOT, ANDROID_SDK_ROOT, ANT_ROOT 세 가지를 설치한 적이 없다면 이 세 가지에 대해 사용자의 입력을 기다릴 것입니다. 여기서는 이 셋에 대해 엔터를 입력하여 그냥 넘어가면 됩니다(이들은 NDK, 안드로이드 SDK, 앤트의 경로로서, 안드로이드 포팅에 필요한 프로그램이므로 책의 부록에서 살펴볼 것입니다).

Figure 3‑21 NDK_ROOT 환경 변수 입력을 기다리고 있는 화면

 

이렇게 넘어가면 ‘Please restart the terminal …’이라는 메시지가 나오면 환경 변수 설정이 완료된 것입니다. 이 명령 프롬프트는 이제 닫습니다. 만약 탐색기에서 setup.py 파일을 직접 실행했다면 바로 창이 닫혔을 것입니다.

추가된 환경 변수가 적용되었는지 확인해볼까요? 앞에서 본 것과 같은 방법으로 ‘컴퓨터’를 오른쪽 클릭하고 ‘속성>고급 시스템 설정>고급>환경 변수’로 들어가보면 사용자 변수에 COCOS_CONSOLE_ROOT와 COCOS_TEMPLATES_ROOT가 제대로 설정되어 있는 것을 볼 수 있습니다. 또한 사용자 변수의 Path 환경 변수에도 Cocos2d-x 설치 경로가 추가되어 있는 것도 볼 수 있습니다.

Figure 3‑23 환경 변수 확인

 

이상으로 게임 개발에 필요한 툴들을 설치하고 기본적인 설정을 마쳤습니다! 이제 프로젝트를 만드는 과정으로 넘어가볼까요?