Fix: remove aftereffect of ScreenBottom text

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" };
+		this.leftText = this.printBottomText(this.leftText, "sample", "left");
-
+		this.centerText = this.printBottomText(this.centerText, "sample", "center");
-		let posX = this.BOTTOM_BAR_TEXT_OFFSET;
+		this.rightText = this.printBottomText(this.rightText, "sample", "right");
-		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);
 	}
 
 	makeBottomLine() {
 		game.add.graphics()
 			.beginFill(0xffffff, 0.1)
-			.drawRect(0, this.bottomAreaPositionY, game.world.width, this.BOTTOM_BAR_HEIGHT);
+			.drawRect(
-
+				0, game.world.height - ScreenBottom.BOTTOM_BAR_HEIGHT,
-		let textStyleInfo = textStyleBasic;	//$.extend( {}, textStyleBasic);
+				game.world.width, ScreenBottom.BOTTOM_BAR_HEIGHT
-		textStyleInfo.font = "32px Arial";
+			);
-		textStyleInfo.align = "right";
-		textStyleInfo.boundsAlignH = "right";
 	}
 
 	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);
 	}
 
-}
+	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;

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.stroke = "#333";
-		howToPlayText.strokeThickness = 5;
+		// howToPlayText.strokeThickness = 5;
+		howToPlayText.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
 	}
 
 	makeStartButton() {

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");