From 5ca6bd07bbfcbcb9f98101079c2db0305f23826e 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 15:01:44 +0900 Subject: [PATCH] Fix: ChocoButton content vertical align --- src/game/lib/button/choco_back_button.js | 1 + src/game/lib/button/choco_button.js | 195 ++++++++++++++------ src/game/lib/button/choco_button_setting.js | 11 +- src/game/lib/button/choco_setting_button.js | 35 ++-- src/game/lib/color/main_color.js | 6 +- src/game/main_menu/main.js | 2 +- src/game/main_menu/main_menu.js | 22 ++- 7 files changed, 187 insertions(+), 85 deletions(-) diff --git a/src/game/lib/button/choco_back_button.js b/src/game/lib/button/choco_back_button.js index 525840a..cb2872a 100644 --- a/src/game/lib/button/choco_back_button.js +++ b/src/game/lib/button/choco_back_button.js @@ -5,6 +5,7 @@ function ChocoBackButton(clickEvent) { var setting = new ChocoButtonSetting(40, 40, 60, 60); setting.setStrokeWidth(3); setting.setRound(10); + setting.setFont("Nanum Gothic Coding"); setting.fontStyle.boundsAlignH = "center"; // left, center. right setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom setting.setStrokeColor( diff --git a/src/game/lib/button/choco_button.js b/src/game/lib/button/choco_button.js index 8a12083..94665ec 100644 --- a/src/game/lib/button/choco_button.js +++ b/src/game/lib/button/choco_button.js @@ -6,29 +6,32 @@ function ChocoButton(setting, clickEvent) { this.clickEvent = clickEvent; // button sprite - this.buttonStrokeSprite = this.makeButtonStrokeSprite(); - this.setEventMethod(this.buttonStrokeSprite); + this.strokeSprite = this.makestrokeSprite(); + this.setEventMethod(this.strokeSprite); this.buttonSprite = this.makeButtonSprite(); this.setEventMethod(this.buttonSprite); - // button icon sprite - this.icon = null; - this.buttonIconSprite = null; - // button text - this.mainText = this.makeText(""); + this.iconSprite = null; + this.mainText = null; + this.shortcutText = null; + + + this.mainText = this.makeMainText(); this.buttonSprite.addChild(this.mainText); this.shortcutText = this.makeShortcutText(); this.buttonSprite.addChild(this.shortcutText); + this.applyLoadedFont(); + this.mouseOut(); } -ChocoButton.prototype.makeButtonStrokeSprite = function() { // outter(bigger) round rect sprite +ChocoButton.prototype.makestrokeSprite = function() { // outter(bigger) round rect sprite var texture = null; if(this.setting.roundAmount === 0) { texture = new Phaser.Graphics() @@ -44,16 +47,16 @@ ChocoButton.prototype.makeButtonStrokeSprite = function() { // outter(bigger) ro .generateTexture(); } - var buttonStrokeSprite = game.add.sprite( + var strokeSprite = game.add.sprite( this.setting.x - this.setting.width / 2, this.setting.y - this.setting.height / 2, texture ); - // buttonStrokeSprite.anchor.setTo(0.5, 0.5); - buttonStrokeSprite.inputEnabled = true; + // strokeSprite.anchor.setTo(0.5, 0.5); + strokeSprite.inputEnabled = true; - return buttonStrokeSprite; + return strokeSprite; } ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite @@ -95,16 +98,24 @@ ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round re // icon ChocoButton.prototype.addIcon = function(spriteName) { - if(spriteName != null && spriteName.length > 0) { - this.buttonIconSprite = game.add.sprite(0, 0, spriteName); - this.buttonIconSprite.x = this.buttonSprite.width / 2; - this.buttonIconSprite.y = this.buttonSprite.height / 2; - this.buttonIconSprite.anchor.setTo(0.5, 0.5); - this.setIconSize(40); - this.buttonSprite.addChild(this.buttonIconSprite); + if(spriteName === null) + return; - this.mouseOut(); - } + if(spriteName.length === 0) + return; + + // console.log("addIcon : " + spriteName); + this.iconSprite = game.add.sprite(0, 0, spriteName); + this.iconSprite.x = this.buttonSprite.width / 2; + this.iconSprite.y = this.buttonSprite.height / 2; + this.iconSprite.anchor.setTo(0.5, 0.5); + this.setIconSize(40); + this.buttonSprite.addChild(this.iconSprite); + + this.mainText.text = ""; + + this.alignContents(); + this.mouseOut(); } ChocoButton.prototype.setIconSize = function(size) { @@ -113,38 +124,55 @@ ChocoButton.prototype.setIconSize = function(size) { } ChocoButton.prototype.setIconWidth = function(size) { - this.buttonIconSprite.width = size; + this.iconSprite.width = size; } ChocoButton.prototype.setIconHeight = function(size) { - this.buttonIconSprite.height = size; + this.iconSprite.height = size; } // button text -ChocoButton.prototype.makeText = function(textContent) { - var width = this.setting.width / 2 - this.setting.strokeWidthPx; - var height = this.setting.height / 2; - - // var btnText = game.add.text(0, 0, textContent, this.setting.fontStyle) - // .setTextBounds(0, 0, width, this.setting.height); - - var btnText = game.add.text(width, height, textContent, this.setting.fontStyle); - btnText.anchor.set(0.5); - btnText.lineSpacing = ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX; - - return btnText; +ChocoButton.prototype.setFont = function(fontName) { + this.setting.font = fontName; } -ChocoButton.prototype.setIcon = function(icon) { +ChocoButton.prototype.applyLoadedFont = function() { + this.mainText.font = this.setting.font; + this.shortcutText.font = this.setting.font; +} + +ChocoButton.prototype.makeMainText = function() { + var width = this.setting.width / 2; + var height = this.setting.height / 2; + + // var mainText = game.add.text(0, 0, textContent, this.setting.fontStyle) + // .setTextBounds(0, 0, width, this.setting.height); + + var mainText = game.add.text(width, height, ""); + mainText.anchor.set(0.5); + mainText.fontSize = this.setting.fontSize; + // mainText.fontWeight = "bolder"; + mainText.lineSpacing = ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX; + + return mainText; +} + +ChocoButton.prototype.setMainText = function(text) { + this.mainText.text = text; + if(this.iconSprite !== null) + this.iconSprite = null; + this.alignContents(); } ChocoButton.prototype.makeShortcutText = function() { - var shortcutText = game.add.text(this.buttonSprite.width / 2, this.buttonSprite.height * 9 / 10, ""); + var posX = this.buttonSprite.width / 2; + var posY = this.buttonSprite.height / 2; + var shortcutText = game.add.text(posX, posY, ""); shortcutText.anchor.set(0.5); - shortcutText.fontWeight = "normal"; - shortcutText.fontSize = this.buttonSprite.height * 2 / 10; + shortcutText.fontSize = ChocoButton.SHORTCUT_TEXT_FONTSIZE; + shortcutText.fontWeight = "normal"; // shortcutText.addColor(this.setting.textColors.over, 0); shortcutText.addColor("0xffffff", 0); @@ -153,6 +181,53 @@ ChocoButton.prototype.makeShortcutText = function() { ChocoButton.prototype.setShortcutText = function(text) { this.shortcutText.text = text; + this.alignContents(); +} + +ChocoButton.prototype.alignContents = function() { + var mainTextHeight = 0; + var iconSpriteHeight = 0; + var shortcutTextHeight = 0; + + if(this.mainText.text.length > 0) + mainTextHeight = this.mainText.fontSize; + + if (this.iconSprite !== null) + iconSpriteHeight = this.iconSprite.height; + + if(this.shortcutText !== null && this.shortcutText.text.length > 0) + shortcutTextHeight = this.shortcutText.fontSize; + + var mainContentHeightHalf = 0; + if(mainTextHeight > 0) + mainContentHeightHalf = mainTextHeight / 2; + else if(iconSpriteHeight > 0) + mainContentHeightHalf = iconSpriteHeight / 2; + var shortcutTextHeightHalf = shortcutTextHeight / 2; + + var offsetRatio = 7; + var offsetMainText = mainTextHeight / offsetRatio; + var offsetShortcutText = shortcutTextHeight / offsetRatio; + var gap = ChocoButton.SHORTCUT_TEXT_FONTSIZE / 2; + + this.shortcutText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetShortcutText + gap; + + if(shortcutTextHeight === 0) { + if(mainTextHeight > 0) + this.mainText.y = this.buttonSprite.height / 2 + offsetMainText; + else if(iconSpriteHeight > 0) + this.iconSprite.y = this.buttonSprite.height / 2; + } + else { + if(mainTextHeight > 0) + this.mainText.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf + offsetMainText; + else if(iconSpriteHeight > 0) { + this.iconSprite.y = this.buttonSprite.height / 2 - shortcutTextHeightHalf; + // this.iconSprite.y = this.shortcutText.y / 2; + console.log(this.buttonSprite.height); + console.log(this.shortcutText.y); + } + } } @@ -183,23 +258,23 @@ ChocoButton.prototype.setEventMethod = function(target) { } ChocoButton.prototype.mouseOut = function() { - this.buttonStrokeSprite.tint = this.setting.strokeColors.out; + this.strokeSprite.tint = this.setting.strokeColors.out; this.buttonSprite.tint = this.setting.buttonColors.out; - if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null)) - this.buttonIconSprite.tint = this.setting.iconColors.out; + if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null)) + this.iconSprite.tint = this.setting.iconColors.out; this.mainText.fill = this.setting.textColors.out; if(this.shortcutText !== undefined) - this.shortcutText.fill = this.setting.textColors.over; + this.shortcutText.fill = this.setting.textColors.out; } ChocoButton.prototype.mouseOver = function() { - this.buttonStrokeSprite.tint = this.setting.strokeColors.over; + this.strokeSprite.tint = this.setting.strokeColors.over; this.buttonSprite.tint = this.setting.buttonColors.over; - if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null)) - this.buttonIconSprite.tint = this.setting.iconColors.over; + if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null)) + this.iconSprite.tint = this.setting.iconColors.over; this.mainText.fill = this.setting.textColors.over; if(this.shortcutText !== undefined) @@ -207,23 +282,23 @@ ChocoButton.prototype.mouseOver = function() { } ChocoButton.prototype.mouseDown = function() { - this.buttonStrokeSprite.tint = this.setting.strokeColors.down; + this.strokeSprite.tint = this.setting.strokeColors.down; this.buttonSprite.tint = this.setting.buttonColors.down; - if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null)) - this.buttonIconSprite.tint = this.setting.iconColors.down; + if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null)) + this.iconSprite.tint = this.setting.iconColors.down; this.mainText.fill = this.setting.textColors.down; if(this.shortcutText !== undefined) - this.shortcutText.fill = this.setting.textColors.over; + this.shortcutText.fill = this.setting.textColors.down; } ChocoButton.prototype.buttonDisabled = function() { - this.buttonStrokeSprite.tint = this.setting.strokeColors.disabled; + this.strokeSprite.tint = this.setting.strokeColors.disabled; this.buttonSprite.tint = this.setting.buttonColors.disabled; - if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null)) - this.buttonIconSprite.tint = this.setting.iconColors.disabled; + if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null)) + this.iconSprite.tint = this.setting.iconColors.disabled; this.mainText.fill = this.setting.textColors.disabled; if(typeof this.shortcutText !== undefined) @@ -233,16 +308,16 @@ ChocoButton.prototype.buttonDisabled = function() { ChocoButton.prototype.getPosX = function() { - return this.buttonStrokeSprite.x + this.setting.width / 2; + return this.strokeSprite.x + this.setting.width / 2; } ChocoButton.prototype.getPosY = function() { - return this.buttonStrokeSprite.y + y - this.setting.height / 2; + return this.strokeSprite.y + y - this.setting.height / 2; } ChocoButton.prototype.move = function(x, y) { - this.buttonStrokeSprite.x = x - this.setting.width / 2; - this.buttonStrokeSprite.y = y - this.setting.height / 2; + this.strokeSprite.x = x - this.setting.width / 2; + this.strokeSprite.y = y - this.setting.height / 2; this.buttonSprite.x = x - this.setting.width / 2 + this.setting.strokeWidthPx; this.buttonSprite.y = y - this.setting.height / 2 + this.setting.strokeWidthPx; @@ -253,7 +328,7 @@ ChocoButton.prototype.getInputEnabled = function() { } ChocoButton.prototype.setInputEnabled = function(isEnabled) { - this.buttonStrokeSprite.inputEnabled = isEnabled; + this.strokeSprite.inputEnabled = isEnabled; this.buttonSprite.inputEnabled = isEnabled; if(isEnabled === true) { @@ -268,4 +343,6 @@ ChocoButton.prototype.setLineSpacing = function(spacingInPixels) { } ChocoButton.NONE_ICON = ""; -ChocoButton.NONE_BUTTON_TEXT = ""; \ No newline at end of file +ChocoButton.NONE_BUTTON_TEXT = ""; + +ChocoButton.SHORTCUT_TEXT_FONTSIZE = 12; \ No newline at end of file diff --git a/src/game/lib/button/choco_button_setting.js b/src/game/lib/button/choco_button_setting.js index 2005e5d..5034a64 100644 --- a/src/game/lib/button/choco_button_setting.js +++ b/src/game/lib/button/choco_button_setting.js @@ -6,6 +6,7 @@ function ChocoButtonSetting(x, y, width, height) { this.strokeWidthPx = 0; this.roundAmount = 0; + this.fontSize = 10; this.strokeColors = ChocoButtonSetting.DEFAULT_STROKE_COLORS; this.buttonColors = ChocoButtonSetting.DEFAULT_BUTTON_COLORS; @@ -46,6 +47,14 @@ ChocoButtonSetting.prototype.setStrokeWidth = function(width) { this.strokeWidthPx = maxWidth; } +ChocoButtonSetting.prototype.setFont = function(fontName) { + this.font = fontName; +} + +ChocoButtonSetting.prototype.setFontSize = function(size) { + this.fontSize = size; +} + ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) { this.strokeColors = { }; this.strokeColors.out = out; @@ -108,7 +117,7 @@ ChocoButtonSetting.DEFAULT_ICON_COLORS = { }; ChocoButtonSetting.DEFAULT_TEXT_FONT = { - font: "30px Arial", + font: "30px", boundsAlignH: "center", // left, center. right boundsAlignV: "middle", // top, middle, bottom fill: "#fff", diff --git a/src/game/lib/button/choco_setting_button.js b/src/game/lib/button/choco_setting_button.js index 64ac11c..b314dab 100644 --- a/src/game/lib/button/choco_setting_button.js +++ b/src/game/lib/button/choco_setting_button.js @@ -5,6 +5,9 @@ function ChocoSettingButton(clickEvent) { var setting = new ChocoButtonSetting(980, 40, 60, 60); setting.setStrokeWidth(0); setting.setRound(10); + // setting.setFont("Nanum Brush Script"); + setting.setFont("Nanum Gothic"); + setting.setFontSize(20); setting.fontStyle.boundsAlignH = "center"; // left, center. right setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom setting.setStrokeColor( @@ -28,23 +31,25 @@ function ChocoSettingButton(clickEvent) { ChocoButton.call(this, setting, clickEvent); - this.addIcon("tile_choco"); - this.setIconSize(15); + this.setMainText("세팅"); + // this.setMainText("Setting"); + // this.addIcon("tile_choco"); + // this.setIconSize(40); this.setShortcutText("세팅"); + // this.setShortcutText("Setting"); } +ChocoSettingButton.STROKE_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; +ChocoSettingButton.STROKE_COLOR_OVER_HEX = MainColor.DARK_CHOCO_HEX; +ChocoSettingButton.STROKE_COLOR_DOWN_HEX = MainColor.DARK_CHOCO_HEX; +ChocoSettingButton.STROKE_COLOR_DISABLED_HEX = MainColor.DARK_CHOCO_HEX; -ChocoSettingButton.STROKE_COLOR_OUT_HEX = 0xAA6666; -ChocoSettingButton.STROKE_COLOR_OVER_HEX = 0x884444; -ChocoSettingButton.STROKE_COLOR_DOWN_HEX = 0x884444; -ChocoSettingButton.STROKE_COLOR_DISABLED_HEX = 0x333333; +ChocoSettingButton.BUTTON_COLOR_OUT_HEX = MainColor.DARK_CHOCO_HEX; +ChocoSettingButton.BUTTON_COLOR_OVER_HEX = MainColor.LIGHTER_CHOCO_HEX; +ChocoSettingButton.BUTTON_COLOR_DOWN_HEX = MainColor.LIGHT_CHOCO_HEX; +ChocoSettingButton.BUTTON_COLOR_DISABLED_HEX = MainColor.BLACK_HEX; -ChocoSettingButton.BUTTON_COLOR_OUT_HEX = 0xffdddd; -ChocoSettingButton.BUTTON_COLOR_OVER_HEX = 0xddaaaa; -ChocoSettingButton.BUTTON_COLOR_DOWN_HEX = 0xddaaaa; -ChocoSettingButton.BUTTON_COLOR_DISABLED_HEX = 0x666666; - -ChocoSettingButton.TEXT_COLOR_OUT_HEX = "#aa6666"; -ChocoSettingButton.TEXT_COLOR_OVER_HEX = "#884444"; -ChocoSettingButton.TEXT_COLOR_DOWN_HEX = "#884444"; -ChocoSettingButton.TEXT_COLOR_DISABLED_HEX = "#333333"; \ No newline at end of file +ChocoSettingButton.TEXT_COLOR_OUT_HEX = MainColor.WHITE_STRING; +ChocoSettingButton.TEXT_COLOR_OVER_HEX = MainColor.DARK_CHOCO_STRING; +ChocoSettingButton.TEXT_COLOR_DOWN_HEX = MainColor.LIGHTER_CHOCO_STRING; +ChocoSettingButton.TEXT_COLOR_DISABLED_HEX = MainColor.GREY_STRING; \ No newline at end of file diff --git a/src/game/lib/color/main_color.js b/src/game/lib/color/main_color.js index 3f926cc..45508e5 100644 --- a/src/game/lib/color/main_color.js +++ b/src/game/lib/color/main_color.js @@ -17,5 +17,9 @@ MainColor.LIGHTER_CHOCO_HEX = 0xE6A277; MainColor.BLACK_STRING = "#000000"; +MainColor.WHITE_STRING = "#FFFFFF"; +MainColor.GREY_STRING = "#888888"; -MainColor.BLACK_HEX = 0x000000; \ No newline at end of file +MainColor.BLACK_HEX = 0x000000; +MainColor.WHITE_HEX = 0xFFFFFF; +MainColor.GREY_HEX = 0x888888; \ No newline at end of file diff --git a/src/game/main_menu/main.js b/src/game/main_menu/main.js index 8db882f..a630256 100644 --- a/src/game/main_menu/main.js +++ b/src/game/main_menu/main.js @@ -13,7 +13,7 @@ WebFontConfig = { // 'active' means all requested fonts have finished loading // We set a 1 second delay before calling 'createText'. // For some reason if we don't the browser cannot render the text the first time it's created. - active: function() { game.time.events.add(Phaser.Timer.SECOND * 0, fontLoaded, this); }, + active: function() { game.time.events.add(Phaser.Timer.SECOND * 0.1, fontLoaded, this); }, // The Google Fonts we want to load (specify as many as you like in the array) google: { diff --git a/src/game/main_menu/main_menu.js b/src/game/main_menu/main_menu.js index 265bde9..85941e4 100644 --- a/src/game/main_menu/main_menu.js +++ b/src/game/main_menu/main_menu.js @@ -50,12 +50,12 @@ 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.BLACK_HEX, 1); - // 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 = {}; - this.makeAppGroupButtons(); + // this.makeAppGroupButtons(); } MainMenu.prototype.fontLoaded = function() { @@ -75,7 +75,13 @@ MainMenu.prototype.fontLoaded = function() { // screenTopUI.makeFullScreenButton(); // this.loadAllowEditEnterCode(screenTopUI); - console.log(this.appGroupButtons); + // this.appGroupButtons = {}; + this.makeAppGroupButtons(); + + // console.log(this.appGroupButtons); + // this.appGroupButtons.backButton.applyLoadedFont(); + this.appGroupButtons.settingButton.applyLoadedFont(); + // bottom ui /* @@ -188,14 +194,14 @@ MainMenu.prototype.makeQuitButton = function() { var settingButton = new ChocoSettingButton( (function() { console.log("setting"); }).bind(this) ); - var backButton = new ChocoBackButton( - (function() { console.log("back"); }).bind(this) - ); + // var backButton = new ChocoBackButton( + // (function() { console.log("back"); }).bind(this) + // ); // backButton.addIcon("tile_choco"); // backButton.setIconSize(30); this.appGroupButtons.settingButton = settingButton; - this.appGroupButtons.backButton = backButton; + // this.appGroupButtons.backButton = backButton; } MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) {