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

Fix: RoundRectSetting.x, y

Browse Source
This commit is contained in:
Jisang Park
2018-06-10 11:46:23 +09:00
parent ba7ec369ac
commit 37129bbe23
12 changed files with 126 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/image/ui/hand_left.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

resources/image/ui/hand_right.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

src/game/lib/app_button.js
+1 -69
View File
@@ -1,76 +1,8 @@
class AppButton {
constructor(x, y, setting, iconName, buttonText, clickEvent) {
/*
let setting = new RoundRectButtonSetting(150, 150);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 5;
if(type === AppButton.TYPE_MOUSE) {
setting.setStrokeColor(
0xaa6666,
0x884444,
0x884444,
0x333333
);
setting.setButtonColor(
0xffdddd,
0xddaaaa,
0xddaaaa,
0x666666
);
setting.setTextColor(
"#a66",
"#844",
"#844",
"#333"
);
} else { // TYPE_TYPING
setting.setStrokeColor(
0x444488,
0x6666aa,
0x6666aa,
0x333333
);
setting.setButtonColor(
0xaaaadd,
0xddddff,
0xddddff,
0x666666
);
setting.setTextColor(
"#844",
"#a66",
"#a66",
"#333"
);
}
*/
constructor(setting, iconName, buttonText, clickEvent) {
this.button = new RoundRectButton(setting, iconName, buttonText, clickEvent);
this.move(x, y);
// if(iconName.length > 0) {
// let icon_fullscreen = game.add.sprite(0, 0, iconName);
// icon_fullscreen.width = 80;
// icon_fullscreen.height = 80;
// this.button.setIcon(icon_fullscreen);
// }
// if(buttonText.length > 0) {
// const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
// let icon_text = game.add.text(0, 0, buttonText, style);
// icon_text.setTextBounds(x - 50, y - 50, 100, 100);
// icon_text.stroke = "#333";
// icon_text.strokeThickness = 5;
// }
}
move(x, y) {
this.button.move(x, y);
}
}
AppButton.TYPE_MOUSE_APP = 0;
src/game/lib/back_button.js
+1 -2
View File
@@ -1,7 +1,7 @@
class BackButton {
constructor(clickEvent) {
let setting = new RoundRectButtonSetting(50, 50);
let setting = new RoundRectButtonSetting(30, 30, 50, 50);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 3;
@@ -28,7 +28,6 @@ class BackButton {
setting,
RoundRectButton.NONE_ICON, "<", clickEvent
);
button.move(30, 30);
}
}
src/game/lib/fullscreen_button.js
+1 -2
View File
@@ -5,7 +5,7 @@ class FullscreenButton {
this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT;
let setting = new RoundRectButtonSetting(50, 50);
let setting = new RoundRectButtonSetting(this.game.world.width - 30, 30, 50, 50);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 3;
@@ -32,7 +32,6 @@ class FullscreenButton {
setting, RoundRectButton.NONE_ICON, RoundRectButton.NONE_BUTTON_TEXT,
() => this.clickEvent()
);
button.move(this.game.world.width - 30, 30);
let icon_fullscreen = game.add.sprite(0, 0, 'icon_fullscreen');
icon_fullscreen.width = 20;
src/game/lib/game_app_button.js
+2 -23
View File
@@ -1,7 +1,7 @@
class GameAppButton extends AppButton {
constructor(x, y, type, iconName, buttonText, clickEvent) {
let setting = new RoundRectButtonSetting(GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT);
let setting = new RoundRectButtonSetting(x, y, GameAppButton.BUTTON_WIDTH, GameAppButton.BUTTON_HEIGHT);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 5;
@@ -47,28 +47,7 @@ class GameAppButton extends AppButton {
);
}
// this.button = new RoundRectButton(setting, buttonText, clickEvent);
super(x, y, setting, iconName, buttonText, clickEvent);
this.move(x, y);
// if(iconName.length > 0) {
// let icon_fullscreen = game.add.sprite(0, 0, iconName);
// icon_fullscreen.width = 80;
// icon_fullscreen.height = 80;
// this.button.setIcon(icon_fullscreen);
// }
// if(appText.length > 0) {
// const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
// let icon_text = game.add.text(0, 0, appText, style);
// icon_text.setTextBounds(x - 50, y - 50, 100, 100);
// icon_text.stroke = "#333";
// icon_text.strokeThickness = 5;
// }
}
move(x, y) {
this.button.move(x, y);
super(setting, iconName, buttonText, clickEvent);
}
}
src/game/lib/round_rect_button.js
+17 -6
View File
@@ -1,6 +1,8 @@
class RoundRectButtonSetting {
constructor(width, height, roundAmount) {
constructor(x, y, width, height, roundAmount) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.roundAmount = 0;
@@ -120,20 +122,24 @@ class RoundRectButton {
target.events.onInputUp.add(function() { this.mouseOver(); }, this);
}
makeButtonStroke() {
makeButtonStroke() { // outter(bigger) round rect sprite
let btnTexture = new Phaser.Graphics()
.beginFill(0xffffff)
.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
.endFill()
.generateTexture();
return game.add.sprite(0, 0, btnTexture);
return game.add.sprite(
this.setting.x - this.setting.width / 2,
this.setting.y - this.setting.height / 2,
btnTexture
);
}
makeButtonSprite() {
makeButtonSprite() { // inner(smaller) round rect sprite
let width = this.setting.width - this.setting.strokeWidthPx * 2;
let height = this.setting.height - this.setting.strokeWidthPx * 2;
let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width);
let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5);
let btnTexture = new Phaser.Graphics()
.beginFill(0xffffff)
@@ -141,7 +147,12 @@ class RoundRectButton {
.endFill()
.generateTexture();
return game.add.sprite(0, 0, btnTexture);
// 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
);
}
makeIcon(iconName) {
src/game/lib/typing_practice_button.js
+2 -16
View File
@@ -1,7 +1,7 @@
class TypingPracticeButton extends AppButton {
constructor(x, y, type, iconName, buttonText, clickEvent) {
let setting = new RoundRectButtonSetting(TypingPracticeButton.BUTTON_WIDTH, TypingPracticeButton.BUTTON_HEIGHT);
let setting = new RoundRectButtonSetting(x, y, TypingPracticeButton.BUTTON_WIDTH, TypingPracticeButton.BUTTON_HEIGHT);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 5;
@@ -46,9 +46,7 @@ class TypingPracticeButton extends AppButton {
);
}
// this.button = new RoundRectButton(setting, buttonText, clickEvent);
super(x, y, setting, iconName, buttonText, clickEvent);
this.move(x, y);
super(setting, iconName, buttonText, clickEvent);
if(iconName.length > 0) {
let icon_fullscreen = game.add.sprite(0, 0, iconName);
@@ -56,18 +54,6 @@ class TypingPracticeButton extends AppButton {
icon_fullscreen.height = 80;
this.button.setIcon(icon_fullscreen);
}
// if(appText.length > 0) {
// const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
// let icon_text = game.add.text(0, 0, appText, style);
// icon_text.setTextBounds(x - 50, y - 50, 100, 100);
// icon_text.stroke = "#333";
// icon_text.strokeThickness = 5;
// }
}
move(x, y) {
this.button.move(x, y);
}
}
src/game/typing/practice/game.js
+15
View File
@@ -50,6 +50,21 @@ class TypingPractice {
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
.addColor(textPreviewColor[0], 0);
this.hand_left = game.add.image(300, 600, "hand_left");
this.hand_left.scale.set(2);
this.hand_left.anchor.set(0.5);
this.hand_right = game.add.image(700, 600, "hand_right");
this.hand_right.scale.set(2);
this.hand_right.anchor.set(0.5);
let mask = game.add.graphics();
mask.beginFill(0xffffff);
mask.drawRect(100, 300, 1028, 400);
this.hand_left.mask = mask;
this.hand_right.mask = mask;
// bottom
let screenBottom = new ScreenBottom();
screenBottom.makeBottomLine();
src/game/typing/practice/key_button.js
+83
View File
@@ -0,0 +1,83 @@
class KeyButton {
// constructor(x, y, )
constructor(x, y, setting, iconName, buttonText, clickEvent) {
/*
let setting = new RoundRectButtonSetting(150, 150);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.strokeWidthPx = 5;
if(type === KeyButton.TYPE_MOUSE) {
setting.setStrokeColor(
0xaa6666,
0x884444,
0x884444,
0x333333
);
setting.setButtonColor(
0xffdddd,
0xddaaaa,
0xddaaaa,
0x666666
);
setting.setTextColor(
"#a66",
"#844",
"#844",
"#333"
);
} else { // TYPE_TYPING
setting.setStrokeColor(
0x444488,
0x6666aa,
0x6666aa,
0x333333
);
setting.setButtonColor(
0xaaaadd,
0xddddff,
0xddddff,
0x666666
);
setting.setTextColor(
"#844",
"#a66",
"#a66",
"#333"
);
}
*/
this.button = new RoundRectButton(setting, iconName, buttonText, clickEvent);
this.move(x, y);
// if(iconName.length > 0) {
// let icon_fullscreen = game.add.sprite(0, 0, iconName);
// icon_fullscreen.width = 80;
// icon_fullscreen.height = 80;
// this.button.setIcon(icon_fullscreen);
// }
// if(buttonText.length > 0) {
// const style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
// let icon_text = game.add.text(0, 0, buttonText, style);
// icon_text.setTextBounds(x - 50, y - 50, 100, 100);
// icon_text.stroke = "#333";
// icon_text.strokeThickness = 5;
// }
}
move(x, y) {
this.button.move(x, y);
}
}
KeyButton.TYPE_MOUSE_APP = 0;
KeyButton.TYPE_TYPING_PRACTICE = 1;
KeyButton.TYPE_TYPING_APP = 2;
KeyButton.NONE_ICON = "";
KeyButton.NONE_BUTTON_TEXT = "";
src/game/typing/practice/loading.js
+2
View File
@@ -34,6 +34,8 @@ class Loading {
startLoading() {
this.game.load.image('icon_fullscreen', '../../../resources/image/icon/fullscreen_white.png');
this.game.load.image('hand_left', '../../../resources/image/ui/hand_left.png');
this.game.load.image('hand_right', '../../../resources/image/ui/hand_right.png');
// this.game.load.image('a', '../../../resources/image/icon/fullscreen_white.png');
// this.game.load.image('b', '../../../resources/image/icon/fullscreen_white.png');
// this.game.load.image('c', '../../../resources/image/icon/fullscreen_white.png');
src/web/client/typing_practice.html
+2 -1
View File
@@ -49,8 +49,9 @@
<script src="../../game/typing/word_list/english_word.js"></script>
<!-- Test typing : source files -->
<script src="../../game/typing/practice/content_progress.js"></script>
<script src="../../game/typing/practice/define_variables.js"></script>
<script src="../../game/typing/practice/content_progress.js"></script>
<script src="../../game/typing/practice/key_button.js"></script>
<script src="../../game/typing/practice/loading.js"></script>
<script src="../../game/typing/practice/game.js"></script>
<script src="../../game/typing/practice/main.js"></script>