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