150 lines
3.1 KiB
JavaScript
150 lines
3.1 KiB
JavaScript
class RoundRectButtonSetting {
|
|
|
|
constructor(width, height, roundAmount) {
|
|
this.width = width;
|
|
this.height = height;
|
|
this.roundAmount = 0;
|
|
if(typeof roundAmount === "undefined") {
|
|
let shorterSide = width > height ? height : width;
|
|
this.roundAmount = shorterSide * 0.1;
|
|
} else {
|
|
this.roundAmount = roundAmount;
|
|
}
|
|
|
|
this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
|
|
this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
|
|
this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
|
|
};
|
|
|
|
}
|
|
|
|
RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
|
|
out: 0xffffff,
|
|
over: 0xddffdd,
|
|
down: 0xaaffaa,
|
|
disabled: 0x333333
|
|
};
|
|
|
|
RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
|
|
out: "#000",
|
|
over: "#333",
|
|
down: "#666",
|
|
disabled: "#999"
|
|
};
|
|
|
|
RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
|
|
font: "30px Arial",
|
|
align: "center",
|
|
fill: "#fff"
|
|
};
|
|
|
|
RoundRectButtonSetting.DEFAULT_LINE_SPACING = -10; // pixels
|
|
RoundRectButtonSetting.WHITE = 0xffffff;
|
|
|
|
|
|
|
|
class RoundRectButton {
|
|
constructor(roundRectSetting, buttonText, clickEvent) {
|
|
this.setting = roundRectSetting;
|
|
this.clickEvent = clickEvent;
|
|
|
|
this.button = this.makeSprite();
|
|
this.text = this.makeText(buttonText);
|
|
|
|
this.button.addChild(this.text);
|
|
this.button.anchor.setTo(0.5, 0.5);
|
|
|
|
this.inputEnabled = true;
|
|
this.setEventMethod();
|
|
|
|
this.mouseOut();
|
|
}
|
|
|
|
setEventMethod() {
|
|
this.button.events.onInputOver.add(function() {
|
|
this.mouseOver();
|
|
}, this);
|
|
|
|
this.button.events.onInputOut.add(function() {
|
|
this.mouseOut();
|
|
}, this);
|
|
|
|
this.button.events.onInputDown.add(function() {
|
|
this.mouseDown();
|
|
|
|
if(this.clickEvent) {
|
|
this.clickEvent();
|
|
}
|
|
}, this);
|
|
|
|
this.button.events.onInputUp.add(function() {
|
|
this.mouseOver();
|
|
}, this);
|
|
}
|
|
|
|
makeSprite() {
|
|
let btnTexture = new Phaser.Graphics()
|
|
.beginFill(RoundRectButtonSetting.WHITE)
|
|
.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
|
|
.endFill()
|
|
.generateTexture();
|
|
|
|
return game.add.sprite(0, 0, btnTexture);
|
|
}
|
|
|
|
makeText(textContent) {
|
|
let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
|
|
btnText.anchor.setTo(0.5);
|
|
btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING;
|
|
|
|
return btnText;
|
|
}
|
|
|
|
|
|
mouseOut() {
|
|
this.button.tint = this.setting.buttonColors.out;
|
|
this.text.fill = this.setting.textColors.out;
|
|
}
|
|
|
|
mouseOver() {
|
|
this.button.tint = this.setting.buttonColors.over;
|
|
this.text.fill = this.setting.textColors.over;
|
|
}
|
|
|
|
mouseDown() {
|
|
this.button.tint = this.setting.buttonColors.down;
|
|
this.text.fill = this.setting.textColors.down;
|
|
}
|
|
|
|
buttonDisabled() {
|
|
this.button.tint = this.setting.buttonColors.disabled;
|
|
this.text.fill = this.setting.textColors.disabled;
|
|
}
|
|
|
|
|
|
|
|
move(x, y) {
|
|
this.button.x = x;
|
|
this.button.y = y;
|
|
}
|
|
|
|
get inputEnabled() {
|
|
return this.button.inputEnabled;
|
|
}
|
|
|
|
set inputEnabled(isEnabled) {
|
|
this.button.inputEnabled = isEnabled;
|
|
|
|
if(isEnabled === true) {
|
|
this.mouseOut();
|
|
} else {
|
|
this.buttonDisabled();
|
|
}
|
|
}
|
|
|
|
set lineSpacing(spacingInPixels) {
|
|
this.text.lineSpacing = spacingInPixels;
|
|
}
|
|
}
|
|
|