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

index.html

@@ -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

@@ -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');
     }
 }
 
@@ -413,27 +424,3 @@ Input.pushInput = function(inputKey)
         this.inputField.text.setText(Input.finalInput);
     }
 }
\ No newline at end of file
-
-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

@@ -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

@@ -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({
@@ -37,12 +36,18 @@ var menuScene = new Phaser.Class(
     {
         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(
 {
@@ -264,7 +284,9 @@ var gameScene = new Phaser.Class(
         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

+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

@@ -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

@@ -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);
 });