Skip to content

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

튜토리얼 및 도움말 용 플레이스 홀더 만들고 도움말 창 만듬. assets/image/UI/tutorial 참고

parent 93a6c09a
Hide whitespace changes
Inline Side-by-side
Showing with 187 additions and 167 deletions
index.html
View file @ 9559f922
......@@ -20,7 +20,7 @@
<style media='screen' type='text/css'>
@font-face {
font-family: sejongFont;
src: url('assets/font/EBS주시경B.ttf');
src: url('assets/font/EBS훈민정음새론SB.ttf');
font-weight:400;
font-weight:normal;
}
......
js/ResourceLoader.js
View file @ 9559f922
......@@ -42,13 +42,17 @@ ResourceLoader.loadImage = function(scene)
scene.load.image('pyeongminStand', 'assets/image/character/pyeongmin/pyeong_stand.png');
scene.load.spritesheet('wordBreak', 'assets/image/word/wordbreak.png', { frameWidth: 180, frameHeight: 180 });
scene.load.spritesheet('phase1', 'assets/image/etc/scroll/startPhase/startPhase.png', { frameWidth: 280, frameHeight: 920 });
scene.load.spritesheet('phase2', 'assets/image/etc/scroll/bonPhase/bonPhase.png', { frameWidth: 280, frameHeight: 920 });
scene.load.spritesheet('phase3', 'assets/image/etc/scroll/poongPhase/poongPhase.png', { frameWidth: 280, frameHeight: 920 });
scene.load.image('attackPaper', 'assets/image/etc/paper_crumbled.png');
scene.load.image('panel', 'assets/placeholder/panel.png');
scene.load.image('button', 'assets/placeholder/button.png');
scene.load.image('itemBag', 'assets/image/etc/itembag2.png');
scene.load.image('helpBtn', 'assets/image/UI/main/help.png');
scene.load.spritesheet('phase1', 'assets/image/etc/scroll/startPhase/startPhase.png', { frameWidth: 280, frameHeight: 920 });
scene.load.spritesheet('phase2', 'assets/image/etc/scroll/bonPhase/bonPhase.png', { frameWidth: 280, frameHeight: 920 });
scene.load.spritesheet('phase3', 'assets/image/etc/scroll/poongPhase/poongPhase.png', { frameWidth: 280, frameHeight: 920 });
scene.load.spritesheet('tutorialImage', 'assets/image/UI/tutorial/tutorialImages.png', { frameWidth: 1000, frameHeight: 800 });
}
ResourceLoader.loadAnimation = function(scene)
......
js/ScenesData.js
View file @ 9559f922
......@@ -36,155 +36,187 @@ var menuScene = new Phaser.Class(
{
BackGround.drawBackground(this);
Audio.loopSound(this, 'login');
if(PlayerData.userData.hopae === undefined || PlayerData.userData.hopae.length == 0)
ScenesData.menuScene.tutorialFrame = 0;
ScenesData.menuScene.tutorialImage = UIObject.createButton(this, UIObject.createLabel(this, game.config.width / 2, game.config.height / 2, 11,
'tutorialImage', 1, 'center'), -1, -1, -1,
function()
{
ScenesData.menuScene.tutorialFrame = (ScenesData.menuScene.tutorialFrame + 1) % 9;
if(ScenesData.menuScene.tutorialFrame >= 8)
{
ScenesData.menuScene.tutorialImage.getBackground().setFrame(0);
if(PlayerData.userData.hopae === undefined || PlayerData.userData.hopae.length == 0) ScenesData.changeScene('hopaeScene');
else
{
ScenesData.menuScene.tutorialFrame = 0;
ScenesData.menuScene.tutorialImage.setVisible(false);
ScenesData.menuScene.helpBtn.setEnable(true);
ScenesData.menuScene.gameStartBtn.setEnable(true);
ScenesData.menuScene.shopBtn.setEnable(true);
ScenesData.menuScene.hopaeBtn.setEnable(true);
ScenesData.menuScene.currentHopaeBtn.setEnable(true);
}
}
ScenesData.menuScene.tutorialImage.getBackground().setFrame(ScenesData.menuScene.tutorialFrame);
}).setVisible(false);
if(PlayerData.userData.hopae === undefined || PlayerData.userData.hopae.length == 0) ScenesData.menuScene.tutorialImage.setVisible(true).popUp(1000);
else
{
PlayerData.userData.money += 1;
ScenesData.changeScene('hopaeScene');
return;
}
PlayerData.currentHopae = (PlayerData.userData.recentHopae == null) ? PlayerData.userData.hopae[0] : PlayerData.userData.recentHopae;
PlayerData.nickname = PlayerData.currentHopae.name;
PlayerData.currentHopae = (PlayerData.userData.recentHopae == null) ? PlayerData.userData.hopae[0] : PlayerData.userData.recentHopae;
PlayerData.nickname = PlayerData.currentHopae.name;
this.userName = this.add.text(100, 100, '내 이름 : ' + PlayerData.userData.userName).setOrigin(0, 0.5).setColor('#000000').setDepth(9.9).setPadding(5,5,5,5).setFontSize(40);
this.money = this.add.text(100, 200, '소지 엽전 : ' + PlayerData.userData.money).setOrigin(0, 0.5).setColor('#000000').setDepth(9.9).setPadding(5,5,5,5).setFontSize(40);
this.userName = this.add.text(100, 100, '내 이름 : ' + PlayerData.userData.userName).setOrigin(0, 0.5).setColor('#000000').setDepth(9.9).setPadding(5,5,5,5).setFontSize(40);
this.money = this.add.text(100, 200, '소지 엽전 : ' + PlayerData.userData.money).setOrigin(0, 0.5).setColor('#000000').setDepth(9.9).setPadding(5,5,5,5).setFontSize(40);
this.organizeHopae = function()
{
this.myHopae = [];
this.myHopae.push({
name: PlayerData.currentHopae.name,
type: PlayerData.currentHopae.type,
});
for(let i = 0; i < PlayerData.userData.hopae.length; i++)
if(PlayerData.userData.hopae[i].name != PlayerData.currentHopae.name)
this.myHopae.push({
name: PlayerData.userData.hopae[i].name,
type: PlayerData.userData.hopae[i].type,
this.organizeHopae = function()
{
this.myHopae = [];
this.myHopae.push({
name: PlayerData.currentHopae.name,
type: PlayerData.currentHopae.type,
});
for(let i = 0; i < PlayerData.userData.hopae.length; i++)
if(PlayerData.userData.hopae[i].name != PlayerData.currentHopae.name)
this.myHopae.push({
name: PlayerData.userData.hopae[i].name,
type: PlayerData.userData.hopae[i].type,
});
}
this.createHopaeMenu = function()
{
this.hopaeMenuObject = [];
for(let i = 0; i < this.myHopae.length; i++)
{
let temp = UIObject.createButton(this, UIObject.createLabel(this, 100, 300, 5,
'nameBgr' + ScenesData.menuScene.myHopae[i].name.length, 1, 'left', ScenesData.menuScene.myHopae[i].name, 25, '#ffffff', 0.45, 0.5), 0, 0, 0,
function()
{
PlayerData.currentHopae = ScenesData.menuScene.myHopae[i];
PlayerData.nickname = ScenesData.menuScene.myHopae[i].name;
ScenesData.menuScene.organizeHopae();
ScenesData.menuScene.currentHopaeBtn.destroy();
ScenesData.menuScene.createCurrentHopae();
ScenesData.menuScene.hopaeMenuObject.forEach(function(element){
ScenesData.menuScene.tweens.add({
targets: element,
y: 0,
duration: 200,
ease: 'Linear',
loop: 0,
onComplete: function(){element.destroy();}
});
});
});
}
ScenesData.menuScene.tweens.add({
targets: temp,
y: 50 * i,
duration: 500,
ease: 'Bounce',
loop: 0
});
this.hopaeMenuObject.push(temp);
}
}
this.createHopaeMenu = function()
{
this.hopaeMenuObject = [];
for(let i = 0; i < this.myHopae.length; i++)
this.createCurrentHopae = function()
{
let temp = UIObject.createButton(this, UIObject.createLabel(this, 100, 300, 5,
'nameBgr' + ScenesData.menuScene.myHopae[i].name.length, 1, 'left', ScenesData.menuScene.myHopae[i].name, 25, '#ffffff', 0.45, 0.5), 0, 0, 0,
this.currentHopaeBtn = UIObject.createButton(this, UIObject.createLabel(this, 100, 300, 5,
'nameBgr' + PlayerData.nickname.length, 1, 'left', PlayerData.nickname, 25, '#ffffff', 0.45, 0.5), 0, 0, 0,
function()
{
PlayerData.currentHopae = ScenesData.menuScene.myHopae[i];
PlayerData.nickname = ScenesData.menuScene.myHopae[i].name;
ScenesData.menuScene.organizeHopae();
ScenesData.menuScene.currentHopaeBtn.destroy();
ScenesData.menuScene.createCurrentHopae();
ScenesData.menuScene.hopaeMenuObject.forEach(function(element){
ScenesData.menuScene.tweens.add({
targets: element,
y: 0,
duration: 200,
ease: 'Linear',
loop: 0,
onComplete: function(){element.destroy();}
});
});
});
ScenesData.menuScene.tweens.add({
targets: temp,
y: 50 * i,
duration: 500,
ease: 'Bounce',
loop: 0
});
this.hopaeMenuObject.push(temp);
ScenesData.menuScene.createHopaeMenu();
})
}
}
this.createCurrentHopae = function()
{
this.currentHopaeBtn = UIObject.createButton(this, UIObject.createLabel(this, 100, 300, 5,
'nameBgr' + PlayerData.nickname.length, 1, 'left', PlayerData.nickname, 25, '#ffffff', 0.45, 0.5), 0, 0, 0,
function()
{
ScenesData.menuScene.currentHopaeBtn.destroy();
ScenesData.menuScene.createHopaeMenu();
})
}
this.organizeHopae();
this.createCurrentHopae();
this.organizeHopae();
this.createCurrentHopae();
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);
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);
this.roomEnterDialog = this.rexUI.add.dialog({
x: game.config.width / 2,
y: game.config.height / 2,
this.roomEnterDialog = this.rexUI.add.dialog({
x: game.config.width / 2,
y: game.config.height / 2,
background: this.add.sprite(game.config.width / 2, game.config.height / 2, 'panel').setOrigin(0.5, 0.5),
content: this.add.text(0, 0, '대기실에 참가하시겠습니까?', {
font: '50pt sejongFont'
}),
background: this.add.sprite(game.config.width / 2, game.config.height / 2, 'panel').setOrigin(0.5, 0.5),
content: this.add.text(0, 0, '대기실에 참가하시겠습니까?', {
font: '50pt sejongFont'
}),
actions: [
UIObject.createLabel(this, 0, 0, 0, 'button', 1, 'center', '예', 50),
UIObject.createLabel(this, 0, 0, 0, 'button', 1, 'center', '아니오', 50)
],
actions: [
UIObject.createLabel(this, 0, 0, 0, 'button', 1, 'center', '예', 50),
UIObject.createLabel(this, 0, 0, 0, 'button', 1, 'center', '아니오', 50)
],
space: {
content: 25,
action: 100,
space: {
content: 25,
action: 100,
left: 20,
right: 20,
top: 20,
bottom: 20,
},
left: 20,
right: 20,
top: 20,
bottom: 20,
},
align: {
actions: 'center' // 'center'|'left'|'right'
},
align: {
actions: 'center' // 'center'|'left'|'right'
},
expand: {
content: false, // Content is a pure text object
}
}).layout().setDepth(11).setVisible(false);
expand: {
content: false, // Content is a pure text object
}
}).layout().setDepth(11).setVisible(false);
this.roomEnterDialog
.on('button.click', function (button, groupName, index) {
if(index == 0) socket.emit('enterRoom', PlayerData.nickname);
else
{
this.roomEnterDialog.setVisible(false);
this.gameStartBtn.setEnable(true);
}
}, this)
.on('button.over', function (button, groupName, index) {
//console.log('button over');
})
.on('button.out', function (button, groupName, index) {
//console.log('button out');
});
this.roomEnterDialog
.on('button.click', function (button, groupName, index) {
if(index == 0) socket.emit('enterRoom', PlayerData.nickname);
else
this.gameStartBtn = UIObject.createButton(this, UIObject.createLabel(this, game.config.width / 2, 900, 5, 'pyeongminWrite', 0.5, 'center'), 1, 0, 2,
function()
{
this.roomEnterDialog.setVisible(false);
this.gameStartBtn.setEnable(true);
}
}, this)
.on('button.over', function (button, groupName, index) {
//console.log('button over');
})
.on('button.out', function (button, groupName, index) {
//console.log('button out');
});
this.gameStartBtn = UIObject.createButton(this, UIObject.createLabel(this, game.config.width / 2, 900, 5, 'pyeongminWrite', 0.5, 'center'), 1, 0, 2,
function()
{
ScenesData.menuScene.gameStartBtn.setEnable(false);
ScenesData.menuScene.roomEnterDialog.setVisible(true);
ScenesData.menuScene.roomEnterDialog.popUp(200);
})
this.shopBtn = UIObject.createButton(this, UIObject.createLabel(this, game.config.width - 100, 900, 5, 'pyeongminThrow', 0.5, 'center'), 1, 0, 2,
function()
{
console.log('상점 입장');
})
this.hopaeBtn = UIObject.createButton(this, UIObject.createLabel(this, 100, 900, 5, 'pyeongminThrow', 0.5, 'center'), 1, 0, 2,
function()
{
ScenesData.changeScene('hopaeScene');
})
ScenesData.menuScene.gameStartBtn.setEnable(false);
ScenesData.menuScene.roomEnterDialog.setVisible(true);
ScenesData.menuScene.roomEnterDialog.popUp(200);
})
this.shopBtn = UIObject.createButton(this, UIObject.createLabel(this, game.config.width - 100, 900, 5, 'pyeongminThrow', 0.5, 'center'), 1, 0, 2,
function()
{
console.log('상점 입장');
})
this.hopaeBtn = UIObject.createButton(this, UIObject.createLabel(this, 100, 900, 5, 'pyeongminThrow', 0.5, 'center'), 1, 0, 2,
function()
{
ScenesData.changeScene('hopaeScene');
})
this.helpBtn = UIObject.createButton(this, UIObject.createLabel(this, game.config.width - 100, 100, 5, 'helpBtn', 0.5, 'center'), 0, 0, 0,
function()
{
ScenesData.menuScene.tutorialImage.setVisible(true).popUp(200);
ScenesData.menuScene.helpBtn.setEnable(false);
ScenesData.menuScene.gameStartBtn.setEnable(false);
ScenesData.menuScene.shopBtn.setEnable(false);
ScenesData.menuScene.hopaeBtn.setEnable(false);
ScenesData.menuScene.currentHopaeBtn.setEnable(false);
})
}
}
});
......@@ -230,10 +262,9 @@ var hopaeScene = new Phaser.Class(
background: this.add.sprite(game.config.width / 2, game.config.height / 2, 'panel').setOrigin(0.5, 0.5),
content: this.add.text(0, 0, '이 이름으로 하시겠습니까?' + (PlayerData.userData.hopae.length == 0 ? '\n(최초 호패는 비용이 들지 않습니다.)' : '\n변경에는 엽전이 소모됩니다.'), {
font: '50pt sejongFont',
color: '#000000',
align: 'center'
content: this.add.text(0, 0, '이 이름으로 하시겠습니까?' + (PlayerData.userData.hopae === undefined || PlayerData.userData.hopae.length == 0 ?
'\n(최초 호패는 비용이 들지 않습니다.)' : '\n변경에는 엽전이 소모됩니다.'), {
font: '50pt sejongFont', color: '#000000', align: 'center'
}),
actions: [
......@@ -242,38 +273,27 @@ var hopaeScene = new Phaser.Class(
],
space: {
content: 25,
action: 100,
left: 20,
right: 20,
top: 20,
bottom: 20,
},
align: {
actions: 'center' // 'center'|'left'|'right'
content: 25, action: 100,
left: 20, right: 20, top: 20, bottom: 20,
},
expand: {
content: false, // Content is a pure text object
}
align: { actions: 'center' },
expand: { content: false }
}).layout().setDepth(11).setVisible(false);
this.checkDialog
.on('button.click', function (button, groupName, index) {
if(index == 0)
{
if(PlayerData.userData.money > 0)
if(PlayerData.userData.hopae === undefined || PlayerData.userData.hopae.length == 0 || PlayerData.userData.money > 0)
{
fbClient.updateUserData('hopae', {name: Input.inputField.text.text, type: 'wood'});
fbClient.updateUserData('money', -1);
fbClient.updateUserData('money', PlayerData.userData.hopae === undefined || PlayerData.userData.hopae.length == 0 ? 0 : -1);
ScenesData.changeScene('menuScene');
}
else
{
this.checkDialog.setVisible(false);
this.errorMsg = UIObject.createButton(this, UIObject.createLabel(this, game.config.width / 2, game.config.height / 2, 10, 'panel', 1, 'center',
'엽전이 부족합니다', 50, '#000000').layout().popUp(200), 0, 0, 0,
function()
......@@ -479,17 +499,9 @@ var gameScene = new Phaser.Class(
if(ScenesData.currentScene == ScenesData.gameScene && WordSpace.gameTimer != null)
{
WordSpace.deltaTime = this.sys.game.loop.delta;
WordSpace.wordForcedGroup.forEach(function(element)
{
element.attract();
});
WordSpace.nameGroup.forEach(function(element)
{
element.attract();
})
WordSpace.attackPaperGroup.getChildren().forEach(function(element){
element.moveObject(element);
});
WordSpace.wordForcedGroup.forEach(function(element) { element.attract(); });
WordSpace.nameGroup.forEach(function(element) { element.attract(); });
WordSpace.attackPaperGroup.getChildren().forEach(function(element) { element.moveObject(element); });
WordSpace.setPlayerTyping.add('');
......
js/UIObject.js
View file @ 9559f922
......@@ -58,27 +58,31 @@ UIObject.createButton = function(scene, buttonGameObject, overFrame, outFrame, d
.on('pointerover', () => {
if(temp.enabled)
{
buttonGameObject.setFrame(overFrame);
if(overFrame != -1) buttonGameObject.setFrame(overFrame);
}
})
.on('pointerdown', () => {
if(temp.enabled)
{
buttonGameObject.setFrame(downFrame);
if(downFrame != -1) buttonGameObject.setFrame(downFrame);
clickCallback();
}
})
.on('pointerup', () => {
buttonGameObject.setFrame(overFrame);
if(temp.enabled)
{
if(overFrame != -1) buttonGameObject.setFrame(overFrame);
}
})
.on('pointerout', () => {
buttonGameObject.setFrame(outFrame);
if(outFrame != -1) buttonGameObject.setFrame(outFrame);
})
temp.setEnable = function(isEnable)
{
temp.enabled = isEnable;
return temp;
}
temp.getBackground = function() { return buttonGameObject; }
return temp;
}
\ No newline at end of file
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