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

Fix: ChocoButton stroke round

Browse Source
This commit is contained in:
Jisang Park
2019-07-25 09:58:37 +09:00
parent 5a44ab93da
commit 1df8fba0a5
7 changed files with 120 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/lib/button/choco_back_button.js
+48
View File
@@ -0,0 +1,48 @@
ChocoBackButton.prototype = Object.create(ChocoButton.prototype);
ChocoBackButton.constructor = ChocoBackButton;
function ChocoBackButton(clickEvent) {
var setting = new ChocoButtonSetting(980, 40, 60, 60, 3, 10);
setting.fontStyle.boundsAlignH = "center"; // left, center. right
setting.fontStyle.boundsAlignV = "middle"; // top, middle, bottom
setting.setStrokeColor(
ChocoBackButton.STROKE_COLOR_OUT_HEX,
ChocoBackButton.STROKE_COLOR_OVER_HEX,
ChocoBackButton.STROKE_COLOR_DOWN_HEX,
ChocoBackButton.STROKE_COLOR_DISABLED_HEX
);
setting.setButtonColor(
ChocoBackButton.BUTTON_COLOR_OUT_HEX,
ChocoBackButton.BUTTON_COLOR_OVER_HEX,
ChocoBackButton.BUTTON_COLOR_DOWN_HEX,
ChocoBackButton.BUTTON_COLOR_DISABLED_HEX
);
setting.setTextColor(
ChocoBackButton.TEXT_COLOR_OUT_HEX,
ChocoBackButton.TEXT_COLOR_OVER_HEX,
ChocoBackButton.TEXT_COLOR_DOWN_HEX,
ChocoBackButton.TEXT_COLOR_DISABLED_HEX
);
ChocoButton.call(this, setting, clickEvent);
this.addIcon("tile_choco");
this.setIconSize(15);
this.setShortcutText("돌아가기");
}
ChocoBackButton.STROKE_COLOR_OUT_HEX = 0xAA6666;
ChocoBackButton.STROKE_COLOR_OVER_HEX = 0x884444;
ChocoBackButton.STROKE_COLOR_DOWN_HEX = 0x884444;
ChocoBackButton.STROKE_COLOR_DISABLED_HEX = 0x333333;
ChocoBackButton.BUTTON_COLOR_OUT_HEX = 0xffdddd;
ChocoBackButton.BUTTON_COLOR_OVER_HEX = 0xddaaaa;
ChocoBackButton.BUTTON_COLOR_DOWN_HEX = 0xddaaaa;
ChocoBackButton.BUTTON_COLOR_DISABLED_HEX = 0x666666;
ChocoBackButton.TEXT_COLOR_OUT_HEX = "#aa6666";
ChocoBackButton.TEXT_COLOR_OVER_HEX = "#884444";
ChocoBackButton.TEXT_COLOR_DOWN_HEX = "#884444";
ChocoBackButton.TEXT_COLOR_DISABLED_HEX = "#333333";
src/game/lib/button/choco_button.js
+15 -10
View File
@@ -48,21 +48,25 @@ ChocoButton.prototype.makeButtonStrokeSprite = function() { // outter(bigger) ro
}
ChocoButton.prototype.makeButtonSprite = function() { // inner(smaller) round rect sprite
var width = this.setting.width - this.setting.strokeWidthPx * 2;
var height = this.setting.height - this.setting.strokeWidthPx * 2;
var innerRoundAmount = this.setting.roundAmount * (width / this.setting.width / 1.5);
var setting = this.setting;
// console.log("strokeWidthPx : " + setting.strokeWidthPx);
// console.log("round : " + setting.roundAmount);
var btnWidth = setting.width - setting.strokeWidthPx * 2;
var btnHeight = setting.height - setting.strokeWidthPx * 2;
var longSideStroke = (setting.width > setting.height ? setting.width : setting.height);
var longSideButton = (btnWidth > btnHeight ? btnWidth : btnHeight);
var btnRoundAmount = setting.roundAmount * longSideButton / longSideStroke;
var texture = new Phaser.Graphics()
.beginFill(0xffffff)
.drawRoundedRect(this.setting.strokeWidthPx, this.setting.strokeWidthPx, width, height, innerRoundAmount)
.drawRoundedRect(0, 0, btnWidth, btnHeight, btnRoundAmount)
.endFill()
.generateTexture();
var buttonSprite = game.add.sprite(
this.setting.x - this.setting.width / 2 + this.setting.strokeWidthPx,
this.setting.y - this.setting.height / 2 + this.setting.strokeWidthPx,
texture
);
var posX = setting.x - btnWidth / 2;
var posY = setting.y - btnHeight / 2;
var buttonSprite = game.add.sprite(posX, posY, texture);
// buttonSprite.anchor.setTo(0.5, 0.5);
buttonSprite.inputEnabled = true;
@@ -120,6 +124,7 @@ ChocoButton.prototype.setIcon = function(icon) {
ChocoButton.prototype.makeShortcutText = function() {
var shortcutText = game.add.text(this.buttonSprite.width / 2, this.buttonSprite.height * 9 / 10, "");
shortcutText.anchor.set(0.5);
shortcutText.fontWeight = "normal";
shortcutText.fontSize = this.buttonSprite.height * 2 / 10;
// shortcutText.addColor(this.setting.textColors.over, 0);
@@ -129,7 +134,7 @@ ChocoButton.prototype.makeShortcutText = function() {
}
ChocoButton.prototype.setShortcutText = function(text) {
this.shortcutText.text = "[ " + text + " ]";
this.shortcutText.text = text;
}
src/game/lib/button/choco_button_setting.js
+35 -10
View File
@@ -1,17 +1,10 @@
function ChocoButtonSetting(x, y, width, height, roundAmount) {
function ChocoButtonSetting(x, y, width, height, strokeWidth, roundAmount) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.roundAmount = 0;
if(typeof roundAmount === "undefined") {
var shorterSide = width > height ? height : width;
this.roundAmount = shorterSide * 0.1;
} else {
this.roundAmount = roundAmount;
}
this.strokeWidthPx = ChocoButtonSetting.DEFAULT_STROKE_WIDTH_PX;
this.setRound(roundAmount);
this.setStrokeWidth(strokeWidth);
this.strokeColors = ChocoButtonSetting.DEFAULT_STROKE_COLORS;
this.buttonColors = ChocoButtonSetting.DEFAULT_BUTTON_COLORS;
@@ -20,6 +13,38 @@ function ChocoButtonSetting(x, y, width, height, roundAmount) {
this.fontStyle = ChocoButtonSetting.DEFAULT_TEXT_FONT;
};
ChocoButtonSetting.prototype.setRound = function(round) {
if(this.width / 2 > round && this.height / 2 > round) {
this.roundAmount = round;
return this.roundAmount;
}
var maxRound = round;
if(this.width > this.height) {
maxRound = this.height / 2;
} else {
maxRound = this.width / 2;
}
this.roundAmount = maxRound;
}
ChocoButtonSetting.prototype.setStrokeWidth = function(width) {
if(this.width / 2 > width && this.height / 2 > width) {
this.strokeWidthPx = width;
return this.strokeWidthPx;
}
var maxWidth = width;
if(this.width > this.height) {
maxWidth = this.height / 2;
} else {
maxWidth = this.width / 2;
}
this.strokeWidthPx = maxWidth;
}
ChocoButtonSetting.prototype.setStrokeColor = function(out, over, down, disabled) {
this.strokeColors = { };
this.strokeColors.out = out;
src/game/lib/color/main_color.js
+6 -1
View File
@@ -13,4 +13,9 @@ MainColor.LIGHTER_CHOCO_STRING = "#E6A277";
MainColor.LIGHT_CHOCO_HEX = 0xBF8763;
MainColor.CHOCO_HEX = 0x805A42;
MainColor.DARK_CHOCO_HEX = 0x402D21;
MainColor.LIGHTER_CHOCO_HEX = 0xE6A277;
MainColor.LIGHTER_CHOCO_HEX = 0xE6A277;
MainColor.BLACK_STRING = "#000000";
MainColor.BLACK_HEX = 0x000000;
src/game/main_menu/main.js
-1
View File
@@ -27,7 +27,6 @@ game.state.add('MainMenu', mainMenu);
game.state.start('MainMenu');
function fontLoaded() {
console.log("fontLoaded #1");
mainMenu.fontLoaded();
}
src/game/main_menu/main_menu.js
+15 -9
View File
@@ -42,8 +42,6 @@ MainMenu.prototype.create = function() {
*/
MainMenu.prototype.create = function() {
console.log("create");
this.dbService = new DBService();
this.dbService.setMaestroID(sessionStorageManager.getMaestroID());
this.dbService.setPlayerID(sessionStorageManager.getPlayerID());
@@ -52,7 +50,8 @@ MainMenu.prototype.create = function() {
var graphics = game.add.graphics();
graphics.beginFill(MainColor.LIGHT_CHOCO_HEX, 1);
graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, GAME_SCREEN_SIZE.y);
graphics.beginFill(MainColor.CHOCO_HEX, 1);
graphics.beginFill(MainColor.BLACK_HEX, 1);
// graphics.beginFill(MainColor.CHOCO_HEX, 1);
graphics.drawRect(0, 0,GAME_SCREEN_SIZE.x, MainMenu.MAIN_MENU_HEIGHT);
this.appGroupButtons = {};
@@ -178,15 +177,22 @@ MainMenu.prototype.makeAppGroupButtons = function() {
}
MainMenu.prototype.makeQuitButton = function() {
var setting = new ChocoButtonSetting(980, 40, 60, 60, 5);
var quitButton = new ChocoButton(
setting, // choco button setting,
(function() { this.back(); }).bind(this)
var setting = new ChocoButtonSetting(980, 40, 60, 60, 5, 10);
// var quitButton = new ChocoButton(
// setting, // choco button setting,
// (function() { /*this.back();*/ console.log("quit"); }).bind(this)
// );
// quitButton.addIcon("tile_choco");
// quitButton.setIconSize(30);
var backButton = new ChocoBackButton(
(function() { console.log("back"); }).bind(this)
);
quitButton.addIcon("tile_choco");
quitButton.setIconSize(30);
// backButton.addIcon("tile_choco");
// backButton.setIconSize(30);
this.appGroupButtons.quitButton = quitButton;
this.appGroupButtons.backButton = backButton;
}
MainMenu.prototype.makeMouseAppButtons = function(appList, activeAppList) {
src/web/client/main_menu.html
+1
View File
@@ -56,6 +56,7 @@
<script src="../../game/lib/button/choco_button_setting.js"></script>
<script src="../../game/lib/button/choco_button.js"></script>
<script src="../../game/lib/button/choco_back_button.js"></script>
<!-- source files -->
<script src="../../game/main_menu/main_menu.js"></script>