From 5d95abf86e6d14d85ebc54fd5f9611318071f7d1 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: Mon, 7 May 2018 10:29:19 +0900 Subject: [PATCH] Add: BackButton --- src/game/lib/back_button.js | 28 +++++++ src/game/lib/round_rect_button.js | 121 ++++++++++++++++++++---------- src/game/lib/screen_bottom.js | 5 -- src/game/menu/menu_app.js | 10 ++- src/web/client/menu_app.html | 1 + 5 files changed, 117 insertions(+), 48 deletions(-) create mode 100644 src/game/lib/back_button.js diff --git a/src/game/lib/back_button.js b/src/game/lib/back_button.js new file mode 100644 index 0000000..748eba1 --- /dev/null +++ b/src/game/lib/back_button.js @@ -0,0 +1,28 @@ +class BackButton { + + constructor(clickEvent) { + let setting = new RoundRectButtonSetting(50, 50); + setting.setStrokeColor( + 0x884444, + 0xaa6666, + 0xaa6666, + 0x333333 + ); + setting.setButtonColor( + 0xddaaaa, + 0xffdddd, + 0xffdddd, + 0x666666 + ); + setting.setTextColor( + "#844", + "#a66", + "#a66", + "#333" + ); + + this.button = new RoundRectButton(setting, "<", clickEvent); + this.button.move(30, 30); + } + +} \ No newline at end of file diff --git a/src/game/lib/round_rect_button.js b/src/game/lib/round_rect_button.js index 8da274f..9b2ae6c 100644 --- a/src/game/lib/round_rect_button.js +++ b/src/game/lib/round_rect_button.js @@ -10,14 +10,45 @@ class RoundRectButtonSetting { } else { this.roundAmount = roundAmount; } + this.strokeWidth = RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX; + + this.strokeColors = RoundRectButtonSetting.DEFAULT_STROKE_COLORS; this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS; this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS; this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT; }; + setStrokeColor(out, over, down, disabled) { + this.strokeColors.out = out; + this.strokeColors.over = over; + this.strokeColors.odownut = down; + this.strokeColors.disabled = disabled; + } + + setButtonColor(out, over, down, disabled) { + this.buttonColors.out = out; + this.buttonColors.over = over; + this.buttonColors.odownut = down; + this.buttonColors.disabled = disabled; + } + + setTextColor(out, over, down, disabled) { + this.textColors.out = out; + this.textColors.over = over; + this.textColors.odownut = down; + this.textColors.disabled = disabled; + } + } +RoundRectButtonSetting.DEFAULT_STROKE_COLORS = { + out: 0x666666, + over: 0x333333, + down: 0x333333, + disabled: 0x666666 +}; + RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = { out: 0xffffff, over: 0xddffdd, @@ -34,11 +65,13 @@ RoundRectButtonSetting.DEFAULT_TEXT_COLORS = { RoundRectButtonSetting.DEFAULT_TEXT_FONT = { font: "30px Arial", - align: "center", + boundsAlignH: "center", // left, center. right + boundsAlignV: "middle", // top, middle, bottom fill: "#fff" }; -RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX = -10; // pixels +RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX = -10; // in pixel +RoundRectButtonSetting.DEFAULT_STROKE_WIDTH_PX = 5; // in pixel @@ -47,54 +80,52 @@ class RoundRectButton { this.setting = roundRectSetting; this.clickEvent = clickEvent; - this.button = this.makeSprite(); + this.buttonStroke = this.makeButtonStroke(); + // this.buttonStroke.anchor.setTo(0.5, 0.5); + this.buttonStroke.inputEnabled = true; + this.setEventMethod(this.buttonStroke); + this.text = this.makeText(buttonText); + this.button = this.makeButtonSprite(); this.button.addChild(this.text); - this.button.anchor.setTo(0.5, 0.5); - - this.inputEnabled = true; - this.setEventMethod(); + // this.button.anchor.setTo(0.5, 0.5); + this.button.inputEnabled = true; + this.setEventMethod(this.button); this.mouseOut(); } - setEventMethod() { - this.button.events.onInputOver.add(function() { - this.mouseOver(); - }, this); - - this.button.events.onInputOut.add(function() { - this.mouseOut(); - }, this); - - this.button.events.onInputDown.add(function() { + setEventMethod(target) { + target.events.onInputOver.add(function() { this.mouseOver(); }, this); + target.events.onInputOut.add(function() { this.mouseOut(); }, this); + target.events.onInputDown.add(function() { this.mouseDown(); if(this.clickEvent) { this.clickEvent(); } }, this); - - this.button.events.onInputUp.add(function() { - this.mouseOver(); - }, this); + target.events.onInputUp.add(function() { this.mouseOver(); }, this); } - 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); + makeButtonStroke() { let btnTexture = new Phaser.Graphics() - .beginFill(0xaaaaaa) + .beginFill(0xffffff) .drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount) .endFill() + .generateTexture(); + + return game.add.sprite(0, 0, btnTexture); + } + + makeButtonSprite() { + let width = this.setting.width - this.setting.strokeWidth * 2; + let height = this.setting.height - this.setting.strokeWidth * 2; + let innerRoundAmount = this.setting.roundAmount * (width / this.setting.width); + let btnTexture = new Phaser.Graphics() .beginFill(0xffffff) - .drawRoundedRect(STROKE_WIDTH_PX, STROKE_WIDTH_PX, width, height, innerRoundAmount) + .drawRoundedRect(this.setting.strokeWidth, this.setting.strokeWidth, width, height, innerRoundAmount) .endFill() .generateTexture(); @@ -102,39 +133,48 @@ 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_PX; + let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle) + .setTextBounds(0, 0, this.setting.width, this.setting.height); + + btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_TEXT_LINE_SPACING_PX; + // btnText.anchor.setTo(0.5); return btnText; } mouseOut() { - this.button.tint = this.setting.buttonColors.out; this.text.fill = this.setting.textColors.out; + this.buttonStroke.tint = this.setting.strokeColors.out; + this.button.tint = this.setting.buttonColors.out; } mouseOver() { - this.button.tint = this.setting.buttonColors.over; this.text.fill = this.setting.textColors.over; + this.buttonStroke.tint = this.setting.strokeColors.over; + this.button.tint = this.setting.buttonColors.over; } mouseDown() { - this.button.tint = this.setting.buttonColors.down; this.text.fill = this.setting.textColors.down; + this.buttonStroke.tint = this.setting.strokeColors.down; + this.button.tint = this.setting.buttonColors.down; } buttonDisabled() { - this.button.tint = this.setting.buttonColors.disabled; this.text.fill = this.setting.textColors.disabled; + this.buttonStroke.tint = this.setting.strokeColors.disabled; + this.button.tint = this.setting.buttonColors.disabled; } move(x, y) { - this.button.x = x; - this.button.y = y; + this.buttonStroke.x = x - this.setting.width / 2; + this.buttonStroke.y = y - this.setting.height / 2; + + this.button.x = x - this.setting.width / 2+ this.setting.strokeWidth; + this.button.y = y - this.setting.height / 2+ this.setting.strokeWidth; } get inputEnabled() { @@ -142,6 +182,7 @@ class RoundRectButton { } set inputEnabled(isEnabled) { + this.buttonStroke.inputEnabled = isEnabled; this.button.inputEnabled = isEnabled; if(isEnabled === true) { diff --git a/src/game/lib/screen_bottom.js b/src/game/lib/screen_bottom.js index bb09966..284d9a0 100644 --- a/src/game/lib/screen_bottom.js +++ b/src/game/lib/screen_bottom.js @@ -18,11 +18,6 @@ class ScreenBottom { .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"; diff --git a/src/game/menu/menu_app.js b/src/game/menu/menu_app.js index afa3bae..cec401e 100644 --- a/src/game/menu/menu_app.js +++ b/src/game/menu/menu_app.js @@ -6,9 +6,13 @@ let MenuApp = { create: function() { this.game.stage.backgroundColor = '#4d4d4d'; + let backButton = new BackButton( () => { + location.href = '../../web/client/login.html'; + }); + let screenBottom = new ScreenBottom(game); screenBottom.makeBottomLine(); - screenBottom.printBottomLeftText(playerName); + screenBottom.printBottomLeftText("게임 진행 정보"); screenBottom.printBottomCenterText("메뉴"); screenBottom.printBottomRightText(playerName); @@ -81,8 +85,8 @@ let MenuApp = { playingStageData = new StageData(language, level); // console.log(playingStageData); - + this.startState('TypingTestStage'); - } + }, } \ No newline at end of file diff --git a/src/web/client/menu_app.html b/src/web/client/menu_app.html index a8da087..062ddd1 100644 --- a/src/web/client/menu_app.html +++ b/src/web/client/menu_app.html @@ -14,6 +14,7 @@ +