From e3ee66527a20b5b31788f874952dce8528a13115 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Mon, 14 Jun 2021 16:32:09 +0200 Subject: [PATCH] Fixing bug slowing down the CustomizeScene a lot By forcing the containers to be updated only in the "update" method, we seem to be solving some bugs regarding the way sprites are handled. There is still an issue though. Some times, for some reasons, the update list seems to be growing a lot. The more we click the left/right arrow to choose a character, the slower it gets (but with this commit, it does not lock anymore) --- .../src/Phaser/Entity/CustomizedCharacter.ts | 20 ++++++++ front/src/Phaser/Login/CustomizeScene.ts | 48 ++++++++++++------- 2 files changed, 52 insertions(+), 16 deletions(-) create mode 100644 front/src/Phaser/Entity/CustomizedCharacter.ts diff --git a/front/src/Phaser/Entity/CustomizedCharacter.ts b/front/src/Phaser/Entity/CustomizedCharacter.ts new file mode 100644 index 00000000..3a7f1597 --- /dev/null +++ b/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)); + } + } +} diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index cc0c7208..f1d48235 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/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)); - this.input.keyboard.on('keyup-LEFT', () => this.moveCursorHorizontally(-1)); - this.input.keyboard.on('keyup-DOWN', () => this.moveCursorVertically(1)); - this.input.keyboard.on('keyup-UP', () => this.moveCursorVertically(-1)); + // Note: the key bindings are not directly put on the moveCursorVertically or moveCursorHorizontally methods + // 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 + // explain, the list of sprites managed by the update list become immense + 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 { - const children: Array = new Array(); + private getContainerChildren(layerNumber: number, selectedItem: number): Array { + const children: Array = new Array(); 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); - this.containersRow[i][j].removeAll(true); - this.containersRow[i][j].add(children); + const children = this.getContainerChildren(i, j); + this.containersRow[i][j].updateSprites(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; + } }