CocosCreatorの使い方とオブジェクト間の参照方法を把握する

# はじめに

サンプルプロジェクトを作成して、CocosCreatorの使い方を簡単に紹介します。また、CocosCreatorの勉強にあたり、肝とも言えるオブジェクト間の参照方法もまとめてみます（私もよく忘れてしまうので）。

# CocosCreatorについて

一言でいうと、ゲーム作成用のフレームワーク『Cocos2d-x』をさらにUnityっぽくしたもの。Cocos2d-xと比べて、様々なことが専用のGUI上で、少ないコーディング量でできるようになりました。CocosCreatorは2017年2月時点でまだまだ情報量が少なく、大規模なゲーム開発の実現性は未知数ですが、ちょっとしたゲームを作る上ではこれまでのCocos2d-xよりも作りやすくなったと私は思います。

# 環境
以下の環境で試しています。
  - Windows 10
  - Cocos Creator 1.3.2

# 1. プロジェクトの作成方法
## 1.1 Empty Projectからプロジェクトを作る
Dashboard上のEmpty Projectを選び、プロジェクトフォルダをフルパスで記入して「Create」ボタンを押す。（Hello Worldプロジェクトを書き換えてもよいですが、サンプルのリソースを消すのは割と面倒です）

![dashboard01.png](https://qiita-image-store.s3.amazonaws.com/0/94561/54fd83e8-7c87-9dac-5d80-4414f4357704.png)

## 1.2 プロジェクトの初期設定

CocosCreatorが起動したら、Assetsパネル上のassets配下に以下のフォルダを作成する。

|フォルダ名|用途|備考|
|:--|:--|:--|
|images|画像ファイルの格納用||
|resources|動的に読み込むファイルの格納用|今回は未使用です。|
|scenes|Sceneの格納用||
|scripts|JavaScriptソースファイルの格納用||

Assetsパネルの「scenes」に新規のSceneを作成し、「Game」にリネームする。
（最低でも１つのSceneが必要なので真っ先に作る）

Assetsパネルの「Game」Sceneをダブルクリックし、Node Treeパネル上のCanvasをクリックで選択する。
右側のPropertiesパネル上にある「Design Resolution」で描画領域の横サイズと縦サイズを入力する。
（今回はW:480、H:320を入力しました。通常はW:960、H:640のままでよいと思います）

上記をまとめると下図になります。

![CocosCreator_02_r2.png](https://qiita-image-store.s3.amazonaws.com/0/94561/6fdfaafe-6451-3ed5-33a1-58abb55e7e51.png)


Ctrl+sでGameシーンを保存する。

この時点で「再生」ボタンを押すと、ブラウザが起動して、画面上に以下のメッセージが表示される（まだシーンに何も配置していないので問題ありません）。
![CocosCreator_05.png](https://qiita-image-store.s3.amazonaws.com/0/94561/7b745f8f-0203-5520-f29a-f26abe790793.png)

# 2. サンプルプロジェクトの作成

オブジェクト間の参照方法がわかるような基本的なサンプルを作成してみます。
使用する素材（２つ）は画像保存で取得してください。

![cursol.png](https://qiita-image-store.s3.amazonaws.com/0/94561/8174526c-14d8-e24b-2134-1970faf64d94.png)
cursol.png

![background.png](https://qiita-image-store.s3.amazonaws.com/0/94561/8ab73bbb-5731-1760-1aeb-947bc4934e52.png)
background.png


# 2.1 Sceneの作成

Assetsパネルの「images」フォルダ内に、cursol.png、background.pngをドラッグアンドドロップで格納する。
![CocosCreator_06_r2.png](https://qiita-image-store.s3.amazonaws.com/0/94561/51f1aaef-abb4-fb6a-8eed-a92c2e20f726.png)


Assetsパネルの「images」フォルダ内のbackground.pngをNode Treeパネルにドラッグアンドドロップする。

Node Treeパネルのbackgroundを選択し、Propertiesパネルを以下のように設定してbackgroundの位置を揃える。これにより、backgroundの左下が原点(0, 0)になり、Canvasの原点(0, 0)と重なることで位置が揃います。
  - AnchorのXを0.5→0
  - AnchorのYを0.5→0

![CocosCreator_03_r2.png](https://qiita-image-store.s3.amazonaws.com/0/94561/9d8cfa29-8368-c9a1-2307-4bd870bce8df.png)


## 2.2 スクリプトの作成

Assetsパネルの「scripts」を右クリックし、「Create」→「JavaScript」を選択。
JavaScriptファイルが作成されるので、「Game」に名前を変更する。

「Game」をダブルクリックし、以下の内容を書き込む。

```Javascript:Game.js
cc.Class({
    extends: cc.Component,

    properties: {
        // Cursolオブジェクトの参照を宣言
        Cursol: {
            default: null,
            type: cc.Node
        }
    },

    // 起動時に一度だけ呼ばれる
    onLoad: function () {
        // マウスカーソルの位置にカーソル画像を合わせる
        this.node.on(cc.Node.EventType.MOUSE_MOVE, function (event) {
            this.Cursol.x = event.getLocation().x;
            this.Cursol.y = event.getLocation().y;
        }, this);
        
        // マウスボタンが押されている間はカーソルを大きくする
        this.node.on(cc.Node.EventType.MOUSE_DOWN, function (event) {
            this.Cursol.getComponent("Cursol").down();
        }, this);
        
        // マウスボタンが離されている間はカーソルを小さくする
        this.node.on(cc.Node.EventType.MOUSE_UP, function (event) {
            this.Cursol.getComponent("Cursol").up();
        }, this);    
    },
});
```

同様に「Cursol」を追加して、以下の内容を書き込む。

```JavaScript:Cursol.js
cc.Class({
    extends: cc.Component,

    properties: {
    },

    // 起動時に一度だけ呼ばれる
    onLoad: function () {
    },
    
    // マウスボタンが押されている間はカーソルを大きくする
    down: function () {
        this.node.scale = 2;
    },
    
    // マウスボタンが離されている間はカーソルを小さくする
    up: function () {
        this.node.scale = 1;
    },
});
```

## 2.3 Nodeとスクリプトの関連付け

### 2.3.1 Canvas Node～Game.jsの関連付け
Node Treeパネルの「Canvas」を選択し、Propertiesパネルの「Add Component」をクリック、「Add Custom Component」→「Game」を選択する。

### 2.3.2 Game.jsのCursolオブジェクト～cursol Nodeの関連付け
Node Treeパネルの「cursol」を、PropertiesパネルのCursolにドラッグアンドドロップする。

![CocosCreator_04_r2.png](https://qiita-image-store.s3.amazonaws.com/0/94561/e33ea4ad-4322-61c1-6e1b-63109f1e6c64.png)

### 2.3.3 cursol Node～Cursol.jsの関連付け
Node Treeパネルの「cursol」を選択し、Propertiesパネルの「Add Component」をクリック、「Add Custom Component」→「Cursol」を選択。

これで今回のサンプルプロジェクトは完成です。

## 2.4 プロジェクトの実行

「再生」ボタンを押すと、ブラウザが起動して以下のように表示される。
マウスカーソル上にカーソル画像が表示され、マウスのボタンを押している間だけカーソル画像が拡大されれば成功です。
![TestProject_r2.png](https://qiita-image-store.s3.amazonaws.com/0/94561/3ce8625b-a4fa-bb58-c2dd-433bf866b343.png)

# 3. オブジェクト間の参照方法の整理
最後に、今回のサンプルプロジェクトをベースに、オブジェクト間の参照関係と参照方法を図にまとめます。注意点は、JavaScriptに関連付いたNodeへのアクセスとして、this.nodeとするところでしょうか（thisではない）。
![cocos_v2.png](https://qiita-image-store.s3.amazonaws.com/0/94561/d88c8e07-8c04-08eb-122f-4b3b9cf89c26.png)