Add: RoundRectButton stroke

src/game/lib/round_rect_button.js

@@ -38,8 +38,7 @@ RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
 	fill: "#fff"
 };
 
-RoundRectButtonSetting.DEFAULT_LINE_SPACING = -10;  // pixels
-RoundRectButtonSetting.WHITE = 0xffffff;
+RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX = -10;  // pixels
 
 
 
@@ -83,10 +82,20 @@ class RoundRectButton {
 	}
 
 	makeSprite() {
+		const STROKE_WIDTH_PX		= 5;
+
+		let width = this.setting.width - STROKE_WIDTH_PX * 2;
+		let height = this.setting.height - STROKE_WIDTH_PX * 2;
+		let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width);
+		console.log("this.setting.roundAmount " + this.setting.roundAmount);
+		console.log("innerRoundAmount " + innerRoundAmount);
 		let btnTexture = new Phaser.Graphics()
-			.beginFill(RoundRectButtonSetting.WHITE)
+			.beginFill(0xaaaaaa)
 			.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
 			.endFill()
+			.beginFill(0xffffff)
+			.drawRoundedRect(STROKE_WIDTH_PX, STROKE_WIDTH_PX, width, height, innerRoundAmount)
+			.endFill()
 			.generateTexture();
 
 		return game.add.sprite(0, 0, btnTexture);
@@ -95,7 +104,7 @@ 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;
+		btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX;
 
 		return btnText;
 	}