Skip to content

S
sejong25
Commit e42c19f3 authored by 18손재민's avatar 18손재민
Browse files
Options

인풋 창 및 기타 패널들 UI 플러그인 것으로 수정함

parent 4c60cbc3
Hide whitespace changes
Inline Side-by-side
Showing with 118 additions and 63 deletions
index.html
View file @ e42c19f3
......@@ -16,6 +16,7 @@
<script src="js/BGMsound.js"></script>
<script src="js/Enums.js"></script>
<script src="js/ResourceLoader.js"></script>
<script src="js/UIObject.js"></script>
<style>
img { position: relative; width: 100%; height: 100%; z-index: 0;}
......
js/Input.js
View file @ e42c19f3
......@@ -35,7 +35,7 @@ Input.menuSceneEnterReaction = function()
if (Input.finalInput.length > 1)
{
PlayerData.nickname = Input.finalInput;
ScenesData.menuScene.hopae.setText('내 호패 : ' + PlayerData.nickname);
ScenesData.menuScene.currentHopae.setText('현재 호패 : ' + PlayerData.nickname);
Input.reset();
}
else
......@@ -44,6 +44,21 @@ Input.menuSceneEnterReaction = function()
Input.reset();
}
}
/*Input.hopaeSceneEnterReaction = function()
{
Input.finalInput = Input.removeConVow(Input.finalInput);
if (Input.finalInput.length > 1)
{
PlayerData.nickname = Input.finalInput;
ScenesData.menuScene.currentHopae.setText('현재 호패 : ' + PlayerData.nickname);
Input.reset();
}
else
{
alert('정확한 가명을 입력해주세요.');
Input.reset();
}
}*/
Input.reset = function()
{
......@@ -319,12 +334,12 @@ Input.removeConVow = function(_wordText)
Input.inputField =
{
generate: function(scene, enterCallback)
generate: function(scene, enterCallback, text)
{
this.background = scene.add.sprite(game.config.width / 2, game.config.height * 25 / 36, 'inputfield').setDepth(10);
this.text = scene.add.text(game.config.width / 2, game.config.height * 25 / 36, "", {font: '25pt 궁서'}).setOrigin(0.5, 0.5).setColor('#000000').setDepth(10);
this.text = text.setFontFamily('궁서');
//this.text = scene.add.text(background.x, background.y, "", {font: fontSize + 'pt 궁서'}).setOrigin(0.5, 0.5).setColor('#000000').setDepth(10);
scene.input.keyboard.on('keyup', function() {Input.pressCount--; Input.justPressed = ''})
scene.input.keyboard.on('keyup', function() {Input.pressCount--; Input.justPressed = ''; console.log(Input.finalInput);})
scene.input.keyboard.on('keydown-SHIFT', function() {Input.isShifted = true});
scene.input.keyboard.on('keyup-SHIFT', function() {Input.isShifted = false});
scene.input.keyboard.on('keydown-DELETE', function() {Input.reset()});
......@@ -375,10 +390,6 @@ Input.inputField =
scene.input.keyboard.on('keydown-B', function() {Input.pushInput('ㅠ')});
scene.input.keyboard.on('keydown-N', function() {Input.pushInput('ㅜ')});
scene.input.keyboard.on('keydown-M', function() {Input.pushInput('ㅡ')});
},
loadImage: function(scene)
{
scene.load.image('inputfield', 'assets/placeholder/inputfield.png');
}
}
......@@ -412,28 +423,4 @@ Input.pushInput = function(inputKey)
}
this.inputField.text.setText(Input.finalInput);
}
}
class Button extends Phaser.GameObjects.Sprite{
constructor(scene, x, y, texture, overFrame, outFrame, downFrame)
{
super(scene, x, y, texture);
scene.add.existing(this);
this.setFrame(outFrame).setInteractive()
.on('pointerover', () => {
this.setFrame(overFrame)
})
.on('pointerdown', () => {
this.setFrame(downFrame)
})
.on('pointerup', () => {
this.setFrame(overFrame)
})
.on('pointerout', () => {
this.setFrame(outFrame)
})
}
}
\ No newline at end of file
js/ResourceLoader.js
View file @ e42c19f3
......@@ -11,6 +11,7 @@ ResourceLoader.loadBackGround = function(scene)
ResourceLoader.loadImage = function(scene)
{
scene.load.image('inputfield', 'assets/placeholder/inputfield.png');
for (let i = 0; i < 4; i++)
{
for (let j = 2; j < 7; j++)
......
js/ScenesData.js
View file @ e42c19f3
......@@ -18,7 +18,6 @@ var menuScene = new Phaser.Class(
ScenesData.currentScene = this;
ResourceLoader.loadBackGround(this);
ResourceLoader.loadImage(this);
Input.inputField.loadImage(this);
CSVParsing.loadText(this);
Audio.loadSound(this);
this.load.scenePlugin({
......@@ -32,17 +31,23 @@ var menuScene = new Phaser.Class(
sceneKey: 'button'
});
},
create: function()
{
BackGround.drawBackground(this);
Audio.loopSound(this, 'login');
Input.inputField.generate(this, Input.menuSceneEnterReaction);
Input.inputField.generate(this, Input.menuSceneEnterReaction,
UIObject.createLabel(this, game.config.width / 2, game.config.height * 25 / 36, 10, 'inputfield', 1, '', 25, '#000000').getElement('text'));
//Input.inputField.generate(this, Input.menuSceneEnterReaction, this.add.sprite(game.config.width / 2, game.config.height * 25 / 36, 'inputfield').setDepth(10), 25);
this.userName = this.add.text(100, 100, '내 이름 : ' + PlayerData.userData.userName).setOrigin(0, 0.5).setColor('#000000').setDepth(10).setPadding(5,5,5,5).setFontSize(40);
this.money = this.add.text(100, 200, '소지 엽전 : ' + PlayerData.userData.money).setOrigin(0, 0.5).setColor('#000000').setDepth(10).setPadding(5,5,5,5).setFontSize(40);
this.hopae = this.add.text(100, 300, '현재 호패 : ' + PlayerData.userData.recentHopae).setOrigin(0, 0.5).setColor('#000000').setDepth(10).setPadding(5,5,5,5).setFontSize(40);
this.currentHopae = this.add.text(100, 300, '현재 호패 : ' + PlayerData.userData.recentHopae).setOrigin(0, 0.5).setColor('#000000').setDepth(10).setPadding(5,5,5,5).setFontSize(40);
this.allHopae = '';
PlayerData.userData.hopae.forEach(function(element) {this.allHopae += element.name + ' '});
PlayerData.userData.hopae.forEach(function(element) {this.allHopae += (element.name + ' ')});
this.hopae = this.add.text(100, 400, '내 호패들 : ' + allHopae).setOrigin(0, 0.5).setColor('#000000').setDepth(10).setPadding(5,5,5,5).setFontSize(40);
this.myCharacter = this.add.sprite(game.config.width / 2, game.config.height / 2 - 200, 'pyeongminStand').setOrigin(0.5, 0.5).setDepth(5).setScale(0.8);
......@@ -74,8 +79,8 @@ var menuScene = new Phaser.Class(
}),
actions: [
createLabel(this, 'button', 0, 0, 'Yes'),
createLabel(this, 'button', 0, 0, 'No')
UIObject.createLabel(this, 0, 0, 0, 'button', 1, 'Yes'),
UIObject.createLabel(this, 0, 0, 0, 'button', 1, 'No')
],
space: {
......@@ -130,29 +135,44 @@ var menuScene = new Phaser.Class(
}).on('click', function(button, gameObject, pointer){
console.log('상점 입장');
}, this);
}
});
var createLabel = function (scene, image, width, height, text = '') {
return scene.rexUI.add.label({
width: width,
height: height,
var hopaeScene = new Phaser.Class(
{
Extends: Phaser.Scene,
background: scene.add.sprite(0, 0, image).setOrigin(0.5, 0.5),
initialize:
text: scene.add.text(0, 0, text, {
fontSize: '24px'
}),
function hopaeScene ()
{
Phaser.Scene.call(this, {key: 'hopaeScene'});
},
space: {
left: 10,
right: 10,
top: 10,
bottom: 10
}
});
}
preload: function()
{
ScenesData.hopaeScene = this;
this.load.scenePlugin({
key: 'rexuiplugin',
url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/plugins/dist/rexuiplugin.min.js',
sceneKey: 'rexUI'
});
this.load.scenePlugin({
key: 'rexbuttonplugin',
url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/plugins/dist/rexbuttonplugin.min.js',
sceneKey: 'button'
});
},
create: function()
{
BackGround.drawBackground(this);
Input.inputField.generate(this, function(){},
UIObject.createLabel(this, game.config.width / 2, game.config.height / 2, 10, 'nameBgr6', 2, '', 50, '#ffffff').getElement('text'));
}
});
var roomScene = new Phaser.Class(
{
......@@ -263,8 +283,10 @@ var gameScene = new Phaser.Class(
BackGround.drawCharacter(this);
Audio.playSound(this, 'startGame');
WordSpace.wordPhysicsGroup = this.physics.add.group();
Input.inputField.generate(this, Input.gameSceneEnterReaction);
Input.inputField.generate(this, Input.gameSceneEnterReaction,
UIObject.createLabel(this, game.config.width / 2, game.config.height * 25 / 36, 10, 'inputfield', 1, '', 25, '#000000').getElement('text'));
WordSpace.attackGauge.generate(this);
WordSpace.spaceInitiate(this);
WordSpace.attackGauge.resetCycle(this);
......@@ -320,6 +342,5 @@ var gameScene = new Phaser.Class(
ScenesData.changeScene = function(scene)
{
game.scene.stop(ScenesData.currentScene);
ScenesData.currentScene = scene;
game.scene.start(scene);
ScenesData.currentScene = game.scene.start(scene);
}
\ No newline at end of file
js/UIObject.js 0 → 100644
View file @ e42c19f3
var UIObject = UIObject || {};
UIObject.createLabel = function (scene, x, y, depth, image, size, text = '', textSize = 24, textColor = '#000000') {
return scene.rexUI.add.label({
/*width: width,
height: height,*/
background: scene.add.sprite(x, y, image).setScale(size).setOrigin(0.5, 0.5).setDepth(depth),
text: scene.add.text(x, y, text, {
fontSize: textSize + 'pt'
}).setDepth(depth).setOrigin(0.5, 0.5).setColor(textColor),
space: {
left: 10,
right: 10,
top: 10,
bottom: 10
}
});
}
class Button extends Phaser.GameObjects.Sprite{
constructor(scene, x, y, texture, overFrame, outFrame, downFrame)
{
super(scene, x, y, texture);
scene.add.existing(this);
this.setFrame(outFrame).setInteractive()
.on('pointerover', () => {
this.setFrame(overFrame)
})
.on('pointerdown', () => {
this.setFrame(downFrame)
})
.on('pointerup', () => {
this.setFrame(overFrame)
})
.on('pointerout', () => {
this.setFrame(outFrame)
})
}
}
\ No newline at end of file
js/main.js
View file @ e42c19f3
......@@ -14,7 +14,7 @@ var config = {
}
},
backgroundColor: Phaser.Display.Color.HexStringToColor('#ffffff').color,//GetColor(245,208,138),
scene: [ menuScene, roomScene, gameScene ]
scene: [ menuScene, hopaeScene, roomScene, gameScene ]
};
var game = null;
......
server.js
View file @ e42c19f3
......@@ -13,7 +13,7 @@ app.get('/', function(req, res) {
});
// http 기본 포트(80)에 서버 열기
server.listen(8080, function() {
server.listen(80, function() {
console.log('[SERVER] Listening on port ' + server.address().port);
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment