Merge pull request #1176 from thecodingmachine/fix_character_scene_slow

Fixing bug slowing down the CustomizeScene a lot

front/src/Phaser/Entity/CustomizedCharacter.ts

@@ -0,0 +1,20 @@
+import Container = Phaser.GameObjects.Container;
+import type {Scene} from "phaser";
+import Sprite = Phaser.GameObjects.Sprite;
+
+/**
+ * A sprite of a customized character (used in the Customize Scene only)
+ */
+export class CustomizedCharacter extends Container {
+    public constructor(scene: Scene, x: number, y: number, layers: string[]) {
+        super(scene, x, y);
+        this.updateSprites(layers);
+    }
+
+    public updateSprites(layers: string[]): void {
+        this.removeAll(true);
+        for (const layer of layers) {
+            this.add(new Sprite(this.scene, 0, 0, layer));
+        }
+    }
+}

front/src/Phaser/Login/CustomizeScene.ts

@@ -15,6 +15,7 @@ import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStor
 import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
 import {waScaleManager} from "../Services/WaScaleManager";
 import {isMobile} from "../../Enum/EnvironmentVariable";
+import {CustomizedCharacter} from "../Entity/CustomizedCharacter";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -25,12 +26,15 @@ export class CustomizeScene extends AbstractCharacterScene {
     private Rectangle!: Rectangle;
 
     private selectedLayers: number[] = [0];
-    private containersRow: Container[][] = [];
+    private containersRow: CustomizedCharacter[][] = [];
     public activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
     protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
 
+    private moveHorizontally: number = 0;
+    private moveVertically: number = 0;
+
     constructor() {
         super({
             key: CustomizeSceneName
@@ -88,10 +92,13 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.backToPreviousScene();
         });
 
-        this.input.keyboard.on('keyup-RIGHT', () => this.moveCursorHorizontally(1));
+        // Note: the key bindings are not directly put on the moveCursorVertically or moveCursorHorizontally methods
-        this.input.keyboard.on('keyup-LEFT', () => this.moveCursorHorizontally(-1));
+        // because if 2 such events are fired close to one another, it makes the whole application crawl to a halt (for a reason I cannot
-        this.input.keyboard.on('keyup-DOWN', () => this.moveCursorVertically(1));
+        // explain, the list of sprites managed by the update list become immense
-        this.input.keyboard.on('keyup-UP', () => this.moveCursorVertically(-1));
+        this.input.keyboard.on('keyup-RIGHT', () => this.moveHorizontally = 1);
+        this.input.keyboard.on('keyup-LEFT', () => this.moveHorizontally = -1);
+        this.input.keyboard.on('keyup-DOWN', () => this.moveVertically = 1);
+        this.input.keyboard.on('keyup-UP', () => this.moveVertically = -1);
 
         const customCursorPosition = localUserStore.getCustomCursorPosition();
         if (customCursorPosition) {
@@ -104,7 +111,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.onResize();
     }
 
-    public moveCursorHorizontally(index: number): void {
+    public doMoveCursorHorizontally(index: number): void {
         this.selectedLayers[this.activeRow] += index;
         if (this.selectedLayers[this.activeRow] < 0) {
             this.selectedLayers[this.activeRow] = 0
@@ -116,7 +123,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.saveInLocalStorage();
     }
 
-    public moveCursorVertically(index:number): void {
+    public doMoveCursorVertically(index:number): void {
 
         this.activeRow += index;
         if (this.activeRow < 0) {
@@ -165,20 +172,20 @@ export class CustomizeScene extends AbstractCharacterScene {
      * @param selectedItem, The number of the item select (0 for black body...)
      */
     private generateCharacter(x: number, y: number, layerNumber: number, selectedItem: number) {
-        return new Container(this, x, y,this.getContainerChildren(layerNumber,selectedItem));
+        return new CustomizedCharacter(this, x, y, this.getContainerChildren(layerNumber,selectedItem));
     }
 
-    private getContainerChildren(layerNumber: number, selectedItem: number): Array<Sprite> {
+    private getContainerChildren(layerNumber: number, selectedItem: number): Array<string> {
-        const children: Array<Sprite> = new Array<Sprite>();
+        const children: Array<string> = new Array<string>();
         for (let j = 0; j <= layerNumber; j++) {
             if (j === layerNumber) {
-                children.push(this.generateLayers(0, 0, this.layers[j][selectedItem].name));
+                children.push(this.layers[j][selectedItem].name);
             } else {
                 const layer = this.selectedLayers[j];
                 if (layer === undefined) {
                     continue;
                 }
-                children.push(this.generateLayers(0, 0, this.layers[j][layer].name));
+                children.push(this.layers[j][layer].name);
             }
          }
         return children;
@@ -215,15 +222,15 @@ export class CustomizeScene extends AbstractCharacterScene {
      * @return a new sprite
      */
     private generateLayers(x: number, y: number, name: string): Sprite {
-        return new Sprite(this, x, y, name);
+        //return new Sprite(this, x, y, name);
+        return this.add.sprite(0, 0, name);
     }
 
     private updateSelectedLayer() {
         for(let i = 0; i < this.containersRow.length; i++){
             for(let j = 0; j < this.containersRow[i].length; j++){
-               const children = this.getContainerChildren(i, j);
+                const children = this.getContainerChildren(i, j);
-               this.containersRow[i][j].removeAll(true);
+                this.containersRow[i][j].updateSprites(children);
-                this.containersRow[i][j].add(children);
             }
         }
     }
@@ -234,6 +241,15 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.moveLayers();
             this.lazyloadingAttempt = false;
         }
+
+        if (this.moveHorizontally !== 0) {
+            this.doMoveCursorHorizontally(this.moveHorizontally);
+            this.moveHorizontally = 0;
+        }
+        if (this.moveVertically !== 0) {
+            this.doMoveCursorVertically(this.moveVertically);
+            this.moveVertically = 0;
+        }
     }