Add: menu bg

This commit is contained in:
2018-09-01 17:36:17 +09:00
parent 29539e9ce7
commit a291c18ea1
17 changed files with 129 additions and 34 deletions
+27
View File
@@ -0,0 +1,27 @@
class AppAreaBG {
constructor(color, alpha, x, y, width, height) {
game.add.graphics()
.beginFill(color, alpha)
.drawRect(x, y, width, height);
}
printText(text, x, y, size, color, alpha) {
let fontStyle = { font: "36px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };
let titleText = game.add.text(x, y, text, fontStyle);
titleText.anchor.set(0.5);
titleText.fontSize = size;
titleText.addColor(color, 0);
titleText.alpha = alpha;
}
};
AppAreaBG.COLOR_MOUSE_APP = 0xffce54;
AppAreaBG.COLOR_TYPING_APP = 0x99ccff;
AppAreaBG.COLOR_TYPING_KOREAN = 0xffccff;
AppAreaBG.COLOR_TYPING_ENGLISH = 0x77aaff;
AppAreaBG.GAP_X = 10;
AppAreaBG.GAP_Y = 10;
+25 -3
View File
@@ -12,26 +12,48 @@ class MenuApp {
self = this;
this.game.stage.backgroundColor = '#4d4d4d';
// mouse app area
let mouseBG = new AppAreaBG(AppAreaBG.COLOR_MOUSE_APP, 1,
0, 60,
GAME_SCREEN_SIZE.x, 280
);
mouseBG.printText(
"마 우 스 연 습 앱",
game.world.centerX, 320,
36, "#000", 0.05
);
// typing app area
let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
0, 340,
GAME_SCREEN_SIZE.x, 378
);
typingBG.printText(
"타 자 연 습 앱",
game.world.centerX, 370,
36, "#000", 0.05
);
// top
let backButton = new BackButton( () => {
sessionStorageManager.clear();
location.href = '../../web/client/login.html';
});
new WelcomePlayerText(sessionStorageManager.playerName);
let fullscreenButton = new FullscreenButton();
// bottom
let screenBottom = new ScreenBottom();
screenBottom.makeBottomLine();
// screenBottom.printBottomLeftText("게임 진행 정보");
// let playingAppName = appInfoManager.getAppNameKorean(sessionStorageManager.playingAppName);
// screenBottom.printBottomCenterText(playingAppName);
screenBottom.printBottomCenterText("메뉴");
screenBottom.printBottomRightText(sessionStorageManager.playerName);
new WelcomePlayerText(sessionStorageManager.playerName);
this.loadAppData();
}
+29 -1
View File
@@ -19,6 +19,35 @@ class MenuTypingPractice {
let fullscreenButton = new FullscreenButton(this.game);
// typing app area
let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
0, 60,
GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y - 110
);
// korean app area
let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
0, 60 + AppAreaBG.GAP_Y,
GAME_SCREEN_SIZE.x, 270
);
koreanBG.printText(
"한 글 타 자",
game.world.centerX, 320,
36, "#000", 0.05
);
// english app area
let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
0, 340,
GAME_SCREEN_SIZE.x, 270
);
englishBG.printText(
"영 문 타 자",
game.world.centerX, 370,
36, "#000", 0.05
);
// typing tab buttons
let typingPracticeTabButton = new TypingTabButton(
TypingTabButton.PRACTICE_BUTTON_POS_X, TypingTabButton.BUTTON_POS_Y,
@@ -40,7 +69,6 @@ class MenuTypingPractice {
// bottom
let screenBottom = new ScreenBottom();
screenBottom.makeBottomLine();
// screenBottom.printBottomLeftText("게임 진행 정보");
screenBottom.printBottomCenterText("메뉴 > 타자 연습");
screenBottom.printBottomRightText(sessionStorageManager.playerName);
+30 -1
View File
@@ -19,9 +19,38 @@ class MenuTypingTest {
let fullscreenButton = new FullscreenButton(this.game);
// typing app area
let typingBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_APP, 1,
0, 60,
GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y - 110
);
// korean app area
let koreanBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_KOREAN, 1,
0, 60 + AppAreaBG.GAP_Y,
GAME_SCREEN_SIZE.x, 270
);
koreanBG.printText(
"한 글 타 자",
game.world.centerX, 320,
36, "#000", 0.05
);
// english app area
let englishBG = new AppAreaBG(AppAreaBG.COLOR_TYPING_ENGLISH, 1,
0, 340,
GAME_SCREEN_SIZE.x, 270
);
englishBG.printText(
"영 문 타 자",
game.world.centerX, 370,
36, "#000", 0.05
);
// bottom
let screenBottom = new ScreenBottom();
screenBottom.makeBottomLine();
// screenBottom.printBottomLeftText("게임 진행 정보");
screenBottom.printBottomCenterText("메뉴 > 타자 시험");
screenBottom.printBottomRightText(sessionStorageManager.playerName);
+4 -14
View File
@@ -1,7 +1,7 @@
class WelcomePlayerText extends Phaser.Text {
constructor(playerName) {
super(game, game.world.width / 2, WelcomePlayerText.FONT_HEIGHT_PX, "어서오세요, " + playerName + "님", WelcomePlayerText.DEFAULT_TEXT_FONT);
super(game, game.world.width / 2, 32, "어서오세요, " + playerName + "님", WelcomePlayerText.DEFAULT_TEXT_FONT);
this.anchor.set(0.5);
this.inputEnabled = false;
@@ -14,17 +14,9 @@ class WelcomePlayerText extends Phaser.Text {
this.stroke = '#000';
this.strokeThickness = 5;
this.alpha = 0;
let tweenAlpha = game.add.tween(this);
tweenAlpha.from( { alpha: 0 } ).to( { alpha: 100 }, 1000, Phaser.Easing.Linear.None, true);
/*
let tweenAlpha = game.add.tween(this);
tweenAlpha.to( { alpha: 0 }, 1000, Phaser.Easing.Linear.None, true);
let tweenMoveUp = game.add.tween(this);
tweenMoveUp.to( { y: this.y - WelcomePlayerText.MOVE_UP_AMOUNT_PX }, 1000, Phaser.Easing.Linear.None, true);
tweenMoveUp.onComplete.addOnce(this.destroySelf, this);
*/
tweenAlpha.to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true);
game.add.existing(this);
};
@@ -40,6 +32,4 @@ WelcomePlayerText.DEFAULT_TEXT_FONT = {
boundsAlignH: "center", // left, center. right
boundsAlignV: "middle", // top, middle, bottom
fill: "#fff"
};
WelcomePlayerText.FONT_HEIGHT_PX = 35;
};