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)
This commit is contained in:
parent
94333a7438
commit
e3ee66527a
2 changed files with 52 additions and 16 deletions
20
front/src/Phaser/Entity/CustomizedCharacter.ts
Normal file
20
front/src/Phaser/Entity/CustomizedCharacter.ts
Normal file
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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<Sprite> {
|
||||
const children: Array<Sprite> = new Array<Sprite>();
|
||||
private getContainerChildren(layerNumber: number, selectedItem: number): Array<string> {
|
||||
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);
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue