개발 환경 갖추기

1. 코코스 크리에이터 설치

 

https://www.cocos.com/en/creator/download

 

 

2021.05.28 기준으로 코코스 크리에이터 V3.1.0까지 릴리즈 됐다.

 

3.x 버전부터 여러 가지 3D 관련 기능과 플러그인들이 추가되면서 방향성이 3D 쪽에 기울어진 느낌이 든다.

 

그리고 3.x 이전 버전의 UI 체계는 유니티의 UGUI와 비슷했다면 이후 방향은 NGUI와 가깝다는 평가도 있다. 

 

UGUI와 NGUI 둘 다 사용해봤지만 개인적으로는 UGUI가 더 직관적이고 사용하기 편하다는 생각이 든다.

 

3.x 버전에서 2D 프로젝트를 만들면 UI의 depth 관련한 이슈가 있다고 해서 나는 2.x 버전을 사용하기로 했다.

 

 

 

3.0 버전 프리뷰 노트를 보면 2.4 버전도 향후 2년 동안 지속적인 업데이트를 해준다고 한다.

 

공식 홈페이지에서 코코스 대시보드(유니티의 유니티 허브같은)를 먼저 다운로드하고, 선택한 버전을 설치한다.

 

 

 

 

코코스 대시보드를 통해서 다운로드한 설치 파일과 설치 완료된 버전을 확인할 수 있다.

 

2.4.4 버전은 크기가 1.72GB인데, 유니티는 버전별로 차이가 있겠지만 2020 이후 버전은 5GB 이상 하드를 차지하는 것으로 알고 있다.

 

엔진이 가볍다고 생각할 수도 있겠고, 그만큼 다양한 기능이 없다는 의미일 수도 있다.

 

 

 

 

2. Visual Studio Code 설치

 

https://code.visualstudio.com/download

 

 

VisualStudio는 통합 개발 환경(IDE)이다. 아주 다양한 언어에 대한 디버깅과 리팩토링 기능이 자체 포함돼있어서 프로그램이 무겁다.

 

반면 VSCode는 단순한 편집기 툴로서의 기능이 크고 매우 가볍다. 디버깅이 필요하면 익스텐션을 통해 원하는 기능만 검색하고 추가할 수 있다.

 

현재 가장 많은 개발자들이 사용하고 있는 편집기이기도 하다.

 

VSCode 자체가 타입 스크립트로 만들어졌기 때문에, 타입스크립트로 개발을 할 거라면 VSCode를 선택하지 않을 이유가 없다.

 

또한 코코스 크리에이터에서도 VSCode 사용을 권장하는 것 같다.

 

 

 

 

3. 크롬(Chrome) 설치

 

https://www.google.co.kr/chrome/

 

코코스 크리에이터는 웹 브라우저 중에서 구글 크롬을 사용할 것을 권장하고 있다.

 

 

 

 

4. 개발 환경 설정

 

 

코코스 크리에이터에서 빈 프로젝트를 만들고, 탑 메뉴의 File - Settings - Data Editor에 들어간다.

 

설치한 VSCode를 기본 편집기로 선택할 수 있다. 코코스 크리에이터에서 스크립트 파일을 열면 자동으로 VSCode가 열리게 된다.

 

 

 

그 뒤에 Developer - VS Code Workflow에 들어가면 다섯 가지 추가 기능이 나오는데,

 

위의 두 가지는 VSCode의 확장 라이브러리에 코코스 크리에이터 API를 설치하고 적용하는 것이다.

 

적용 이후에는 Intellisense(자동 완성) 기능을 사용할 수 있게 된다. 

 

그리고 타입 스크립트를 사용할 거라면 세 번째 TypeScript Config도 추가해준다. 네 번째는 크롬 브라우저 디버깅 설정이다.

 

다섯 번째는 VSCode에 task.json이라는 컴파일 설정에 관한 파일을 추가한다. 다섯 가지 모두 적용해준다.

 

 

 

그리고 VSCode의 EXTENSIONS에서 Cocos Debug, cocos-creator가 이 설치됐는지 확인해준다.

 

VSCode에서 디버깅을 하면 크롬 브라우저에서 실행되도록 Debugger for Chrome도 검색해서 설치해준다.

 

 

 

RUN AN DEBUG - Add Configuration 또는 그 오른쪽 톱니바퀴 아이콘을 클릭하면 launch.json 파일이 열린다.

 

 

{
    "version": "1.4.0",
    "configurations": [
        {
            "name": "Creator Debug: Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:7456",
            "sourceMaps": true,
            "userDataDir": "${workspaceFolder}/.vscode/chrome",
            "pathMapping": {
                "/preview-scripts/assets": "${workspaceFolder}/temp/quick-scripts/dst/assets",
                "/": "${workspaceFolder}"
            }    
        }
    ]
}

 

파일 내용을 위와 같이 수정해준다.

 

그 뒤에 VSCode에서 디버깅을 실행(단축키 F5)하면 크롬 브라우저가 자동으로 열리면서 게임이 실행된다.

 

이 때부터 중단점을 찍고 제대로 디버깅을 할 수 있다.

 

 

 

코코스 크리에이터에서도 웹 브라우저로 바로 게임을 실행할 수 있다.

 

같은 화면이 나오지만 이 경우는 단순 실행(Run)이고, VSCode에서 실행하는 건 디버깅 실행(Debugging and Run)이다.

 

게임이 잘 실행되는지만 확인하려면 코코스 크리에이터에서, 중단점을 찍고 디버깅할 거라면 VSCode에서 실행하면 된다.