Cocos Creatorのインストールからデバッグ環境の作成まで行う！

＜今回やること！＞

Cocos Creatorをインストールします。
VS Code（Microsoft Visual Studio Code）をインストールします。
デバッグ環境を作成します。

　
　この記事を読めば、『Cocos Creator』のゲーム開発環境が構築出来（るはず！）ます。Macで作業していますが、インストール以外はWindows版とほぼ共通です。
　
　まずは『Cocos Creator』を紹介から。
　
　Cocos Creatorは、2Dゲーム開発向けのゲームエンジン（開発環境）です。
　無料で利用出来ます。作成したゲーム・アプリを販売した場合にロイヤリティが発生することもありません。
　Mac版、Windows版があります。
　
　ゲーム作成中の画面はこんな感じです。

　ビジュアルエディタで画面のデザイン、プレビュー、デバッグが可能です。
　
　コードエディタは、VS Code（Microsoft Visual Studio Code）の利用が推奨されています。VS CodeもMac版、Windows版があり、無料で使用出来ます。
　開発に使用するプログラミング言語は、JavaScriptとTypeScriptです。
　
　作成したゲームは、iOS、Andoroid、デスクトップ（Mac、Windows）、Webを始め様々なプラットフォーム向けに出力することが出来ます。

　
　現在は様々なゲームエンジンがあります。それぞれを比較した訳ではなく、あくまで個人的な感覚ですが、Cocos Creatorを使うメリットを挙げてみました。

完全に無料で使える
実行ファイル（パッケージ）のサイズが小さい
Web向けに作成したゲームの動作が軽い
UI、アニメーション、物理演算等のライブラリが一通りそろっている
マニュアル、公式フォーラム、サンプルプロジェクト（各ライブラリのデモ）を参考にできる
古くからあるcocos2d-xの流れを組むので、対応している外部ツールがそれなりにある
Tiled（タイルマップエディタ）、DragonBones・Spine（2Dのボーンアニメーション）、ParticleDesigner（パーティクル）、bmGlyph（ビットマップフォント）等
Cocos Creator自体が現在も定期的に更新されている
様々なプラットフォーム向けにパッケージを出力できる
人気、汎用性の高い、JavaScript、Typescriptが使用できる

　　
　作成したゲームのパッケージサイズが小さく、ブラウザ上でも軽快に動くことが特に良い点だと思っています。Githubページ等を利用すれば、はてなブログに載せる事も出来ます。
　
　3D盛り盛りのゲームを作るには他のゲームエンジンに遅れを取るかもしれませんが、2Dのゲームを作るにはCocos Creatorは割と良いのではないでしょうか？
　
　開発環境を構築して『Hello World』プロジェクトを実行するところまでを説明します。

目次
使用環境
『Cocos Creator』をインストール
アカウントの登録
『VSCode（Visual Studio Code）』をインストール
『Cocos Creator』を起動
New Projectを作成
プロジェクトの実行（プレビュー）
『VS Code』でコードを編集する
おすすめ・関連する記事

使用環境

　私が使用している環境です。

Mac OS X El Capitan Version 10.11.6
ブラウザ：Google Chrome Version 74.0.3729.131 (64-bit)
Cocos Creator Version 2.1.1

『Cocos Creator』をインストール

下記のサイトを開く
www.cocos2d-x.org
『Cocos Creator』の『V2.1.1 MAC』をクリックし、『CocosCreator_v2.1.1_20190429_mac.dmg（サイズ：494MB）』をダウンロード
『CocosCreator_v2.1.1_20190429_mac.dmg』をダブルクリックしてマウントする
『Agree』をクリック
『Cocos Creator』を『Applications』フォルダにドラッグ＆ドロップして、インストールする

インストール後のサイズは1.2GBです。

アカウントの登録

　『Cocos Creator』を使用するには、アカウントの登録が必要です。

下記のサイトを開く
cocos2d-x.org

下表の情報を入力し、『CREATE ACCOUNT』をクリック

Username	半角英数字と"_"（アンダーライン）
Password	半角英数字と"_"（アンダーライン）
Repeat Password	設定したパスワードをもう一度入力
Email	パスワードを忘れた際のリセットに使うためよく使うemailを登録して下さい。

次のように表示され、登録したメールアドレス宛に認証用のメールが送信されます。
f:id:mmorley:20160402175105p:plain

送付されたメールを開いて、認証用のリンクをクリック

次のように表示されれば完了です。

『VSCode（Visual Studio Code）』をインストール

　『Cocos Creator』はコードエディタとしてVS Codeを使うことを推奨しています。
　『VS Code』を使うと、構文の強調表示やオートコンプリート（コードの自動補完）を始めとした機能によって作業効率を上げることが出来ます。

下記のサイトを開く
code.visualstudio.com
『Download for Mac』をクリックし『VSCode-darwin-stable.zip（サイズ：71.3MB）』をダウンロード
『VSCode-darwin-stable.zip』をダブルクリックして解凍
解凍された『Visual Studio Code.app（200.6MB）』を『Applications』フォルダにコピーする

『Cocos Creator』を起動

『Applications』フォルダ内の『CocosCreator』を右クリックして『開く』をクリック
初回起動時は、ファイルの検証が行われます。

一度起動した後は、通常通りダブルクリックによる起動でOKです。
『開く』をクリック
『Cocos Creator』の『Dashboard』で、登録した『Username』と『Password』を入力して『Login』をクリック

New Projectを作成

『New Project』をクリック
『Hello World』プロジェクトを作成します。
1. 『Hello World』を選択
2. 『Browse...』をクリックし、プロジェクトフォルダを保存先を選択
3. 任意のプロジェクトフォルダ名を設定
4. 『Create』をクリック
  
  Cocos Creatorのエディタが起動します。

プロジェクトの実行（プレビュー）

　実行するには、先にシーンを読み込む必要があります。
　デフォルトでは『Scene』パネルに読み込んでいるシーンが開始シーンとなります。
　実行すると、開始シーンがロードされ、次に開始シーンに組み込まれたスクリプト（プログラム）が実行される流れです。

『Cocos Creator』の『Assets』パネルで、『Scene』フォルダの『helloworld』をダブルクリック

『Scene』パネルに『helloworld』シーンが読み込まれます。
プレビューボタンを押して、プロジェクトを実行

デフォルトのブラウザが起動して、プロジェクトが実行されます。
　
『Simulator』で実行することも出来ます。

　
開始シーンの設定は次の操作で確認・変更出来ます。
1. 『Cocos Creator』のエディタのメニューで『Project』→『Project Settings』をクリック
2. 『Project Preview』の『Preview Start Scene』を確認
  デフォルトは『Current Opened Scene』になっています。
  特定のシーンに変更すること出来ます。

『VS Code』でコードを編集する

デフォルトのコードエディタを変更

『Cocos Creator』のエディタのメニューで『Cocos Creator』→『Preference』をクリック
『Data Editor』の『External Script Editor』で、『Visual Studio Code』を選択して『Save』をクリックし、閉じる
選択肢がない場合は、『Browse』をクリックし、『Applications』フォルダの『Visual Studio Code』を選択して下さい。

『Cocos Creator API 拡張機能』をインストール

　この機能のインストールは、『Cocos Creator』による更新が無い限り一度だけでOKです。

『Cocos Creator』のエディタのメニューで『Cocos Creator』→『Developer』→『VS Code Workflow』→『install VS Code Extension』をクリック

構文の強調表示とオートコンプリート用のファイルを追加

　新規にプロジェクトを作成するたびに行います。
　本来プロジェクト生成時に自動で作られるものらしいですが、動作しない場合があるので手動で実行したほうが良いです。

『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Update VS Code API Source』をクリック
プロジェクトフォルダに『creator.d.ts』が追加（または更新）されます。

デバッグ構成ファイルを追加

　新規にプロジェクトを作成するたびに行います。

『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Chrome Debug Setting』をクリック
プロジェクトフォルダに『.vscode/launch.json』が追加されます。
『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Compile Task』をクリック
プロジェクトフォルダに『.vscode/tasks.json』が追加されます。
『Cocos Creator』のエディタのメニューで『Developer』→『VS Code Workflow』→『Add Type Script Config』をクリック
TypeScriptを使う場合のみ、この作業を行います。
プロジェクトフォルダに『.vscode/tsconfig.json』が追加されます。

コード編集と実行（デバッグ）

　新規にプロジェクトを作成するたびに行います。
　実行（デバッグ）するには、『Cocos Creator』で先にシーンを読み込む必要があります。

『Cocos Creator』の『Assets』パネルで、『Script』フォルダの『HelloWorld』をダブルクリック

『VS Code』が起動します。

『VS Code』で、『launch.json』と『tasks.json』を次のように編集
外部ツールによる変更は、１度Cocos Creatorのエディタをアクティブにするまで実行に反映されません。
『tasks.json』は、Cocos Creatorに変更の反映を要求するタスクです。
f:id:mmorley:20190517081144p:plain

『launch.json』

{
    "version": "1.4.0",
    "configurations": [
        {
            "name": "Creator Debug: Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:7456",
            "sourceMaps": true,
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            // "diagnosticLogging": false, // ← コメントアウトする
            "pathMapping": {
                "/preview-scripts/assets": "${workspaceRoot}/temp/quick-scripts/assets",
                "/": "${workspaceRoot}"
            }, // ←『,（カンマ）』を追加
            "preLaunchTask": "compile"  // ← 事前に実行するタスクを登録   
        }
    ]
}

『tasks.json』

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "compile",
            "command": "curl",
            "args": ["http://localhost:7456/update-db"],
            "type":"shell",
            // "isShellCommand": true,
            "isBackground": false, // ← falseに変更
            "group": "build",
            "presentation": {
                // Reveal the output only if unrecognized errors occur.
                "reveal": "always"
            },
        }    
    ]
}

『VS Code』で『デバッグ』アイコンをクリックし、『Creator Debug: Launch Chrome』を選択して、『▶』をクリック

『Chrome』が起動し、プロジェクトが実行（デバッグ）されます。
ブレークポイント（行番号の左をクリック）、ウォッチ式を始め、デバッグの各種機能が使用できます。

　
以上で、インストールからデバッグ環境の作成までが完了です。