From 232ac6d5d1c8a08ba012ab3b3fafa7bb490edc0e Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sun, 24 Jan 2021 18:00:30 +0100 Subject: [PATCH] Error lazy loading Update loader custom characters --- front/src/Phaser/Entity/PlayerTextures.ts | 3 +- .../Entity/PlayerTexturesLoadingManager.ts | 16 +++++--- .../Phaser/Login/AbstractCharacterScene.ts | 41 +++++++++++++++++++ front/src/Phaser/Login/CustomizeScene.ts | 30 ++++++-------- .../src/Phaser/Login/SelectCharacterScene.ts | 23 ++++------- 5 files changed, 75 insertions(+), 38 deletions(-) create mode 100644 front/src/Phaser/Login/AbstractCharacterScene.ts diff --git a/front/src/Phaser/Entity/PlayerTextures.ts b/front/src/Phaser/Entity/PlayerTextures.ts index 7d10cc1a..d0542d6a 100644 --- a/front/src/Phaser/Entity/PlayerTextures.ts +++ b/front/src/Phaser/Entity/PlayerTextures.ts @@ -6,7 +6,8 @@ export interface BodyResourceDescriptionListInterface { export interface BodyResourceDescriptionInterface { name: string, - img: string + img: string, + level?: number } export const PLAYER_RESOURCES: BodyResourceDescriptionListInterface = { diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts index 2e0353ae..c7992ad5 100644 --- a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts +++ b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts @@ -23,15 +23,19 @@ export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptio }); return returnArray; } -export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) : Promise => { +export const loadCustomTexture = (loaderPlugin: LoaderPlugin, texture: CharacterTexture) : Promise => { const name = 'customCharacterTexture'+texture.id; - return createLoadingPromise(load, {name, img: texture.url}).then(() => { - return {name: name, img: texture.url} + const playerResourceDescriptor: BodyResourceDescriptionInterface = {name, img: texture.url, level: texture.level} + return new Promise((solve) => { + loaderPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, {frameWidth: 32, frameHeight: 32}); + solve(playerResourceDescriptor); }); + //TODO refactor and use lasy loading + //return createLoadingPromise(loaderPlugin, {name, img: texture.url, level: texture.level}); } export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturePlugin: TextureManager, texturekeys:Array): Promise => { - const promisesList:Promise[] = []; + const promisesList:Promise[] = []; texturekeys.forEach((textureKey: string|BodyResourceDescriptionInterface) => { try { const playerResourceDescriptor = getRessourceDescriptor(textureKey); @@ -70,8 +74,8 @@ export const getRessourceDescriptor = (textureKey: string|BodyResourceDescriptio } const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface) => { - return new Promise((res, rej) => { + return new Promise((res) => { loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, {frameWidth: 32, frameHeight: 32}); - loadPlugin.once('filecomplete-spritesheet-'+playerResourceDescriptor.name, () => res()); + loadPlugin.once('filecomplete-spritesheet-'+playerResourceDescriptor.name, () => res(playerResourceDescriptor)); }); } \ No newline at end of file diff --git a/front/src/Phaser/Login/AbstractCharacterScene.ts b/front/src/Phaser/Login/AbstractCharacterScene.ts new file mode 100644 index 00000000..dfc98539 --- /dev/null +++ b/front/src/Phaser/Login/AbstractCharacterScene.ts @@ -0,0 +1,41 @@ +import {ResizableScene} from "./ResizableScene"; +import {localUserStore} from "../../Connexion/LocalUserStore"; +import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; +import {loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager"; +import {CharacterTexture} from "../../Connexion/LocalUser"; + +export abstract class AbstractCharacterScene extends ResizableScene { + + loadCustomSceneSelectCharacters() : Promise { + const textures = this.getTextures(); + const promises : Promise[] = []; + if (textures) { + for (const texture of textures) { + if (texture.level === -1) { + continue; + } + promises.push(loadCustomTexture(this.load, texture)); + } + } + return Promise.all(promises) + } + + loadSelectSceneCharacters() : Promise { + const textures = this.getTextures(); + const promises: Promise[] = []; + if (textures) { + for (const texture of textures) { + if (texture.level !== -1) { + continue; + } + promises.push(loadCustomTexture(this.load, texture)); + } + } + return Promise.all(promises) + } + + private getTextures() : CharacterTexture[]|undefined{ + const localUser = localUserStore.getLocalUser(); + return localUser?.textures; + } +} \ No newline at end of file diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index 1cea50ee..4f5b2860 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -10,6 +10,7 @@ import {ResizableScene} from "./ResizableScene"; import {localUserStore} from "../../Connexion/LocalUserStore"; import {addLoader} from "../Components/Loader"; import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; +import {AbstractCharacterScene} from "./AbstractCharacterScene"; export const CustomizeSceneName = "CustomizeScene"; @@ -20,7 +21,7 @@ enum CustomizeTextures{ arrowUp = "arrow_up", } -export class CustomizeScene extends ResizableScene { +export class CustomizeScene extends AbstractCharacterScene { private textField!: TextField; private enterField!: TextField; @@ -48,26 +49,21 @@ export class CustomizeScene extends ResizableScene { preload() { addLoader(this); + + this.layers = loadAllLayers(this.load); + this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => { + bodyResourceDescriptions.forEach((bodyResourceDescription) => { + if(!bodyResourceDescription.level){ + throw 'Texture level is null'; + } + this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription); + }); + }); + 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'); - - this.layers = loadAllLayers(this.load); - - const localUser = localUserStore.getLocalUser(); - - const textures = localUser?.textures; - if (textures) { - for (const texture of textures) { - if(texture.level === -1){ - continue; - } - loadCustomTexture(this.load, texture).then((bodyResourceDescription: BodyResourceDescriptionInterface) => { - this.layers[texture.level].unshift(bodyResourceDescription); - }); - } - } } create() { diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 5d315139..905c9ae4 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -9,6 +9,7 @@ import {localUserStore} from "../../Connexion/LocalUserStore"; import {loadAllDefaultModels, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager"; import {addLoader} from "../Components/Loader"; import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; +import {AbstractCharacterScene} from "./AbstractCharacterScene"; //todo: put this constants in a dedicated file @@ -21,7 +22,7 @@ enum LoginTextures { customizeButtonSelected = "customize_button_selected" } -export class SelectCharacterScene extends ResizableScene { +export class SelectCharacterScene extends AbstractCharacterScene { private readonly nbCharactersPerRow = 6; private textField!: TextField; private pressReturnField!: TextField; @@ -44,6 +45,13 @@ export class SelectCharacterScene extends ResizableScene { preload() { addLoader(this); + + this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => { + bodyResourceDescriptions.forEach((bodyResourceDescription) => { + this.playerModels.push(bodyResourceDescription); + }); + }) + 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 @@ -51,19 +59,6 @@ export class SelectCharacterScene extends ResizableScene { this.playerModels = loadAllDefaultModels(this.load); this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png'); this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png'); - - const localUser = localUserStore.getLocalUser(); - const textures = localUser?.textures; - if (textures) { - for (const texture of textures) { - if(texture.level !== -1){ - continue; - } - loadCustomTexture(this.load, texture).then((bodyResourceDescription: BodyResourceDescriptionInterface) => { - this.playerModels.push(bodyResourceDescription); - }); - } - } } create() {