jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: revise ChocoButton

Browse Source
This commit is contained in:
Jisang Park
2019-07-23 19:06:31 +09:00
parent db2d920589
commit 5a44ab93da
2 changed files with 114 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/button/choco_button.js
+112 -95
View File
@@ -5,64 +5,46 @@ function ChocoButton(setting, clickEvent) {
this.setting = setting;
this.clickEvent = clickEvent;
// button sprite
this.buttonStrokeSprite = this.makeButtonStrokeSprite();
this.setEventMethod(this.buttonStrokeSprite);
this.buttonSprite = this.makeButtonSprite();
this.setEventMethod(this.buttonSprite);
// button icon sprite
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.buttonIconSprite = null;
// button text
this.mainText = this.makeText("");
this.button.addChild(this.mainText);
this.buttonSprite.addChild(this.mainText);
this.shortcutText = this.makeShortcutText();
this.button.addChild(this.shortcutText);
this.buttonSprite.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()
ChocoButton.prototype.makeButtonStrokeSprite = function() { // outter(bigger) round rect sprite
var texture = new Phaser.Graphics()
.beginFill(0xffffff)
.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
.endFill()
.generateTexture();
return game.add.sprite(
var buttonStrokeSprite = game.add.sprite(
this.setting.x - this.setting.width / 2,
this.setting.y - this.setting.height / 2,
btnTexture
texture
);
// buttonStrokeSprite.anchor.setTo(0.5, 0.5);
buttonStrokeSprite.inputEnabled = true;
return buttonStrokeSprite;
}
ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite
@@ -70,26 +52,37 @@ ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round re
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()
var texture = 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(
var buttonSprite = game.add.sprite(
this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx,
this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx,
btnTexture
texture
);
// buttonSprite.anchor.setTo(0.5, 0.5);
buttonSprite.inputEnabled = true;
return buttonSprite;
}
ChocoButton.prototype.makeIcon = function(iconName) {
var icon = game.add.sprite(0, 0, iconName);
icon.width = 40;
icon.height = 40;
return icon;
// icon
ChocoButton.prototype.addIcon = function(spriteName) {
if(spriteName != null && spriteName.length > 0) {
this.buttonIconSprite = game.add.sprite(0, 0, spriteName);
this.buttonIconSprite.x = this.buttonSprite.width / 2;
this.buttonIconSprite.y = this.buttonSprite.height / 2;
this.buttonIconSprite.anchor.setTo(0.5, 0.5);
this.setIconSize(40);
this.buttonSprite.addChild(this.buttonIconSprite);
this.mouseOut();
}
}
ChocoButton.prototype.setIconSize = function(size) {
@@ -98,13 +91,15 @@ ChocoButton.prototype.setIconSize = function(size) {
}
ChocoButton.prototype.setIconWidth = function(size) {
this.buttonIcon.width = size;
this.buttonIconSprite.width = size;
}
ChocoButton.prototype.setIconHeight = function(size) {
this.buttonIcon.height = size;
this.buttonIconSprite.height = size;
}
// button text
ChocoButton.prototype.makeText = function(textContent) {
var width = this.setting.width / 2 - this.setting.strokeWidthPx;
var height = this.setting.height / 2;
@@ -120,101 +115,123 @@ ChocoButton.prototype.makeText = function(textContent) {
}
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, "");
var shortcutText = game.add.text(this.buttonSprite.width / 2, this.buttonSprite.height * 9 / 10, "");
shortcutText.anchor.set(0.5);
shortcutText.fontSize = this.button.height * 2 / 10;
shortcutText.fontSize = this.buttonSprite.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.setShortcutText = function(text) {
this.shortcutText.text = "[ " + text + " ]";
}
// 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.buttonStrokeSprite.tint = this.setting.strokeColors.out;
this.buttonSprite.tint = this.setting.buttonColors.out;
if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null))
this.buttonIconSprite.tint = this.setting.iconColors.out;
this.mainText.fill = this.setting.textColors.out;
if(this.shortcutText != undefined)
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.buttonStrokeSprite.tint = this.setting.strokeColors.over;
this.buttonSprite.tint = this.setting.buttonColors.over;
if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null))
this.buttonIconSprite.tint = this.setting.iconColors.over;
this.mainText.fill = this.setting.textColors.over;
if(this.shortcutText != undefined)
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.buttonStrokeSprite.tint = this.setting.strokeColors.down;
this.buttonSprite.tint = this.setting.buttonColors.down;
if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null))
this.buttonIconSprite.tint = this.setting.iconColors.down;
this.mainText.fill = this.setting.textColors.down;
if(this.shortcutText != undefined)
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.buttonStrokeSprite.tint = this.setting.strokeColors.disabled;
this.buttonSprite.tint = this.setting.buttonColors.disabled;
if((typeof this.buttonIconSprite !== "undefined") && (this.buttonIconSprite !== null))
this.buttonIconSprite.tint = this.setting.iconColors.disabled;
this.mainText.fill = this.setting.textColors.disabled;
if(this.shortcutText != undefined)
if(typeof 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;
return this.buttonStrokeSprite.x + this.setting.width / 2;
}
ChocoButton.prototype.getPosY = function() {
return this.buttonStroke.y + y - this.setting.height / 2;
return this.buttonStrokeSprite.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.buttonStrokeSprite.x = x - this.setting.width / 2;
this.buttonStrokeSprite.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;
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.button.inputEnabled;
return this.buttonSprite.inputEnabled;
}
ChocoButton.prototype.setInputEnabled = function(isEnabled) {
this.buttonStroke.inputEnabled = isEnabled;
this.button.inputEnabled = isEnabled;
this.buttonStrokeSprite.inputEnabled = isEnabled;
this.buttonSprite.inputEnabled = isEnabled;
if(isEnabled === true) {
this.mouseOut();