Merge pull request #573 from thecodingmachine/lazyloading

All player textures are now lazy-loaded

front/src/Connexion/ConnexionModels.ts

@@ -1,8 +1,8 @@
 import {PlayerAnimationNames} from "../Phaser/Player/Animation";
 import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
 import {SignalData} from "simple-peer";
-import {BodyResourceDescriptionInterface} from "../Phaser/Entity/body_character";
 import {RoomConnection} from "./RoomConnection";
+import {BodyResourceDescriptionInterface} from "../Phaser/Entity/PlayerTextures";
 
 export enum EventMessage{
     CONNECT = "connect",

front/src/Connexion/RoomConnection.ts

@@ -41,7 +41,7 @@ import {
     ViewportInterface, WebRtcDisconnectMessageInterface,
     WebRtcSignalReceivedMessageInterface,
 } from "./ConnexionModels";
-import {BodyResourceDescriptionInterface} from "../Phaser/Entity/body_character";
+import {BodyResourceDescriptionInterface} from "../Phaser/Entity/PlayerTextures";
 
 const manualPingDelay = 20000;
 

front/src/Phaser/Components/Loader.ts

@@ -0,0 +1,14 @@
+
+export const addLoader = (scene:Phaser.Scene): void => {
+    const loadingText = scene.add.text(scene.game.renderer.width / 2, 200, 'Loading');
+    const progress = scene.add.graphics();
+    scene.load.on('progress', (value: number) => {
+        progress.clear();
+        progress.fillStyle(0xffffff, 1);
+        progress.fillRect(0, 270, 800 * value, 60);
+    });
+    scene.load.on('complete', () => {
+        loadingText.destroy();
+        progress.destroy();
+    });
+}

front/src/Phaser/Entity/Character.ts

@@ -5,33 +5,6 @@ import Container = Phaser.GameObjects.Container;
 import Sprite = Phaser.GameObjects.Sprite;
 import {TextureError} from "../../Exception/TextureError";
 
-export interface PlayerResourceDescriptionInterface {
-    name: string,
-    img: string
-}
-
-export const PLAYER_RESOURCES: Array<PlayerResourceDescriptionInterface> = [
-    {name: "male1", img: "resources/characters/pipoya/Male 01-1.png" /*, x: 32, y: 32*/},
-    {name: "male2", img: "resources/characters/pipoya/Male 02-2.png"/*, x: 64, y: 32*/},
-    {name: "male3", img: "resources/characters/pipoya/Male 03-4.png"/*, x: 96, y: 32*/},
-    {name: "male4", img: "resources/characters/pipoya/Male 09-1.png"/*, x: 128, y: 32*/},
-
-    {name: "male5", img: "resources/characters/pipoya/Male 10-3.png"/*, x: 32, y: 64*/},
-    {name: "male6", img: "resources/characters/pipoya/Male 17-2.png"/*, x: 64, y: 64*/},
-    {name: "male7", img: "resources/characters/pipoya/Male 18-1.png"/*, x: 96, y: 64*/},
-    {name: "male8", img: "resources/characters/pipoya/Male 16-4.png"/*, x: 128, y: 64*/},
-
-    {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png"/*, x: 32, y: 96*/},
-    {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png"/*, x: 64, y: 96*/},
-    {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png"/*, x: 96, y: 96*/},
-    {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png"/*, x: 128, y: 96*/},
-
-    {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png"/*, x: 32, y: 128*/},
-    {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png"/*, x: 64, y: 128*/},
-    {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png"/*, x: 96, y: 128*/},
-    {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"/*, x: 128, y: 128*/}
-];
-
 interface AnimationData {
     key: string;
     frameRate: number;
@@ -48,11 +21,12 @@ export abstract class Character extends Container {
     public sprites: Map<string, Sprite>;
     private lastDirection: string = PlayerAnimationNames.WalkDown;
     //private teleportation: Sprite;
+    private invisible: boolean;
 
     constructor(scene: Phaser.Scene,
                 x: number,
                 y: number,
-                textures: string[],
+                texturesPromise: Promise<string[]>,
                 name: string,
                 direction: string,
                 moving: boolean,
@@ -60,10 +34,15 @@ export abstract class Character extends Container {
     ) {
         super(scene, x, y/*, texture, frame*/);
         this.PlayerValue = name;
+        this.invisible = true
 
         this.sprites = new Map<string, Sprite>();
 
-        this.addTextures(textures, frame);
+        //textures are inside a Promise in case they need to be lazyloaded before use.
+        texturesPromise.then((textures) => {
+            this.addTextures(textures, frame);
+            this.invisible = false
+        })
 
         /*this.teleportation = new Sprite(scene, -20, -10, 'teleportation', 3);
         this.teleportation.setInteractive();
@@ -148,6 +127,7 @@ export abstract class Character extends Container {
     }
 
     protected playAnimation(direction : string, moving: boolean): void {
+        if (this.invisible) return;
         for (const [texture, sprite] of this.sprites.entries()) {
             if (!sprite.anims) {
                 console.error('ANIMS IS NOT DEFINED!!!');
@@ -190,7 +170,6 @@ export abstract class Character extends Container {
             this.playAnimation(PlayerAnimationNames.WalkLeft, true);
         }
 
-        //update depth user
         this.setDepth(this.y);
     }
 

front/src/Phaser/Entity/PlayerTextures.ts

@@ -0,0 +1,334 @@
+//The list of all the player textures, both the default models and the partial textures used for customization
+
+export interface BodyResourceDescriptionListInterface {
+    [key: string]: BodyResourceDescriptionInterface
+}
+
+export interface BodyResourceDescriptionInterface {
+    name: string,
+    img: string
+}
+
+export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = {
+    "male1": {name: "male1", img: "resources/characters/pipoya/Male 01-1.png"},
+    "male2": {name: "male2", img: "resources/characters/pipoya/Male 02-2.png"},
+    "male3": {name: "male3", img: "resources/characters/pipoya/Male 03-4.png"},
+    "male4": {name: "male4", img: "resources/characters/pipoya/Male 09-1.png"},
+    "male5": {name: "male5", img: "resources/characters/pipoya/Male 10-3.png"},
+    "male6": {name: "male6", img: "resources/characters/pipoya/Male 17-2.png"},
+    "male7": {name: "male7", img: "resources/characters/pipoya/Male 18-1.png"},
+    "male8": {name: "male8", img: "resources/characters/pipoya/Male 16-4.png"},
+    "Female1": {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png"},
+    "Female2": {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png"},
+    "Female3": {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png"},
+    "Female4": {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png"},
+    "Female5": {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png"},
+    "Female6": {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png"},
+    "Female7": {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png"},
+    "Female8": {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png"}
+};
+
+export const COLOR_RESOURCES: BodyResourceDescriptionListInterface = {
+    "color_1": {name: "color_1", img: "resources/customisation/character_color/character_color0.png"},
+    "color_2": {name: "color_2", img: "resources/customisation/character_color/character_color1.png"},
+    "color_3": {name: "color_3", img: "resources/customisation/character_color/character_color2.png"},
+    "color_4": {name: "color_4", img: "resources/customisation/character_color/character_color3.png"},
+    "color_5": {name: "color_5", img: "resources/customisation/character_color/character_color4.png"},
+    "color_6": {name: "color_6", img: "resources/customisation/character_color/character_color5.png"},
+    "color_7": {name: "color_7", img: "resources/customisation/character_color/character_color6.png"},
+    "color_8": {name: "color_8", img: "resources/customisation/character_color/character_color7.png"},
+    "color_9": {name: "color_9", img: "resources/customisation/character_color/character_color8.png"},
+    "color_10": {name: "color_10", img: "resources/customisation/character_color/character_color9.png"},
+    "color_11": {name: "color_11", img: "resources/customisation/character_color/character_color10.png"},
+    "color_12": {name: "color_12", img: "resources/customisation/character_color/character_color11.png"},
+    "color_13": {name: "color_13", img: "resources/customisation/character_color/character_color12.png"},
+    "color_14": {name: "color_14", img: "resources/customisation/character_color/character_color13.png"},
+    "color_15": {name: "color_15", img: "resources/customisation/character_color/character_color14.png"},
+    "color_16": {name: "color_16", img: "resources/customisation/character_color/character_color15.png"},
+    "color_17": {name: "color_17", img: "resources/customisation/character_color/character_color16.png"},
+    "color_18": {name: "color_18", img: "resources/customisation/character_color/character_color17.png"},
+    "color_19": {name: "color_19", img: "resources/customisation/character_color/character_color18.png"},
+    "color_20": {name: "color_20", img: "resources/customisation/character_color/character_color19.png"},
+    "color_21": {name: "color_21", img: "resources/customisation/character_color/character_color20.png"},
+    "color_22": {name: "color_22", img: "resources/customisation/character_color/character_color21.png"},
+    "color_23": {name: "color_23", img: "resources/customisation/character_color/character_color22.png"},
+    "color_24": {name: "color_24", img: "resources/customisation/character_color/character_color23.png"},
+    "color_25": {name: "color_25", img: "resources/customisation/character_color/character_color24.png"},
+    "color_26": {name: "color_26", img: "resources/customisation/character_color/character_color25.png"},
+    "color_27": {name: "color_27", img: "resources/customisation/character_color/character_color26.png"},
+    "color_28": {name: "color_28", img: "resources/customisation/character_color/character_color27.png"},
+    "color_29": {name: "color_29", img: "resources/customisation/character_color/character_color28.png"},
+    "color_30": {name: "color_30", img: "resources/customisation/character_color/character_color29.png"},
+    "color_31": {name: "color_31", img: "resources/customisation/character_color/character_color30.png"},
+    "color_32": {name: "color_32", img: "resources/customisation/character_color/character_color31.png"},
+    "color_33": {name: "color_33", img: "resources/customisation/character_color/character_color32.png"}
+};
+
+export const EYES_RESOURCES: BodyResourceDescriptionListInterface = {
+    "eyes_1": {name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png"},
+    "eyes_2": {name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png"},
+    "eyes_3": {name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png"},
+    "eyes_4": {name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png"},
+    "eyes_5": {name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png"},
+    "eyes_6": {name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png"},
+    "eyes_7": {name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png"},
+    "eyes_8": {name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png"},
+    "eyes_9": {name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png"},
+    "eyes_10": {name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png"},
+    "eyes_11": {name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png"},
+    "eyes_12": {name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png"},
+    "eyes_13": {name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png"},
+    "eyes_14": {name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png"},
+    "eyes_15": {name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png"},
+    "eyes_16": {name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png"},
+    "eyes_17": {name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png"},
+    "eyes_18": {name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png"},
+    "eyes_19": {name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png"},
+    "eyes_20": {name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png"},
+    "eyes_21": {name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png"},
+    "eyes_22": {name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png"},
+    "eyes_23": {name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png"},
+    "eyes_24": {name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png"},
+    "eyes_25": {name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png"},
+    "eyes_26": {name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png"},
+    "eyes_27": {name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png"},
+    "eyes_28": {name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png"},
+    "eyes_29": {name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png"},
+    "eyes_30": {name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png"}
+
+};
+
+export const HAIR_RESOURCES: BodyResourceDescriptionListInterface = {
+    "hair_1": {name:"hair_1", img: "resources/customisation/character_hairs/character_hairs0.png"},
+    "hair_2": {name:"hair_2", img: "resources/customisation/character_hairs/character_hairs1.png"},
+    "hair_3": {name:"hair_3", img: "resources/customisation/character_hairs/character_hairs2.png"},
+    "hair_4": {name:"hair_4", img: "resources/customisation/character_hairs/character_hairs3.png"},
+    "hair_5": {name:"hair_5", img: "resources/customisation/character_hairs/character_hairs4.png"},
+    "hair_6": {name:"hair_6", img: "resources/customisation/character_hairs/character_hairs5.png"},
+    "hair_7": {name:"hair_7", img: "resources/customisation/character_hairs/character_hairs6.png"},
+    "hair_8": {name:"hair_8", img: "resources/customisation/character_hairs/character_hairs7.png"},
+    "hair_9": {name:"hair_9", img: "resources/customisation/character_hairs/character_hairs8.png"},
+    "hair_10": {name:"hair_10",img: "resources/customisation/character_hairs/character_hairs9.png"},
+    "hair_11": {name:"hair_11",img: "resources/customisation/character_hairs/character_hairs10.png"},
+    "hair_12": {name:"hair_12",img: "resources/customisation/character_hairs/character_hairs11.png"},
+    "hair_13": {name:"hair_13",img: "resources/customisation/character_hairs/character_hairs12.png"},
+    "hair_14": {name:"hair_14",img: "resources/customisation/character_hairs/character_hairs13.png"},
+    "hair_15": {name:"hair_15",img: "resources/customisation/character_hairs/character_hairs14.png"},
+    "hair_16": {name:"hair_16",img: "resources/customisation/character_hairs/character_hairs15.png"},
+    "hair_17": {name:"hair_17",img: "resources/customisation/character_hairs/character_hairs16.png"},
+    "hair_18": {name:"hair_18",img: "resources/customisation/character_hairs/character_hairs17.png"},
+    "hair_19": {name:"hair_19",img: "resources/customisation/character_hairs/character_hairs18.png"},
+    "hair_20": {name:"hair_20",img: "resources/customisation/character_hairs/character_hairs19.png"},
+    "hair_21": {name:"hair_21",img: "resources/customisation/character_hairs/character_hairs20.png"},
+    "hair_22": {name:"hair_22",img: "resources/customisation/character_hairs/character_hairs21.png"},
+    "hair_23": {name:"hair_23",img: "resources/customisation/character_hairs/character_hairs22.png"},
+    "hair_24": {name:"hair_24",img: "resources/customisation/character_hairs/character_hairs23.png"},
+    "hair_25": {name:"hair_25",img: "resources/customisation/character_hairs/character_hairs24.png"},
+    "hair_26": {name:"hair_26",img: "resources/customisation/character_hairs/character_hairs25.png"},
+    "hair_27": {name:"hair_27",img: "resources/customisation/character_hairs/character_hairs26.png"},
+    "hair_28": {name:"hair_28",img: "resources/customisation/character_hairs/character_hairs27.png"},
+    "hair_29": {name:"hair_29",img: "resources/customisation/character_hairs/character_hairs28.png"},
+    "hair_30": {name:"hair_30",img: "resources/customisation/character_hairs/character_hairs29.png"},
+    "hair_31": {name:"hair_31",img: "resources/customisation/character_hairs/character_hairs30.png"},
+    "hair_32": {name:"hair_32",img: "resources/customisation/character_hairs/character_hairs31.png"},
+    "hair_33": {name:"hair_33",img: "resources/customisation/character_hairs/character_hairs32.png"},
+    "hair_34": {name:"hair_34",img: "resources/customisation/character_hairs/character_hairs33.png"},
+    "hair_35": {name:"hair_35",img: "resources/customisation/character_hairs/character_hairs34.png"},
+    "hair_36": {name:"hair_36",img: "resources/customisation/character_hairs/character_hairs35.png"},
+    "hair_37": {name:"hair_37",img: "resources/customisation/character_hairs/character_hairs36.png"},
+    "hair_38": {name:"hair_38",img: "resources/customisation/character_hairs/character_hairs37.png"},
+    "hair_39": {name:"hair_39",img: "resources/customisation/character_hairs/character_hairs38.png"},
+    "hair_40": {name:"hair_40",img: "resources/customisation/character_hairs/character_hairs39.png"},
+    "hair_41": {name:"hair_41",img: "resources/customisation/character_hairs/character_hairs40.png"},
+    "hair_42": {name:"hair_42",img: "resources/customisation/character_hairs/character_hairs41.png"},
+    "hair_43": {name:"hair_43",img: "resources/customisation/character_hairs/character_hairs42.png"},
+    "hair_44": {name:"hair_44",img: "resources/customisation/character_hairs/character_hairs43.png"},
+    "hair_45": {name:"hair_45",img: "resources/customisation/character_hairs/character_hairs44.png"},
+    "hair_46": {name:"hair_46",img: "resources/customisation/character_hairs/character_hairs45.png"},
+    "hair_47": {name:"hair_47",img: "resources/customisation/character_hairs/character_hairs46.png"},
+    "hair_48": {name:"hair_48",img: "resources/customisation/character_hairs/character_hairs47.png"},
+    "hair_49": {name:"hair_49",img: "resources/customisation/character_hairs/character_hairs48.png"},
+    "hair_50": {name:"hair_50",img: "resources/customisation/character_hairs/character_hairs49.png"},
+    "hair_51": {name:"hair_51",img: "resources/customisation/character_hairs/character_hairs50.png"},
+    "hair_52": {name:"hair_52",img: "resources/customisation/character_hairs/character_hairs51.png"},
+    "hair_53": {name:"hair_53",img: "resources/customisation/character_hairs/character_hairs52.png"},
+    "hair_54": {name:"hair_54",img: "resources/customisation/character_hairs/character_hairs53.png"},
+    "hair_55": {name:"hair_55",img: "resources/customisation/character_hairs/character_hairs54.png"},
+    "hair_56": {name:"hair_56",img: "resources/customisation/character_hairs/character_hairs55.png"},
+    "hair_57": {name:"hair_57",img: "resources/customisation/character_hairs/character_hairs56.png"},
+    "hair_58": {name:"hair_58",img: "resources/customisation/character_hairs/character_hairs57.png"},
+    "hair_59": {name:"hair_59",img: "resources/customisation/character_hairs/character_hairs58.png"},
+    "hair_60": {name:"hair_60",img: "resources/customisation/character_hairs/character_hairs59.png"},
+    "hair_61": {name:"hair_61",img: "resources/customisation/character_hairs/character_hairs60.png"},
+    "hair_62": {name:"hair_62",img: "resources/customisation/character_hairs/character_hairs61.png"},
+    "hair_63": {name:"hair_63",img: "resources/customisation/character_hairs/character_hairs62.png"},
+    "hair_64": {name:"hair_64",img: "resources/customisation/character_hairs/character_hairs63.png"},
+    "hair_65": {name:"hair_65",img: "resources/customisation/character_hairs/character_hairs64.png"},
+    "hair_66": {name:"hair_66",img: "resources/customisation/character_hairs/character_hairs65.png"},
+    "hair_67": {name:"hair_67",img: "resources/customisation/character_hairs/character_hairs66.png"},
+    "hair_68": {name:"hair_68",img: "resources/customisation/character_hairs/character_hairs67.png"},
+    "hair_69": {name:"hair_69",img: "resources/customisation/character_hairs/character_hairs68.png"},
+    "hair_70": {name:"hair_70",img: "resources/customisation/character_hairs/character_hairs69.png"},
+    "hair_71": {name:"hair_71",img: "resources/customisation/character_hairs/character_hairs70.png"},
+    "hair_72": {name:"hair_72",img: "resources/customisation/character_hairs/character_hairs71.png"},
+    "hair_73": {name:"hair_73",img: "resources/customisation/character_hairs/character_hairs72.png"},
+    "hair_74": {name:"hair_74",img: "resources/customisation/character_hairs/character_hairs73.png"}
+};
+
+
+export const CLOTHES_RESOURCES: BodyResourceDescriptionListInterface = {
+    "clothes_1": {name:"clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png"},
+    "clothes_2": {name:"clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png"},
+    "clothes_3": {name:"clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png"},
+    "clothes_4": {name:"clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png"},
+    "clothes_5": {name:"clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png"},
+    "clothes_6": {name:"clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png"},
+    "clothes_7": {name:"clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png"},
+    "clothes_8": {name:"clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png"},
+    "clothes_9": {name:"clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png"},
+    "clothes_10": {name:"clothes_10",img: "resources/customisation/character_clothes/character_clothes9.png"},
+    "clothes_11": {name:"clothes_11",img: "resources/customisation/character_clothes/character_clothes10.png"},
+    "clothes_12": {name:"clothes_12",img: "resources/customisation/character_clothes/character_clothes11.png"},
+    "clothes_13": {name:"clothes_13",img: "resources/customisation/character_clothes/character_clothes12.png"},
+    "clothes_14": {name:"clothes_14",img: "resources/customisation/character_clothes/character_clothes13.png"},
+    "clothes_15": {name:"clothes_15",img: "resources/customisation/character_clothes/character_clothes14.png"},
+    "clothes_16": {name:"clothes_16",img: "resources/customisation/character_clothes/character_clothes15.png"},
+    "clothes_17": {name:"clothes_17",img: "resources/customisation/character_clothes/character_clothes16.png"},
+    "clothes_18": {name:"clothes_18",img: "resources/customisation/character_clothes/character_clothes17.png"},
+    "clothes_19": {name:"clothes_19",img: "resources/customisation/character_clothes/character_clothes18.png"},
+    "clothes_20": {name:"clothes_20",img: "resources/customisation/character_clothes/character_clothes19.png"},
+    "clothes_21": {name:"clothes_21",img: "resources/customisation/character_clothes/character_clothes20.png"},
+    "clothes_22": {name:"clothes_22",img: "resources/customisation/character_clothes/character_clothes21.png"},
+    "clothes_23": {name:"clothes_23",img: "resources/customisation/character_clothes/character_clothes22.png"},
+    "clothes_24": {name:"clothes_24",img: "resources/customisation/character_clothes/character_clothes23.png"},
+    "clothes_25": {name:"clothes_25",img: "resources/customisation/character_clothes/character_clothes24.png"},
+    "clothes_26": {name:"clothes_26",img: "resources/customisation/character_clothes/character_clothes25.png"},
+    "clothes_27": {name:"clothes_27",img: "resources/customisation/character_clothes/character_clothes26.png"},
+    "clothes_28": {name:"clothes_28",img: "resources/customisation/character_clothes/character_clothes27.png"},
+    "clothes_29": {name:"clothes_29",img: "resources/customisation/character_clothes/character_clothes28.png"},
+    "clothes_30": {name:"clothes_30",img: "resources/customisation/character_clothes/character_clothes29.png"},
+    "clothes_31": {name:"clothes_31",img: "resources/customisation/character_clothes/character_clothes30.png"},
+    "clothes_32": {name:"clothes_32",img: "resources/customisation/character_clothes/character_clothes31.png"},
+    "clothes_33": {name:"clothes_33",img: "resources/customisation/character_clothes/character_clothes32.png"},
+    "clothes_34": {name:"clothes_34",img: "resources/customisation/character_clothes/character_clothes33.png"},
+    "clothes_35": {name:"clothes_35",img: "resources/customisation/character_clothes/character_clothes34.png"},
+    "clothes_36": {name:"clothes_36",img: "resources/customisation/character_clothes/character_clothes35.png"},
+    "clothes_37": {name:"clothes_37",img: "resources/customisation/character_clothes/character_clothes36.png"},
+    "clothes_38": {name:"clothes_38",img: "resources/customisation/character_clothes/character_clothes37.png"},
+    "clothes_39": {name:"clothes_39",img: "resources/customisation/character_clothes/character_clothes38.png"},
+    "clothes_40": {name:"clothes_40",img: "resources/customisation/character_clothes/character_clothes39.png"},
+    "clothes_41": {name:"clothes_41",img: "resources/customisation/character_clothes/character_clothes40.png"},
+    "clothes_42": {name:"clothes_42",img: "resources/customisation/character_clothes/character_clothes41.png"},
+    "clothes_43": {name:"clothes_43",img: "resources/customisation/character_clothes/character_clothes42.png"},
+    "clothes_44": {name:"clothes_44",img: "resources/customisation/character_clothes/character_clothes43.png"},
+    "clothes_45": {name:"clothes_45",img: "resources/customisation/character_clothes/character_clothes44.png"},
+    "clothes_46": {name:"clothes_46",img: "resources/customisation/character_clothes/character_clothes45.png"},
+    "clothes_47": {name:"clothes_47",img: "resources/customisation/character_clothes/character_clothes46.png"},
+    "clothes_48": {name:"clothes_48",img: "resources/customisation/character_clothes/character_clothes47.png"},
+    "clothes_49": {name:"clothes_49",img: "resources/customisation/character_clothes/character_clothes48.png"},
+    "clothes_50": {name:"clothes_50",img: "resources/customisation/character_clothes/character_clothes49.png"},
+    "clothes_51": {name:"clothes_51",img: "resources/customisation/character_clothes/character_clothes50.png"},
+    "clothes_52": {name:"clothes_52",img: "resources/customisation/character_clothes/character_clothes51.png"},
+    "clothes_53": {name:"clothes_53",img: "resources/customisation/character_clothes/character_clothes52.png"},
+    "clothes_54": {name:"clothes_54",img: "resources/customisation/character_clothes/character_clothes53.png"},
+    "clothes_55": {name:"clothes_55",img: "resources/customisation/character_clothes/character_clothes54.png"},
+    "clothes_56": {name:"clothes_56",img: "resources/customisation/character_clothes/character_clothes55.png"},
+    "clothes_57": {name:"clothes_57",img: "resources/customisation/character_clothes/character_clothes56.png"},
+    "clothes_58": {name:"clothes_58",img: "resources/customisation/character_clothes/character_clothes57.png"},
+    "clothes_59": {name:"clothes_59",img: "resources/customisation/character_clothes/character_clothes58.png"},
+    "clothes_60": {name:"clothes_60",img: "resources/customisation/character_clothes/character_clothes59.png"},
+    "clothes_61": {name:"clothes_61",img: "resources/customisation/character_clothes/character_clothes60.png"},
+    "clothes_62": {name:"clothes_62",img: "resources/customisation/character_clothes/character_clothes61.png"},
+    "clothes_63": {name:"clothes_63",img: "resources/customisation/character_clothes/character_clothes62.png"},
+    "clothes_64": {name:"clothes_64",img: "resources/customisation/character_clothes/character_clothes63.png"},
+    "clothes_65": {name:"clothes_65",img: "resources/customisation/character_clothes/character_clothes64.png"},
+    "clothes_66": {name:"clothes_66",img: "resources/customisation/character_clothes/character_clothes65.png"},
+    "clothes_67": {name:"clothes_67",img: "resources/customisation/character_clothes/character_clothes66.png"},
+    "clothes_68": {name:"clothes_68",img: "resources/customisation/character_clothes/character_clothes67.png"},
+    "clothes_69": {name:"clothes_69",img: "resources/customisation/character_clothes/character_clothes68.png"},
+    "clothes_70": {name:"clothes_70",img: "resources/customisation/character_clothes/character_clothes69.png"},
+    "clothes_pride_shirt": {name:"clothes_pride_shirt",img: "resources/customisation/character_clothes/pride_shirt.png"},
+    "clothes_black_hoodie": {name:"clothes_black_hoodie",img: "resources/customisation/character_clothes/black_hoodie.png"},
+    "clothes_white_hoodie": {name:"clothes_white_hoodie",img: "resources/customisation/character_clothes/white_hoodie.png"},
+    "clothes_engelbert": {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"}
+};
+
+export const HATS_RESOURCES: BodyResourceDescriptionListInterface = {
+    "hats_1": {name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png"},
+    "hats_2": {name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png"},
+    "hats_3": {name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png"},
+    "hats_4": {name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png"},
+    "hats_5": {name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png"},
+    "hats_6": {name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png"},
+    "hats_7": {name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png"},
+    "hats_8": {name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png"},
+    "hats_9": {name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png"},
+    "hats_10": {name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png"},
+    "hats_11": {name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png"},
+    "hats_12": {name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png"},
+    "hats_13": {name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png"},
+    "hats_14": {name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png"},
+    "hats_15": {name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png"},
+    "hats_16": {name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png"},
+    "hats_17": {name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png"},
+    "hats_18": {name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png"},
+    "hats_19": {name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png"},
+    "hats_20": {name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png"},
+    "hats_21": {name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png"},
+    "hats_22": {name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png"},
+    "hats_23": {name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png"},
+    "hats_24": {name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png"},
+    "hats_25": {name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png"},
+    "hats_26": {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"},
+    "tinfoil_hat1": {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"}
+};
+
+export const ACCESSORIES_RESOURCES: BodyResourceDescriptionListInterface = {
+    "accessory_1": {name: "accessory_1", img: "resources/customisation/character_accessories/character_accessories1.png"},
+    "accessory_2": {name: "accessory_2", img: "resources/customisation/character_accessories/character_accessories2.png"},
+    "accessory_3": {name: "accessory_3", img: "resources/customisation/character_accessories/character_accessories3.png"},
+    "accessory_4": {name: "accessory_4", img: "resources/customisation/character_accessories/character_accessories4.png"},
+    "accessory_5": {name: "accessory_5", img: "resources/customisation/character_accessories/character_accessories5.png"},
+    "accessory_6": {name: "accessory_6", img: "resources/customisation/character_accessories/character_accessories6.png"},
+    "accessory_7": {name: "accessory_7", img: "resources/customisation/character_accessories/character_accessories7.png"},
+    "accessory_8": {name: "accessory_8", img: "resources/customisation/character_accessories/character_accessories8.png"},
+    "accessory_9": {name: "accessory_9", img: "resources/customisation/character_accessories/character_accessories9.png"},
+    "accessory_10": {name: "accessory_10", img: "resources/customisation/character_accessories/character_accessories10.png"},
+    "accessory_11": {name: "accessory_11", img: "resources/customisation/character_accessories/character_accessories11.png"},
+    "accessory_12": {name: "accessory_12", img: "resources/customisation/character_accessories/character_accessories12.png"},
+    "accessory_13": {name: "accessory_13", img: "resources/customisation/character_accessories/character_accessories13.png"},
+    "accessory_14": {name: "accessory_14", img: "resources/customisation/character_accessories/character_accessories14.png"},
+    "accessory_15": {name: "accessory_15", img: "resources/customisation/character_accessories/character_accessories15.png"},
+    "accessory_16": {name: "accessory_16", img: "resources/customisation/character_accessories/character_accessories16.png"},
+    "accessory_17": {name: "accessory_17", img: "resources/customisation/character_accessories/character_accessories17.png"},
+    "accessory_18": {name: "accessory_18", img: "resources/customisation/character_accessories/character_accessories18.png"},
+    "accessory_19": {name: "accessory_19", img: "resources/customisation/character_accessories/character_accessories19.png"},
+    "accessory_20": {name: "accessory_20", img: "resources/customisation/character_accessories/character_accessories20.png"},
+    "accessory_21": {name: "accessory_21", img: "resources/customisation/character_accessories/character_accessories21.png"},
+    "accessory_22": {name: "accessory_22", img: "resources/customisation/character_accessories/character_accessories22.png"},
+    "accessory_23": {name: "accessory_23", img: "resources/customisation/character_accessories/character_accessories23.png"},
+    "accessory_24": {name: "accessory_24", img: "resources/customisation/character_accessories/character_accessories24.png"},
+    "accessory_25": {name: "accessory_25", img: "resources/customisation/character_accessories/character_accessories25.png"},
+    "accessory_26": {name: "accessory_26", img: "resources/customisation/character_accessories/character_accessories26.png"},
+    "accessory_27": {name: "accessory_27", img: "resources/customisation/character_accessories/character_accessories27.png"},
+    "accessory_28": {name: "accessory_28", img: "resources/customisation/character_accessories/character_accessories28.png"},
+    "accessory_29": {name: "accessory_29", img: "resources/customisation/character_accessories/character_accessories29.png"},
+    "accessory_30": {name: "accessory_30", img: "resources/customisation/character_accessories/character_accessories30.png"},
+    "accessory_31": {name: "accessory_31", img: "resources/customisation/character_accessories/character_accessories31.png"},
+    "accessory_32": {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"},
+    "accessory_mate_bottle": {name: "accessory_mate_bottle", img: "resources/customisation/character_accessories/mate_bottle1.png"},
+    "accessory_mask": {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"}
+};
+
+export const LAYERS: BodyResourceDescriptionListInterface[] = [
+    COLOR_RESOURCES,
+    EYES_RESOURCES,
+    HAIR_RESOURCES,
+    CLOTHES_RESOURCES,
+    HATS_RESOURCES,
+    ACCESSORIES_RESOURCES
+];
+
+export const OBJECTS: BodyResourceDescriptionInterface[] = [
+    {name:'teleportation', img:'resources/objects/teleportation.png'},
+];

front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts

@@ -0,0 +1,71 @@
+import LoaderPlugin = Phaser.Loader.LoaderPlugin;
+import TextureManager = Phaser.Textures.TextureManager;
+import {CharacterTexture} from "../../Connexion/LocalUser";
+import {BodyResourceDescriptionInterface, LAYERS, PLAYER_RESOURCES} from "./PlayerTextures";
+
+
+export const loadAllLayers = (load: LoaderPlugin): BodyResourceDescriptionInterface[][] => {
+    const returnArray:BodyResourceDescriptionInterface[][] = [];
+    LAYERS.forEach(layer => {
+        const layerArray:BodyResourceDescriptionInterface[] = [];
+        Object.values(layer).forEach((textureDescriptor) => {
+            layerArray.push(textureDescriptor);
+            load.spritesheet(textureDescriptor.name,textureDescriptor.img,{frameWidth: 32, frameHeight: 32});
+        })
+        returnArray.push(layerArray)
+    });
+    return returnArray;
+}
+export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptionInterface[] => {
+    const returnArray = Object.values(PLAYER_RESOURCES);
+    returnArray.forEach((playerResource: BodyResourceDescriptionInterface) => {
+        load.spritesheet(playerResource.name, playerResource.img, {frameWidth: 32, frameHeight: 32});
+    });
+    return returnArray;
+}
+export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => {
+    const name = 'customCharacterTexture'+texture.id;
+    load.spritesheet(name,texture.url,{frameWidth: 32, frameHeight: 32});
+}
+
+
+export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturePlugin: TextureManager, texturekeys:Array<string|BodyResourceDescriptionInterface>): Promise<string[]> => {
+    const promisesList:Promise<void>[] = [];
+    texturekeys.forEach((textureKey: string|BodyResourceDescriptionInterface) => {
+        const textureName = typeof textureKey === 'string' ? textureKey : textureKey.name;
+        if(!texturePlugin.exists(textureName)) {
+            console.log('Loading '+textureName)
+            const playerResourceDescriptor = typeof textureKey === 'string' ? getRessourceDescriptor(textureKey) : textureKey;
+            promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor));
+        }
+    })
+    let returnPromise:Promise<Array<string|BodyResourceDescriptionInterface>>;
+    if (promisesList.length > 0) {
+        loadPlugin.start();
+        returnPromise = Promise.all(promisesList).then(() => texturekeys);
+    } else {
+        returnPromise = Promise.resolve(texturekeys);
+    }
+    return returnPromise.then((keys) => keys.map((key) => {
+        return typeof key !== 'string' ? key.name : key;
+    }))
+}
+
+
+const getRessourceDescriptor = (textureKey: string): BodyResourceDescriptionInterface => {
+    const playerResource = PLAYER_RESOURCES[textureKey];
+    if (playerResource !== undefined) return playerResource;
+    
+    for (let i=0; i<LAYERS.length;i++) {
+        const playerResource = LAYERS[i][textureKey];
+        if (playerResource !== undefined) return playerResource;
+    }
+    throw 'Could not find a data for texture '+textureKey;
+}
+
+const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface) => {
+    return new Promise<void>((res, rej) => {
+        loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, {frameWidth: 32, frameHeight: 32});
+        loadPlugin.once('filecomplete-spritesheet-'+playerResourceDescriptor.name, () => res());
+    });
+}

front/src/Phaser/Entity/RemotePlayer.ts

@@ -15,11 +15,11 @@ export class RemotePlayer extends Character {
         x: number,
         y: number,
         name: string,
-        PlayerTextures: string[],
+        texturesPromise: Promise<string[]>,
         direction: string,
         moving: boolean
     ) {
-        super(Scene, x, y, PlayerTextures, name, direction, moving, 1);
+        super(Scene, x, y, texturesPromise, name, direction, moving, 1);
 
         //set data
         this.userId = userId;

front/src/Phaser/Entity/body_character.ts

@@ -1,355 +0,0 @@
-import LoaderPlugin = Phaser.Loader.LoaderPlugin;
-import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "./Character";
-import {CharacterTexture} from "../../Connexion/LocalUser";
-
-export interface BodyResourceDescriptionInterface {
-    name: string,
-    img: string
-}
-
-export const COLOR_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name:"color_1", img: "resources/customisation/character_color/character_color0.png"},
-    {name:"color_2", img: "resources/customisation/character_color/character_color1.png"},
-    {name:"color_3", img: "resources/customisation/character_color/character_color2.png"},
-    {name:"color_4", img: "resources/customisation/character_color/character_color3.png"},
-    {name:"color_5", img: "resources/customisation/character_color/character_color4.png"},
-    {name:"color_6", img: "resources/customisation/character_color/character_color5.png"},
-    {name:"color_7", img: "resources/customisation/character_color/character_color6.png"},
-    {name:"color_8", img: "resources/customisation/character_color/character_color7.png"},
-    {name:"color_9", img: "resources/customisation/character_color/character_color8.png"},
-    {name:"color_10",img: "resources/customisation/character_color/character_color9.png"},
-    {name:"color_11",img: "resources/customisation/character_color/character_color10.png"},
-    {name:"color_12",img: "resources/customisation/character_color/character_color11.png"},
-    {name:"color_13",img: "resources/customisation/character_color/character_color12.png"},
-    {name:"color_14",img: "resources/customisation/character_color/character_color13.png"},
-    {name:"color_15",img: "resources/customisation/character_color/character_color14.png"},
-    {name:"color_16",img: "resources/customisation/character_color/character_color15.png"},
-    {name:"color_17",img: "resources/customisation/character_color/character_color16.png"},
-    {name:"color_18",img: "resources/customisation/character_color/character_color17.png"},
-    {name:"color_19",img: "resources/customisation/character_color/character_color18.png"},
-    {name:"color_20",img: "resources/customisation/character_color/character_color19.png"},
-    {name:"color_21",img: "resources/customisation/character_color/character_color20.png"},
-    {name:"color_22",img: "resources/customisation/character_color/character_color21.png"},
-    {name:"color_23",img: "resources/customisation/character_color/character_color22.png"},
-    {name:"color_24",img: "resources/customisation/character_color/character_color23.png"},
-    {name:"color_25",img: "resources/customisation/character_color/character_color24.png"},
-    {name:"color_26",img: "resources/customisation/character_color/character_color25.png"},
-    {name:"color_27",img: "resources/customisation/character_color/character_color26.png"},
-    {name:"color_28",img: "resources/customisation/character_color/character_color27.png"},
-    {name:"color_29",img: "resources/customisation/character_color/character_color28.png"},
-    {name:"color_30",img: "resources/customisation/character_color/character_color29.png"},
-    {name:"color_31",img: "resources/customisation/character_color/character_color30.png"},
-    {name:"color_32",img: "resources/customisation/character_color/character_color31.png"},
-    {name:"color_33",img: "resources/customisation/character_color/character_color32.png"}
-];
-
-export const EYES_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name: "eyes_1", img: "resources/customisation/character_eyes/character_eyes1.png"},
-    {name: "eyes_2", img: "resources/customisation/character_eyes/character_eyes2.png"},
-    {name: "eyes_3", img: "resources/customisation/character_eyes/character_eyes3.png"},
-    {name: "eyes_4", img: "resources/customisation/character_eyes/character_eyes4.png"},
-    {name: "eyes_5", img: "resources/customisation/character_eyes/character_eyes5.png"},
-    {name: "eyes_6", img: "resources/customisation/character_eyes/character_eyes6.png"},
-    {name: "eyes_7", img: "resources/customisation/character_eyes/character_eyes7.png"},
-    {name: "eyes_8", img: "resources/customisation/character_eyes/character_eyes8.png"},
-    {name: "eyes_9", img: "resources/customisation/character_eyes/character_eyes9.png"},
-    {name: "eyes_10", img: "resources/customisation/character_eyes/character_eyes10.png"},
-    {name: "eyes_11", img: "resources/customisation/character_eyes/character_eyes11.png"},
-    {name: "eyes_12", img: "resources/customisation/character_eyes/character_eyes12.png"},
-    {name: "eyes_13", img: "resources/customisation/character_eyes/character_eyes13.png"},
-    {name: "eyes_14", img: "resources/customisation/character_eyes/character_eyes14.png"},
-    {name: "eyes_15", img: "resources/customisation/character_eyes/character_eyes15.png"},
-    {name: "eyes_16", img: "resources/customisation/character_eyes/character_eyes16.png"},
-    {name: "eyes_17", img: "resources/customisation/character_eyes/character_eyes17.png"},
-    {name: "eyes_18", img: "resources/customisation/character_eyes/character_eyes18.png"},
-    {name: "eyes_19", img: "resources/customisation/character_eyes/character_eyes19.png"},
-    {name: "eyes_20", img: "resources/customisation/character_eyes/character_eyes20.png"},
-    {name: "eyes_21", img: "resources/customisation/character_eyes/character_eyes21.png"},
-    {name: "eyes_22", img: "resources/customisation/character_eyes/character_eyes22.png"},
-    {name: "eyes_23", img: "resources/customisation/character_eyes/character_eyes23.png"},
-    {name: "eyes_24", img: "resources/customisation/character_eyes/character_eyes24.png"},
-    {name: "eyes_25", img: "resources/customisation/character_eyes/character_eyes25.png"},
-    {name: "eyes_26", img: "resources/customisation/character_eyes/character_eyes26.png"},
-    {name: "eyes_27", img: "resources/customisation/character_eyes/character_eyes27.png"},
-    {name: "eyes_28", img: "resources/customisation/character_eyes/character_eyes28.png"},
-    {name: "eyes_29", img: "resources/customisation/character_eyes/character_eyes29.png"},
-    {name: "eyes_30", img: "resources/customisation/character_eyes/character_eyes30.png"}
-
-]
-
-export const HAIR_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name:"hair_1", img: "resources/customisation/character_hairs/character_hairs0.png"},
-    {name:"hair_2", img: "resources/customisation/character_hairs/character_hairs1.png"},
-    {name:"hair_3", img: "resources/customisation/character_hairs/character_hairs2.png"},
-    {name:"hair_4", img: "resources/customisation/character_hairs/character_hairs3.png"},
-    {name:"hair_5", img: "resources/customisation/character_hairs/character_hairs4.png"},
-    {name:"hair_6", img: "resources/customisation/character_hairs/character_hairs5.png"},
-    {name:"hair_7", img: "resources/customisation/character_hairs/character_hairs6.png"},
-    {name:"hair_8", img: "resources/customisation/character_hairs/character_hairs7.png"},
-    {name:"hair_9", img: "resources/customisation/character_hairs/character_hairs8.png"},
-    {name:"hair_10",img: "resources/customisation/character_hairs/character_hairs9.png"},
-    {name:"hair_11",img: "resources/customisation/character_hairs/character_hairs10.png"},
-    {name:"hair_12",img: "resources/customisation/character_hairs/character_hairs11.png"},
-    {name:"hair_13",img: "resources/customisation/character_hairs/character_hairs12.png"},
-    {name:"hair_14",img: "resources/customisation/character_hairs/character_hairs13.png"},
-    {name:"hair_15",img: "resources/customisation/character_hairs/character_hairs14.png"},
-    {name:"hair_16",img: "resources/customisation/character_hairs/character_hairs15.png"},
-    {name:"hair_17",img: "resources/customisation/character_hairs/character_hairs16.png"},
-    {name:"hair_18",img: "resources/customisation/character_hairs/character_hairs17.png"},
-    {name:"hair_19",img: "resources/customisation/character_hairs/character_hairs18.png"},
-    {name:"hair_20",img: "resources/customisation/character_hairs/character_hairs19.png"},
-    {name:"hair_21",img: "resources/customisation/character_hairs/character_hairs20.png"},
-    {name:"hair_22",img: "resources/customisation/character_hairs/character_hairs21.png"},
-    {name:"hair_23",img: "resources/customisation/character_hairs/character_hairs22.png"},
-    {name:"hair_24",img: "resources/customisation/character_hairs/character_hairs23.png"},
-    {name:"hair_25",img: "resources/customisation/character_hairs/character_hairs24.png"},
-    {name:"hair_26",img: "resources/customisation/character_hairs/character_hairs25.png"},
-    {name:"hair_27",img: "resources/customisation/character_hairs/character_hairs26.png"},
-    {name:"hair_28",img: "resources/customisation/character_hairs/character_hairs27.png"},
-    {name:"hair_29",img: "resources/customisation/character_hairs/character_hairs28.png"},
-    {name:"hair_30",img: "resources/customisation/character_hairs/character_hairs29.png"},
-    {name:"hair_31",img: "resources/customisation/character_hairs/character_hairs30.png"},
-    {name:"hair_32",img: "resources/customisation/character_hairs/character_hairs31.png"},
-    {name:"hair_33",img: "resources/customisation/character_hairs/character_hairs32.png"},
-    {name:"hair_34",img: "resources/customisation/character_hairs/character_hairs33.png"},
-    {name:"hair_35",img: "resources/customisation/character_hairs/character_hairs34.png"},
-    {name:"hair_36",img: "resources/customisation/character_hairs/character_hairs35.png"},
-    {name:"hair_37",img: "resources/customisation/character_hairs/character_hairs36.png"},
-    {name:"hair_38",img: "resources/customisation/character_hairs/character_hairs37.png"},
-    {name:"hair_39",img: "resources/customisation/character_hairs/character_hairs38.png"},
-    {name:"hair_40",img: "resources/customisation/character_hairs/character_hairs39.png"},
-    {name:"hair_41",img: "resources/customisation/character_hairs/character_hairs40.png"},
-    {name:"hair_42",img: "resources/customisation/character_hairs/character_hairs41.png"},
-    {name:"hair_43",img: "resources/customisation/character_hairs/character_hairs42.png"},
-    {name:"hair_44",img: "resources/customisation/character_hairs/character_hairs43.png"},
-    {name:"hair_45",img: "resources/customisation/character_hairs/character_hairs44.png"},
-    {name:"hair_46",img: "resources/customisation/character_hairs/character_hairs45.png"},
-    {name:"hair_47",img: "resources/customisation/character_hairs/character_hairs46.png"},
-    {name:"hair_48",img: "resources/customisation/character_hairs/character_hairs47.png"},
-    {name:"hair_49",img: "resources/customisation/character_hairs/character_hairs48.png"},
-    {name:"hair_50",img: "resources/customisation/character_hairs/character_hairs49.png"},
-    {name:"hair_51",img: "resources/customisation/character_hairs/character_hairs50.png"},
-    {name:"hair_52",img: "resources/customisation/character_hairs/character_hairs51.png"},
-    {name:"hair_53",img: "resources/customisation/character_hairs/character_hairs52.png"},
-    {name:"hair_54",img: "resources/customisation/character_hairs/character_hairs53.png"},
-    {name:"hair_55",img: "resources/customisation/character_hairs/character_hairs54.png"},
-    {name:"hair_56",img: "resources/customisation/character_hairs/character_hairs55.png"},
-    {name:"hair_57",img: "resources/customisation/character_hairs/character_hairs56.png"},
-    {name:"hair_58",img: "resources/customisation/character_hairs/character_hairs57.png"},
-    {name:"hair_59",img: "resources/customisation/character_hairs/character_hairs58.png"},
-    {name:"hair_60",img: "resources/customisation/character_hairs/character_hairs59.png"},
-    {name:"hair_61",img: "resources/customisation/character_hairs/character_hairs60.png"},
-    {name:"hair_62",img: "resources/customisation/character_hairs/character_hairs61.png"},
-    {name:"hair_63",img: "resources/customisation/character_hairs/character_hairs62.png"},
-    {name:"hair_64",img: "resources/customisation/character_hairs/character_hairs63.png"},
-    {name:"hair_65",img: "resources/customisation/character_hairs/character_hairs64.png"},
-    {name:"hair_66",img: "resources/customisation/character_hairs/character_hairs65.png"},
-    {name:"hair_67",img: "resources/customisation/character_hairs/character_hairs66.png"},
-    {name:"hair_68",img: "resources/customisation/character_hairs/character_hairs67.png"},
-    {name:"hair_69",img: "resources/customisation/character_hairs/character_hairs68.png"},
-    {name:"hair_70",img: "resources/customisation/character_hairs/character_hairs69.png"},
-    {name:"hair_71",img: "resources/customisation/character_hairs/character_hairs70.png"},
-    {name:"hair_72",img: "resources/customisation/character_hairs/character_hairs71.png"},
-    {name:"hair_73",img: "resources/customisation/character_hairs/character_hairs72.png"},
-    {name:"hair_74",img: "resources/customisation/character_hairs/character_hairs73.png"}
-];
-
-
-export const CLOTHES_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name:"clothes_1", img: "resources/customisation/character_clothes/character_clothes0.png"},
-    {name:"clothes_2", img: "resources/customisation/character_clothes/character_clothes1.png"},
-    {name:"clothes_3", img: "resources/customisation/character_clothes/character_clothes2.png"},
-    {name:"clothes_4", img: "resources/customisation/character_clothes/character_clothes3.png"},
-    {name:"clothes_5", img: "resources/customisation/character_clothes/character_clothes4.png"},
-    {name:"clothes_6", img: "resources/customisation/character_clothes/character_clothes5.png"},
-    {name:"clothes_7", img: "resources/customisation/character_clothes/character_clothes6.png"},
-    {name:"clothes_8", img: "resources/customisation/character_clothes/character_clothes7.png"},
-    {name:"clothes_9", img: "resources/customisation/character_clothes/character_clothes8.png"},
-    {name:"clothes_10",img: "resources/customisation/character_clothes/character_clothes9.png"},
-    {name:"clothes_11",img: "resources/customisation/character_clothes/character_clothes10.png"},
-    {name:"clothes_12",img: "resources/customisation/character_clothes/character_clothes11.png"},
-    {name:"clothes_13",img: "resources/customisation/character_clothes/character_clothes12.png"},
-    {name:"clothes_14",img: "resources/customisation/character_clothes/character_clothes13.png"},
-    {name:"clothes_15",img: "resources/customisation/character_clothes/character_clothes14.png"},
-    {name:"clothes_16",img: "resources/customisation/character_clothes/character_clothes15.png"},
-    {name:"clothes_17",img: "resources/customisation/character_clothes/character_clothes16.png"},
-    {name:"clothes_18",img: "resources/customisation/character_clothes/character_clothes17.png"},
-    {name:"clothes_19",img: "resources/customisation/character_clothes/character_clothes18.png"},
-    {name:"clothes_20",img: "resources/customisation/character_clothes/character_clothes19.png"},
-    {name:"clothes_21",img: "resources/customisation/character_clothes/character_clothes20.png"},
-    {name:"clothes_22",img: "resources/customisation/character_clothes/character_clothes21.png"},
-    {name:"clothes_23",img: "resources/customisation/character_clothes/character_clothes22.png"},
-    {name:"clothes_24",img: "resources/customisation/character_clothes/character_clothes23.png"},
-    {name:"clothes_25",img: "resources/customisation/character_clothes/character_clothes24.png"},
-    {name:"clothes_26",img: "resources/customisation/character_clothes/character_clothes25.png"},
-    {name:"clothes_27",img: "resources/customisation/character_clothes/character_clothes26.png"},
-    {name:"clothes_28",img: "resources/customisation/character_clothes/character_clothes27.png"},
-    {name:"clothes_29",img: "resources/customisation/character_clothes/character_clothes28.png"},
-    {name:"clothes_30",img: "resources/customisation/character_clothes/character_clothes29.png"},
-    {name:"clothes_31",img: "resources/customisation/character_clothes/character_clothes30.png"},
-    {name:"clothes_32",img: "resources/customisation/character_clothes/character_clothes31.png"},
-    {name:"clothes_33",img: "resources/customisation/character_clothes/character_clothes32.png"},
-    {name:"clothes_34",img: "resources/customisation/character_clothes/character_clothes33.png"},
-    {name:"clothes_35",img: "resources/customisation/character_clothes/character_clothes34.png"},
-    {name:"clothes_36",img: "resources/customisation/character_clothes/character_clothes35.png"},
-    {name:"clothes_37",img: "resources/customisation/character_clothes/character_clothes36.png"},
-    {name:"clothes_38",img: "resources/customisation/character_clothes/character_clothes37.png"},
-    {name:"clothes_39",img: "resources/customisation/character_clothes/character_clothes38.png"},
-    {name:"clothes_40",img: "resources/customisation/character_clothes/character_clothes39.png"},
-    {name:"clothes_41",img: "resources/customisation/character_clothes/character_clothes40.png"},
-    {name:"clothes_42",img: "resources/customisation/character_clothes/character_clothes41.png"},
-    {name:"clothes_43",img: "resources/customisation/character_clothes/character_clothes42.png"},
-    {name:"clothes_44",img: "resources/customisation/character_clothes/character_clothes43.png"},
-    {name:"clothes_45",img: "resources/customisation/character_clothes/character_clothes44.png"},
-    {name:"clothes_46",img: "resources/customisation/character_clothes/character_clothes45.png"},
-    {name:"clothes_47",img: "resources/customisation/character_clothes/character_clothes46.png"},
-    {name:"clothes_48",img: "resources/customisation/character_clothes/character_clothes47.png"},
-    {name:"clothes_49",img: "resources/customisation/character_clothes/character_clothes48.png"},
-    {name:"clothes_50",img: "resources/customisation/character_clothes/character_clothes49.png"},
-    {name:"clothes_51",img: "resources/customisation/character_clothes/character_clothes50.png"},
-    {name:"clothes_52",img: "resources/customisation/character_clothes/character_clothes51.png"},
-    {name:"clothes_53",img: "resources/customisation/character_clothes/character_clothes52.png"},
-    {name:"clothes_54",img: "resources/customisation/character_clothes/character_clothes53.png"},
-    {name:"clothes_55",img: "resources/customisation/character_clothes/character_clothes54.png"},
-    {name:"clothes_56",img: "resources/customisation/character_clothes/character_clothes55.png"},
-    {name:"clothes_57",img: "resources/customisation/character_clothes/character_clothes56.png"},
-    {name:"clothes_58",img: "resources/customisation/character_clothes/character_clothes57.png"},
-    {name:"clothes_59",img: "resources/customisation/character_clothes/character_clothes58.png"},
-    {name:"clothes_60",img: "resources/customisation/character_clothes/character_clothes59.png"},
-    {name:"clothes_61",img: "resources/customisation/character_clothes/character_clothes60.png"},
-    {name:"clothes_62",img: "resources/customisation/character_clothes/character_clothes61.png"},
-    {name:"clothes_63",img: "resources/customisation/character_clothes/character_clothes62.png"},
-    {name:"clothes_64",img: "resources/customisation/character_clothes/character_clothes63.png"},
-    {name:"clothes_65",img: "resources/customisation/character_clothes/character_clothes64.png"},
-    {name:"clothes_66",img: "resources/customisation/character_clothes/character_clothes65.png"},
-    {name:"clothes_67",img: "resources/customisation/character_clothes/character_clothes66.png"},
-    {name:"clothes_68",img: "resources/customisation/character_clothes/character_clothes67.png"},
-    {name:"clothes_69",img: "resources/customisation/character_clothes/character_clothes68.png"},
-    {name:"clothes_70",img: "resources/customisation/character_clothes/character_clothes69.png"},
-    {name:"clothes_pride_shirt",img: "resources/customisation/character_clothes/pride_shirt.png"},
-    {name:"clothes_black_hoodie",img: "resources/customisation/character_clothes/black_hoodie.png"},
-    {name:"clothes_white_hoodie",img: "resources/customisation/character_clothes/white_hoodie.png"},
-    {name:"clothes_engelbert",img: "resources/customisation/character_clothes/engelbert.png"}
-];
-
-export const HATS_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name: "hats_1", img: "resources/customisation/character_hats/character_hats1.png"},
-    {name: "hats_2", img: "resources/customisation/character_hats/character_hats2.png"},
-    {name: "hats_3", img: "resources/customisation/character_hats/character_hats3.png"},
-    {name: "hats_4", img: "resources/customisation/character_hats/character_hats4.png"},
-    {name: "hats_5", img: "resources/customisation/character_hats/character_hats5.png"},
-    {name: "hats_6", img: "resources/customisation/character_hats/character_hats6.png"},
-    {name: "hats_7", img: "resources/customisation/character_hats/character_hats7.png"},
-    {name: "hats_8", img: "resources/customisation/character_hats/character_hats8.png"},
-    {name: "hats_9", img: "resources/customisation/character_hats/character_hats9.png"},
-    {name: "hats_10", img: "resources/customisation/character_hats/character_hats10.png"},
-    {name: "hats_11", img: "resources/customisation/character_hats/character_hats11.png"},
-    {name: "hats_12", img: "resources/customisation/character_hats/character_hats12.png"},
-    {name: "hats_13", img: "resources/customisation/character_hats/character_hats13.png"},
-    {name: "hats_14", img: "resources/customisation/character_hats/character_hats14.png"},
-    {name: "hats_15", img: "resources/customisation/character_hats/character_hats15.png"},
-    {name: "hats_16", img: "resources/customisation/character_hats/character_hats16.png"},
-    {name: "hats_17", img: "resources/customisation/character_hats/character_hats17.png"},
-    {name: "hats_18", img: "resources/customisation/character_hats/character_hats18.png"},
-    {name: "hats_19", img: "resources/customisation/character_hats/character_hats19.png"},
-    {name: "hats_20", img: "resources/customisation/character_hats/character_hats20.png"},
-    {name: "hats_21", img: "resources/customisation/character_hats/character_hats21.png"},
-    {name: "hats_22", img: "resources/customisation/character_hats/character_hats22.png"},
-    {name: "hats_23", img: "resources/customisation/character_hats/character_hats23.png"},
-    {name: "hats_24", img: "resources/customisation/character_hats/character_hats24.png"},
-    {name: "hats_25", img: "resources/customisation/character_hats/character_hats25.png"},
-    {name: "hats_26", img: "resources/customisation/character_hats/character_hats26.png"},
-    {name: "tinfoil_hat1", img: "resources/customisation/character_hats/tinfoil_hat1.png"}
-];
-
-export const ACCESSORIES_RESOURCES: Array<BodyResourceDescriptionInterface> = [
-    {name: "accessory_1", img: "resources/customisation/character_accessories/character_accessories1.png"},
-    {name: "accessory_2", img: "resources/customisation/character_accessories/character_accessories2.png"},
-    {name: "accessory_3", img: "resources/customisation/character_accessories/character_accessories3.png"},
-    {name: "accessory_4", img: "resources/customisation/character_accessories/character_accessories4.png"},
-    {name: "accessory_5", img: "resources/customisation/character_accessories/character_accessories5.png"},
-    {name: "accessory_6", img: "resources/customisation/character_accessories/character_accessories6.png"},
-    {name: "accessory_7", img: "resources/customisation/character_accessories/character_accessories7.png"},
-    {name: "accessory_8", img: "resources/customisation/character_accessories/character_accessories8.png"},
-    {name: "accessory_9", img: "resources/customisation/character_accessories/character_accessories9.png"},
-    {name: "accessory_10", img: "resources/customisation/character_accessories/character_accessories10.png"},
-    {name: "accessory_11", img: "resources/customisation/character_accessories/character_accessories11.png"},
-    {name: "accessory_12", img: "resources/customisation/character_accessories/character_accessories12.png"},
-    {name: "accessory_13", img: "resources/customisation/character_accessories/character_accessories13.png"},
-    {name: "accessory_14", img: "resources/customisation/character_accessories/character_accessories14.png"},
-    {name: "accessory_15", img: "resources/customisation/character_accessories/character_accessories15.png"},
-    {name: "accessory_16", img: "resources/customisation/character_accessories/character_accessories16.png"},
-    {name: "accessory_17", img: "resources/customisation/character_accessories/character_accessories17.png"},
-    {name: "accessory_18", img: "resources/customisation/character_accessories/character_accessories18.png"},
-    {name: "accessory_19", img: "resources/customisation/character_accessories/character_accessories19.png"},
-    {name: "accessory_20", img: "resources/customisation/character_accessories/character_accessories20.png"},
-    {name: "accessory_21", img: "resources/customisation/character_accessories/character_accessories21.png"},
-    {name: "accessory_22", img: "resources/customisation/character_accessories/character_accessories22.png"},
-    {name: "accessory_23", img: "resources/customisation/character_accessories/character_accessories23.png"},
-    {name: "accessory_24", img: "resources/customisation/character_accessories/character_accessories24.png"},
-    {name: "accessory_25", img: "resources/customisation/character_accessories/character_accessories25.png"},
-    {name: "accessory_26", img: "resources/customisation/character_accessories/character_accessories26.png"},
-    {name: "accessory_27", img: "resources/customisation/character_accessories/character_accessories27.png"},
-    {name: "accessory_28", img: "resources/customisation/character_accessories/character_accessories28.png"},
-    {name: "accessory_29", img: "resources/customisation/character_accessories/character_accessories29.png"},
-    {name: "accessory_30", img: "resources/customisation/character_accessories/character_accessories30.png"},
-    {name: "accessory_31", img: "resources/customisation/character_accessories/character_accessories31.png"},
-    {name: "accessory_32", img: "resources/customisation/character_accessories/character_accessories32.png"},
-    {name: "accessory_mate_bottle", img: "resources/customisation/character_accessories/mate_bottle1.png"},
-    {name: "accessory_mask", img: "resources/customisation/character_accessories/mask.png"}
-];
-
-export const LAYERS: Array<Array<BodyResourceDescriptionInterface>> = [
-    COLOR_RESOURCES,
-    EYES_RESOURCES,
-    HAIR_RESOURCES,
-    CLOTHES_RESOURCES,
-    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}
-            )
-        }
-    }
-}
-
-export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => {
-    const name = 'customCharacterTexture'+texture.id;
-    load.spritesheet(
-        name,
-        texture.url,
-        {frameWidth: 32, frameHeight: 32}
-    );
-}
-
-export const OBJECTS: Array<PlayerResourceDescriptionInterface> = [
-    {name:'layout_modes', img:'resources/objects/layout_modes.png'},
-    {name:'teleportation', img:'resources/objects/teleportation.png'},
-];
-
-export const loadObject = (load: LoaderPlugin) => {
-    for (let j = 0; j < OBJECTS.length; j++) {
-        load.spritesheet(
-            OBJECTS[j].name,
-            OBJECTS[j].img,
-            {frameWidth: 32, frameHeight: 32}
-        )
-    }
-}
-
-export const loadPlayerCharacters = (load: LoaderPlugin) => {
-    PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => {
-        load.spritesheet(
-            playerResource.name,
-            playerResource.img,
-            {frameWidth: 32, frameHeight: 32}
-        );
-    });
-}

front/src/Phaser/Game/AddPlayerInterface.ts

@@ -1,5 +1,5 @@
 import {PointInterface} from "../../Connexion/ConnexionModels";
-import {BodyResourceDescriptionInterface} from "../Entity/body_character";
+import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 
 export interface AddPlayerInterface {
     userId: number;

front/src/Phaser/Game/GameManager.ts

@@ -55,7 +55,10 @@ export class GameManager {
         return this.playerName;
     }
 
-    getCharacterLayers(): string[]|null {
+    getCharacterLayers(): string[] {
+        if (!this.characterLayers) {
+            throw 'characterLayers are not set';
+        }
         return this.characterLayers;
     }
 

front/src/Phaser/Game/GameScene.ts

@@ -30,7 +30,7 @@ import {RemotePlayer} from "../Entity/RemotePlayer";
 import {Queue} from 'queue-typescript';
 import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
 import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
-import {loadAllLayers, loadObject, loadPlayerCharacters} from "../Entity/body_character";
+import {lazyLoadPlayerCharacterTextures} from "../Entity/PlayerTexturesLoadingManager";
 import {
     CenterListener,
     layoutManager,
@@ -66,7 +66,7 @@ import {ChatModeIcon} from "../Components/ChatModeIcon";
 import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
 import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {TextureError} from "../../Exception/TextureError";
-import {TextField} from "../Components/TextField";
+import {addLoader} from "../Components/Loader";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null,
@@ -181,7 +181,7 @@ export class GameScene extends ResizableScene implements CenterListener {
 
     //hook preload scene
     preload(): void {
-        this.initProgressBar();
+        addLoader(this);
 
         this.load.image(openChatIconName, 'resources/objects/talk.png');
         this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
@@ -201,28 +201,10 @@ export class GameScene extends ResizableScene implements CenterListener {
             this.onMapLoad(data);
         }
 
-        //add player png
+        this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32});
-        loadPlayerCharacters(this.load);
-        loadAllLayers(this.load);
-        loadObject(this.load);
-
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
     }
 
-    private initProgressBar(): void {
-        const loadingText = this.add.text(this.game.renderer.width / 2, 200, 'Loading');
-        const progress = this.add.graphics();
-        this.load.on('progress', (value: number) => {
-            progress.clear();
-            progress.fillStyle(0xffffff, 1);
-            progress.fillRect(0, 270, 800 * value, 60);
-        });
-        this.load.on('complete', () => {
-            loadingText.destroy();
-            progress.destroy();
-        });
-    }
-
     // FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     private async onMapLoad(data: any): Promise<void> {
@@ -340,11 +322,7 @@ export class GameScene extends ResizableScene implements CenterListener {
             throw 'playerName is not set';
         }
         this.playerName = playerName;
-        const characterLayers = gameManager.getCharacterLayers();
+        this.characterLayers = gameManager.getCharacterLayers();
-        if (!characterLayers) {
-            throw 'characterLayers are not set';
-        }
-        this.characterLayers = characterLayers;
 
 
         //initalise map
@@ -877,15 +855,15 @@ export class GameScene extends ResizableScene implements CenterListener {
     }
 
     createCurrentPlayer(){
-        //initialise player
         //TODO create animation moving between exit and start
+        const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, this.textures, this.characterLayers);
         try {
             this.CurrentPlayer = new Player(
                 this,
                 this.startX,
                 this.startY,
                 this.playerName,
-                this.characterLayers,
+                texturesPromise,
                 PlayerAnimationNames.WalkDown,
                 false,
                 this.userInputManager
@@ -1061,11 +1039,8 @@ export class GameScene extends ResizableScene implements CenterListener {
             event: addPlayerData
         });
     }
-
+    
-    /**
+    private doAddPlayer(addPlayerData : AddPlayerInterface): void {
-     * Create new player
-     */
-    private async doAddPlayer(addPlayerData : AddPlayerInterface) : Promise<void> {
         //check if exist player, if exist, move position
         if(this.MapPlayersByKey.has(addPlayerData.userId)){
             this.updatePlayerPosition({
@@ -1074,39 +1049,21 @@ export class GameScene extends ResizableScene implements CenterListener {
             });
             return;
         }
-        // Load textures (in case it is a custom texture)
-        const characterLayerList: string[] = [];
-        const loadPromises: Promise<void>[] = [];
-        for (const characterLayer of addPlayerData.characterLayers) {
-            characterLayerList.push(characterLayer.name);
-            if (characterLayer.img) {
-                console.log('LOADING ', characterLayer.name, characterLayer.img)
-                loadPromises.push(this.loadSpritesheet(characterLayer.name, characterLayer.img));
-            }
-        }
-        if (loadPromises.length > 0) {
-            this.load.start();
-        }
 
-        //initialise player
+        const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, this.textures, addPlayerData.characterLayers);
         const player = new RemotePlayer(
             addPlayerData.userId,
             this,
             addPlayerData.position.x,
             addPlayerData.position.y,
             addPlayerData.name,
-            [], // Let's go with no textures and let's load textures when promises have returned.
+            texturesPromise,
             addPlayerData.position.direction,
             addPlayerData.position.moving
         );
         this.MapPlayers.add(player);
         this.MapPlayersByKey.set(player.userId, player);
         player.updatePosition(addPlayerData.position);
-
-
-        await Promise.all(loadPromises);
-
-        player.addTextures(characterLayerList, 1);
     }
 
     /**
@@ -1262,23 +1219,5 @@ export class GameScene extends ResizableScene implements CenterListener {
         mediaManager.removeTriggerCloseJitsiFrameButton('close-jisi');
     }
 
-    private loadSpritesheet(name: string, url: string): Promise<void> {
-        return new Promise<void>(((resolve, reject) => {
-            if (this.textures.exists(name)) {
-                resolve();
-                return;
-            }
-            this.load.spritesheet(
-                name,
-                url,
-                {frameWidth: 32, frameHeight: 32}
-            );
-            this.load.on('filecomplete-spritesheet-'+name, () => {
-                console.log('RESOURCE LOADED!');
-                resolve();
-            });
-        }))
-    }
-
 
 }

front/src/Phaser/Login/CustomizeScene.ts

@@ -2,15 +2,14 @@ import {EnableCameraSceneName} from "./EnableCameraScene";
 import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {BodyResourceDescriptionInterface, LAYERS, loadAllLayers, loadCustomTexture} from "../Entity/body_character";
+import {loadAllLayers, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
 import Sprite = Phaser.GameObjects.Sprite;
 import Container = Phaser.GameObjects.Container;
 import {gameManager} from "../Game/GameManager";
 import {ResizableScene} from "./ResizableScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
-import {PlayerResourceDescriptionInterface} from "../Entity/Character";
+import {addLoader} from "../Components/Loader";
-import {SelectCharacterSceneName} from "./SelectCharacterScene";
+import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
-import {LoginSceneName} from "./LoginScene";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -48,16 +47,13 @@ export class CustomizeScene extends ResizableScene {
     }
 
     preload() {
+        addLoader(this);
         this.load.image(CustomizeTextures.arrowRight, "resources/objects/arrow_right.png");
         this.load.image(CustomizeTextures.icon, "resources/logos/tcm_full.png");
         this.load.image(CustomizeTextures.arrowUp, "resources/objects/arrow_up.png");
         this.load.bitmapFont(CustomizeTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
 
-        //load all the png files
+        this.layers = loadAllLayers(this.load);
-        loadAllLayers(this.load);
-
-        // load custom layers
-        this.layers = LAYERS;
 
         const localUser = localUserStore.getLocalUser();
 

front/src/Phaser/Login/LoginScene.ts

@@ -2,11 +2,9 @@ import {gameManager} from "../Game/GameManager";
 import {TextField} from "../Components/TextField";
 import {TextInput} from "../Components/TextInput";
 import Image = Phaser.GameObjects.Image;
-import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {cypressAsserter} from "../../Cypress/CypressAsserter";
 import {SelectCharacterSceneName} from "./SelectCharacterScene";
 import {ResizableScene} from "./ResizableScene";
-import {EnableCameraSceneName} from "./EnableCameraScene";
 
 //todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
@@ -37,14 +35,6 @@ export class LoginScene extends ResizableScene {
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
         this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
         cypressAsserter.preloadFinished();
-        //add player png
-        PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => {
-            this.load.spritesheet(
-                playerResource.name,
-                playerResource.img,
-                {frameWidth: 32, frameHeight: 32}
-            );
-        });
     }
 
     create() {

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -2,11 +2,13 @@ import {gameManager} from "../Game/GameManager";
 import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import Rectangle = Phaser.GameObjects.Rectangle;
-import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {EnableCameraSceneName} from "./EnableCameraScene";
 import {CustomizeSceneName} from "./CustomizeScene";
 import {ResizableScene} from "./ResizableScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
+import {loadAllDefaultModels} from "../Entity/PlayerTexturesLoadingManager";
+import {addLoader} from "../Components/Loader";
+import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 
 
 //todo: put this constants in a dedicated file
@@ -32,6 +34,7 @@ export class SelectCharacterScene extends ResizableScene {
     private selectedRectangleYPos = 0; // Number of the character selected in the columns
     private selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
     private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
+    private playerModels!: BodyResourceDescriptionInterface[];
 
     constructor() {
         super({
@@ -40,18 +43,12 @@ export class SelectCharacterScene extends ResizableScene {
     }
 
     preload() {
+        addLoader(this);
         this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
         this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
         // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
         this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
-        //add player png
+        this.playerModels = loadAllDefaultModels(this.load);
-        PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => {
-            this.load.spritesheet(
-                playerResource.name,
-                playerResource.img,
-                {frameWidth: 32, frameHeight: 32}
-            );
-        });
         this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
         this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
     }
@@ -85,7 +82,7 @@ export class SelectCharacterScene extends ResizableScene {
             this.updateSelectedPlayer();
         });
         this.input.keyboard.on('keydown-DOWN', () => {
-            if (this.selectedRectangleYPos < Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow)) {
+            if (this.selectedRectangleYPos < Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) {
                 this.selectedRectangleYPos++;
             }
             this.updateSelectedPlayer();
@@ -106,7 +103,7 @@ export class SelectCharacterScene extends ResizableScene {
             this.selectedRectangleYPos = Math.floor(playerNumber / this.nbCharactersPerRow);
             this.updateSelectedPlayer();
         } else if (playerNumber === -1) {
-            this.selectedRectangleYPos = Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow);
+            this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
             this.updateSelectedPlayer();
         }
     }
@@ -127,8 +124,8 @@ export class SelectCharacterScene extends ResizableScene {
     }
 
     createCurrentPlayer(): void {
-        for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
+        for (let i = 0; i <this.playerModels.length; i++) {
-            const playerResource = PLAYER_RESOURCES[i];
+            const playerResource = this.playerModels[i];
 
             const col = i % this.nbCharactersPerRow;
             const row = Math.floor(i / this.nbCharactersPerRow);
@@ -160,12 +157,12 @@ export class SelectCharacterScene extends ResizableScene {
         this.add.existing(this.customizeButtonSelected);
 
         this.customizeButton.setInteractive().on("pointerdown", () => {
-            this.selectedRectangleYPos = Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow);
+            this.selectedRectangleYPos = Math.ceil(this.playerModels.length / this.nbCharactersPerRow);
             this.updateSelectedPlayer();
         });
 
         this.selectedPlayer = this.players[0];
-        this.selectedPlayer.play(PLAYER_RESOURCES[0].name);
+        this.selectedPlayer.play(this.playerModels[0].name);
     }
 
     /**
@@ -181,7 +178,7 @@ export class SelectCharacterScene extends ResizableScene {
     private updateSelectedPlayer(): void {
         this.selectedPlayer?.anims.pause();
         // If we selected the customize button
-        if (this.selectedRectangleYPos === Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow)) {
+        if (this.selectedRectangleYPos === Math.ceil(this.playerModels.length / this.nbCharactersPerRow)) {
             this.selectedPlayer = null;
             this.selectedRectangle.setVisible(false);
             this.customizeButtonSelected.setVisible(true);
@@ -198,7 +195,7 @@ export class SelectCharacterScene extends ResizableScene {
         this.selectedRectangle.setSize(32, 32);
         const playerNumber = this.selectedRectangleXPos + this.selectedRectangleYPos * this.nbCharactersPerRow;
         const player = this.players[playerNumber];
-        player.play(PLAYER_RESOURCES[playerNumber].name);
+        player.play(this.playerModels[playerNumber].name);
         this.selectedPlayer = player;
         localUserStore.setPlayerCharacterIndex(playerNumber);
     }
@@ -211,7 +208,7 @@ export class SelectCharacterScene extends ResizableScene {
         this.customizeButton.x = this.game.renderer.width / 2;
         this.customizeButtonSelected.x = this.game.renderer.width / 2;
 
-        for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
+        for (let i = 0; i <this.playerModels.length; i++) {
             const player = this.players[i];
 
             const col = i % this.nbCharactersPerRow;

front/src/Phaser/Player/Player.ts

@@ -19,12 +19,12 @@ export class Player extends Character implements CurrentGamerInterface {
         x: number,
         y: number,
         name: string,
-        PlayerTextures: string[],
+        texturesPromise: Promise<string[]>,
         direction: string,
         moving: boolean,
         private userInputManager: UserInputManager
     ) {
-        super(Scene, x, y, PlayerTextures, name, direction, moving, 1);
+        super(Scene, x, y, texturesPromise, name, direction, moving, 1);
 
         //the current player model should be push away by other players to prevent conflict
         this.getBody().setImmovable(false);