Merge pull request #231 from thecodingmachine/customize-characters2

Fixing problem when switching scenes with container

front/src/Phaser/Entity/Character.ts

@@ -62,6 +62,7 @@ export abstract class Character extends Container {
 
         for (const texture of textures) {
             const sprite = new Sprite(scene, 0, 0, texture, frame);
+            this.add(sprite);
             this.getPlayerAnimations(texture).forEach(d => {
                 this.scene.anims.create({
                     key: d.key,
@@ -70,9 +71,8 @@ export abstract class Character extends Container {
                     repeat: d.repeat
                 });
             })
-            this.add(sprite);
+            // Needed, otherwise, animations are not handled correctly.
             this.scene.sys.updateList.add(sprite);
-            this.scene.sys.displayList.add(sprite);
             this.sprites.set(texture, sprite);
         }
 
@@ -212,6 +212,9 @@ export abstract class Character extends Container {
         if (this.scene) {
             this.scene.events.removeListener('postupdate', this.postupdate.bind(this));
         }
+        for (const sprite of this.sprites.values()) {
+            this.scene.sys.updateList.remove(sprite);
+        }
         super.destroy(fromScene);
         this.playerName.destroy();
     }

front/src/Phaser/Entity/body_character.ts

@@ -1,3 +1,5 @@
+import LoaderPlugin = Phaser.Loader.LoaderPlugin;
+
 export interface BodyResourceDescriptionInterface {
     name: string,
     img: string
@@ -296,3 +298,15 @@ export const LAYERS: Array<Array<BodyResourceDescriptionInterface>> = [
     HATS_RESOURCES,
     ACCESSORIES_RESOURCES
 ];
+
+export const loadAllLayers = (load: LoaderPlugin) => {
+    for (let j = 0; j < LAYERS.length; j++) {
+        for (let i = 0; i < LAYERS[j].length; i++) {
+            load.spritesheet(
+                LAYERS[j][i].name,
+                LAYERS[j][i].img,
+                {frameWidth: 32, frameHeight: 32}
+            )
+        }
+    }
+}

front/src/Phaser/Game/GameScene.ts

@@ -28,6 +28,7 @@ import {SimplePeer} from "../../WebRtc/SimplePeer";
 import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
 import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
 import {FourOFourSceneName} from "../Reconnecting/FourOFourScene";
+import {LAYERS, loadAllLayers} from "../Entity/body_character";
 
 
 export enum Textures {
@@ -158,6 +159,8 @@ export class GameScene extends Phaser.Scene {
             );
         });
 
+        loadAllLayers(this.load);
+
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
 
         this.connectionPromise = Connection.createConnection(gameManager.getPlayerName(), gameManager.getCharacterSelected()).then((connection : Connection) => {

front/src/Phaser/Login/CustomizeScene.ts

@@ -2,7 +2,7 @@ import {EnableCameraSceneName} from "./EnableCameraScene";
 import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {LAYERS} from "../Entity/body_character";
+import {LAYERS, loadAllLayers} from "../Entity/body_character";
 import Sprite = Phaser.GameObjects.Sprite;
 import Container = Phaser.GameObjects.Container;
 import {gameManager} from "../Game/GameManager";
@@ -50,15 +50,7 @@ export class CustomizeScene extends Phaser.Scene {
         this.load.bitmapFont(CustomizeTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
 
         //load all the png files
-        for (let j = 0; j < LAYERS.length; j++) {
+        loadAllLayers(this.load);
-            for (let i = 0; i < LAYERS[j].length; i++) {
-                this.load.spritesheet(
-                    LAYERS[j][i].name,
-                    LAYERS[j][i].img,
-                    {frameWidth: 32, frameHeight: 32}
-                )
-            }
-        }
     }
 
     create() {
@@ -105,14 +97,12 @@ export class CustomizeScene extends Phaser.Scene {
             const layers: string[] = [];
             let i = 0;
             for (const layerItem of this.selectedLayers) {
-                console.log(i, layerItem, LAYERS);
                 if (layerItem !== undefined) {
                     layers.push(LAYERS[i][layerItem].name);
                 }
                 i++;
             }
 
-            console.log(layers);
             gameManager.setCharacterLayers(layers);
 
             return this.scene.start(EnableCameraSceneName);