Add: RoundRectButton stroke

2018-05-07 09:06:15 +09:00
parent 8d9e3c49b3
commit 6a027658fa
5 changed files with 24 additions and 11 deletions
@@ -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;
 	}
@@ -9,11 +9,13 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script>

 		<!-- global source files -->
-		<script src="../../game/lib/input_type_text.js"></script>
-		<script src="../../game/lib/round_rect_button.js"></script>
 		<script src="../../game/global/define_variables_global.js"></script>

-		<!-- Space Invaders : source files -->
+		<!-- library source files -->
+		<script src="../../game/lib/input_type_text.js"></script>
+		<script src="../../game/lib/round_rect_button.js"></script>
+
+		<!-- source files -->
 		<script src="../../game/login/login.js"></script>
 		<script src="../../game/login/main.js"></script>

@@ -31,6 +33,6 @@
 	</head>

 	<body>
-		<div id="Space Invaders" style="text-align:center;" />
+		<div id="Login" style="text-align:center;" />
 	</body>
 </html>
@@ -9,12 +9,14 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script>

 		<!-- global source files -->
+		<script src="../../game/global/define_variables_global.js"></script>
+
+		<!-- library source files -->
 		<script src="../../game/lib/input_type_text.js"></script>
 		<script src="../../game/lib/round_rect_button.js"></script>
-		<script src="../../game/global/define_variables_global.js"></script>
-		<script src="../../game/global/screen_bottom.js"></script>
+		<script src="../../game/lib/screen_bottom.js"></script>

-		<!-- Space Invaders : source files -->
+		<!-- source files -->
 		<script src="../../game/menu/menu_app.js"></script>
 		<script src="../../game/menu/main_menu_app.js"></script>