From 1df8fba0a514ad30a647646b4843bd640af728f0 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: Thu, 25 Jul 2019 09:58:37 +0900 Subject: [PATCH] Fix: ChocoButton stroke round --- src/game/lib/button/choco_back_button.js | 48 +++++++++++++++++++++ src/game/lib/button/choco_button.js | 25 ++++++----- src/game/lib/button/choco_button_setting.js | 45 ++++++++++++++----- src/game/lib/color/main_color.js | 7 ++- src/game/main_menu/main.js | 1 - src/game/main_menu/main_menu.js | 24 +++++++---- src/web/client/main_menu.html | 1 + 7 files changed, 120 insertions(+), 31 deletions(-) create mode 100644 src/game/lib/button/choco_back_button.js diff --git a/src/game/lib/button/choco_back_button.js b/src/game/lib/button/choco_back_button.js new file mode 100644 index 0000000..a350e54 --- /dev/null +++ b/src/game/lib/button/choco_back_button.js @@ -0,0 +1,48 @@ +ChocoBackButton.prototype = Object.create(ChocoButton.prototype); +ChocoBackButton.constructor = ChocoBackButton; + +function ChocoBackButton(clickEvent) { + var setting = new ChocoButtonSetting(980, 40, 60, 60, 3, 10); + setting.fontStyle.boundsAlignH = "center"; // left, center. right + setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom + setting.setStrokeColor( + ChocoBackButton.STROKE_COLOR_OUT_HEX, + ChocoBackButton.STROKE_COLOR_OVER_HEX, + ChocoBackButton.STROKE_COLOR_DOWN_HEX, + ChocoBackButton.STROKE_COLOR_DISABLED_HEX + ); + setting.setButtonColor( + ChocoBackButton.BUTTON_COLOR_OUT_HEX, + ChocoBackButton.BUTTON_COLOR_OVER_HEX, + ChocoBackButton.BUTTON_COLOR_DOWN_HEX, + ChocoBackButton.BUTTON_COLOR_DISABLED_HEX + ); + setting.setTextColor( + ChocoBackButton.TEXT_COLOR_OUT_HEX, + ChocoBackButton.TEXT_COLOR_OVER_HEX, + ChocoBackButton.TEXT_COLOR_DOWN_HEX, + ChocoBackButton.TEXT_COLOR_DISABLED_HEX + ); + + ChocoButton.call(this, setting, clickEvent); + + this.addIcon("tile_choco"); + this.setIconSize(15); + this.setShortcutText("돌아가기"); +} + + +ChocoBackButton.STROKE_COLOR_OUT_HEX = 0xAA6666; +ChocoBackButton.STROKE_COLOR_OVER_HEX = 0x884444; +ChocoBackButton.STROKE_COLOR_DOWN_HEX = 0x884444; +ChocoBackButton.STROKE_COLOR_DISABLED_HEX = 0x333333; + +ChocoBackButton.BUTTON_COLOR_OUT_HEX = 0xffdddd; +ChocoBackButton.BUTTON_COLOR_OVER_HEX = 0xddaaaa; +ChocoBackButton.BUTTON_COLOR_DOWN_HEX = 0xddaaaa; +ChocoBackButton.BUTTON_COLOR_DISABLED_HEX = 0x666666; + +ChocoBackButton.TEXT_COLOR_OUT_HEX = "#aa6666"; +ChocoBackButton.TEXT_COLOR_OVER_HEX = "#884444"; +ChocoBackButton.TEXT_COLOR_DOWN_HEX = "#884444"; +ChocoBackButton.TEXT_COLOR_DISABLED_HEX = "#333333"; \ No newline at end of file diff --git a/src/game/lib/button/choco_button.js b/src/game/lib/button/choco_button.js index 0b642c3..cb25fa6 100644 --- a/src/game/lib/button/choco_button.js +++ b/src/game/lib/button/choco_button.js @@ -48,21 +48,25 @@ ChocoButton.prototype.makeButtonStrokeSprite = function() { // outter(bigger) ro } ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite - var width = this.setting.width - this.setting.strokeWidthPx * 2; - var height = this.setting.height - this.setting.strokeWidthPx * 2; - var innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5); + var setting = this.setting; + // console.log("strokeWidthPx : " + setting.strokeWidthPx); + // console.log("round : " + setting.roundAmount); + + var btnWidth = setting.width - setting.strokeWidthPx * 2; + var btnHeight = setting.height - setting.strokeWidthPx * 2; + var longSideStroke = (setting.width > setting.height ? setting.width : setting.height); + var longSideButton = (btnWidth > btnHeight ? btnWidth : btnHeight); + var btnRoundAmount = setting.roundAmount * longSideButton / longSideStroke; var texture = new Phaser.Graphics() .beginFill(0xffffff) - .drawRoundedRect(this.setting.strokeWidthPx, this.setting.strokeWidthPx, width, height, innerRoundAmount) + .drawRoundedRect(0, 0, btnWidth, btnHeight, btnRoundAmount) .endFill() .generateTexture(); - var buttonSprite = game.add.sprite( - this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx, - this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx, - texture - ); + var posX = setting.x - btnWidth / 2; + var posY = setting.y - btnHeight / 2; + var buttonSprite = game.add.sprite(posX, posY, texture); // buttonSprite.anchor.setTo(0.5, 0.5); buttonSprite.inputEnabled = true; @@ -120,6 +124,7 @@ ChocoButton.prototype.setIcon = function(icon) { ChocoButton.prototype.makeShortcutText = function() { var shortcutText = game.add.text(this.buttonSprite.width / 2, this.buttonSprite.height * 9 / 10, ""); shortcutText.anchor.set(0.5); + shortcutText.fontWeight = "normal"; shortcutText.fontSize = this.buttonSprite.height * 2 / 10; // shortcutText.addColor(this.setting.textColors.over, 0); @@ -129,7 +134,7 @@ ChocoButton.prototype.makeShortcutText = function() { } ChocoButton.prototype.setShortcutText = function(text) { - this.shortcutText.text = "[ " + text + " ]"; + this.shortcutText.text = text; } diff --git a/src/game/lib/button/choco_button_setting.js b/src/game/lib/button/choco_button_setting.js index 581f1e8..9fe4e7b 100644 --- a/src/game/lib/button/choco_button_setting.js +++ b/src/game/lib/button/choco_button_setting.js @@ -1,17 +1,10 @@ -function ChocoButtonSetting(x, y, width, height, roundAmount) { +function ChocoButtonSetting(x, y, width, height, strokeWidth, roundAmount) { this.x = x; this.y = y; this.width = width; this.height = height; - this.roundAmount = 0; - if(typeof roundAmount === "undefined") { - var shorterSide = width > height ? height : width; - this.roundAmount = shorterSide * 0.1; - } else { - this.roundAmount = roundAmount; - } - this.strokeWidthPx = ChocoButtonSetting.DEFAULT_STROKE_WIDTH_PX; - + this.setRound(roundAmount); + this.setStrokeWidth(strokeWidth); this.strokeColors = ChocoButtonSetting.DEFAULT_STROKE_COLORS; this.buttonColors = ChocoButtonSetting.DEFAULT_BUTTON_COLORS; @@ -20,6 +13,38 @@ function ChocoButtonSetting(x, y, width, height, roundAmount) { this.fontStyle = ChocoButtonSetting.DEFAULT_TEXT_FONT; }; +ChocoButtonSetting.prototype.setRound = function(round) { + if(this.width / 2 > round && this.height / 2 > round) { + this.roundAmount = round; + return this.roundAmount; + } + + var maxRound = round; + if(this.width > this.height) { + maxRound = this.height / 2; + } else { + maxRound = this.width / 2; + } + + this.roundAmount = maxRound; +} + +ChocoButtonSetting.prototype.setStrokeWidth = function(width) { + if(this.width / 2 > width && this.height / 2 > width) { + this.strokeWidthPx = width; + return this.strokeWidthPx; + } + + var maxWidth = width; + if(this.width > this.height) { + maxWidth = this.height / 2; + } else { + maxWidth = this.width / 2; + } + + this.strokeWidthPx = maxWidth; +} + ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) { this.strokeColors = { }; this.strokeColors.out = out; diff --git a/src/game/lib/color/main_color.js b/src/game/lib/color/main_color.js index dc5c8bc..3f926cc 100644 --- a/src/game/lib/color/main_color.js +++ b/src/game/lib/color/main_color.js @@ -13,4 +13,9 @@ MainColor.LIGHTER_CHOCO_STRING = "#E6A277"; MainColor.LIGHT_CHOCO_HEX = 0xBF8763; MainColor.CHOCO_HEX = 0x805A42; MainColor.DARK_CHOCO_HEX = 0x402D21; -MainColor.LIGHTER_CHOCO_HEX = 0xE6A277; \ No newline at end of file +MainColor.LIGHTER_CHOCO_HEX = 0xE6A277; + + +MainColor.BLACK_STRING = "#000000"; + +MainColor.BLACK_HEX = 0x000000; \ No newline at end of file diff --git a/src/game/main_menu/main.js b/src/game/main_menu/main.js index 3e65eab..8db882f 100644 --- a/src/game/main_menu/main.js +++ b/src/game/main_menu/main.js @@ -27,7 +27,6 @@ game.state.add('MainMenu', mainMenu); game.state.start('MainMenu'); function fontLoaded() { - console.log("fontLoaded #1"); mainMenu.fontLoaded(); } diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js index 8d850bd..91039ce 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -42,8 +42,6 @@ MainMenu.prototype.create = function() { */ MainMenu.prototype.create = function() { - console.log("create"); - this.dbService = new DBService(); this.dbService.setMaestroID(sessionStorageManager.getMaestroID()); this.dbService.setPlayerID(sessionStorageManager.getPlayerID()); @@ -52,7 +50,8 @@ MainMenu.prototype.create = function() { var graphics = game.add.graphics(); graphics.beginFill(MainColor.LIGHT_CHOCO_HEX, 1); graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y); - graphics.beginFill(MainColor.CHOCO_HEX, 1); + graphics.beginFill(MainColor.BLACK_HEX, 1); + // graphics.beginFill(MainColor.CHOCO_HEX, 1); graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT); this.appGroupButtons = {}; @@ -178,15 +177,22 @@ MainMenu.prototype.makeAppGroupButtons = function() { } MainMenu.prototype.makeQuitButton = function() { - var setting = new ChocoButtonSetting(980, 40, 60, 60, 5); - var quitButton = new ChocoButton( - setting, // choco button setting, - (function() { this.back(); }).bind(this) + var setting = new ChocoButtonSetting(980, 40, 60, 60, 5, 10); + // var quitButton = new ChocoButton( + // setting, // choco button setting, + // (function() { /*this.back();*/ console.log("quit"); }).bind(this) + // ); + // quitButton.addIcon("tile_choco"); + // quitButton.setIconSize(30); + + var backButton = new ChocoBackButton( + (function() { console.log("back"); }).bind(this) ); - quitButton.addIcon("tile_choco"); - quitButton.setIconSize(30); + // backButton.addIcon("tile_choco"); + // backButton.setIconSize(30); this.appGroupButtons.quitButton = quitButton; + this.appGroupButtons.backButton = backButton; } MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) { diff --git a/src/web/client/main_menu.html b/src/web/client/main_menu.html index bb4fe17..d9381dd 100644 --- a/src/web/client/main_menu.html +++ b/src/web/client/main_menu.html @@ -56,6 +56,7 @@ +