Add: make button sprites

study/RoundRectButton/round_rect_button.js

@@ -44,13 +44,25 @@ RectSetting.DEFAULT_TEXT_COLORS = {
 
 class RoundRectButton {
   constructor(roundRectSetting) {
-    var outSprite = this.makeSprite(
+    this.outSprite = this.makeSprite(
       roundRectSetting.width, roundRectSetting.height,
       roundRectSetting.buttonColors.out
     );
 
-    outSprite.x = 100;
+    this.overSprite = this.makeSprite(
-    outSprite.y = 100;
+      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) {
@@ -61,10 +73,21 @@ class RoundRectButton {
     bmd.ctx.fillStyle = RectSetting.DEFAULT_BUTTON_COLORS.out;
     bmd.ctx.fill();
 
-    return game.add.sprite(-1000, -1000, bmd);
+    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

study/RoundRectButton/round_rect_button_main.js

@@ -49,6 +49,7 @@ function create() {
 
 
   let button = new RoundRectButton(new RectSetting(200, 100));
+  button.move(200, 200);
   console.log(button);
 }