Reajuste imágenes y escenas

assets/characters/characters.json → assets/characters/plains/someCharacters.json

@@ -1,47 +1,47 @@
 {
   "frames": {
-    "Alison": {
+    "Maria": {
       "frame": {
         "x": 0,
         "y": 0,
-        "w": 664,
-        "h": 2259
+        "w": 639,
+        "h": 2416
       },
       "rotated": false,
       "trimmed": true,
       "spriteSourceSize": {
         "x": 0,
-        "y": 8,
-        "w": 664,
-        "h": 2259
+        "y": 0,
+        "w": 639,
+        "h": 2416
       },
       "sourceSize": {
-        "w": 669,
-        "h": 2270
+        "w": 639,
+        "h": 2425
       },
       "pivot": {
         "x": 0.5,
         "y": 0.5
       }
     },
-    "Ana": {
+    "Guille": {
       "frame": {
-        "x": 664,
+        "x": 639,
         "y": 0,
-        "w": 783,
-        "h": 2304
+        "w": 720,
+        "h": 2399
       },
       "rotated": false,
       "trimmed": true,
       "spriteSourceSize": {
         "x": 0,
-        "y": 11,
-        "w": 783,
-        "h": 2304
+        "y": 0,
+        "w": 720,
+        "h": 2399
       },
       "sourceSize": {
-        "w": 796,
-        "h": 2315
+        "w": 720,
+        "h": 2404
       },
       "pivot": {
         "x": 0.5,
@@ -50,7 +50,7 @@
     },
     "Jose": {
       "frame": {
-        "x": 1447,
+        "x": 1359,
         "y": 0,
         "w": 889,
         "h": 2366
@@ -72,72 +72,48 @@
         "y": 0.5
       }
     },
-    "Guille": {
-      "frame": {
-        "x": 2336,
-        "y": 0,
-        "w": 720,
-        "h": 2399
-      },
-      "rotated": false,
-      "trimmed": true,
-      "spriteSourceSize": {
-        "x": 0,
-        "y": 0,
-        "w": 720,
-        "h": 2399
-      },
-      "sourceSize": {
-        "w": 720,
-        "h": 2404
-      },
-      "pivot": {
-        "x": 0.5,
-        "y": 0.5
-      }
-    },
-    "Maria": {
+    "Ana": {
       "frame": {
-        "x": 3056,
+        "x": 2248,
         "y": 0,
-        "w": 639,
-        "h": 2416
+        "w": 783,
+        "h": 2304
       },
       "rotated": false,
       "trimmed": true,
       "spriteSourceSize": {
         "x": 0,
-        "y": 0,
-        "w": 639,
-        "h": 2416
+        "y": 11,
+        "w": 783,
+        "h": 2304
       },
       "sourceSize": {
-        "w": 639,
-        "h": 2425
+        "w": 796,
+        "h": 2315
       },
       "pivot": {
         "x": 0.5,
         "y": 0.5
       }
     },
-    "Alex": {
+    "Alison": {
       "frame": {
-        "x": 3695,
+        "x": 3031,
         "y": 0,
-        "w": 921,
-        "h": 2449
+        "w": 664,
+        "h": 2259
       },
       "rotated": false,
       "trimmed": true,
       "spriteSourceSize": {
         "x": 0,
-        "y": 14,
-        "w": 921,
-        "h": 2449
+        "y": 8,
+        "w": 664,
+        "h": 2259
       },
       "sourceSize": {
-        "w": 932,
-        "h": 2463
+        "w": 669,
+        "h": 2270
       },
       "pivot": {
         "x": 0.5,
@@ -148,11 +124,11 @@
   "meta": {
     "app": "http://free-tex-packer.com",
     "version": "0.6.7",
-    "image": "characters.png",
+    "image": "someCharacters.png",
     "format": "RGBA8888",
     "size": {
-      "w": 4616,
-      "h": 2449
+      "w": 3695,
+      "h": 2416
     },
     "scale": 1
   }

src/scenes/bootScene.js

@@ -259,12 +259,16 @@ export default class BootScene extends Phaser.Scene {
     }
 
     loadCharacters() {
-        this.load.setPath('assets/characters');
+        // Personajes planos sin animaciones
+        this.load.setPath('assets/characters/plains');
 
-        this.load.atlas('characters', 'characters.png', 'characters.json');
-        this.load.image('teacher', 'teacher.png');
+        this.load.atlas('someCharacters', 'someCharacters.png', 'someCharacters.json');
+        this.load.image('teacherChar', 'teacher.png');
+        this.load.image('AlexChar', 'Alex.png');
 
         // Personajes y sus respectivas animaciones esqueletales de Spine
+        this.load.setPath('assets/characters/Spine');
+
         // [Idle01, IdleBase, Walk]
         this.load.spine('mom', 'mom/Front.json', 'mom/Front.atlas');
 

src/scenes/gameLoop/baseScenarios/nightmareMinigame.js

@@ -110,7 +110,7 @@ export default class NightmareMinigame extends NightmareBase {
             y: offset,
             scale: 0.48
         }
-        let shadow = this.createCharFromImage(tr, 'Alex', null, charName);
+        let shadow = this.createCharFromImage(tr, 'AlexChar', null, null, charName);
 
         shadow.char.setOrigin(0).setDepth(2);
         //shadow.char.setVisible(false);
@@ -120,8 +120,8 @@ export default class NightmareMinigame extends NightmareBase {
 
         // Se va a colocar en la derecha mirando hacia la izquierda
         if (this.left !== undefined && this.left === false) {
-            shadow.char.x = this.CANVAS_WIDTH - offset;
-            // Se rota la imagen (tb afecta a la pos del origen)
+            shadow.char.x = this.CANVAS_WIDTH - shadow.char.displayWidth - offset;
+            // Se rota la imagen (si es un frame de un atlas tb afecta al origen)
             shadow.char.flipX = true;
             shadow.portrait.flipX = true;
         }
@@ -135,25 +135,42 @@ export default class NightmareMinigame extends NightmareBase {
     /**
      * 
      * @param {Object} tr - posicion y escala del personaje 
-     * @param {String} sprite - id del personaje
+     * @param {String} sprite - sprite del personaje
+     * @param {String} atlas - atlas de donde obtener la imagen (opcional)
      * @param {Object} portraitOffset - desplazamiento de la posicion y la escala respecto a la por defecto
      *                                  (opcional, sino se usa la por defecto)
-     * @param {String} portraitName - nombre con el guardar el retrato del personaje (opcional, sino se usa el id del personaje) 
+     * @param {String} portraitName - nombre con el guardar el retrato del personaje (opcional, sino se usa el nombre del sprite) 
      * @returns {Object} - personaje y retrato
      */
-    createCharFromImage(tr, charId, portraitOffset, portraitName) {
-        let char = this.add.image(tr.x, tr.y, 'characters', charId);
-        char.setScale(tr.scale);
-
+    createCharFromImage(tr, sprite, atlas, portraitOffset, portraitName) {
         // Si no se ha indicado ningun offset, se usa el por defecto
         if (!portraitOffset) {
             portraitOffset = this.portraitOffset;
         }
-        let portrait = this.add.image(this.portraitTr.x + portraitOffset.x, this.portraitTr.y + portraitOffset.y, 'characters', charId);
+
+        let char = null;
+        let portrait = null;
+        let portraitPos = {
+            x: this.portraitTr.x + portraitOffset.x,
+            y: this.portraitTr.y + portraitOffset.y
+        }
+
+        if (atlas) {
+            char = this.add.image(tr.x, tr.y, atlas, sprite);
+            portrait = this.add.image(portraitPos.x, portraitPos.y, atlas, sprite);
+        }
+        else {
+            char = this.add.image(tr.x, tr.y, sprite);
+            portrait = this.add.image(portraitPos.x, portraitPos.y, sprite);
+        }
+
+        char.setScale(tr.scale);
+
         // Se situa en este origen porque es el unico que tienen las animaciones esqueletales
         portrait.setOrigin(0.5, 1);
         portrait.setScale(this.portraitTr.scale * portraitOffset.scale);
-        let name = charId;
+
+        let name = sprite;
         // Si se indica un nombre para el retrato, se usa ese
         if (portraitName) {
             name = portraitName;

src/scenes/gameLoop/day1/classBackMorningDay1.js

@@ -27,9 +27,9 @@ export default class ClassBackMorningDay1 extends ClassBackBase {
             y: this.CANVAS_HEIGHT * 0.37,
             scale: 0.07
         };
-        let teacher = this.add.image(tr.x, tr.y, 'teacher').setOrigin(0, 0).setScale(tr.scale).setDepth(this.row1Tables.depth - 1);
+        let teacher = this.add.image(tr.x, tr.y, 'teacherChar').setOrigin(0, 0).setScale(tr.scale).setDepth(this.row1Tables.depth - 1);
         let teacherPortrait = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacher').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
-        this.portraits.set("teacher", teacherPortrait);
+        this.portraits.set("teacherChar", teacherPortrait);
 
 
         // Personajes de fondo

src/scenes/gameLoop/day1/classFrontMorningDay1.js

@@ -9,7 +9,7 @@ export default class ClassFrontMorningDay1 extends ClassFrontBase {
     create(params) {
         super.create(params);
 
-        let teacher = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacher').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
+        let teacher = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacherChar').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
         this.portraits.set("teacher", teacher);
 
         // Si no se ha llegado tarde, solo se coloca a Ana en clase

src/scenes/gameLoop/day2/classFrontMorningDay2.js

@@ -1,5 +1,4 @@
 import ClassFrontBase from "../baseScenarios/classFrontBase.js";
-import Character from "../../../gameObjects/character.js";
 
 export default class ClassFrontMorningDay2 extends ClassFrontBase {
     constructor() {
@@ -9,7 +8,7 @@ export default class ClassFrontMorningDay2 extends ClassFrontBase {
     create(params) {
         super.create(params);
 
-        let teacher = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacher').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
+        let teacher = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacherChar').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
         this.portraits.set("teacher", teacher);
 
         // Si no se ha llegado tarde, pone el nodo de dialogo al interactuar con las mesas

src/scenes/gameLoop/day3/classFrontMorningDay3.js

@@ -8,7 +8,7 @@ export default class ClassFrontMorningDay3 extends ClassFrontBase {
     create(params) {
         super.create(params);
 
-        let teacher = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacher').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
+        let teacher = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacherChar').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
         this.portraits.set("teacher", teacher);
 
         // Si no se ha llegado tarde, pone el nodo de dialogo al interactuar con las mesas

src/scenes/gameLoop/day3/nightmareDay3.js

@@ -36,7 +36,7 @@ export default class NightmareDay3 extends NightmareMinigame {
             y: 2.95 * this.CANVAS_HEIGHT / 4,
             scale: 0.125
         }
-        let portraitOffset = {...this.portraitOffset};
+        let portraitOffset = { ...this.portraitOffset };
         portraitOffset.x += 5;
         portraitOffset.scale = 1.54;
         portraitOffset.y += -20
@@ -47,7 +47,7 @@ export default class NightmareDay3 extends NightmareMinigame {
             y: 7.8 * this.CANVAS_HEIGHT / 9,
             scale: 0.17
         }
-        portraitOffset = {...this.portraitOffset};
+        portraitOffset = { ...this.portraitOffset };
         portraitOffset.y -= 20;
         this.createClassmate(tr, 'Alison', portraitOffset);
 
@@ -56,7 +56,7 @@ export default class NightmareDay3 extends NightmareMinigame {
             y: this.CANVAS_HEIGHT - 17,
             scale: 0.182
         }
-        portraitOffset = {...this.portraitOffset};
+        portraitOffset = { ...this.portraitOffset };
         portraitOffset.y -= 23;
         portraitOffset.scale = 1.558;
         this.createClassmate(tr, 'Ana', portraitOffset);
@@ -105,7 +105,7 @@ export default class NightmareDay3 extends NightmareMinigame {
      * Crear personaje que aparece en la pesadillas con el que se puede interactuar
      */
     createClassmate(tr, charName, portraitOffset) {
-        let character = this.createCharFromImage(tr, charName, portraitOffset);
+        let character = this.createCharFromImage(tr, charName, 'someCharacters', portraitOffset);
         character.char.setOrigin(0.5, 1);
         character.char.setVisible(false);
 

src/scenes/gameLoop/day4/classFrontMorningDay4.js

@@ -8,7 +8,7 @@ export default class ClassFrontMorningDay4 extends ClassFrontBase {
     create(params) {
         super.create(params);
 
-        let teacher = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacher').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
+        let teacher = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacherChar').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
         this.portraits.set("teacher", teacher);
 
         // Si no se ha llegado tarde, pone el nodo de dialogo al interactuar con las mesas

src/scenes/gameLoop/day5/classFrontMorningDay5.js

@@ -8,7 +8,7 @@ export default class ClassFrontMorningDay5 extends ClassFrontBase {
     create(params) {
         super.create(params);
 
-        let teacher = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacher').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
+        let teacher = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacherChar').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
         this.portraits.set("teacher", teacher);
 
         // Se pone el nodo de dialogo al interactuar con las mesas

src/scenes/gameLoop/day5/restroomAfternoonDay5.js

@@ -27,8 +27,8 @@ export default class RestroomAfternoonDay5 extends RestroomBase {
             y: 1370 * this.scale,
             scale: 0.16
         };
-        let teacher = this.add.image(tr.x, tr.y, 'teacher').setOrigin(0.5, 1).setScale(tr.scale);
-        let teacherPortrait = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacher').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
+        let teacher = this.add.image(tr.x, tr.y, 'teacherChar').setOrigin(0.5, 1).setScale(tr.scale);
+        let teacherPortrait = this.add.image(this.portraitTr.x, this.portraitTr.y + 20, 'teacherChar').setOrigin(0.5, 1).setScale(this.portraitTr.scale);
         this.portraits.set("teacher", teacherPortrait);
         teacher.visible = false;