Add: RoundRectButton stroke

src/game/lib/round_rect_button.js

@@ -38,8 +38,7 @@ RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
 	fill: "#fff"
 };
 
-RoundRectButtonSetting.DEFAULT_LINE_SPACING = -10;  // pixels
-RoundRectButtonSetting.WHITE = 0xffffff;
+RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX = -10;  // pixels
 
 
 
@@ -83,10 +82,20 @@ class RoundRectButton {
 	}
 
 	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);
 		let btnTexture = new Phaser.Graphics()
-			.beginFill(RoundRectButtonSetting.WHITE)
+			.beginFill(0xaaaaaa)
 			.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
 			.endFill()
+			.beginFill(0xffffff)
+			.drawRoundedRect(STROKE_WIDTH_PX, STROKE_WIDTH_PX, width, height, innerRoundAmount)
+			.endFill()
 			.generateTexture();
 
 		return game.add.sprite(0, 0, btnTexture);
@@ -95,7 +104,7 @@ 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;
+		btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX;
 
 		return btnText;
 	}

src/game/lib/screen_bottom.js

@@ -0,0 +1,62 @@
+/////////////////////////////
+// Screen bottom
+
+class ScreenBottom {
+
+	constructor(game) {
+		this.game = game;
+
+		this.BOTTOM_BAR_HEIGHT					= 50;
+		this.BOTTOM_BAR_NAME_WIDTH				= 200;
+		this.BOTTOM_BAR_TEXT_OFFSET				= 10;
+
+		this.bottomAreaPositionY = this.game.world.height - this.BOTTOM_BAR_HEIGHT;
+	}
+
+	makeBottomLine() {
+		this.game.add.graphics()
+			.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";
+		textStyleInfo.boundsAlignH = "right";
+	}
+
+	printBottomLeftText(text) {
+		let style = { font: "32px Arial", fill: "#fff", align: "left", boundsAlignH: "left", boundsAlignV: "bottom" };
+
+		let posX = this.BOTTOM_BAR_TEXT_OFFSET;
+		this.game.add.text(posX, this.bottomAreaPositionY, text, 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);
+	}
+
+	printBottomCenterText(text) {
+		let style = { font: "32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "bottom" };
+
+		let posX = game.world.width / 2 - this.BOTTOM_BAR_NAME_OFFSET_RIGHT;
+		this.game.add.text(0, this.bottomAreaPositionY, text, style)
+			.setTextBounds(0, 0, game.world.width, this.BOTTOM_BAR_HEIGHT)
+			.addColor('#ffffff', 0);
+			// .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2);
+	}
+
+	printBottomRightText(text) {
+		let style = { font: "32px Arial", fill: "#fff", align: "right", boundsAlignH: "right", boundsAlignV: "bottom" };
+
+		let posX = game.world.width - this.BOTTOM_BAR_NAME_WIDTH - this.BOTTOM_BAR_TEXT_OFFSET;
+		this.game.add.text(posX, this.bottomAreaPositionY, text, 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);
+	}
+
+}