// 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 = "";