Add: ChocoButton
This commit is contained in:
@@ -0,0 +1,231 @@
|
||||
// ChocoButton.prototype = Object.create();
|
||||
ChocoButton.constructor = ChocoButton;
|
||||
|
||||
function ChocoButton(setting, clickEvent) {
|
||||
this.setting = setting;
|
||||
this.clickEvent = clickEvent;
|
||||
|
||||
this.icon = null;
|
||||
this.mainText = null;
|
||||
this.shortcutText = null;
|
||||
|
||||
this.buttonStroke = this.makeButtonStroke();
|
||||
// this.buttonStroke.anchor.setTo(0.5, 0.5);
|
||||
this.buttonStroke.inputEnabled = true;
|
||||
this.setEventMethod(this.buttonStroke);
|
||||
|
||||
this.button = this.makeButtonSprite();
|
||||
|
||||
// this.button.anchor.setTo(0.5, 0.5);
|
||||
this.button.inputEnabled = true;
|
||||
this.setEventMethod(this.button);
|
||||
|
||||
|
||||
this.mainText = this.makeText("");
|
||||
this.button.addChild(this.mainText);
|
||||
|
||||
this.shortcutText = this.makeShortcutText();
|
||||
this.button.addChild(this.shortcutText);
|
||||
|
||||
this.mouseOut();
|
||||
}
|
||||
|
||||
ChocoButton.prototype.addIcon = function(spriteName) {
|
||||
if(spriteName != null && spriteName.length > 0) {
|
||||
this.icon = this.makeIcon(spriteName);
|
||||
this.setIcon(this.icon);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ChocoButton.prototype.setEventMethod = function(target) {
|
||||
target.events.onInputOver.add(function() { this.mouseOver(); }, this);
|
||||
target.events.onInputOut.add(function() { this.mouseOut(); }, this);
|
||||
target.events.onInputDown.add(function() {
|
||||
this.mouseDown();
|
||||
|
||||
if(this.clickEvent) {
|
||||
this.clickEvent();
|
||||
}
|
||||
}, this);
|
||||
target.events.onInputUp.add(function() { this.mouseOver(); }, this);
|
||||
}
|
||||
|
||||
ChocoButton.prototype.makeButtonStroke = function() { // outter(bigger) round rect sprite
|
||||
var btnTexture = new Phaser.Graphics()
|
||||
.beginFill(0xffffff)
|
||||
.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
|
||||
.endFill()
|
||||
.generateTexture();
|
||||
|
||||
return game.add.sprite(
|
||||
this.setting.x - this.setting.width / 2,
|
||||
this.setting.y - this.setting.height / 2,
|
||||
btnTexture
|
||||
);
|
||||
}
|
||||
|
||||
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 btnTexture = new Phaser.Graphics()
|
||||
.beginFill(0xffffff)
|
||||
.drawRoundedRect(this.setting.strokeWidthPx, this.setting.strokeWidthPx, width, height, innerRoundAmount)
|
||||
.endFill()
|
||||
.generateTexture();
|
||||
|
||||
// return game.add.sprite(0, 0, btnTexture);
|
||||
return game.add.sprite(
|
||||
this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx,
|
||||
this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx,
|
||||
btnTexture
|
||||
);
|
||||
}
|
||||
|
||||
ChocoButton.prototype.makeIcon = function(iconName) {
|
||||
var icon = game.add.sprite(0, 0, iconName);
|
||||
icon.width = 40;
|
||||
icon.height = 40;
|
||||
|
||||
return icon;
|
||||
}
|
||||
|
||||
ChocoButton.prototype.setIconSize = function(size) {
|
||||
this.setIconWidth(size);
|
||||
this.setIconHeight(size);
|
||||
}
|
||||
|
||||
ChocoButton.prototype.setIconWidth = function(size) {
|
||||
this.buttonIcon.width = size;
|
||||
}
|
||||
|
||||
ChocoButton.prototype.setIconHeight = function(size) {
|
||||
this.buttonIcon.height = size;
|
||||
}
|
||||
|
||||
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.setIcon = function(icon) {
|
||||
this.buttonIcon = this.button.addChild(icon);
|
||||
this.buttonIcon.x = this.button.width / 2;
|
||||
this.buttonIcon.y = this.button.height / 2;
|
||||
this.buttonIcon.anchor.setTo(0.5, 0.5);
|
||||
|
||||
this.mouseOut();
|
||||
}
|
||||
|
||||
ChocoButton.prototype.makeShortcutText = function() {
|
||||
var shortcutText = game.add.text(this.button.width / 2, this.button.height * 9 / 10, "");
|
||||
shortcutText.anchor.set(0.5);
|
||||
|
||||
shortcutText.fontSize = this.button.height * 2 / 10;
|
||||
// shortcutText.addColor(this.setting.textColors.over, 0);
|
||||
shortcutText.addColor("0xffffff", 0);
|
||||
|
||||
return shortcutText;
|
||||
}
|
||||
|
||||
ChocoButton.prototype.addShortcutText = function(text) {
|
||||
var scText = "[ " + text + " ]";
|
||||
this.shortcutText.text = scText;
|
||||
|
||||
}
|
||||
|
||||
|
||||
ChocoButton.prototype.mouseOut = function() {
|
||||
this.mainText.fill = this.setting.textColors.out;
|
||||
if(this.shortcutText != undefined)
|
||||
this.shortcutText.fill = this.setting.textColors.over;
|
||||
this.buttonStroke.tint = this.setting.strokeColors.out;
|
||||
this.button.tint = this.setting.buttonColors.out;
|
||||
if(typeof this.buttonIcon !== "undefined") {
|
||||
this.buttonIcon.tint = this.setting.iconColors.out;
|
||||
}
|
||||
}
|
||||
|
||||
ChocoButton.prototype.mouseOver = function() {
|
||||
this.mainText.fill = this.setting.textColors.over;
|
||||
if(this.shortcutText != undefined)
|
||||
this.shortcutText.fill = this.setting.textColors.over;
|
||||
this.buttonStroke.tint = this.setting.strokeColors.over;
|
||||
this.button.tint = this.setting.buttonColors.over;
|
||||
if(typeof this.buttonIcon !== "undefined") {
|
||||
this.buttonIcon.tint = this.setting.iconColors.over;
|
||||
}
|
||||
}
|
||||
|
||||
ChocoButton.prototype.mouseDown = function() {
|
||||
this.mainText.fill = this.setting.textColors.down;
|
||||
if(this.shortcutText != undefined)
|
||||
this.shortcutText.fill = this.setting.textColors.over;
|
||||
this.buttonStroke.tint = this.setting.strokeColors.down;
|
||||
this.button.tint = this.setting.buttonColors.down;
|
||||
if(typeof this.buttonIcon !== "undefined") {
|
||||
this.buttonIcon.tint = this.setting.iconColors.down;
|
||||
}
|
||||
}
|
||||
|
||||
ChocoButton.prototype.buttonDisabled = function() {
|
||||
this.mainText.fill = this.setting.textColors.disabled;
|
||||
if(this.shortcutText != undefined)
|
||||
this.shortcutText.fill = this.setting.textColors.disabled;
|
||||
this.buttonStroke.tint = this.setting.strokeColors.disabled;
|
||||
this.button.tint = this.setting.buttonColors.disabled;
|
||||
if(typeof this.buttonIcon !== "undefined") {
|
||||
this.buttonIcon.tint = this.setting.iconColors.disabled;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
ChocoButton.prototype.getPosX = function() {
|
||||
return this.buttonStroke.x + this.setting.width / 2;
|
||||
}
|
||||
|
||||
ChocoButton.prototype.getPosY = function() {
|
||||
return this.buttonStroke.y + y - this.setting.height / 2;
|
||||
}
|
||||
|
||||
ChocoButton.prototype.move = function(x, y) {
|
||||
this.buttonStroke.x = x - this.setting.width / 2;
|
||||
this.buttonStroke.y = y - this.setting.height / 2;
|
||||
|
||||
this.button.x = x - this.setting.width / 2 + this.setting.strokeWidthPx;
|
||||
this.button.y = y - this.setting.height / 2 + this.setting.strokeWidthPx;
|
||||
}
|
||||
|
||||
ChocoButton.prototype.getInputEnabled = function() {
|
||||
return this.button.inputEnabled;
|
||||
}
|
||||
|
||||
ChocoButton.prototype.setInputEnabled = function(isEnabled) {
|
||||
this.buttonStroke.inputEnabled = isEnabled;
|
||||
this.button.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 = "";
|
||||
Reference in New Issue
Block a user