Escena base habitación (WIP)

- Añadidos assets de la habitación del jugador
- Creada bedroomBase como base para todas las escenas de habitación
- Creada bedroomMorningDay1 para la habitación de la mañana del día 1
- Modificado gameManager para que no haga falta indicar qué escena va después de la escena de la alarma
- Modificado alarmScene para que coja automáticamente la información del día y la escena siguiente
- Sacado messageBox de la carpeta del teléfono

localization/chat1.json

@@ -2,18 +2,39 @@
     "root": {
         "type": "choice",
         "choices":[
-            { "next": "answer" },
-            { "next": "answer2" }
+            { "next": "message1" },
+            { "next": "message2" }
         ]
     },
-    "answer": {
+    "message1": {
+        "type": "chatMessage",
+        "character": "player",
+        "chat": "chat1",
+        "replyDelay": 0,
+        "next": "answer1"
+    },
+    "message2": {
+        "type": "chatMessage",
+        "character": "player",
+        "chat": "chat1",
+        "replyDelay": 0,
+        "next": "answer2"
+    },
+    "answer1": {
         "type": "chatMessage",
         "character": "mom",
         "chat": "chat1",
         "replyDelay": 1000,
-        "next": "answer2"
+        "next": "finalMessage"
     },
     "answer2": {
+        "type": "chatMessage",
+        "character": "mom",
+        "chat": "chat1",
+        "replyDelay": 1000,
+        "next": "finalMessage"
+    },
+    "finalMessage": {
         "type": "chatMessage",
         "character": "player",
         "chat": "chat1",

localization/en/chat1.json

@@ -11,10 +11,20 @@
             "text_female": "I'm {{name}} and I'm a girl on life support"
         }
     ],
-    "answer": {
+    "message1": {
+        "text": "I'm going to rob your will to live."
+    },
+    "message2": {
+        "text": "Please call an ambulance I'm bleeding."
+    },
+    "answer1": {
         "text": "I'm calling the police."
     },
     "answer2": {
-        "text": "Yes please."
+        "text": "Keep it up."
+    },
+    "finalMessage": {
+        "text": "I wish."
     }
+
 }

localization/es/chat1.json

@@ -11,10 +11,20 @@
             "text_female": "Me llamo {{name}} y estoy moribunda"
         }
     ],
-    "answer": {
+    "message1": {
+        "text": "Te voy a robar hasta las ganas de vivir."
+    },
+    "message2": {
+        "text": "Por favor llama a una ambulancia, me estoy desangrando."
+    },
+    "answer1": {
         "text": "Voy a llamar a la policía."
     },
     "answer2": {
-        "text": "Por favor y gracias."
+        "text": "Sigue así."
+    },
+    "finalMessage": {
+        "text": "Ojalá."
     }
+
 }

src/UI/messageBox.js

@@ -52,6 +52,7 @@ export default class messageBox extends Phaser.GameObjects.Container {
         let textConfig = { ...scene.gameManager.textConfig };
         textConfig.fontFamily = 'roboto';
         textConfig.fontSize = 15 + 'px';
+        textConfig.fontStyle = 'bold';
         textConfig.color = '#000';
         textConfig.wordWrap = {
             width: maxWidth - (BOX_PADDING * 2 + TEXT_PADDING * 3),

src/UI/phone/chatScreen.js

@@ -34,6 +34,7 @@ export default class ChatScreen extends BaseScreen {
         let textConfig = { ...scene.gameManager.textConfig };
         textConfig.fontFamily = 'roboto';
         textConfig.color = '#000';
+        textConfig.fontStyle = 'bold';
 
         // Crea el texto del nombre de la persona
         this.nameText = this.scene.add.text(this.BG_X - this.bg.displayWidth * 0.15, this.BG_Y * 0.36, name, textConfig).setOrigin(0, 0.5);

src/UI/phone/phone.js

@@ -15,7 +15,7 @@ export default class Phone extends Phaser.GameObjects.Container {
         this.PHONE_Y = 800;
 
         // Se crean las imagenes y diferentes pantallas
-        this.phone = scene.add.image(this.PHONE_X, this.PHONE_Y, 'phone')
+        this.phone = scene.add.image(this.PHONE_X, this.PHONE_Y, 'phone');
         this.alarmScreen = new AlarmScreen(scene, this, null);
         this.mainScreen = new MainScreen(scene, this, null);
         this.statusScreen = new StatusScreen(scene, this, this.mainScreen);
@@ -40,12 +40,34 @@ export default class Phone extends Phaser.GameObjects.Container {
             this.add(screen);
             screen.visible = false;
         });
-
         // Se pone la imagen del telefono por encima de todo
         this.bringToTop(this.phone);
 
         this.currScreen = null;
 
+
+        // Forma personalizada de la silueta de la mano para 
+        // evitar que se guarde el telefono si se hace click 
+        // fuera del telefono pero dentro de la imagen de la mano
+        let graphics = scene.add.graphics(0, 0);
+        let polygon = new Phaser.Geom.Polygon([
+            358, 282,
+            245, 403,
+            228, 705,
+            -200, 1050,
+            579, 1050,
+            847, 558,
+            800, 262
+        ]);
+        // graphics.lineStyle(5, 0xFF00FF, 1.0).fillStyle(0xFFFFFF, 1.0).fillPoints(polygon.points, true);
+        graphics.generateTexture('hand', graphics.displayWidth, graphics.displayHeight);
+        let hand = scene.add.image(0, 0, 'hand').setOrigin(0, 0);
+        this.add(hand);
+        this.sendToBack(hand);
+        hand.setInteractive(polygon, Phaser.Geom.Polygon.Contains);
+        graphics.destroy();
+
+
         scene.add.existing(this);
     }
 

src/game.js

@@ -4,7 +4,9 @@ import TitleMenu from './scenes/titleMenu.js';
 import UserInfoMenu from './scenes/userInfoMenu.js';
 
 import TextOnlyScene from './scenes/textOnlyScene.js';
-import AlarmScene from './scenes/alarmScene.js';
+import AlarmScene from './scenes/gameLoop/alarmScene.js';
+import BedroomMorningDay1 from './scenes/gameLoop/day1/bedroomMorningDay1.js';
+
 import ComputerScene from './UI/computer/computerScene.js'
 
 import UIManager from './managers/UIManager.js';
@@ -24,7 +26,7 @@ const config = {
     // Nota: el orden de las escenas es relevante. Las que se encuentran delante, se renderizan delante
     scene: [
         BootScene, LanguageMenu, TitleMenu, UserInfoMenu,
-        TextOnlyScene, AlarmScene, 
+        TextOnlyScene, AlarmScene, BedroomMorningDay1,
         Test, TestMenu, ComputerScene, 
         UIManager, ],
     autoFocus: true,

src/managers/gameManager.js

@@ -224,24 +224,19 @@ export default class GameManager {
         this.computerScene.scene.sleep();
 
         // Pasa a la escena inicial con los parametros text, onComplete y onCompleteDelay
-        // sceneName = 'TextOnlyScene';
-        // this.changeScene(sceneName, {
-        //     // El texto de se coge del a archivo de traducciones
-        //     text: this.i18next.t("day1.start", { ns: "transitionScenes", returnObjects: true }),
-        //     onComplete: () => {
-        //         // Al llamar a onComplete, se cambiara a la escena de la alarma
-        //         // Con el parametro day, que se coge del archivo de traducciones
-        //         let days = this.i18next.t("clock.days", { ns: "phoneInfo", returnObjects: true });
-        //         this.changeScene('AlarmScene', {
-        //             day: days[0],
-        //             nextScene: 'Test'
-        //         });
-        //     },
-        //     onCompleteDelay: 500
-        // });
-
-        let sceneName = 'Test';
-        this.changeScene(sceneName);
+        let sceneName = 'TextOnlyScene';
+        this.changeScene(sceneName, {
+            // El texto de se coge del a archivo de traducciones
+            text: this.i18next.t("day1.start", { ns: "transitionScenes", returnObjects: true }),
+            onComplete: () => {
+                // Al llamar a onComplete, se cambiara a la escena de la alarma
+                this.changeScene('AlarmScene');
+            },
+            onCompleteDelay: 500
+        });
+
+        // let sceneName = 'BedroomDay1';
+        // this.changeScene(sceneName);
     }
 
     setUserInfo(userInfo) {

src/managers/phoneManager.js

@@ -66,7 +66,6 @@ export default class PhoneManager {
         this.botLid = scene.add.rectangle(0, this.scene.CANVAS_HEIGHT / 2, this.scene.CANVAS_WIDTH, this.scene.CANVAS_HEIGHT / 2, 0x000, 1).setOrigin(0, 0);
         this.botLid.setDepth(100).setScrollFactor(0);
 
-
         // Crea el mensaje de despertarse y lo guarda en la variable this.wakeUpMessage
         this.createMessage();
         this.wakeUpMessage.setScrollFactor(0);
@@ -267,9 +266,10 @@ export default class PhoneManager {
         // Configuracion de texto para las notificaciones
         let notifTextConfig = { ...this.scene.gameManager.textConfig };
         notifTextConfig.fontSize = 60 + 'px';
+        notifTextConfig.fontStyle = 'bold';
 
         // Crea el texto con el numero de notificaciones
-        let textObj = this.scene.add.text(0, 0, "AAAAAAA", notifTextConfig).setOrigin(0.5, 0.5);
+        let textObj = this.scene.add.text(0, 0, "", notifTextConfig).setOrigin(0.5, 0.5);
 
         // Crea el contenedor para todos los elementos y los andae 
         let notifications = this.scene.add.container(0, 0);
@@ -278,7 +278,14 @@ export default class PhoneManager {
         notifications.add(textObj);
 
         // Reordena los elementos
-        notifications.bringToTop(fillImg);
+        if (!circle) {
+            notifications.bringToTop(fillImg);
+            notifications.bringToTop(edgeImg);
+        }
+        else {
+            notifications.bringToTop(edgeImg);
+            notifications.bringToTop(fillImg);
+        }
         notifications.bringToTop(textObj);
 
         // Redimensiona el contenedor
@@ -374,8 +381,13 @@ export default class PhoneManager {
             this.activeTween.on('complete', () => {
                 this.wakeUpMessage.visible = false;
                 this.icon.visible = true;
-                this.notifications.visible = true;
 
+                if (this.notificationAmount > 0) {
+                    this.notifications.visible = true;
+                }
+                else {
+                    this.notifications.visible = false;
+                }
                 // Envia el evento de reiniciar la camara y el de despertarse
                 this.dispatcher.dispatch(this.resetCamEvent, {});
                 this.dispatcher.dispatch(this.wakeUpEvent, {});

src/scenes/bootScene.js

@@ -82,7 +82,7 @@ export default class BootScene extends Phaser.Scene {
         this.load.image('chatButton', 'chatButton.png');
         this.load.image('chatTextBox', 'chatTextBox.png');
 
-        this.load.image('myBubble', '9slicePlaeyrs.png');
+        this.load.image('myBubble', '9slicePlayer.png');
         this.load.image('othersBubble', '9sliceOthers.png');
     }
 
@@ -182,18 +182,40 @@ export default class BootScene extends Phaser.Scene {
         this.load.spine("dad", 'dad/Front 34.json', 'dad/Front 34.atlas')
     }
 
+    loadBackgrounds() {
+        this.load.setPath('./assets/backgrounds');
+
+        // Habitacion
+        this.load.image('bedroomCeiling', 'bedroom/bedroomCeiling.png');
+        this.load.image('bedroomBg', 'bedroom/bedroomBase.png');
+        this.load.image('bed', 'bedroom/bed.png');
+        this.load.image('bedroomDoorClosed', 'bedroom/bedroomDoorClosed.png');
+        this.load.image('bedroomDoorOpened', 'bedroom/bedroomDoorOpened.png');
+        this.load.image('bedroomJacket', 'bedroom/bedroomJacket.png');
+        this.load.image('clothes1', 'bedroom/clothes1.png');
+        this.load.image('clothes2', 'bedroom/clothes2.png');
+        this.load.image('clothes3', 'bedroom/clothes3.png');
+        this.load.image('wardrobeDoor1Closed', 'bedroom/wardrobeDoor1Closed.png');
+        this.load.image('wardrobeDoor1Opened', 'bedroom/wardrobeDoor1Opened.png');
+        this.load.image('wardrobeDoor2Closed', 'bedroom/wardrobeDoor2Closed.png');
+        this.load.image('wardrobeDoor2Opened', 'bedroom/wardrobeDoor2Opened.png');
+        this.load.image('wardrobeDoor3Closed', 'bedroom/wardrobeDoor3Closed.png');
+        this.load.image('wardrobeDoor3Opened', 'bedroom/wardrobeDoor3Opened.png');
+
+
+    }
+
     preload() {
         this.loadComputersAssets();
         this.loadPhoneAssets();
         this.loadFlags();
         this.loadAvatars();
         this.loadDialogs();
         this.loadSpinalAnims();
+        this.loadBackgrounds();
 
         this.load.setPath('./assets');
 
-        // Fondos
-        this.load.image('bedroomCeiling', 'backgrounds/bedroomCeilingBg.png');
 
         // Test
         this.load.image('bg', 'patio.png');

src/scenes/alarmScene.js → src/scenes/gameLoop/alarmScene.js

@@ -6,10 +6,10 @@ export default class AlarmScene extends BaseScene {
      * @extends Phaser.Scene
      * @param {Object} params - parametros de la escena. Debe contener day y nextScene
      * 
-     * IMPORTANTE: Esta escena es general para todos los dias, por lo que hay que indicar en los parametros
-     * el dia que es y la escena a la que se cambiara una vez apagada la alarma. A diferencia de la escena
-     * de solo texto, esta escena solo deberia cambiar a la habitacion de cada dia, por lo que no haria
-     * falta pasar parametros adicionales y se podria cambiar directamente llamando al changeScene del gameManager
+     * IMPORTANTE: Esta escena es general para todos los dias, pero a diferencia de la escena de 
+     * solo texto, esta escena solo deberia cambiar a la habitacion de por la manana cada dia, por 
+     * lo que no hace falta pasar parametros adicionales y se puede cambiar de escena directamente 
+     * llamando al changeScene del gameManager en lugar de tener que pasar un callback
      */
     constructor() {
         super('AlarmScene');
@@ -25,17 +25,12 @@ export default class AlarmScene extends BaseScene {
     create(params) {
         super.create();
 
-        this.day = "";
-        this.nextScene = "";
-        if (params.day) {
-            this.day = params.day;
-        }
-        if (params.nextScene) {
-            this.nextScene = params.nextScene;
-        }
+        let days = this.i18next.t("clock.days", { ns: "phoneInfo", returnObjects: true });
+        let day = days[this.gameManager.day - 1];
+
         // Cambia el dia y la hora del telefono
         let hour = this.i18next.t("clock.alarmHour", { ns: "phoneInfo", returnObjects: true });
-        this.phoneManager.phone.setDayInfo(hour, this.day);
+        this.phoneManager.phone.setDayInfo(hour, day);
 
         // Pone la imagen de fondo con las dimensiones del canvas
         let bg = this.add.image(0, 0, 'bedroomCeiling').setOrigin(0.5, 0);
@@ -56,7 +51,7 @@ export default class AlarmScene extends BaseScene {
             this.UIManager.cameras.main.scrollX = 0;
         });
         this.dispatcher.add(this.phoneManager.wakeUpEvent, this, (obj) => {
-            this.gameManager.changeScene(this.nextScene);
+            this.gameManager.changeScene('BedroomMorningDay' + this.gameManager.day);
         });
 
     }