Add: stroke and line spacing

study/RoundRectButton/round_rect_button.js

@@ -27,16 +27,19 @@ RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
 
 RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
   out: "#000",
-  over: "#000",
-  down: "#000",
+  over: "#333",
+  down: "#666",
   disabled: "#999"
 };
 
 RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
   font: "30px Arial",
+  align: "center",
   fill: "#fff"
 };
 
+RoundRectButtonSetting.DEFAULT_LINE_SPACING = -10;  // pixels
+
 
 
 class RoundRectButton {
@@ -91,34 +94,37 @@ class RoundRectButton {
   makeText(textContent) {
     let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
     btnText.anchor.setTo(0.5);
+    btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING;
 
     return btnText;
   }
 
 
-  move(x, y) {
-    this.button.x = x;
-    this.button.y = y;
-  }
-
   mouseOut() {
     this.button.tint = this.setting.buttonColors.out;
-    this.text.tint = this.setting.textColors.out;
+    this.text.fill = this.setting.textColors.out;
   }
 
   mouseOver() {
     this.button.tint = this.setting.buttonColors.over;
-    this.text.tint = this.setting.textColors.over;
+    this.text.fill = this.setting.textColors.over;
   }
 
   mouseDown() {
     this.button.tint = this.setting.buttonColors.down;
-    this.text.tint = this.setting.textColors.down;
+    this.text.fill = this.setting.textColors.down;
   }
 
   buttonDisabled() {
     this.button.tint = this.setting.buttonColors.disabled;
-    this.text.tint = this.setting.textColors.disabled;
+    this.text.fill = this.setting.textColors.disabled;
+  }
+
+
+
+  move(x, y) {
+    this.button.x = x;
+    this.button.y = y;
   }
 
   get inputEnabled() {
@@ -134,6 +140,10 @@ class RoundRectButton {
       this.buttonDisabled();
     }
   }
+
+  set lineSpacing(spacingInPixels) {
+    this.text.lineSpacing = spacingInPixels;
+  }
 }
 
 RoundRectButton.defaultRoundAmount = 10;

study/RoundRectButton/round_rect_button_main.js

@@ -1,38 +1,6 @@
 /////////////////////////////
 // Main game
 
-/**** Phaser3 *****
-
-var config = {
-            type: Phaser.AUTO,
-            width: 800,
-            height: 600,
-            physics: {
-                default: 'arcade',
-                arcade: {
-                    gravity: { y: 200 }
-                }
-            },
-            scene: {
-                preload: preload,
-                create: create
-            }
-        };
-
-        var game = new Phaser.Game(config);
-
-function preload() {
-}
-
-function create() {
-  console.log(game);
-
-  this.cameras.main.setBackgroundColor('#4d4d4d');
-
-  // game.stage.backgroundColor = '#4d4d4d';
-  // graphics = game.add.graphics(0, 0);
-}
-*/
 var game = new Phaser.Game(1000, 800, Phaser.CANVAS, "RoundRectButton",
   {preload:preload, create:create, update:update, render:render});
 
@@ -48,8 +16,17 @@ function create() {
   graphics = game.add.graphics(0, 0);
 
   let setting = new RoundRectButtonSetting(200, 100);
+  setting.fontStyle = {
+    fontSize: "30px",
+    align: "center",
+    fontWeight: "",
+    stroke: "red",
+    strokeThickness: 5
+  };
+
   let button = new RoundRectButton(setting, "둥근 모서리\n버튼", dummy);
   button.move(200, 200);
+  // button.lineSpacing = -10;
 }
 
 function dummy() {