Add: button color, event method

study/RoundRectButton/round_rect_button.js

@@ -1,181 +1,140 @@
-class RectSetting {
+class RoundRectButtonSetting {
 
-
+  constructor(width, height, roundAmount) {
-
-  constructor(width, height, buttonColors) {
     this.width = width;
     this.height = height;
-
+    this.roundAmount = 0;
-    if(buttonColors != null)
+    if(typeof roundAmount === "undefined") {
-      this.buttonColors = buttonColors;
+      let shorterSide = width > height ? height : width;
-    else
+      this.roundAmount = shorterSide * 0.1;
-      this.buttonColors = RectSetting.DEFAULT_BUTTON_COLORS;
+    } else {
-  }
+      this.roundAmount = roundAmount;
     }
 
-RectSetting.DEFAULT_BUTTON_COLORS = {
+    this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
-  over: "#fff",  // over
+    this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
-  out: "#aaf",  // out
+    this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
-  down: "#faa",  // down
-  disabled: "#333"   // disabled
   };
 
-RectSetting.DEFAULT_TEXT_COLORS = {
+}
-  over: "#000",  // over
+
-  out: "#000",  // out
+RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
-  down: "#000",  // down
+  out: 0xffffff,
-  disabled: "#999"   // disabled
+  over: 0xddffdd,
+  down: 0xaaffaa,
+  disabled: 0x333333
 };
 
+RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
+  out: "#000",
+  over: "#000",
+  down: "#000",
+  disabled: "#999"
+};
+
+RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
+  font: "30px Arial",
+  fill: "#fff"
+};
+
+
 
 class RoundRectButton {
-  constructor(roundRectSetting) {
+  constructor(roundRectSetting, buttonText, clickEvent) {
-    this.buttonSprite = this.makeSprite(
+    this.setting = roundRectSetting;
-      roundRectSetting.width, roundRectSetting.height,
+    this.clickEvent = clickEvent;
-      roundRectSetting.buttonColors.down
-    );
 
-    this.makeText("Button text", this.buttonSprite);
+    this.button = this.makeSprite();
+    this.text = this.makeText(buttonText);
+
+    this.button.addChild(this.text);
+    this.button.anchor.setTo(0.5, 0.5);
+
+    this.inputEnabled = true;
+    this.setEventMethod();
+
+    this.mouseOut();
   }
 
-  makeText(buttonText, button) {
+  setEventMethod() {
-    let btnText = game.add.text(0, 0, buttonText,
+    this.button.events.onInputOver.add(function() {
-      { font: "30px Arial", fill: "#fff" }
+      this.mouseOver();
-    );
+    }, this);
-    btnText.anchor.setTo(0.5);
 
-    button.addChild(btnText);
+    this.button.events.onInputOut.add(function() {
-    button.anchor.setTo(0.5, 0.5);
+      this.mouseOut();
+    }, this);
+
+    this.button.events.onInputDown.add(function() {
+      this.mouseDown();
+
+      if(this.clickEvent) {
+        this.clickEvent();
+      }
+    }, this);
+
+    this.button.events.onInputUp.add(function() {
+      this.mouseOver();
+    }, this);
   }
 
-  makeSprite(width, height, color) {
+  makeSprite() {
     let btnTexture = new Phaser.Graphics()
-      .beginFill(0x000000, 0.5)
+      .beginFill(RoundRectButton.white)
-      .drawRoundedRect(0, 4, 200, 56, 5)
+      .drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
       .endFill()
       .generateTexture();
 
-    let button = game.add.sprite(0, 0, btnTexture);
+    return game.add.sprite(0, 0, btnTexture);
-
-    return button;
-    /*
-    // 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 = color;
-    bmd.ctx.fill();
-
-    return game.add.sprite(
-      RoundRectButton.defaultPositionX,
-      RoundRectButton.defaultPositionY, bmd
-    );
-    */
   }
 
+  makeText(textContent) {
+    let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
+    btnText.anchor.setTo(0.5);
+
+    return btnText;
+  }
+
+
   move(x, y) {
-    this.buttonSprite.x = x;
+    this.button.x = x;
-    this.buttonSprite.y = y;
+    this.button.y = 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;
 
-    this.outSprite.x = 0;
+  mouseOut() {
-    this.overSprite.x = 200;
+    this.button.tint = this.setting.buttonColors.out;
-    this.downSprite.x = 400;
+    this.text.tint = this.setting.textColors.out;
-    this.disabledSprite.x = 600;
+  }
 
-    this.overSprite.tint = 0xffaaaa;  // "#faa";  //roundRectSetting.buttonColors.down;
+  mouseOver() {
-    */
+    this.button.tint = this.setting.buttonColors.over;
+    this.text.tint = this.setting.textColors.over;
+  }
+
+  mouseDown() {
+    this.button.tint = this.setting.buttonColors.down;
+    this.text.tint = this.setting.textColors.down;
+  }
+
+  buttonDisabled() {
+    this.button.tint = this.setting.buttonColors.disabled;
+    this.text.tint = this.setting.textColors.disabled;
+  }
+
+  get inputEnabled() {
+    return this.button.inputEnabled;
+  }
+
+  set inputEnabled(isEnabled) {
+    this.button.inputEnabled = isEnabled;
+
+    if(isEnabled === true) {
+      this.mouseOut();
+    } else {
+      this.buttonDisabled();
+    }
   }
 }
 
-RoundRectButton.defaultPositionX = -1000;
+RoundRectButton.defaultRoundAmount = 10;
-RoundRectButton.defaultPositionY = -1000;
+RoundRectButton.white = 0xffffff;
-
-/*
-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);
-}
-*/

study/RoundRectButton/round_rect_button_main.js

@@ -47,10 +47,13 @@ function create() {
   game.stage.backgroundColor = '#4d4d4d';
   graphics = game.add.graphics(0, 0);
 
-
+  let setting = new RoundRectButtonSetting(200, 100);
-  let button = new RoundRectButton(new RectSetting(200, 100));
+  let button = new RoundRectButton(setting, "둥근 모서리\n버튼", dummy);
   button.move(200, 200);
-  console.log(button);
+}
+
+function dummy() {
+  console.log("print dummy");
 }
 
 function update() {