CreateJSでの継承

いつも書くたびに継承の書き方を忘れてしまうので備忘録。

CreateJSの継承(prototype)

私は基本prototypeでの継承しか使わないので、こちらをメモ。

var ViewContainer = function(name){
  this.Container_constructor();

  // 好きな初期化処理を書く
  this.name = name;
}
// これをいつも忘れてしまいがち
createjs.extend(ViewContainer, createjs.Container);
createjs.promote(ViewContainer, 'Container');

ViewContainer.prototype.setBGColor = function(color){
  // hogehoge......
}

いつも

createjs.extend(ViewContainer, createjs.Container);
createjs.promote(ViewContainer, 'Container');

の記法を忘れてしまいます。
ここは継承したいCreateJSのクラスと、継承する自作のクラスに好きに差し替えてください

CreateJSの継承使いどころ

CreateJSでUIとかを描画するときにはView・Buttonなどのオブジェクトを毎回作るのは面倒なので、Containerを継承させてクラスを作成しておくと便利です。
よく私が作っているクラスをサンプルで置いておきます。

ViewContainer.js

/**
 * @classdesc View生成用のContainer
 * @param {string} name 
 */
var ViewContainer = function(name,width,height)
{
  this.Container_constructor();
  this.name = "view_container";
  this._name = name;
  this._width = width;
  this._height = height;
}
createjs.extend(ViewContainer, createjs.Container);
createjs.promote(ViewContainer, 'Container');

/**
 * @param {string} color - 背景用のカラーコード #000000 ~ #FFFFFF
 */
ViewContainer.prototype.setBGColor = function(color)
{
  if(this.bg_shape != undefined) container.removeChild(this.bg_shape);
  var graphics = new createjs.Graphics();
  graphics.beginFill(color);
  graphics.rect(0,0,this._width,this._height);

  this.bg_shape =  new createjs.Shape(graphics);
  this.addChild(this.bg_shape);
}

ButtonContainer.js

/**
 * @classdesc Button生成用のContainer
 * @constructor
 */
var ButtonContainer = function()
{
  this.Container_constructor();
}
createjs.extend(ButtonContainer, createjs.Container);
createjs.promote(ButtonContainer, 'Container');

/**
 * @param {number} width 
 * @param {number} height 
 */
ButtonContainer.prototype.setSize = function(width,height)
{
  this._width = width;
  this._height = height;
}
/**
 * @param {string} color - 背景用のカラーコード #000000 ~ #FFFFFF
 */
ButtonContainer.prototype.setBGColor = function(color)
{
  if(this.bg_shape != undefined) this.removeChild(this.bg_shape);
  var graphics = new createjs.Graphics();
  graphics.beginFill(color);
  graphics.rect(0,0,this._width,this._height);

  this.bg_shape =  new createjs.Shape(graphics);
  this.addChild(this.bg_shape);
}

/**
 * @param {callback} callback
 */
ButtonContainer.prototype.onClick = function(callback)
{
  this.removeAllEventListeners('click');
  this.addEventListener('click', callback);
}