モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

クラスの継承:Cocos2d-x v3.7(JavaScript)

 クラスを継承すると、そのクラスが持つ機能(メソッド)を使用することができます。
 JavaScriptには、正確にはクラスはないそうですが、まわりくどいので今後は単にクラスと書きます。
 クラスの継承の書式について説明します。
 Cocos2d-xのバージョンは3.7です。

クラスの継承

 Cocos2d-x(JavaScript)で、クラスを継承するには、下記のように記述します。
 例として、『cc.DrawNode』(画面に線や円、多角形などを描画する機能を持ったクラス)を継承して、塗りつぶしの円を描画するクラスを作成します。

var DrawFillCircle = cc.DrawNode.extend();

メンバー変数とメソッドは『.extend()』のカッコの中に、オブジェクトリテラルの形式で記述します。

var DrawFillCircle = cc.DrawNode.extend({
	// メンバ変数
	_radius:0, // 半径
	_color:null, // 塗りつぶす色
	
	// コンストラクタ 
	ctor:function(radius, color){ 
		this._super(); // 親クラスのメソッドを呼び出せるようにする
		this._radius = radius; // 半径を代入
		this._color = color; // 塗りつぶす色を代入
		this.drawDot( // 点を描画
				cc.p(0, 0), // 中心の座標
				this._radius, // 半径
				this._color // 塗りつぶす色
		); 
	},
	// 開始処理
	onEnter:function(){
		this._super();
		// ここに処理を記述
	},
	// 終了処理
	onExit:function(){
		this._super();
		// ここに処理を記述
	},
  • 『ctor:function(){}』:コンストラクタです。引数を持たせることが出来ます。『return this;』する必要はありません。
  • 『this._super(); 』:クラス内で、親クラスのメソッドを使用できるようにします。
  • 『drawDot()』:『cc.DrawNode』のメソッドで、点を描画します。
    • 第1引数:(cc.Point)中心の座標を設定(*座標系が狂う(?)ので、ここでは(0, 0)にして、呼び出し側で設定したほうが良いです。)
    • 第2引数:(Number)点の半径を設定
    • 第3引数:(cc.Color)塗りつぶす色を指定
      • cc.color(r, g, b, a):それぞれ、r:赤、g:緑、b:青、a:不透明度で、0〜255の数値で設定
  • 『onEnter:function(){}』:ノードがステージに組み込まれた時(シーンやレイヤーにaddChildされた時)に呼び出される
  • 『onExit:function(){}』:ノードがステージから除外された時(シーンやレイヤーからremoveChildされた時)に呼び出される

呼び出し側

上記のクラスをレイヤー等に組み込む例です。
コンストラクタに引数を持たせた場合は、インスタンス化の際に設定します。

var circle = new DrawFillCircle(100, cc.color(0, 0, 255, 255)); // インスタンス化
circle.setPosition(cc.p(320, 480)); // 中心の座標を設定
this.addChild(circle); // 表示レイヤーに追加

 
以上です。

あとがき

 コンストラクタ内の『this._super();』を書き忘れて、親クラスのメソッドを呼び出した際にエラーというケアレスミスをやらかしました。
 本題から外れますが、『cc.DrawNode』の『this.drawDot()』の引数で座標を指定すると、同じ数値なのに『Mac OSXでの実行』と『ブラウザでの実行』で表示位置が変わりました。
 しかし半径は、どちらも正しく表示されました 。
 上記のように、呼び出し側で座標を設定することで対応できました。