From 9e0dcb686010ef178fb0913da1b1fa5817826926 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=A2=E1=84=91=E1=85=B3=E1=86=AF=20=E1=84=82?= =?UTF-8?q?=E1=85=A9=E1=84=90=E1=85=B3=E1=84=87=E1=85=AE=E1=86=A8?= Date: Thu, 9 Aug 2018 16:19:14 +0900 Subject: [PATCH] Fix: remove aftereffect of ScreenBottom text --- src/game/lib/screen_bottom.js | 87 ++++++++++++++++++++--------------- src/game/start/start.js | 10 ++-- study/PhaserText/text.js | 39 ++++++++++++++++ 3 files changed, 91 insertions(+), 45 deletions(-) diff --git a/src/game/lib/screen_bottom.js b/src/game/lib/screen_bottom.js index 5fcdb5f..5239451 100644 --- a/src/game/lib/screen_bottom.js +++ b/src/game/lib/screen_bottom.js @@ -4,51 +4,22 @@ class ScreenBottom { constructor() { - this.BOTTOM_BAR_HEIGHT = 50; - this.BOTTOM_BAR_NAME_WIDTH = 200; - this.BOTTOM_BAR_TEXT_OFFSET = 10; - this.dbConnectManager = new DBConnectManager(); - this.bottomAreaPositionY = game.world.height - this.BOTTOM_BAR_HEIGHT; + this.bottomBarCenterY = game.world.height - ScreenBottom.BOTTOM_BAR_HEIGHT / 2; - let style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" }; - - let posX = this.BOTTOM_BAR_TEXT_OFFSET; - this.leftText = game.add.text(posX, this.bottomAreaPositionY, "", style) - .setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT) - .addColor('#ffffff', 0); - // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - - // let style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "bottom" }; - style.align = "center"; - style.boundsAlignH = "center"; - posX = game.world.width / 2 - this.BOTTOM_BAR_NAME_OFFSET_RIGHT; - this.centerText = game.add.text(0, this.bottomAreaPositionY, "", style) - .setTextBounds(0, 0, game.world.width, this.BOTTOM_BAR_HEIGHT) - .addColor('#ffffff', 0); - // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); - - // let style = { font: "32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "bottom" }; - - style.align = "right"; - style.boundsAlignH = "right"; - posX = game.world.width - this.BOTTOM_BAR_NAME_WIDTH - this.BOTTOM_BAR_TEXT_OFFSET; - this.rightText = game.add.text(posX, this.bottomAreaPositionY, "", style) - .setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT) - .addColor('#ffffff', 0); - // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + this.leftText = this.printBottomText(this.leftText, "sample", "left"); + this.centerText = this.printBottomText(this.centerText, "sample", "center"); + this.rightText = this.printBottomText(this.rightText, "sample", "right"); } makeBottomLine() { game.add.graphics() .beginFill(0xffffff, 0.1) - .drawRect(0, this.bottomAreaPositionY, game.world.width, this.BOTTOM_BAR_HEIGHT); - - let textStyleInfo = textStyleBasic; //$.extend( {}, textStyleBasic); - textStyleInfo.font = "32px Arial"; - textStyleInfo.align = "right"; - textStyleInfo.boundsAlignH = "right"; + .drawRect( + 0, game.world.height - ScreenBottom.BOTTOM_BAR_HEIGHT, + game.world.width, ScreenBottom.BOTTOM_BAR_HEIGHT + ); } printBottomLeftText(text) { @@ -63,10 +34,50 @@ class ScreenBottom { this.rightText.text = text; } + printBottomText(textObject, text, align) { + if(textObject !== null && textObject !== undefined) { + textObject.text = ""; + textObject = null; + } + + let posX = 0; + let anchorValue = 0; + switch(align) { + case "left": + posX = ScreenBottom.BOTTOM_BAR_TEXT_OFFSET; + break; + + case "center": + posX = game.world.centerX; + anchorValue = 0.5; + break; + + case "right": + posX = game.world.width - ScreenBottom.BOTTOM_BAR_TEXT_OFFSET; + anchorValue = 1; + break; + } + + textObject = game.add.text(posX, this.bottomBarCenterY, text, this.getFontStyle()); + + textObject.anchor.x = anchorValue; + textObject.anchor.y = 0.5; + + return textObject; + } + printBottomLeftTextWithBestRecord(bestRecord) { let roundUpBestRecord = Math.round(bestRecord); let highScoreWithCommas = NumberUtil.numberWithCommas(roundUpBestRecord); this.printBottomLeftText("오늘의 최고 기록 : " + highScoreWithCommas); } -} \ No newline at end of file + getFontStyle() { + return { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" }; + } + +} + +ScreenBottom.BOTTOM_BAR_HEIGHT = 50; +ScreenBottom.BOTTOM_BAR_NAME_WIDTH = 200; +ScreenBottom.BOTTOM_BAR_TEXT_OFFSET = 10; \ No newline at end of file diff --git a/src/game/start/start.js b/src/game/start/start.js index 7c552fc..005b010 100644 --- a/src/game/start/start.js +++ b/src/game/start/start.js @@ -70,21 +70,16 @@ class Start { screenBottom.printBottomCenterText(sessionStorageManager.playingAppKoreanName); screenBottom.printBottomRightText(sessionStorageManager.playerName); - this.dbConnectManager.requestTodayBestRecord( sessionStorageManager.maestroID, sessionStorageManager.playerID, sessionStorageManager.playingAppID, replyJSON => { sessionStorageManager.bestRecord = Number(replyJSON["BestRecord"]); - // let highScoreWithCommas = NumberUtil.numberWithCommas(sessionStorageManager.bestRecord); - // screenBottom.printBottomLeftText("오늘의 최고 기록 : " + highScoreWithCommas); screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord); }, replyJSON => { // no data sessionStorageManager.bestRecord = 0; - // let highScoreWithCommas = NumberUtil.numberWithCommas(sessionStorageManager.bestRecord); - // screenBottom.printBottomLeftText("오늘의 최고 기록 : " + highScoreWithCommas); screenBottom.printBottomLeftTextWithBestRecord(sessionStorageManager.bestRecord); } ); @@ -108,8 +103,9 @@ class Start { const style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "center", boundsAlignV: "middle" }; let howToPlayText = game.add.text(0, 0, text, style); howToPlayText.setTextBounds(100, 100, game.world.width - 200, 200); - howToPlayText.stroke = "#333"; - howToPlayText.strokeThickness = 5; + // howToPlayText.stroke = "#333"; + // howToPlayText.strokeThickness = 5; + howToPlayText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); } makeStartButton() { diff --git a/study/PhaserText/text.js b/study/PhaserText/text.js index 3259a70..7d9a77c 100644 --- a/study/PhaserText/text.js +++ b/study/PhaserText/text.js @@ -23,9 +23,48 @@ function create() { 가나다라마바사 아자차카타파하" ); + SetBounds(); + game.input.onDown.add(changeAlign, this); } +function SetBounds() { + this.BOTTOM_BAR_HEIGHT = 50; + this.BOTTOM_BAR_NAME_WIDTH = 200; + this.BOTTOM_BAR_TEXT_OFFSET = 10; + + this.bottomAreaPositionY = game.world.height - this.BOTTOM_BAR_HEIGHT; + + let style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" }; + + let posX = this.BOTTOM_BAR_TEXT_OFFSET; + this.leftText = game.add.text(posX, this.bottomAreaPositionY, "왼쪽", style) + .setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT) + .addColor('#ffffff', 0); + // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + this.leftText.stroke = "#333"; + this.leftText.strokeThickness = 5; + + // let style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "bottom" }; + style.align = "center"; + style.boundsAlignH = "center"; + posX = game.world.width / 2 - this.BOTTOM_BAR_NAME_OFFSET_RIGHT; + this.centerText = game.add.text(0, this.bottomAreaPositionY, "중간", style) + .setTextBounds(0, 0, game.world.width, this.BOTTOM_BAR_HEIGHT) + .addColor('#ffffff', 0); + // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); + + // let style = { font: "32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "bottom" }; + + style.align = "right"; + style.boundsAlignH = "right"; + posX = game.world.width - this.BOTTOM_BAR_NAME_WIDTH - this.BOTTOM_BAR_TEXT_OFFSET; + this.rightText = game.add.text(posX, this.bottomAreaPositionY, "오른쪽", style) + .setTextBounds(0, 0, this.BOTTOM_BAR_NAME_WIDTH, this.BOTTOM_BAR_HEIGHT) + .addColor('#ffffff', 0); + // .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2); +} + function changeAlign() { console.log("print dummy");