jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: ChocoButton content vertical align

Browse Source
This commit is contained in:
Jisang Park
2019-07-25 15:01:44 +09:00
parent c5ddd81e7d
commit 5ca6bd07bb
7 changed files with 187 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/button/choco_back_button.js
+1
View File
@@ -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(
src/game/lib/button/choco_button.js
+134 -57
View File
@@ -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,17 +98,25 @@ 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;
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) {
this.setIconWidth(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) {
@@ -269,3 +344,5 @@ ChocoButton.prototype.setLineSpacing = function(spacingInPixels) {
ChocoButton.NONE_ICON = "";
ChocoButton.NONE_BUTTON_TEXT = "";
ChocoButton.SHORTCUT_TEXT_FONTSIZE = 12;
src/game/lib/button/choco_button_setting.js
+10 -1
View File
@@ -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",
src/game/lib/button/choco_setting_button.js
+20 -15
View File
@@ -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";
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;
src/game/lib/color/main_color.js
+4
View File
@@ -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;
MainColor.WHITE_HEX = 0xFFFFFF;
MainColor.GREY_HEX = 0x888888;
src/game/main_menu/main.js
+1 -1
View File
@@ -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: {
src/game/main_menu/main_menu.js
+14 -8
View File
@@ -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) {