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

Add: ChocoButton

Browse Source
This commit is contained in:
Jisang Park
2019-07-22 11:09:27 +09:00
parent 72a8a39770
commit db2d920589
4 changed files with 385 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/button/choco_button.js
+231
View File
@@ -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 = "";
src/game/lib/button/choco_button_setting.js
+93
View File
@@ -0,0 +1,93 @@
function ChocoButtonSetting(x, y, width, height, roundAmount) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.roundAmount = 0;
if(typeof roundAmount === "undefined") {
var shorterSide = width > height ? height : width;
this.roundAmount = shorterSide * 0.1;
} else {
this.roundAmount = roundAmount;
}
this.strokeWidthPx = ChocoButtonSetting.DEFAULT_STROKE_WIDTH_PX;
this.strokeColors = ChocoButtonSetting.DEFAULT_STROKE_COLORS;
this.buttonColors = ChocoButtonSetting.DEFAULT_BUTTON_COLORS;
this.textColors = ChocoButtonSetting.DEFAULT_TEXT_COLORS;
this.iconColors = ChocoButtonSetting.DEFAULT_ICON_COLORS;
this.fontStyle = ChocoButtonSetting.DEFAULT_TEXT_FONT;
};
ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) {
this.strokeColors = { };
this.strokeColors.out = out;
this.strokeColors.over = over;
this.strokeColors.down = down;
this.strokeColors.disabled = disabled;
}
ChocoButtonSetting.prototype.setButtonColor = function(out, over, down, disabled) {
this.buttonColors = { };
this.buttonColors.out = out;
this.buttonColors.over = over;
this.buttonColors.down = down;
this.buttonColors.disabled = disabled;
}
ChocoButtonSetting.prototype.setTextColor = function(out, over, down, disabled) {
this.textColors = { };
this.textColors.out = out;
this.textColors.over = over;
this.textColors.down = down;
this.textColors.disabled = disabled;
}
ChocoButtonSetting.prototype.setIconColor = function(out, over, down, disabled) {
this.iconColors = { };
this.iconColors.out = out;
this.iconColors.over = over;
this.iconColors.down = down;
this.iconColors.disabled = disabled;
}
ChocoButtonSetting.DEFAULT_STROKE_COLORS = {
out: 0x666666,
over: 0x333333,
down: 0x333333,
disabled: 0x666666
};
ChocoButtonSetting.DEFAULT_BUTTON_COLORS = {
out: 0xffffff,
over: 0xddffdd,
down: 0xaaffaa,
disabled: 0x333333
};
ChocoButtonSetting.DEFAULT_TEXT_COLORS = {
out: "#000",
over: "#333",
down: "#666",
disabled: "#999"
};
ChocoButtonSetting.DEFAULT_ICON_COLORS = {
out: 0xffffff,
over: 0xddffdd,
down: 0xaaffaa,
disabled: 0x333333
};
ChocoButtonSetting.DEFAULT_TEXT_FONT = {
font: "30px Arial",
boundsAlignH: "center", // left, center. right
boundsAlignV: "middle", // top, middle, bottom
fill: "#fff",
align: "center"
};
ChocoButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel
ChocoButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel