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; 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 { class RoundRectButtonSetting {
constructor(width, height, roundAmount) { constructor(width, height, roundAmount) {
this.width = width; this.width = width;
this.height = height; this.height = height;
this.roundAmount = 0; this.roundAmount = 0;
if(typeof roundAmount === "undefined") { if(typeof roundAmount === "undefined") {
let shorterSide = width > height ? height : width; let shorterSide = width > height ? height : width;
this.roundAmount = shorterSide * 0.1; this.roundAmount = shorterSide * 0.1;
} else { } else {
this.roundAmount = roundAmount; this.roundAmount = roundAmount;
} }
this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS; this.buttonColors = RoundRectButtonSetting.DEFAULT_BUTTON_COLORS;
this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS; this.textColors = RoundRectButtonSetting.DEFAULT_TEXT_COLORS;
this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT; this.fontStyle = RoundRectButtonSetting.DEFAULT_TEXT_FONT;
}; };
} }
RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = { RoundRectButtonSetting.DEFAULT_BUTTON_COLORS = {
out: 0xffffff, out: 0xffffff,
over: 0xddffdd, over: 0xddffdd,
down: 0xaaffaa, down: 0xaaffaa,
disabled: 0x333333 disabled: 0x333333
}; };
RoundRectButtonSetting.DEFAULT_TEXT_COLORS = { RoundRectButtonSetting.DEFAULT_TEXT_COLORS = {
out: "#000", out: "#000",
over: "#333", over: "#333",
down: "#666", down: "#666",
disabled: "#999" disabled: "#999"
}; };
RoundRectButtonSetting.DEFAULT_TEXT_FONT = { RoundRectButtonSetting.DEFAULT_TEXT_FONT = {
font: "30px Arial", font: "30px Arial",
align: "center", align: "center",
fill: "#fff" fill: "#fff"
}; };
RoundRectButtonSetting.DEFAULT_LINE_SPACING = -10; // pixels RoundRectButtonSetting.DEFAULT_LINE_SPACING = -10; // pixels
@@ -44,106 +44,106 @@ RoundRectButtonSetting.WHITE = 0xffffff;
class RoundRectButton { class RoundRectButton {
constructor(roundRectSetting, buttonText, clickEvent) { constructor(roundRectSetting, buttonText, clickEvent) {
this.setting = roundRectSetting; this.setting = roundRectSetting;
this.clickEvent = clickEvent; this.clickEvent = clickEvent;
this.button = this.makeSprite(); this.button = this.makeSprite();
this.text = this.makeText(buttonText); this.text = this.makeText(buttonText);
this.button.addChild(this.text); this.button.addChild(this.text);
this.button.anchor.setTo(0.5, 0.5); this.button.anchor.setTo(0.5, 0.5);
this.inputEnabled = true; this.inputEnabled = true;
this.setEventMethod(); this.setEventMethod();
this.mouseOut(); this.mouseOut();
} }
setEventMethod() { setEventMethod() {
this.button.events.onInputOver.add(function() { this.button.events.onInputOver.add(function() {
this.mouseOver(); this.mouseOver();
}, this); }, this);
this.button.events.onInputOut.add(function() { this.button.events.onInputOut.add(function() {
this.mouseOut(); this.mouseOut();
}, this); }, this);
this.button.events.onInputDown.add(function() { this.button.events.onInputDown.add(function() {
this.mouseDown(); this.mouseDown();
if(this.clickEvent) { if(this.clickEvent) {
this.clickEvent(); this.clickEvent();
} }
}, this); }, this);
this.button.events.onInputUp.add(function() { this.button.events.onInputUp.add(function() {
this.mouseOver(); this.mouseOver();
}, this); }, this);
} }
makeSprite() { makeSprite() {
let btnTexture = new Phaser.Graphics() let btnTexture = new Phaser.Graphics()
.beginFill(RoundRectButtonSetting.WHITE) .beginFill(RoundRectButtonSetting.WHITE)
.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()
.generateTexture(); .generateTexture();
return game.add.sprite(0, 0, btnTexture); return game.add.sprite(0, 0, btnTexture);
} }
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;
return btnText; return btnText;
} }
mouseOut() { mouseOut() {
this.button.tint = this.setting.buttonColors.out; this.button.tint = this.setting.buttonColors.out;
this.text.fill = this.setting.textColors.out; this.text.fill = this.setting.textColors.out;
} }
mouseOver() { mouseOver() {
this.button.tint = this.setting.buttonColors.over; this.button.tint = this.setting.buttonColors.over;
this.text.fill = this.setting.textColors.over; this.text.fill = this.setting.textColors.over;
} }
mouseDown() { mouseDown() {
this.button.tint = this.setting.buttonColors.down; this.button.tint = this.setting.buttonColors.down;
this.text.fill = this.setting.textColors.down; this.text.fill = this.setting.textColors.down;
} }
buttonDisabled() { buttonDisabled() {
this.button.tint = this.setting.buttonColors.disabled; this.button.tint = this.setting.buttonColors.disabled;
this.text.fill = this.setting.textColors.disabled; this.text.fill = this.setting.textColors.disabled;
} }
move(x, y) { move(x, y) {
this.button.x = x; this.button.x = x;
this.button.y = y; this.button.y = y;
} }
get inputEnabled() { get inputEnabled() {
return this.button.inputEnabled; return this.button.inputEnabled;
} }
set inputEnabled(isEnabled) { set inputEnabled(isEnabled) {
this.button.inputEnabled = isEnabled; this.button.inputEnabled = isEnabled;
if(isEnabled === true) { if(isEnabled === true) {
this.mouseOut(); this.mouseOut();
} else { } else {
this.buttonDisabled(); this.buttonDisabled();
} }
} }
set lineSpacing(spacingInPixels) { set lineSpacing(spacingInPixels) {
this.text.lineSpacing = spacingInPixels; this.text.lineSpacing = spacingInPixels;
} }
} }
src/game/login/login.js
+31 -44
View File
@@ -1,22 +1,30 @@
///////////////////////////// /////////////////////////////
// Login // Login
var Login = { let Login = {
self: {},
create: function() { create: function() {
var self = this; self = this;
this.game.stage.backgroundColor = '#4d4d4d'; 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 // name
var textX = this.game.world.centerX - 360; let textX = this.game.world.centerX - 360;
var inputX = this.game.world.centerX + 60; let inputX = this.game.world.centerX + 60;
var nameTextY = 340; const nameTextY = 340;
game.add.text(textX, nameTextY, "이름 :", textStyleBasic) game.add.text(textX, nameTextY, "이름 :", textStyleBasic)
.setTextBounds(0, 0, 200, 0) .setTextBounds(0, 0, 200, 0)
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -35,7 +43,7 @@ var Login = {
} }
// birthday // birthday
var birthdayTextY = 400; const birthdayTextY = 400;
game.add.text(textX, birthdayTextY, "생년월일 :", textStyleBasic) game.add.text(textX, birthdayTextY, "생년월일 :", textStyleBasic)
.setTextBounds(0, 0, 200, 0) .setTextBounds(0, 0, 200, 0)
.setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2) .setShadow(3, 3, 'rgba(0, 0, 0, 0.5)', 2)
@@ -52,44 +60,22 @@ var Login = {
self.startMenu(); self.startMenu();
} }
} }
this.inputTextName.canvasInput.focus(); this.inputTextName.canvasInput.focus();
// this.inputTextBirthday.canvasInput.focus(); // this.inputTextBirthday.canvasInput.focus();
},
// start button makeButton: function() {
/*
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);
*/
let setting = new RoundRectButtonSetting(200, 100); let setting = new RoundRectButtonSetting(200, 100);
setting.fontStyle = { setting.fontStyle.fontWeight = "bold";
fontSize: "30px",
align: "center",
fontWeight: "",
stroke: "red",
strokeThickness: 5
};
let startButton = new RoundRectButton(setting, "둥근 모서리\n버튼", this.startMenu); let startButton = new RoundRectButton(setting, "시작", this.startMenu);
startButton.move(game.world.centerX, game.world.centerY + 140); startButton.move(game.world.centerX, game.world.centerY + 140);
}, },
startMenu: function() { startMenu: function() {
var self = this; playerName = self.inputTextName.canvasInput._value;
let birthday = self.inputTextBirthday.canvasInput._value;
playerName = this.inputTextName.canvasInput._value;
var birthday = this.inputTextBirthday.canvasInput._value;
xhr = new XMLHttpRequest(); xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
@@ -98,12 +84,13 @@ var Login = {
// console.log("xhr.status : " + xhr.status); // console.log("xhr.status : " + xhr.status);
if(xhr.readyState == 4 && xhr.status == 200) { if(xhr.readyState == 4 && xhr.status == 200) {
// console.log(xhr.responseText); // console.log(xhr.responseText);
var jsonData = JSON.parse(xhr.responseText); let jsonData = JSON.parse(xhr.responseText);
// console.log(JSON.stringify(jsonData)); // console.log(JSON.stringify(jsonData));
// console.log(jsonData); // console.log(jsonData);
if(jsonData != null && jsonData["UserID"] != null) { if(jsonData != null && jsonData["UserID"] != null) {
// login successed // login successed
self.loginSucceeded(jsonData); self.loginSucceeded(jsonData);
} else { } else {
// login failed // login failed
@@ -113,12 +100,12 @@ var Login = {
} }
xhr.open('POST', 'login.php', true); xhr.open('POST', 'login.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var param = 'name=' + playerName + '&birthday=' + birthday; let param = 'name=' + playerName + '&birthday=' + birthday;
// console.log(param); // console.log(param);
xhr.send(param); xhr.send(param);
/* /*
var params = { let params = {
'name': this.inputTextName.canvasInput._value, 'name': this.inputTextName.canvasInput._value,
'birthday': this.inputTextBirthday.canvasInput._value 'birthday': this.inputTextBirthday.canvasInput._value
}; };
@@ -126,7 +113,7 @@ var Login = {
console.log(JSON.stringify(params)); console.log(JSON.stringify(params));
xhr.setRequestHeader("Content-type", "application/json"); 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(data);
xhr.send(JSON.stringify(params)); xhr.send(JSON.stringify(params));
@@ -146,4 +133,4 @@ var Login = {
console.log('login failed, jsonData : ' + JSON.stringify(jsonData)); console.log('login failed, jsonData : ' + JSON.stringify(jsonData));
} }
} }
study/RoundRectButton/round_rect_button_main.js
+20 -19
View File
@@ -2,35 +2,36 @@
// Main game // Main game
var game = new Phaser.Game(1000, 800, Phaser.CANVAS, "RoundRectButton", 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() { function preload() {
// game.load.image('phaser', '../../resources/image/phaser.png'); // game.load.image('phaser', '../../resources/image/phaser.png');
// game.load.spritesheet('button', './image/button_basic.png', 200, 100); // game.load.spritesheet('button', './image/button_basic.png', 200, 100);
} }
function create() { function create() {
// var i = game.add.image(game.world.centerX, game.world.centerY + 70, 'phaser'); // var i = game.add.image(game.world.centerX, game.world.centerY + 70, 'phaser');
// i.anchor.set(0.5); // i.anchor.set(0.5);
game.stage.backgroundColor = '#4d4d4d'; game.stage.backgroundColor = '#4d4d4d';
graphics = game.add.graphics(0, 0); graphics = game.add.graphics(0, 0);
let setting = new RoundRectButtonSetting(200, 100); let setting = new RoundRectButtonSetting(200, 100);
setting.fontStyle = { setting.fontStyle = {
fontSize: "30px", fontSize: "30px",
align: "center", align: "center",
fontWeight: "", fontWeight: "",
stroke: "red", stroke: "red",
strokeThickness: 5 strokeThickness: 5
}; };
let button = new RoundRectButton(setting, "둥근 모서리\n버튼", dummy); let button = new RoundRectButton(setting, "둥근 모서리\n버튼", dummy);
button.move(200, 200); button.move(200, 200);
// button.lineSpacing = -10; // button.lineSpacing = -10;
} }
function dummy() { function dummy() {
console.log("print dummy"); console.log("print dummy");
} }
function update() { function update() {