// BasicTab.prototype = Object.create(); BasicTab.constructor = BasicTab; function BasicTab() { this.activate = true; this.buttonSprite = null; this.activeLineSprite = null; this.iconSprite = null; this.mainText = null; this.subText = null; this.posY = 0; } BasicTab.prototype.createButton = function(setting, clickEvent) { this.setting = setting; this.clickEvent = clickEvent; // button sprite this.buttonSprite = this.makeButtonSprite(); this.setEventMethod(this.buttonSprite); this.activeLineSprite = this.makeActiveLineSprite(); this.setEventMethod(this.activeLineSprite); this.buttonSprite.addChild(this.activeLineSprite); this.mainText = this.makeMainText(); this.buttonSprite.addChild(this.mainText); this.subText = this.makeSubText(); // this.subText.fontWeight = "bold"; this.buttonSprite.addChild(this.subText); this.applyLoadedFont(); this.mouseOut(); } BasicTab.prototype.makeButtonSprite = function() { var setting = this.setting; // console.log("strokeWidthPx : " + setting.strokeWidthPx); // console.log("round : " + setting.roundAmount); var btnWidth = setting.width; var btnHeight = setting.height; var texture = null; texture = new Phaser.Graphics() .beginFill(0xffffff) .drawRect(0, 0, btnWidth, btnHeight) .endFill() .generateTexture(); var posX = setting.x - btnWidth / 2; var posY = setting.y - btnHeight / 2; var buttonSprite = game.add.sprite(posX, posY, texture); this.posY = posY; buttonSprite.inputEnabled = true; return buttonSprite; } BasicTab.prototype.makeActiveLineSprite = function() { var setting = this.setting; // console.log("strokeWidthPx : " + setting.strokeWidthPx); // console.log("round : " + setting.roundAmount); var OFFSET_POS_Y = setting.height - 6; var ACTIVE_LINE_HEIGHT = 3; var buttonWidth = setting.width; var lineWidth = buttonWidth * 7 / 8; var lineHeight = ACTIVE_LINE_HEIGHT; var texture = null; texture = new Phaser.Graphics() // .beginFill(0xffffff) .beginFill(MainColor.WHITE_HEX) .drawRoundedRect(0, 0, lineWidth, lineHeight, 1) .endFill() .generateTexture(); var posX = setting.width / 2 - lineWidth / 2; var posY = OFFSET_POS_Y; var activeLineSprite = game.add.sprite(posX, posY, texture); activeLineSprite.inputEnabled = true; return activeLineSprite; } // icon BasicTab.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(50); this.buttonSprite.addChild(this.iconSprite); this.mainText.text = ""; this.mouseOut(); } BasicTab.prototype.setIconSize = function(size) { this.setIconWidth(size); this.setIconHeight(size); } BasicTab.prototype.setIconWidth = function(size) { this.iconSprite.width = size; } BasicTab.prototype.setIconHeight = function(size) { this.iconSprite.height = size; this.alignContents(); } // button text BasicTab.prototype.setFont = function(fontName) { this.setting.font = fontName; } BasicTab.prototype.applyLoadedFont = function() { this.mainText.font = this.setting.font; this.subText.font = this.setting.font; } BasicTab.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.mainFontSize; mainText.fontWeight = "bolder"; mainText.lineSpacing = TabSetting.DEFAULT_TEXT_LINE_SPACING_PX; return mainText; } BasicTab.prototype.setMainText = function(text) { this.mainText.text = text; if(this.iconSprite !== null) this.iconSprite = null; this.alignContents(); } BasicTab.prototype.setMainTextFontWeight = function(option) { if(option === null || option === "") this.mainText.fontWeight = "normal"; else this.mainText.fontWeight = option; } BasicTab.prototype.makeSubText = function() { var posX = this.buttonSprite.width / 2; var posY = this.buttonSprite.height / 2; var subText = game.add.text(posX, posY, ""); subText.anchor.set(0.5); subText.fontSize = BasicTab.SUBTEXT_FONTSIZE; subText.fontSize = this.setting.subFontSize; subText.fontWeight = "normal"; // subText.addColor(this.setting.textColors.over, 0); subText.addColor("0xffffff", 0); return subText; } BasicTab.prototype.setSubText = function(text) { this.subText.text = text; this.alignContents(); } BasicTab.prototype.setActive = function(flag) { this.activate = flag; if(this.activate) this.activeLineSprite.alpha = 1; else this.activeLineSprite.alpha = 0; } BasicTab.prototype.alignContents = function() { var mainTextHeight = 0; var iconSpriteHeight = 0; var subTextHeight = 0; if(this.mainText.text.length > 0) mainTextHeight = this.mainText.fontSize; if (this.iconSprite !== null) iconSpriteHeight = this.iconSprite.height; if(this.subText !== null && this.subText.text.length > 0) subTextHeight = this.subText.fontSize; var mainContentHeightHalf = 0; if(mainTextHeight > 0) mainContentHeightHalf = mainTextHeight / 2; else if(iconSpriteHeight > 0) mainContentHeightHalf = iconSpriteHeight / 2; var subTextHeightHalf = subTextHeight / 2; var offsetRatio = 7; var offsetMainText = mainTextHeight / offsetRatio; var offsetSubText = subTextHeight / offsetRatio; var gap = (iconSpriteHeight > 0 ? 0 : BasicTab.SUBTEXT_FONTSIZE / 2); if(subTextHeight === 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 - subTextHeightHalf + offsetMainText; else if(iconSpriteHeight > 0) this.iconSprite.y = this.buttonSprite.height / 2 - subTextHeightHalf; } // this.subText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetSubText + gap; this.subText.y = this.buttonSprite.height / 2 + mainContentHeightHalf + offsetSubText - 8; } // event handler BasicTab.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 ); } BasicTab.prototype.mouseOut = function() { if(!this.buttonSprite.inputEnabled) return; 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.subText !== undefined) this.subText.fill = this.setting.textColors.out; this.activeLineSprite.tint = this.setting.activeLineColors.out; } BasicTab.prototype.mouseOver = function() { if(!this.buttonSprite.inputEnabled) return; 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.subText !== undefined) this.subText.fill = this.setting.textColors.over; this.activeLineSprite.tint = this.setting.activeLineColors.over; } BasicTab.prototype.mouseDown = function() { if(!this.buttonSprite.inputEnabled) return; 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.subText !== undefined) this.subText.fill = this.setting.textColors.down; this.activeLineSprite.tint = this.setting.activeLineColors.down; } BasicTab.prototype.buttonDisabled = function() { 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.subText !== undefined) this.subText.fill = this.setting.textColors.disabled; this.activeLineSprite.tint = this.setting.activeLineColors.disabled; } BasicTab.prototype.getPosX = function() { return this.buttonSprite.x; } BasicTab.prototype.getPosY = function() { return this.buttonSprite.y; } BasicTab.prototype.move = function(x, y) { this.buttonSprite.x = x - this.setting.width / 2; this.buttonSprite.y = y - this.setting.height / 2; } BasicTab.prototype.getInputEnabled = function() { return this.buttonSprite.inputEnabled; } BasicTab.prototype.setInputEnabled = function(isEnabled) { this.buttonSprite.inputEnabled = isEnabled; this.activeLineSprite.inputEnabled = isEnabled; if(isEnabled === true) { this.mouseOut(); } else { this.buttonDisabled(); } } BasicTab.prototype.setLineSpacing = function(spacingInPixels) { this.mainText.lineSpacing = spacingInPixels; } BasicTab.prototype.show = function() { this.buttonSprite.y = this.posY; } BasicTab.prototype.hide = function() { this.buttonSprite.y = BasicTab.HIDE_POS_Y; } BasicTab.NONE_ICON = ""; BasicTab.NONE_BUTTON_TEXT = ""; BasicTab.SUBTEXT_FONTSIZE = 12; BasicTab.HIDE_POS_Y = 1000;