chocomae/src/game/lib/button/choco_button.js

// ChocoButton.prototype = Object.create();
ChocoButton.constructor = ChocoButton;

function ChocoButton(setting, clickEvent) {
	this.setting = setting;
	this.clickEvent = clickEvent;

	// button sprite
	this.strokeSprite = this.makestrokeSprite();
	this.setEventMethod(this.strokeSprite);

	this.buttonSprite = this.makeButtonSprite();
	this.setEventMethod(this.buttonSprite);


	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.makestrokeSprite = function() {	// outter(bigger) round rect sprite
	var texture = null;
	if(this.setting.roundAmount === 0) {
		texture = new Phaser.Graphics()
			.beginFill(0xffffff)
			.drawRect(0, 0, this.setting.width, this.setting.height)
			.endFill()
			.generateTexture();
	} else {
		texture = new Phaser.Graphics()
			.beginFill(0xffffff)
			.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
			.endFill()
			.generateTexture();
	}

	var strokeSprite = game.add.sprite(
		this.setting.x - this.setting.width / 2,
		this.setting.y - this.setting.height / 2,
		texture
	);

	// strokeSprite.anchor.setTo(0.5, 0.5);
	strokeSprite.inputEnabled = true;

	return strokeSprite;
}

ChocoButton.prototype.makeButtonSprite = function() {	// inner(smaller) round rect sprite
	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 = null;
	if(this.setting.roundAmount === 0) {
		texture = new Phaser.Graphics()
			.beginFill(0xffffff)
			.drawRect(0, 0, btnWidth, btnHeight)
			.endFill()
			.generateTexture();
	} else {
		texture = new Phaser.Graphics()
			.beginFill(0xffffff)
			.drawRoundedRect(0, 0, btnWidth, btnHeight, btnRoundAmount)
			.endFill()
			.generateTexture();
	}

	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;

	return buttonSprite;
}


// icon
ChocoButton.prototype.addIcon = function(spriteName) {
	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);
	this.setIconHeight(size);
}

ChocoButton.prototype.setIconWidth = function(size) {
	this.iconSprite.width = size;
}

ChocoButton.prototype.setIconHeight = function(size) {
	this.iconSprite.height = size;
}


// button text
ChocoButton.prototype.setFont = function(fontName) {
	this.setting.font = fontName;
}

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 posX = this.buttonSprite.width / 2;
	var posY = this.buttonSprite.height / 2;
	var shortcutText = game.add.text(posX, posY, "");
	shortcutText.anchor.set(0.5);

	shortcutText.fontSize = ChocoButton.SHORTCUT_TEXT_FONTSIZE;
	shortcutText.fontWeight = "normal";
	// shortcutText.addColor(this.setting.textColors.over, 0);
	shortcutText.addColor("0xffffff", 0);

	return shortcutText;
}

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);
		}
	}
}


// event handler
ChocoButton.prototype.setEventMethod = function(target) {
	target.events.onInputOver.add(
		(function() { this.mouseOver(); }).bind(this),
		this
	);
	target.events.onInputOut.add(
		(function() { this.mouseOut(); }).bind(this),
		this
	);
	target.events.onInputDown.add(
		(function() {
			this.mouseDown();

			if(this.clickEvent) {
				this.clickEvent();
			}
		}).bind(this),
		this
	);
	target.events.onInputUp.add(
		(function() { this.mouseOver(); }).bind(this),
		this
	);
}

ChocoButton.prototype.mouseOut = function() {
	this.strokeSprite.tint = this.setting.strokeColors.out;
	this.buttonSprite.tint = this.setting.buttonColors.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.out;
}

ChocoButton.prototype.mouseOver = function() {
	this.strokeSprite.tint = this.setting.strokeColors.over;
	this.buttonSprite.tint = this.setting.buttonColors.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)
		this.shortcutText.fill = this.setting.textColors.over;
}

ChocoButton.prototype.mouseDown = function() {
	this.strokeSprite.tint = this.setting.strokeColors.down;
	this.buttonSprite.tint = this.setting.buttonColors.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.down;
}

ChocoButton.prototype.buttonDisabled = function() {
	this.strokeSprite.tint = this.setting.strokeColors.disabled;
	this.buttonSprite.tint = this.setting.buttonColors.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)
		this.shortcutText.fill = this.setting.textColors.disabled;
}



ChocoButton.prototype.getPosX = function() {
	return this.strokeSprite.x + this.setting.width / 2;
}

ChocoButton.prototype.getPosY = function() {
	return this.strokeSprite.y + y - this.setting.height / 2;
}

ChocoButton.prototype.move = function(x, y) {
	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;
}

ChocoButton.prototype.getInputEnabled = function() {
	return this.buttonSprite.inputEnabled;
}

ChocoButton.prototype.setInputEnabled = function(isEnabled) {
	this.strokeSprite.inputEnabled = isEnabled;
	this.buttonSprite.inputEnabled = isEnabled;

	if(isEnabled === true) {
		this.mouseOut();
	} else {
		this.buttonDisabled();
	}
}

ChocoButton.prototype.setLineSpacing = function(spacingInPixels) {
	this.mainText.lineSpacing = spacingInPixels;
}

ChocoButton.NONE_ICON			= "";
ChocoButton.NONE_BUTTON_TEXT	= "";

ChocoButton.SHORTCUT_TEXT_FONTSIZE	= 12;