From 5d3579756f16b0964aba824e96c7e8598ff640ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?=
 =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?=
 <jisangs@gmail.com>
Date: Wed, 2 May 2018 11:27:30 +0900
Subject: [PATCH] Add: RoundedRect image texture for button sprite

---
 study/RoundRectButton/round_rect_button.js | 63 ++++++++++++----------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/study/RoundRectButton/round_rect_button.js b/study/RoundRectButton/round_rect_button.js
index fd0321f..0fe7db1 100644
--- a/study/RoundRectButton/round_rect_button.js
+++ b/study/RoundRectButton/round_rect_button.js
@@ -6,20 +6,6 @@ class RectSetting {
     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
@@ -44,44 +30,63 @@ RectSetting.DEFAULT_TEXT_COLORS = {
 
 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(
+    this.buttonSprite = this.makeSprite(
       roundRectSetting.width, roundRectSetting.height,
       roundRectSetting.buttonColors.down
     );
 
-    this.disabledSprite = this.makeSprite(
-      roundRectSetting.width, roundRectSetting.height,
-      roundRectSetting.buttonColors.disabled
+    this.makeText("Button text", this.buttonSprite);
+  }
+
+  makeText(buttonText, button) {
+    let btnText = game.add.text(0, 0, buttonText,
+      { font: "30px Arial", fill: "#fff" }
     );
+    btnText.anchor.setTo(0.5);
+
+    button.addChild(btnText);
+    button.anchor.setTo(0.5, 0.5);
   }
 
   makeSprite(width, height, color) {
+    let btnTexture = new Phaser.Graphics()
+      .beginFill(0x000000, 0.5)
+      .drawRoundedRect(0, 4, 200, 56, 5)
+      .endFill()
+      .generateTexture();
+
+    let button = 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 = RectSetting.DEFAULT_BUTTON_COLORS.out;
+    bmd.ctx.fillStyle = color;
     bmd.ctx.fill();
 
     return game.add.sprite(
       RoundRectButton.defaultPositionX,
       RoundRectButton.defaultPositionY, bmd
     );
+    */
   }
 
   move(x, y) {
+    this.buttonSprite.x = x;
+    this.buttonSprite.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;
+    this.overSprite.x = 200;
+    this.downSprite.x = 400;
+    this.disabledSprite.x = 600;
+
+    this.overSprite.tint = 0xffaaaa;  // "#faa";  //roundRectSetting.buttonColors.down;
+    */
   }
 }