Cocos Creator + VS Code + TypeScript 개발환경 구축

Cocos Creator 엔진, VS Code IDE, TypeScript 로 게임을 개발하기 위한 개발환경 구축에 대해 정리해보았습니다.

1. Cocos Creator 설지

아래의 사이트에 들어가 본인의 OS 에 맞게 Cocos Creator 를 설치해줍니다.

http://cocos2d-x.org/creator

아래는 Cocos creator 의 api reference 사이트입니다.

http://cocos2d-x.org/docs/api-ref/creator/v1.0/

2. Visual Studio Code 설치

먼저 본인의 OS 에 맞게 VS Code 를 설치해줍니다.

• widow: https://code.visualstudio.com/docs/setup/windows
• mac: https://code.visualstudio.com/docs/setup/mac

3. TypeScript 설치

아래의 명령어 중 하나를 실행해 TypeScript 를 설치해줍니다. 아래의 명령어를 실행시키기 위해서는 npm 설치가 추가적으로 필요합니다.

npm install -g typescript

npm install -g typescript@next

위의 명령어를 실행하면 타입스크립트 컴파일러가 설치됩니다.

이후에 Cocos Creator 에서 새로운 프로젝트를 만듭니다. 

그 후 TypeScript 를 이용해 개발을 하려면 아래의 두가지를 해야합니다.

1. creator.d.ts 파일 업데이트하기

2. tsconfig.json 파일 생성

tsconfig 를 커스터마이징 하고 싶다면 https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 사이트를 참조하면 될 것 같습니다.

3. VS Code 에서 Cmd + Shift + P ( 윈도우 : Ctrl + Shift + P ) 를 눌러 "Configure Task" 또는 "Configure Task Runner" 를 입력하고, "build - tsconfig.json" 또는 "TypeScript - tsconfig.json" 을 선택합니다. 그러면 .vscode 폴더 아래에 tasks.json 파일이 생성됩니다. 이후에 컴파일을 하면 .ts 파일의 .js 파일과 .js.map 파일이 생성됩니다. 

4. VS Code 에서 Cmd + Shift + P ( 윈도우 : Ctrl + Shift + P ) 를 눌러 "install Extensions" 를 선택한 후 tsLint 를 입력해 설치하면 자동 입력 등 여러 기능을 제공해 개발하는데 편리합니다.

참고 사이트 : https://github.com/cocos-creator/creator-docs/blob/master/en/scripting/typescript.md