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

Fix: apply RoundRectButton

Browse Source
This commit is contained in:
Jisang Park
2018-05-06 13:48:45 +09:00
parent 0acec6ee1a
commit 8236002b7c
5 changed files with 1528 additions and 1572 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/game/global/define_variables_global.js
+1 -2
View File
@@ -16,8 +16,7 @@ function isReleaseMode() {
}
const GAME_SCREEN_SIZE = { x: 1024, y: 768
}
const GAME_SCREEN_SIZE = { x: 1024, y: 768 }
let playerName;
src/game/lib/input_type_text.js
+1375 -1406
View File
File diff suppressed because it is too large Load Diff
src/game/lib/round_rect_button.js
+101 -101
View File
@@ -1,41 +1,41 @@
class RoundRectButtonSetting {
constructor(width, height, roundAmount) {
this.width = width;
this.height = height;
this.roundAmount = 0;
if(typeof roundAmount === "undefined") {
let shorterSide = width > height ? height : width;
this.roundAmount = shorterSide * 0.1;
} else {
this.roundAmount = roundAmount;
}
constructor(width, height, roundAmount) {
this.width = width;
this.height = height;
this.roundAmount = 0;
if(typeof roundAmount === "undefined") {
let shorterSide = width > height ? height : width;
this.roundAmount = shorterSide * 0.1;
} else {
this.roundAmount = roundAmount;
}
this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
};
this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
};
}
RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
out: 0xffffff,
over: 0xddffdd,
down: 0xaaffaa,
disabled: 0x333333
out: 0xffffff,
over: 0xddffdd,
down: 0xaaffaa,
disabled: 0x333333
};
RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
out: "#000",
over: "#333",
down: "#666",
disabled: "#999"
out: "#000",
over: "#333",
down: "#666",
disabled: "#999"
};
RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
font: "30px Arial",
align: "center",
fill: "#fff"
font: "30px Arial",
align: "center",
fill: "#fff"
};
RoundRectButtonSetting.DEFAULT_LINE_SPACING = -10; // pixels
@@ -44,106 +44,106 @@ RoundRectButtonSetting.WHITE = 0xffffff;
class RoundRectButton {
constructor(roundRectSetting, buttonText, clickEvent) {
this.setting = roundRectSetting;
this.clickEvent = clickEvent;
constructor(roundRectSetting, buttonText, clickEvent) {
this.setting = roundRectSetting;
this.clickEvent = clickEvent;
this.button = this.makeSprite();
this.text = this.makeText(buttonText);
this.button = this.makeSprite();
this.text = this.makeText(buttonText);
this.button.addChild(this.text);
this.button.anchor.setTo(0.5, 0.5);
this.button.addChild(this.text);
this.button.anchor.setTo(0.5, 0.5);
this.inputEnabled = true;
this.setEventMethod();
this.inputEnabled = true;
this.setEventMethod();
this.mouseOut();
}
this.mouseOut();
}
setEventMethod() {
this.button.events.onInputOver.add(function() {
this.mouseOver();
}, this);
setEventMethod() {
this.button.events.onInputOver.add(function() {
this.mouseOver();
}, this);
this.button.events.onInputOut.add(function() {
this.mouseOut();
}, this);
this.button.events.onInputOut.add(function() {
this.mouseOut();
}, this);
this.button.events.onInputDown.add(function() {
this.mouseDown();
this.button.events.onInputDown.add(function() {
this.mouseDown();
if(this.clickEvent) {
this.clickEvent();
}
}, this);
if(this.clickEvent) {
this.clickEvent();
}
}, this);
this.button.events.onInputUp.add(function() {
this.mouseOver();
}, this);
}
this.button.events.onInputUp.add(function() {
this.mouseOver();
}, this);
}
makeSprite() {
let btnTexture = new Phaser.Graphics()
.beginFill(RoundRectButtonSetting.WHITE)
.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
.endFill()
.generateTexture();
makeSprite() {
let btnTexture = new Phaser.Graphics()
.beginFill(RoundRectButtonSetting.WHITE)
.drawRoundedRect(0, 0, this.setting.width, this.setting.height, this.setting.roundAmount)
.endFill()
.generateTexture();
return game.add.sprite(0, 0, btnTexture);
}
return game.add.sprite(0, 0, btnTexture);
}
makeText(textContent) {
let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
btnText.anchor.setTo(0.5);
btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING;
makeText(textContent) {
let btnText = game.add.text(0, 0, textContent, this.setting.fontStyle);
btnText.anchor.setTo(0.5);
btnText.lineSpacing = RoundRectButtonSetting.DEFAULT_LINE_SPACING;
return btnText;
}
return btnText;
}
mouseOut() {
this.button.tint = this.setting.buttonColors.out;
this.text.fill = this.setting.textColors.out;
}
mouseOut() {
this.button.tint = this.setting.buttonColors.out;
this.text.fill = this.setting.textColors.out;
}
mouseOver() {
this.button.tint = this.setting.buttonColors.over;
this.text.fill = this.setting.textColors.over;
}
mouseOver() {
this.button.tint = this.setting.buttonColors.over;
this.text.fill = this.setting.textColors.over;
}
mouseDown() {
this.button.tint = this.setting.buttonColors.down;
this.text.fill = this.setting.textColors.down;
}
mouseDown() {
this.button.tint = this.setting.buttonColors.down;
this.text.fill = this.setting.textColors.down;
}
buttonDisabled() {
this.button.tint = this.setting.buttonColors.disabled;
this.text.fill = this.setting.textColors.disabled;
}
buttonDisabled() {
this.button.tint = this.setting.buttonColors.disabled;
this.text.fill = this.setting.textColors.disabled;
}
move(x, y) {
this.button.x = x;
this.button.y = y;
}
move(x, y) {
this.button.x = x;
this.button.y = y;
}
get inputEnabled() {
return this.button.inputEnabled;
}
get inputEnabled() {
return this.button.inputEnabled;
}
set inputEnabled(isEnabled) {
this.button.inputEnabled = isEnabled;
set inputEnabled(isEnabled) {
this.button.inputEnabled = isEnabled;
if(isEnabled === true) {
this.mouseOut();
} else {
this.buttonDisabled();
}
}
if(isEnabled === true) {
this.mouseOut();
} else {
this.buttonDisabled();
}
}
set lineSpacing(spacingInPixels) {
this.text.lineSpacing = spacingInPixels;
}
set lineSpacing(spacingInPixels) {
this.text.lineSpacing = spacingInPixels;
}
}
src/game/login/login.js
+29 -42
View File
@@ -1,22 +1,30 @@
/////////////////////////////
// Login
var Login = {
let Login = {
self: {},
create: function() {
var self = this;
self = this;
this.game.stage.backgroundColor = '#4d4d4d';
var phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser');
phaser.anchor.set(0.5);
phaser.alpha = 0.1;
game.stage.backgroundColor = '#4d4d4d';
// let phaser = game.add.image(game.world.centerX, game.world.centerY, 'phaser');
// phaser.anchor.set(0.5);
// phaser.alpha = 0.1;
// game.stage.backgroundColor = '#4d4d4d';
this.makeInputTypeTexts();
this.makeButton();
},
makeInputTypeTexts: function() {
// name
var textX = this.game.world.centerX - 360;
var inputX = this.game.world.centerX + 60;
var nameTextY = 340;
let textX = this.game.world.centerX - 360;
let inputX = this.game.world.centerX + 60;
const nameTextY = 340;
game.add.text(textX, nameTextY, "이름 :", textStyleBasic)
.setTextBounds(0, 0, 200, 0)
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -35,7 +43,7 @@ var Login = {
}
// birthday
var birthdayTextY = 400;
const birthdayTextY = 400;
game.add.text(textX, birthdayTextY, "생년월일 :", textStyleBasic)
.setTextBounds(0, 0, 200, 0)
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -53,43 +61,21 @@ var Login = {
}
}
this.inputTextName.canvasInput.focus();
// this.inputTextBirthday.canvasInput.focus();
},
// start button
/*
var textStyle = { font: "bold 32px Arial", fill: "#fff", align: "center", boundsAlignH: "center", boundsAlignV: "middle" };
var buttonText = game.add.text(0, 0, "시작", textStyle);
buttonText.addColor("#a0d", 0);
buttonText.anchor.setTo(0.5, 0.4);
var startButton = game.add.button(game.world.centerX, game.world.centerY + 140, 'button', this.startMenu, this, 2, 1, 0);
startButton.anchor.set(0.5);
startButton.inputEnabled = true;
startButton.input.priorityId = 1;
startButton.input.useHandCursor = true;
startButton.addChild(buttonText);
*/
makeButton: function() {
let setting = new RoundRectButtonSetting(200, 100);
setting.fontStyle = {
fontSize: "30px",
align: "center",
fontWeight: "",
stroke: "red",
strokeThickness: 5
};
setting.fontStyle.fontWeight = "bold";
let startButton = new RoundRectButton(setting, "둥근 모서리\n버튼", this.startMenu);
let startButton = new RoundRectButton(setting, "시작", this.startMenu);
startButton.move(game.world.centerX, game.world.centerY + 140);
},
startMenu: function() {
var self = this;
playerName = this.inputTextName.canvasInput._value;
var birthday = this.inputTextBirthday.canvasInput._value;
playerName = self.inputTextName.canvasInput._value;
let birthday = self.inputTextBirthday.canvasInput._value;
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
@@ -98,12 +84,13 @@ var Login = {
// console.log("xhr.status : " + xhr.status);
if(xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText);
var jsonData = JSON.parse(xhr.responseText);
let jsonData = JSON.parse(xhr.responseText);
// console.log(JSON.stringify(jsonData));
// console.log(jsonData);
if(jsonData != null && jsonData["UserID"] != null) {
// login successed
self.loginSucceeded(jsonData);
} else {
// login failed
@@ -113,12 +100,12 @@ var Login = {
}
xhr.open('POST', 'login.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var param = 'name=' + playerName + '&birthday=' + birthday;
let param = 'name=' + playerName + '&birthday=' + birthday;
// console.log(param);
xhr.send(param);
/*
var params = {
let params = {
'name': this.inputTextName.canvasInput._value,
'birthday': this.inputTextBirthday.canvasInput._value
};
@@ -126,7 +113,7 @@ var Login = {
console.log(JSON.stringify(params));
xhr.setRequestHeader("Content-type", "application/json");
// var data = JSON.stringify({"name":"박지상","birthday":"760621","test":101});
// let data = JSON.stringify({"name":"박지상","birthday":"760621","test":101});
xhr.send(data);
xhr.send(JSON.stringify(params));
study/RoundRectButton/round_rect_button_main.js
+20 -19
View File
@@ -2,35 +2,36 @@
// Main game
var game = new Phaser.Game(1000, 800, Phaser.CANVAS, "RoundRectButton",
{preload:preload, create:create, update:update, render:render});
{preload:preload, create:create, update:update, render:render}
);
function preload() {
// game.load.image('phaser', '../../resources/image/phaser.png');
// game.load.spritesheet('button', './image/button_basic.png', 200, 100);
// game.load.image('phaser', '../../resources/image/phaser.png');
// game.load.spritesheet('button', './image/button_basic.png', 200, 100);
}
function create() {
// var i = game.add.image(game.world.centerX, game.world.centerY + 70, 'phaser');
// i.anchor.set(0.5);
game.stage.backgroundColor = '#4d4d4d';
graphics = game.add.graphics(0, 0);
// var i = game.add.image(game.world.centerX, game.world.centerY + 70, 'phaser');
// i.anchor.set(0.5);
game.stage.backgroundColor = '#4d4d4d';
graphics = game.add.graphics(0, 0);
let setting = new RoundRectButtonSetting(200, 100);
setting.fontStyle = {
fontSize: "30px",
align: "center",
fontWeight: "",
stroke: "red",
strokeThickness: 5
};
let setting = new RoundRectButtonSetting(200, 100);
setting.fontStyle = {
fontSize: "30px",
align: "center",
fontWeight: "",
stroke: "red",
strokeThickness: 5
};
let button = new RoundRectButton(setting, "둥근 모서리\n버튼", dummy);
button.move(200, 200);
// button.lineSpacing = -10;
let button = new RoundRectButton(setting, "둥근 모서리\n버튼", dummy);
button.move(200, 200);
// button.lineSpacing = -10;
}
function dummy() {
console.log("print dummy");
console.log("print dummy");
}
function update() {