jisangs/chocomae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add: RoundRectButton stroke

Browse Source
This commit is contained in:
Jisang Park
2018-05-07 09:06:15 +09:00
parent 8d9e3c49b3
commit 6a027658fa
5 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/round_rect_button.js
+13 -4
View File
@@ -38,8 +38,7 @@ RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
fill: "#fff" fill: "#fff"
}; };
RoundRectButtonSetting.DEFAULT_LINE_SPACING = -10; // pixels RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX = -10; // pixels
RoundRectButtonSetting.WHITE = 0xffffff;
@@ -83,10 +82,20 @@ class RoundRectButton {
} }
makeSprite() { 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() let btnTexture = new Phaser.Graphics()
.beginFill(RoundRectButtonSetting.WHITE) .beginFill(0xaaaaaa)
.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount) .drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
.endFill() .endFill()
.beginFill(0xffffff)
.drawRoundedRect(STROKE_WIDTH_PX, STROKE_WIDTH_PX, width, height, innerRoundAmount)
.endFill()
.generateTexture(); .generateTexture();
return game.add.sprite(0, 0, btnTexture); return game.add.sprite(0, 0, btnTexture);
@@ -95,7 +104,7 @@ class RoundRectButton {
makeText(textContent) { makeText(textContent) {
let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle); let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
btnText.anchor.setTo(0.5); btnText.anchor.setTo(0.5);
btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING; btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING_PX;
return btnText; return btnText;
} }
src/game/global/screen_bottom.js → src/game/lib/screen_bottom.js
View File
src/game/global/loading/loading.js → src/game/loading/loading.js
View File
src/web/client/login.html
+6 -4
View File
@@ -9,11 +9,13 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script>
<!-- global source files --> <!-- global source files -->
<script src="../../game/lib/input_type_text.js"></script>
<script src="../../game/lib/round_rect_button.js"></script>
<script src="../../game/global/define_variables_global.js"></script> <script src="../../game/global/define_variables_global.js"></script>
<!-- Space Invaders : source files --> <!-- library source files -->
<script src="../../game/lib/input_type_text.js"></script>
<script src="../../game/lib/round_rect_button.js"></script>
<!-- source files -->
<script src="../../game/login/login.js"></script> <script src="../../game/login/login.js"></script>
<script src="../../game/login/main.js"></script> <script src="../../game/login/main.js"></script>
@@ -31,6 +33,6 @@
</head> </head>
<body> <body>
<div id="Space Invaders" style="text-align:center;" /> <div id="Login" style="text-align:center;" />
</body> </body>
</html> </html>
src/web/client/menu_app.html
+5 -3
View File
@@ -9,12 +9,14 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.js"></script>
<!-- global source files --> <!-- global source files -->
<script src="../../game/global/define_variables_global.js"></script>
<!-- library source files -->
<script src="../../game/lib/input_type_text.js"></script> <script src="../../game/lib/input_type_text.js"></script>
<script src="../../game/lib/round_rect_button.js"></script> <script src="../../game/lib/round_rect_button.js"></script>
<script src="../../game/global/define_variables_global.js"></script> <script src="../../game/lib/screen_bottom.js"></script>
<script src="../../game/global/screen_bottom.js"></script>
<!-- Space Invaders : source files --> <!-- source files -->
<script src="../../game/menu/menu_app.js"></script> <script src="../../game/menu/menu_app.js"></script>
<script src="../../game/menu/main_menu_app.js"></script> <script src="../../game/menu/main_menu_app.js"></script>