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

2017 年 8 月 14 日 Categories: JavaScript, プログラミング | Tags:

基本

・すべてをコンポーネント(オブジェクト)として使う:スプライト、サウンド、スクリプトなど
・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;
    }
}

リンク

公式ドキュメント

最後に

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