// BasicButton.prototype = Object.create(); BasicButton.constructor = BasicButton; function BasicButton(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(); } BasicButton.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; } BasicButton.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 BasicButton.prototype.addIcon = function(spriteName) { if(spriteName === null) return; if(spriteName.length === 0) return; 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.mouseOut(); } BasicButton.prototype.setIconSize = function(size) { this.setIconWidth(size); this.setIconHeight(size); } BasicButton.prototype.setIconWidth = function(size) { this.iconSprite.width = size; } BasicButton.prototype.setIconHeight = function(size) { this.iconSprite.height = size; this.alignContents(); } // button text BasicButton.prototype.setFont = function(fontName) { this.setting.font = fontName; } BasicButton.prototype.applyLoadedFont = function() { this.mainText.font = this.setting.font; this.shortcutText.font = this.setting.font; } BasicButton.prototype.makeMainText = function() { var width = this.setting.width / 2; var height = this.setting.height / 2; var mainText = game.add.text(width, height, ""); mainText.anchor.set(0.5); mainText.fontSize = this.setting.fontSize; // mainText.fontWeight = "bolder"; mainText.lineSpacing = ButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX; return mainText; } BasicButton.prototype.setMainText = function(text) { this.mainText.text = text; if(this.iconSprite !== null) this.iconSprite = null; this.alignContents(); } BasicButton.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 = this.setting.shortcutFontSize; shortcutText.fontWeight = "normal"; // shortcutText.addColor(this.setting.textColors.over, 0); shortcutText.addColor("0xffffff", 0); return shortcutText; } BasicButton.prototype.setShortcutText = function(text) { this.shortcutText.text = text; this.alignContents(); } BasicButton.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 = (iconSpriteHeight > 0 ? gap = 0 : ButtonSetting.DEFAULT_SHORTCUT_TEXT_FONTSIZE / 2); 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; // - gap / 4; } this.shortcutText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetShortcutText + gap; } // event handler BasicButton.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 ); } BasicButton.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; } BasicButton.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; } BasicButton.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; } BasicButton.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; } BasicButton.prototype.setActive = function(flag) { this.setInputEnabled(flag); if(flag) { this.buttonSprite.alpha = 1; this.strokeSprite.alpha = 1; } else { this.buttonSprite.alpha = 0; this.strokeSprite.alpha = 0; } } BasicButton.prototype.getPosX = function() { return this.strokeSprite.x + this.setting.width / 2; } BasicButton.prototype.getPosY = function() { return this.strokeSprite.y + y - this.setting.height / 2; } BasicButton.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; } BasicButton.prototype.getInputEnabled = function() { return this.buttonSprite.inputEnabled; } BasicButton.prototype.setInputEnabled = function(isEnabled) { this.strokeSprite.inputEnabled = isEnabled; this.buttonSprite.inputEnabled = isEnabled; if(isEnabled === true) this.mouseOut(); else this.buttonDisabled(); } BasicButton.prototype.setLineSpacing = function(spacingInPixels) { this.mainText.lineSpacing = spacingInPixels; } BasicButton.NONE_ICON = ""; BasicButton.NONE_BUTTON_TEXT = "";