From 6a027658fa4a59cc19859a0ecbce69f8b88b65f4 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?= Date: Mon, 7 May 2018 09:06:15 +0900 Subject: [PATCH] Add: RoundRectButton stroke --- src/game/lib/round_rect_button.js | 17 +++++++++++++---- src/game/{global => lib}/screen_bottom.js | 0 src/game/{global => }/loading/loading.js | 0 src/web/client/login.html | 10 ++++++---- src/web/client/menu_app.html | 8 +++++--- 5 files changed, 24 insertions(+), 11 deletions(-) rename src/game/{global => lib}/screen_bottom.js (100%) rename src/game/{global => }/loading/loading.js (100%) diff --git a/src/game/lib/round_rect_button.js b/src/game/lib/round_rect_button.js index 3b45fac..8da274f 100644 --- a/src/game/lib/round_rect_button.js +++ b/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; } diff --git a/src/game/global/screen_bottom.js b/src/game/lib/screen_bottom.js similarity index 100% rename from src/game/global/screen_bottom.js rename to src/game/lib/screen_bottom.js diff --git a/src/game/global/loading/loading.js b/src/game/loading/loading.js similarity index 100% rename from src/game/global/loading/loading.js rename to src/game/loading/loading.js diff --git a/src/web/client/login.html b/src/web/client/login.html index e03c411..b0b2171 100644 --- a/src/web/client/login.html +++ b/src/web/client/login.html @@ -9,11 +9,13 @@ - - - + + + + + @@ -31,6 +33,6 @@ -
+
\ No newline at end of file diff --git a/src/web/client/menu_app.html b/src/web/client/menu_app.html index 5e555e0..a8da087 100644 --- a/src/web/client/menu_app.html +++ b/src/web/client/menu_app.html @@ -9,12 +9,14 @@ + + + - - + - +