Add: button color, event method
This commit is contained in:
@@ -1,181 +1,140 @@
|
||||
class RectSetting {
|
||||
class RoundRectButtonSetting {
|
||||
|
||||
|
||||
|
||||
constructor(width, height, buttonColors) {
|
||||
constructor(width, height, roundAmount) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
|
||||
if(buttonColors != null)
|
||||
this.buttonColors = buttonColors;
|
||||
else
|
||||
this.buttonColors = RectSetting.DEFAULT_BUTTON_COLORS;
|
||||
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;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
RectSetting.DEFAULT_BUTTON_COLORS = {
|
||||
over: "#fff", // over
|
||||
out: "#aaf", // out
|
||||
down: "#faa", // down
|
||||
disabled: "#333" // disabled
|
||||
RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
|
||||
out: 0xffffff,
|
||||
over: 0xddffdd,
|
||||
down: 0xaaffaa,
|
||||
disabled: 0x333333
|
||||
};
|
||||
|
||||
RectSetting.DEFAULT_TEXT_COLORS = {
|
||||
over: "#000", // over
|
||||
out: "#000", // out
|
||||
down: "#000", // down
|
||||
disabled: "#999" // disabled
|
||||
RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
|
||||
out: "#000",
|
||||
over: "#000",
|
||||
down: "#000",
|
||||
disabled: "#999"
|
||||
};
|
||||
|
||||
RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
|
||||
font: "30px Arial",
|
||||
fill: "#fff"
|
||||
};
|
||||
|
||||
|
||||
|
||||
class RoundRectButton {
|
||||
constructor(roundRectSetting) {
|
||||
this.buttonSprite = this.makeSprite(
|
||||
roundRectSetting.width, roundRectSetting.height,
|
||||
roundRectSetting.buttonColors.down
|
||||
);
|
||||
constructor(roundRectSetting, buttonText, clickEvent) {
|
||||
this.setting = roundRectSetting;
|
||||
this.clickEvent = clickEvent;
|
||||
|
||||
this.makeText("Button text", this.buttonSprite);
|
||||
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();
|
||||
}
|
||||
|
||||
makeText(buttonText, button) {
|
||||
let btnText = game.add.text(0, 0, buttonText,
|
||||
{ font: "30px Arial", fill: "#fff" }
|
||||
);
|
||||
btnText.anchor.setTo(0.5);
|
||||
setEventMethod() {
|
||||
this.button.events.onInputOver.add(function() {
|
||||
this.mouseOver();
|
||||
}, this);
|
||||
|
||||
button.addChild(btnText);
|
||||
button.anchor.setTo(0.5, 0.5);
|
||||
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(width, height, color) {
|
||||
makeSprite() {
|
||||
let btnTexture = new Phaser.Graphics()
|
||||
.beginFill(0x000000, 0.5)
|
||||
.drawRoundedRect(0, 4, 200, 56, 5)
|
||||
.beginFill(RoundRectButton.white)
|
||||
.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
|
||||
.endFill()
|
||||
.generateTexture();
|
||||
|
||||
let button = game.add.sprite(0, 0, btnTexture);
|
||||
|
||||
return button;
|
||||
/*
|
||||
// create a new bitmap data object
|
||||
var bmd = game.add.bitmapData(width, height);
|
||||
bmd.ctx.beginPath();
|
||||
bmd.ctx.rect(0, 0, width, height);
|
||||
bmd.ctx.fillStyle = color;
|
||||
bmd.ctx.fill();
|
||||
|
||||
return game.add.sprite(
|
||||
RoundRectButton.defaultPositionX,
|
||||
RoundRectButton.defaultPositionY, bmd
|
||||
);
|
||||
*/
|
||||
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);
|
||||
|
||||
return btnText;
|
||||
}
|
||||
|
||||
|
||||
move(x, y) {
|
||||
this.buttonSprite.x = x;
|
||||
this.buttonSprite.y = y;
|
||||
/*
|
||||
this.outSprite.x = this.overSprite.x = this.downSprite.x = this.disabledSprite.x = x;
|
||||
this.outSprite.y = this.overSprite.y = this.downSprite.y = this.disabledSprite.y = y;
|
||||
this.button.x = x;
|
||||
this.button.y = y;
|
||||
}
|
||||
|
||||
this.outSprite.x = 0;
|
||||
this.overSprite.x = 200;
|
||||
this.downSprite.x = 400;
|
||||
this.disabledSprite.x = 600;
|
||||
mouseOut() {
|
||||
this.button.tint = this.setting.buttonColors.out;
|
||||
this.text.tint = this.setting.textColors.out;
|
||||
}
|
||||
|
||||
this.overSprite.tint = 0xffaaaa; // "#faa"; //roundRectSetting.buttonColors.down;
|
||||
*/
|
||||
mouseOver() {
|
||||
this.button.tint = this.setting.buttonColors.over;
|
||||
this.text.tint = this.setting.textColors.over;
|
||||
}
|
||||
|
||||
mouseDown() {
|
||||
this.button.tint = this.setting.buttonColors.down;
|
||||
this.text.tint = this.setting.textColors.down;
|
||||
}
|
||||
|
||||
buttonDisabled() {
|
||||
this.button.tint = this.setting.buttonColors.disabled;
|
||||
this.text.tint = this.setting.textColors.disabled;
|
||||
}
|
||||
|
||||
get inputEnabled() {
|
||||
return this.button.inputEnabled;
|
||||
}
|
||||
|
||||
set inputEnabled(isEnabled) {
|
||||
this.button.inputEnabled = isEnabled;
|
||||
|
||||
if(isEnabled === true) {
|
||||
this.mouseOut();
|
||||
} else {
|
||||
this.buttonDisabled();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RoundRectButton.defaultPositionX = -1000;
|
||||
RoundRectButton.defaultPositionY = -1000;
|
||||
|
||||
/*
|
||||
var DEFAULT_BUTTON_COLORS = [
|
||||
"#fff", // over
|
||||
"#aaf", // out
|
||||
"#faa", // down
|
||||
"#333" // disabled
|
||||
];
|
||||
|
||||
var DEFAULT_TEXT_COLORS = [
|
||||
"#000", // over
|
||||
"#000", // out
|
||||
"#000", // down
|
||||
"#999" // disabled
|
||||
];
|
||||
|
||||
|
||||
function RectSetting(width, height, buttonColors) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
|
||||
if(buttonColors != null)
|
||||
this.buttonColors = buttonColors;
|
||||
else
|
||||
this.buttonColors = DEFAULT_BUTTON_COLORS;
|
||||
|
||||
}
|
||||
|
||||
|
||||
function ButtonTextSetting(text, textColors) {
|
||||
this.text = text;
|
||||
this.textColors = textColors;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// function RoundRoundRectButton(x, y, text, callback) {
|
||||
function RoundRectButton(roundRectSetting) {
|
||||
|
||||
// use the bitmap data as the texture for the sprite
|
||||
|
||||
// var newTextStyle = $.extend( {}, textStyleBasic);
|
||||
// newTextStyle.font = "bold 28px Arial";
|
||||
|
||||
// this.buttonText = game.add.text(0, 0, text, newTextStyle);
|
||||
// this.buttonText.addColor("#a0d", 0)
|
||||
// this.buttonText.anchor.setTo(0.5, 0.4);
|
||||
|
||||
// this.startButton = game.add.button(x, y, 'button', callback, this, 2, 1, 0);
|
||||
// this.startButton.anchor.set(0.5);
|
||||
// this.startButton.inputEnabled = true;
|
||||
// this.startButton.input.priorityId = 1;
|
||||
// this.startButton.input.useHandCursor = true;
|
||||
// this.startButton.addChild(this.buttonText);
|
||||
|
||||
var overSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[0]);
|
||||
var outSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[1]);
|
||||
var downSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[2]);
|
||||
var disabledSprite = this.makeSprite(roundRectSetting.width, roundRectSetting.height, roundRectSetting.color[3]);
|
||||
}
|
||||
|
||||
RoundRectButton.prototype.makeSprite = function(width, height, color) {
|
||||
var bmd = game.add.bitmapData(width, height);
|
||||
|
||||
var defaultLineWidth = 2;
|
||||
var defaultLineWidthHalf = defaultLineWidth / 2;
|
||||
|
||||
bmd.ctx.beginPath();
|
||||
bmd.ctx.rect(
|
||||
defaultLineWidth, defaultLineWidth,
|
||||
width - defaultLineWidth, height - defaultLineWidth
|
||||
);
|
||||
bmd.ctx.fillStyle = '#aaaa';
|
||||
bmd.ctx.fill();
|
||||
|
||||
bmd.ctx.beginPath();
|
||||
bmd.ctx.lineWidth = defaultLineWidth;
|
||||
bmd.ctx.strokeStyle = "#fff";
|
||||
bmd.ctx.strokeRect(
|
||||
defaultLineWidthHalf, defaultLineWidthHalf,
|
||||
width - defaultLineWidth, height - defaultLineWidth
|
||||
);
|
||||
|
||||
return game.add.sprite(300, 300, bmd);
|
||||
}
|
||||
*/
|
||||
RoundRectButton.defaultRoundAmount = 10;
|
||||
RoundRectButton.white = 0xffffff;
|
||||
|
||||
@@ -47,10 +47,13 @@ function create() {
|
||||
game.stage.backgroundColor = '#4d4d4d';
|
||||
graphics = game.add.graphics(0, 0);
|
||||
|
||||
|
||||
let button = new RoundRectButton(new RectSetting(200, 100));
|
||||
let setting = new RoundRectButtonSetting(200, 100);
|
||||
let button = new RoundRectButton(setting, "둥근 모서리\n버튼", dummy);
|
||||
button.move(200, 200);
|
||||
console.log(button);
|
||||
}
|
||||
|
||||
function dummy() {
|
||||
console.log("print dummy");
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
Reference in New Issue
Block a user