chocomae/study/RoundRectButton/round_rect_button.js

class RectSetting {



  constructor(width, height, buttonColors) {
    this.width = width;
    this.height = height;

    this.DEFAULT_BUTTON_COLORS = {
      over: "#fff",  // over
      out: "#aaf",  // out
      down: "#faa",  // down
      disabled: "#333"   // disabled
    };

    this.DEFAULT_TEXT_COLORS = {
      over: "#000",  // over
      out: "#000",  // out
      down: "#000",  // down
      disabled: "#999"   // disabled
    };

    if(buttonColors != null)
      this.buttonColors = buttonColors;
    else
      this.buttonColors = RectSetting.DEFAULT_BUTTON_COLORS;
  }
}

RectSetting.DEFAULT_BUTTON_COLORS = {
  over: "#fff",  // over
  out: "#aaf",  // out
  down: "#faa",  // down
  disabled: "#333"   // disabled
};

RectSetting.DEFAULT_TEXT_COLORS = {
  over: "#000",  // over
  out: "#000",  // out
  down: "#000",  // down
  disabled: "#999"   // disabled
};


class RoundRectButton {
  constructor(roundRectSetting) {
    this.outSprite = this.makeSprite(
      roundRectSetting.width, roundRectSetting.height,
      roundRectSetting.buttonColors.out
    );

    this.overSprite = this.makeSprite(
      roundRectSetting.width, roundRectSetting.height,
      roundRectSetting.buttonColors.over
    );

    this.downSprite = this.makeSprite(
      roundRectSetting.width, roundRectSetting.height,
      roundRectSetting.buttonColors.down
    );

    this.disabledSprite = this.makeSprite(
      roundRectSetting.width, roundRectSetting.height,
      roundRectSetting.buttonColors.disabled
    );
  }

  makeSprite(width, height, color) {
    // create a new bitmap data object
    var bmd = game.add.bitmapData(width, height);
    bmd.ctx.beginPath();
    bmd.ctx.rect(0, 0, width, height);
    bmd.ctx.fillStyle = RectSetting.DEFAULT_BUTTON_COLORS.out;
    bmd.ctx.fill();

    return game.add.sprite(
      RoundRectButton.defaultPositionX,
      RoundRectButton.defaultPositionY, bmd
    );
  }

  move(x, y) {
    this.outSprite.x = this.overSprite.x = this.downSprite.x = this.disabledSprite.x = x;
    this.outSprite.y = this.overSprite.y = this.downSprite.y = this.disabledSprite.y = y;
  }
}

RoundRectButton.defaultPositionX = -1000;
RoundRectButton.defaultPositionY = -1000;

/*
var DEFAULT_BUTTON_COLORS = [
  "#fff",  // over
  "#aaf",  // out
  "#faa",  // down
  "#333"   // disabled
];

var DEFAULT_TEXT_COLORS = [
  "#000",  // over
  "#000",  // out
  "#000",  // down
  "#999"   // disabled
];


function RectSetting(width, height, buttonColors) {
  this.width = width;
  this.height = height;

  if(buttonColors != null)
    this.buttonColors = buttonColors;
  else
    this.buttonColors = DEFAULT_BUTTON_COLORS;

}


function ButtonTextSetting(text, textColors) {
  this.text = text;
  this.textColors = textColors;
}




// function RoundRoundRectButton(x, y, text, callback) {
function RoundRectButton(roundRectSetting) {

 // use the bitmap data as the texture for the sprite

  // var newTextStyle = $.extend( {}, textStyleBasic);
  // newTextStyle.font = "bold 28px Arial";

  // this.buttonText = game.add.text(0, 0, text, newTextStyle);
  // this.buttonText.addColor("#a0d", 0)
  // this.buttonText.anchor.setTo(0.5, 0.4);

  // this.startButton = game.add.button(x, y, 'button', callback, this, 2, 1, 0);
  // this.startButton.anchor.set(0.5);
  // this.startButton.inputEnabled = true;
  // this.startButton.input.priorityId = 1;
  // this.startButton.input.useHandCursor = true;
  // this.startButton.addChild(this.buttonText);

  var overSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[0]);
  var outSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[1]);
  var downSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[2]);
  var disabledSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[3]);
}

RoundRectButton.prototype.makeSprite = function(width, height, color) {
  var bmd = game.add.bitmapData(width, height);

  var defaultLineWidth = 2;
  var defaultLineWidthHalf = defaultLineWidth / 2;

  bmd.ctx.beginPath();
  bmd.ctx.rect(
    defaultLineWidth, defaultLineWidth,
    width - defaultLineWidth, height - defaultLineWidth
  );
  bmd.ctx.fillStyle = '#aaaa';
  bmd.ctx.fill();

  bmd.ctx.beginPath();
  bmd.ctx.lineWidth = defaultLineWidth;
  bmd.ctx.strokeStyle = "#fff";
  bmd.ctx.strokeRect(
    defaultLineWidthHalf, defaultLineWidthHalf,
    width - defaultLineWidth, height - defaultLineWidth
  );

  return game.add.sprite(300, 300, bmd);
}
*/