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

Add: BackButton

Browse Source
This commit is contained in:
Jisang Park
2018-05-07 10:29:19 +09:00
parent 6a027658fa
commit 5d95abf86e
5 changed files with 117 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/back_button.js
+28
View File
@@ -0,0 +1,28 @@
class BackButton {
constructor(clickEvent) {
let setting = new RoundRectButtonSetting(50, 50);
setting.setStrokeColor(
0x884444,
0xaa6666,
0xaa6666,
0x333333
);
setting.setButtonColor(
0xddaaaa,
0xffdddd,
0xffdddd,
0x666666
);
setting.setTextColor(
"#844",
"#a66",
"#a66",
"#333"
);
this.button = new RoundRectButton(setting, "<", clickEvent);
this.button.move(30, 30);
}
}
src/game/lib/round_rect_button.js
+81 -40
View File
@@ -10,14 +10,45 @@ class RoundRectButtonSetting {
} else {
this.roundAmount = roundAmount;
}
this.strokeWidth = RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX;
this.strokeColors = RoundRectButtonSetting.DEFAULT_STROKE_COLORS;
this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
};
setStrokeColor(out, over, down, disabled) {
this.strokeColors.out = out;
this.strokeColors.over = over;
this.strokeColors.odownut = down;
this.strokeColors.disabled = disabled;
}
setButtonColor(out, over, down, disabled) {
this.buttonColors.out = out;
this.buttonColors.over = over;
this.buttonColors.odownut = down;
this.buttonColors.disabled = disabled;
}
setTextColor(out, over, down, disabled) {
this.textColors.out = out;
this.textColors.over = over;
this.textColors.odownut = down;
this.textColors.disabled = disabled;
}
}
RoundRectButtonSetting.DEFAULT_STROKE_COLORS = {
out: 0x666666,
over: 0x333333,
down: 0x333333,
disabled: 0x666666
};
RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
out: 0xffffff,
over: 0xddffdd,
@@ -34,11 +65,13 @@ RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
font: "30px Arial",
align: "center",
boundsAlignH: "center", // left, center. right
boundsAlignV: "middle", // top, middle, bottom
fill: "#fff"
};
RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX = -10; // pixels
RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel
RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel
@@ -47,54 +80,52 @@ class RoundRectButton {
this.setting = roundRectSetting;
this.clickEvent = clickEvent;
this.button = this.makeSprite();
this.buttonStroke = this.makeButtonStroke();
// this.buttonStroke.anchor.setTo(0.5, 0.5);
this.buttonStroke.inputEnabled = true;
this.setEventMethod(this.buttonStroke);
this.text = this.makeText(buttonText);
this.button = this.makeButtonSprite();
this.button.addChild(this.text);
this.button.anchor.setTo(0.5, 0.5);
this.inputEnabled = true;
this.setEventMethod();
// this.button.anchor.setTo(0.5, 0.5);
this.button.inputEnabled = true;
this.setEventMethod(this.button);
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() {
setEventMethod(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);
this.button.events.onInputUp.add(function() {
this.mouseOver();
}, this);
target.events.onInputUp.add(function() { this.mouseOver(); }, this);
}
makeSprite() {
const STROKE_WIDTH_PX = 5;
let width = this.setting.width - STROKE_WIDTH_PX * 2;
let height = this.setting.height - STROKE_WIDTH_PX * 2;
let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width);
console.log("this.setting.roundAmount " + this.setting.roundAmount);
console.log("innerRoundAmount " + innerRoundAmount);
makeButtonStroke() {
let btnTexture = new Phaser.Graphics()
.beginFill(0xaaaaaa)
.beginFill(0xffffff)
.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
.endFill()
.generateTexture();
return game.add.sprite(0, 0, btnTexture);
}
makeButtonSprite() {
let width = this.setting.width - this.setting.strokeWidth * 2;
let height = this.setting.height - this.setting.strokeWidth * 2;
let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width);
let btnTexture = new Phaser.Graphics()
.beginFill(0xffffff)
.drawRoundedRect(STROKE_WIDTH_PX, STROKE_WIDTH_PX, width, height, innerRoundAmount)
.drawRoundedRect(this.setting.strokeWidth, this.setting.strokeWidth, width, height, innerRoundAmount)
.endFill()
.generateTexture();
@@ -102,39 +133,48 @@ class RoundRectButton {
}
makeText(textContent) {
let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
btnText.anchor.setTo(0.5);
btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX;
let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle)
.setTextBounds(0, 0, this.setting.width, this.setting.height);
btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX;
// btnText.anchor.setTo(0.5);
return btnText;
}
mouseOut() {
this.button.tint = this.setting.buttonColors.out;
this.text.fill = this.setting.textColors.out;
this.buttonStroke.tint = this.setting.strokeColors.out;
this.button.tint = this.setting.buttonColors.out;
}
mouseOver() {
this.button.tint = this.setting.buttonColors.over;
this.text.fill = this.setting.textColors.over;
this.buttonStroke.tint = this.setting.strokeColors.over;
this.button.tint = this.setting.buttonColors.over;
}
mouseDown() {
this.button.tint = this.setting.buttonColors.down;
this.text.fill = this.setting.textColors.down;
this.buttonStroke.tint = this.setting.strokeColors.down;
this.button.tint = this.setting.buttonColors.down;
}
buttonDisabled() {
this.button.tint = this.setting.buttonColors.disabled;
this.text.fill = this.setting.textColors.disabled;
this.buttonStroke.tint = this.setting.strokeColors.disabled;
this.button.tint = this.setting.buttonColors.disabled;
}
move(x, y) {
this.button.x = x;
this.button.y = 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.strokeWidth;
this.button.y = y - this.setting.height / 2+ this.setting.strokeWidth;
}
get inputEnabled() {
@@ -142,6 +182,7 @@ class RoundRectButton {
}
set inputEnabled(isEnabled) {
this.buttonStroke.inputEnabled = isEnabled;
this.button.inputEnabled = isEnabled;
if(isEnabled === true) {
src/game/lib/screen_bottom.js
-5
View File
@@ -18,11 +18,6 @@ class ScreenBottom {
.beginFill(0xffffff, 0.1)
.drawRect(0, this.bottomAreaPositionY, game.world.width, this.BOTTOM_BAR_HEIGHT);
this.printBottomLeftText(playerName);
this.printBottomCenterText("메뉴");
this.printBottomRightText(playerName);
let textStyleInfo = textStyleBasic; //$.extend( {}, textStyleBasic);
textStyleInfo.font = "32px Arial";
textStyleInfo.align = "right";