버튼 및 배경화면들 일부 UI에 맞게 적용

js/ResourceLoader.js

@@ -5,7 +5,7 @@ ResourceLoader.loadBackGround = function(scene)
     scene.load.image('weightWarning', 'assets/image/background/weightWarning.png');
     scene.load.image('baseBackground', 'assets/image/background/yellowBack.png');
     scene.load.image('gameBackground', 'assets/image/background/background_brain.png');
-    scene.load.image('menuBackground', 'assets/placeholder/menuBackground.png');
+    scene.load.image('menuBackground', 'assets/image/UI/main/mainBackground.png');
     scene.load.image('roomBackground', 'assets/placeholder/roomBackground.png');
 }
 
@@ -46,7 +46,12 @@ ResourceLoader.loadImage = function(scene)
     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('friendlyPlayBtn', 'assets/image/UI/main/friendlyPlay.png');
+    scene.load.image('rankPlayBtn', 'assets/image/UI/main/rankPlay.png');
+    scene.load.image('shopBtn', 'assets/image/UI/main/shop.png');
+    scene.load.image('hopaeManageBtn', 'assets/image/UI/main/hopaeManage.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 });

js/ScenesData.js

@@ -34,7 +34,7 @@ var menuScene = new Phaser.Class(
     
     create: function()
     {
-        BackGround.drawBackground(this);
+        BackGround.drawMenu(this);
         Audio.loopSound(this, 'login');
         ScenesData.menuScene.tutorialFrame = 0;
         ScenesData.menuScene.tutorialImage = UIObject.createButton(this, UIObject.createLabel(this, game.config.width / 2, game.config.height / 2, 11,
@@ -66,8 +66,8 @@ var menuScene = new Phaser.Class(
             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(250, 75, PlayerData.userData.userName).setOrigin(0, 0.5).setColor('#000000').setDepth(9.9).setPadding(5,5,5,5).setFont('40pt sejongFont');
+            this.money = this.add.text(950, 70, PlayerData.userData.money).setOrigin(1, 0.5).setColor('#000000').setDepth(9.9).setPadding(5,5,5,5).setFont('40pt sejongFont');
 
             this.organizeHopae = function()
             {
@@ -187,7 +187,7 @@ var menuScene = new Phaser.Class(
             });
 
             
-            this.gameStartBtn = UIObject.createButton(this, UIObject.createLabel(this, game.config.width / 2, 900, 5, 'pyeongminWrite', 0.5, 'center'), 1, 0, 2, 
+            this.gameStartBtn = UIObject.createButton(this, UIObject.createLabel(this, game.config.width / 2, 950, 5, 'friendlyPlayBtn', 1, 'center', '게임 시작', 50), -1, -1, -1, 
                 function()
                 {
                     ScenesData.menuScene.gameStartBtn.setEnable(false);
@@ -195,18 +195,18 @@ var menuScene = new Phaser.Class(
                     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, 
+            this.shopBtn = UIObject.createButton(this, UIObject.createLabel(this, game.config.width - 100, 950, 5, 'shopBtn', 1, 'center'), -1, -1, -1, 
                 function()
                 {
                     console.log('상점 입장');
                 })
             
-            this.hopaeBtn = UIObject.createButton(this, UIObject.createLabel(this, 100, 900, 5, 'pyeongminThrow', 0.5, 'center'), 1, 0, 2, 
+            this.hopaeBtn = UIObject.createButton(this, UIObject.createLabel(this, 100, 950, 5, 'hopaeManageBtn', 1, 'center'), -1, -1, -1, 
                 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, 
+            this.helpBtn = UIObject.createButton(this, UIObject.createLabel(this, game.config.width - 100, 75, 5, 'helpBtn', 1, 'center'), -1, -1, -1, 
                 function()
                 {
                     ScenesData.menuScene.tutorialImage.setVisible(true).popUp(200);

js/UIObject.js

@@ -52,37 +52,41 @@ UIObject.createButton = function(scene, buttonGameObject, overFrame, outFrame, d
             clickInterval: 100
         }
     });
-    buttonGameObject = buttonGameObject.getElement('background');
+    let buttonGameObjectBackground = buttonGameObject.getElement('background');
     temp.enabled = true;    
-    buttonGameObject.setFrame(outFrame).setInteractive()
+    buttonGameObjectBackground.setFrame(outFrame).setInteractive()
     .on('pointerover', () => {
         if(temp.enabled)
         {
-            if(overFrame != -1) buttonGameObject.setFrame(overFrame);
+            if(overFrame != -1) buttonGameObjectBackground.setFrame(overFrame);
+            else buttonGameObject.setScale(1.1);
         }
     })
     .on('pointerdown', () => {
         if(temp.enabled)
         {
-            if(downFrame != -1) buttonGameObject.setFrame(downFrame);
+            if(downFrame != -1) buttonGameObjectBackground.setFrame(downFrame);
+            else buttonGameObject.setScale(0.9);
             clickCallback();
         }
     })
     .on('pointerup', () => {
         if(temp.enabled)
         {
-            if(overFrame != -1) buttonGameObject.setFrame(overFrame);
+            if(overFrame != -1) buttonGameObjectBackground.setFrame(overFrame);
+            else buttonGameObject.setScale(1.1);
         }
     })
     .on('pointerout', () => {
-        if(outFrame != -1) buttonGameObject.setFrame(outFrame);
+        if(outFrame != -1) buttonGameObjectBackground.setFrame(outFrame);
+        else buttonGameObject.setScale(1);
     })
     temp.setEnable = function(isEnable)
     {
         temp.enabled = isEnable;
         return temp;
     }
-    temp.getBackground = function() { return buttonGameObject; }
+    temp.getBackground = function() { return buttonGameObjectBackground; }
 
     return temp;
 }
\ No newline at end of file