[Cocos2d-x] Cocos Creatorの基本的な使い方：プロパティの型宣言など

2017 年 8 月 14 日

基本

・すべてをコンポーネント（オブジェクト）として使う：スプライト、サウンド、スクリプトなど
・Scene単位で編集
・Canvasは、Sceneにデフォルトでひとつのみ存在する

流れ

1. Canvasに、Sceneのメインとなるスクリプトをコンポーネントとして追加
2. Canvasに、使うスプライトを入れていく
3. 各スプライトに制御のためのスクリプトをコンポーネントとしてそれぞれ追加
4. 各スクリプトの「properties」に、プログラムで制御したいコンポーネントなどをプロパティ（メンバ変数）として宣言
5. 同一スプライトを複数使う場合は、Prefab（プレハブ）を使う

グローバル（全体）で共通して使うJavaScriptファイルの読み込み

アプリ起動時、最初に実行し、そのオブジェクトを複数のSceneで使う場合。

初めのScene（のCanvas）にアタッチしたスクリプトの先頭で、require()によってグローバル変数に読み込む。

var myGlobal = require("YourGlobal.js");

cc.Class( //...

);

プロパティの宣言

プロパティを指定すると、その値をエディタのUIから直接変更できるようになる。

propertiesでの宣言方法は基本的に好きなようにできるが、一定の形式がある。

単純な宣言

  properties: {
    foo: 20,
    bar: 'Hello World!',
    foobar: new cc.Vec2(10,20),
  }

単純な型の指定

StringなどJavaScript標準の型や、Cocosのcc.Classを継承したクラス（Node、Spriteなど）を宣言。

  properties: {
    foo: cc.Node,
    bar: cc.Sprite,
  }

完全な宣言

単純な「property1 : “value"」というような1対1の宣言方法だけでなく、値にオブジェクトを指定することでより細かく宣言できる。

  properties: {
    score: {
      default: 0,
      displayName: 'Score (player)',
      tooltip: 'The score of player',
    }
  }

使用可能なパラメータ（プロパティ名）一覧はこちら。

型の宣言

typeプロパティで特殊な型の宣言もできる。

properties: {
	// 配列の型
	names: {
		default: [],
		type: ['String']
	},
	
	// アクセサプロパティ
    get: function () {
      	return this._width;
    },
    set: function (value) {
      	this._width = value;
    }
}

リンク

公式ドキュメント

最後に

基本は単純なので、難しく考える必要はない。