Fix: ChocoButton content vertical align

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(

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.strokeSprite = this.makestrokeSprite();
-	this.setEventMethod(this.buttonStrokeSprite);
+	this.setEventMethod(this.strokeSprite);
 
 	this.buttonSprite = this.makeButtonSprite();
 	this.setEventMethod(this.buttonSprite);
 
-	// button icon sprite
-	this.icon = null;
-	this.buttonIconSprite = null;
 
-	// button text
+	this.iconSprite = null;
-	this.mainText = this.makeText("");
+	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);
+	// strokeSprite.anchor.setTo(0.5, 0.5);
-	buttonStrokeSprite.inputEnabled = true;
+	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) {
+	if(spriteName === null)
-		this.buttonIconSprite = game.add.sprite(0, 0, spriteName);
+		return;
-		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);
 
-		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) {
+ChocoButton.prototype.setFont = function(fontName) {
-	var width = this.setting.width / 2 - this.setting.strokeWidthPx;
+	this.setting.font = fontName;
-	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.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))
+	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
-		this.buttonIconSprite.tint = this.setting.iconColors.out;
+		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))
+	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
-		this.buttonIconSprite.tint = this.setting.iconColors.over;
+		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))
+	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
-		this.buttonIconSprite.tint = this.setting.iconColors.down;
+		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))
+	if((typeof this.iconSprite !== "undefined") && (this.iconSprite !== null))
-		this.buttonIconSprite.tint = this.setting.iconColors.disabled;
+		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.strokeSprite.x = x - this.setting.width / 2;
-	this.buttonStrokeSprite.y = y - this.setting.height / 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

@@ -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

@@ -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.setMainText("세팅");
-	this.setIconSize(15);
+	// 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.BUTTON_COLOR_OUT_HEX			= MainColor.DARK_CHOCO_HEX;
-ChocoSettingButton.STROKE_COLOR_OVER_HEX		= 0x884444;
+ChocoSettingButton.BUTTON_COLOR_OVER_HEX		= MainColor.LIGHTER_CHOCO_HEX;
-ChocoSettingButton.STROKE_COLOR_DOWN_HEX		= 0x884444;
+ChocoSettingButton.BUTTON_COLOR_DOWN_HEX		= MainColor.LIGHT_CHOCO_HEX;
-ChocoSettingButton.STROKE_COLOR_DISABLED_HEX	= 0x333333;
+ChocoSettingButton.BUTTON_COLOR_DISABLED_HEX	= MainColor.BLACK_HEX;
 
-ChocoSettingButton.BUTTON_COLOR_OUT_HEX		= 0xffdddd;
+ChocoSettingButton.TEXT_COLOR_OUT_HEX			= MainColor.WHITE_STRING;
-ChocoSettingButton.BUTTON_COLOR_OVER_HEX		= 0xddaaaa;
+ChocoSettingButton.TEXT_COLOR_OVER_HEX			= MainColor.DARK_CHOCO_STRING;
-ChocoSettingButton.BUTTON_COLOR_DOWN_HEX		= 0xddaaaa;
+ChocoSettingButton.TEXT_COLOR_DOWN_HEX			= MainColor.LIGHTER_CHOCO_STRING;
-ChocoSettingButton.BUTTON_COLOR_DISABLED_HEX	= 0x666666;
+ChocoSettingButton.TEXT_COLOR_DISABLED_HEX		= MainColor.GREY_STRING;
-
-ChocoSettingButton.TEXT_COLOR_OUT_HEX			= "#aa6666";
-ChocoSettingButton.TEXT_COLOR_OVER_HEX			= "#884444";
-ChocoSettingButton.TEXT_COLOR_DOWN_HEX			= "#884444";
-ChocoSettingButton.TEXT_COLOR_DISABLED_HEX		= "#333333";

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;
+MainColor.WHITE_HEX				= 0xFFFFFF;
+MainColor.GREY_HEX				= 0x888888;

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: {

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.BLACK_HEX, 1);
-	// graphics.beginFill(MainColor.CHOCO_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(
+	// var backButton = new ChocoBackButton(
-		(function() { console.log("back"); }).bind(this)
+	// 	(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) {