From d93a8da828d3d7c3ac0b93efd04eced7ad43586c Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sun, 24 Jan 2021 15:57:47 +0100 Subject: [PATCH 1/6] Fix custom character lazy loading --- .../Entity/PlayerTexturesLoadingManager.ts | 20 +++++++++++-------- front/src/Phaser/Game/GameScene.ts | 11 +++++++++- front/src/Phaser/Login/CustomizeScene.ts | 7 ++----- .../src/Phaser/Login/SelectCharacterScene.ts | 5 +++-- 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts index 776d1f5c..2e0353ae 100644 --- a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts +++ b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts @@ -23,21 +23,25 @@ export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptio }); return returnArray; } -export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) => { +export const loadCustomTexture = (load: LoaderPlugin, texture: CharacterTexture) : Promise => { const name = 'customCharacterTexture'+texture.id; - load.spritesheet(name,texture.url,{frameWidth: 32, frameHeight: 32}); - return name; + return createLoadingPromise(load, {name, img: texture.url}).then(() => { + return {name: name, img: texture.url} + }); } export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturePlugin: TextureManager, texturekeys:Array): Promise => { const promisesList:Promise[] = []; texturekeys.forEach((textureKey: string|BodyResourceDescriptionInterface) => { - const playerResourceDescriptor = getRessourceDescriptor(textureKey); - if(!texturePlugin.exists(playerResourceDescriptor.name)) { - console.log('Loading '+playerResourceDescriptor.name) - promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor)); + try { + const playerResourceDescriptor = getRessourceDescriptor(textureKey); + if (playerResourceDescriptor && !texturePlugin.exists(playerResourceDescriptor.name)) { + promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor)); + } + }catch (err){ + console.error(err); } - }) + }); let returnPromise:Promise>; if (promisesList.length > 0) { loadPlugin.start(); diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index c2cb0950..c4a08e11 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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 {lazyLoadPlayerCharacterTextures} from "../Entity/PlayerTexturesLoadingManager"; +import {lazyLoadPlayerCharacterTextures, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager"; import { CenterListener, layoutManager, @@ -67,6 +67,8 @@ import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCha import {TextureError} from "../../Exception/TextureError"; import {addLoader} from "../Components/Loader"; import {ErrorSceneName} from "../Reconnecting/ErrorScene"; +import {localUserStore} from "../../Connexion/LocalUserStore"; +import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; export interface GameSceneInitInterface { initPosition: PointInterface|null, @@ -182,6 +184,13 @@ export class GameScene extends ResizableScene implements CenterListener { //hook preload scene preload(): void { addLoader(this); + const localUser = localUserStore.getLocalUser(); + const textures = localUser?.textures; + if (textures) { + for (const texture of textures) { + loadCustomTexture(this.load, texture); + } + } this.load.image(openChatIconName, 'resources/objects/talk.png'); this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => { diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index c6364ef6..1cea50ee 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -63,11 +63,8 @@ export class CustomizeScene extends ResizableScene { if(texture.level === -1){ continue; } - loadCustomTexture(this.load, texture); - const name = 'customCharacterTexture'+texture.id; - this.layers[texture.level].unshift({ - name, - img: texture.url + loadCustomTexture(this.load, texture).then((bodyResourceDescription: BodyResourceDescriptionInterface) => { + this.layers[texture.level].unshift(bodyResourceDescription); }); } } diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 25af61c6..5d315139 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -59,8 +59,9 @@ export class SelectCharacterScene extends ResizableScene { if(texture.level !== -1){ continue; } - const name = loadCustomTexture(this.load, texture); - this.playerModels.push({name: name, img: texture.url}); + loadCustomTexture(this.load, texture).then((bodyResourceDescription: BodyResourceDescriptionInterface) => { + this.playerModels.push(bodyResourceDescription); + }); } } } From 75d8d46c628aaf75239961b2d3bdec63b168b4fe Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sun, 24 Jan 2021 16:02:10 +0100 Subject: [PATCH 2/6] clean --- front/src/Phaser/Game/GameScene.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index c4a08e11..a9052119 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -184,6 +184,7 @@ export class GameScene extends ResizableScene implements CenterListener { //hook preload scene preload(): void { addLoader(this); + const localUser = localUserStore.getLocalUser(); const textures = localUser?.textures; if (textures) { From 01336097702b04e7583d4628ce802ba6acfc22ff Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sun, 24 Jan 2021 16:06:52 +0100 Subject: [PATCH 3/6] clean --- front/dist/.gitignore | 1 + 1 file changed, 1 insertion(+) create mode 100644 front/dist/.gitignore diff --git a/front/dist/.gitignore b/front/dist/.gitignore new file mode 100644 index 00000000..64233a9e --- /dev/null +++ b/front/dist/.gitignore @@ -0,0 +1 @@ +index.html \ No newline at end of file From 232ac6d5d1c8a08ba012ab3b3fafa7bb490edc0e Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sun, 24 Jan 2021 18:00:30 +0100 Subject: [PATCH 4/6] 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() { From e2695c58afdfeeb4eb17541e7be792af84ed6e58 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 26 Jan 2021 09:16:39 +0100 Subject: [PATCH 5/6] Verify existing texture --- .../src/Phaser/Entity/PlayerTexturesLoadingManager.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts index c7992ad5..c0740b23 100644 --- a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts +++ b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts @@ -26,12 +26,7 @@ export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptio export const loadCustomTexture = (loaderPlugin: LoaderPlugin, texture: CharacterTexture) : Promise => { const name = 'customCharacterTexture'+texture.id; 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}); + return createLoadingPromise(loaderPlugin, playerResourceDescriptor); } export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturePlugin: TextureManager, texturekeys:Array): Promise => { @@ -75,6 +70,10 @@ export const getRessourceDescriptor = (textureKey: string|BodyResourceDescriptio const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface) => { return new Promise((res) => { + const texture = loadPlugin.textureManager.get(playerResourceDescriptor.name); + if(texture.key !== '__MISSING'){ + return res(playerResourceDescriptor); + } loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, {frameWidth: 32, frameHeight: 32}); loadPlugin.once('filecomplete-spritesheet-'+playerResourceDescriptor.name, () => res(playerResourceDescriptor)); }); From 45b355f7807fcc952c14eccb27556670b30dae90 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 26 Jan 2021 15:21:23 +0100 Subject: [PATCH 6/6] Refactor lazy loading --- .../Entity/PlayerTexturesLoadingManager.ts | 16 ++++++++++------ front/src/Phaser/Game/GameScene.ts | 4 ++-- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts index c0740b23..78b66c10 100644 --- a/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts +++ b/front/src/Phaser/Entity/PlayerTexturesLoadingManager.ts @@ -23,18 +23,20 @@ export const loadAllDefaultModels = (load: LoaderPlugin): BodyResourceDescriptio }); return returnArray; } + export const loadCustomTexture = (loaderPlugin: LoaderPlugin, texture: CharacterTexture) : Promise => { const name = 'customCharacterTexture'+texture.id; const playerResourceDescriptor: BodyResourceDescriptionInterface = {name, img: texture.url, level: texture.level} return createLoadingPromise(loaderPlugin, playerResourceDescriptor); } -export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturePlugin: TextureManager, texturekeys:Array): Promise => { +export const lazyLoadPlayerCharacterTextures = (loadPlugin: LoaderPlugin, texturekeys:Array): Promise => { const promisesList:Promise[] = []; texturekeys.forEach((textureKey: string|BodyResourceDescriptionInterface) => { try { + //TODO refactor const playerResourceDescriptor = getRessourceDescriptor(textureKey); - if (playerResourceDescriptor && !texturePlugin.exists(playerResourceDescriptor.name)) { + if (playerResourceDescriptor && !loadPlugin.textureManager.exists(playerResourceDescriptor.name)) { promisesList.push(createLoadingPromise(loadPlugin, playerResourceDescriptor)); } }catch (err){ @@ -70,11 +72,13 @@ export const getRessourceDescriptor = (textureKey: string|BodyResourceDescriptio const createLoadingPromise = (loadPlugin: LoaderPlugin, playerResourceDescriptor: BodyResourceDescriptionInterface) => { return new Promise((res) => { - const texture = loadPlugin.textureManager.get(playerResourceDescriptor.name); - if(texture.key !== '__MISSING'){ + if (loadPlugin.textureManager.exists(playerResourceDescriptor.name)) { return res(playerResourceDescriptor); } - loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, {frameWidth: 32, frameHeight: 32}); - loadPlugin.once('filecomplete-spritesheet-'+playerResourceDescriptor.name, () => res(playerResourceDescriptor)); + loadPlugin.spritesheet(playerResourceDescriptor.name, playerResourceDescriptor.img, { + frameWidth: 32, + frameHeight: 32 + }); + loadPlugin.once('filecomplete-spritesheet-' + playerResourceDescriptor.name, () => res(playerResourceDescriptor)); }); } \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index fdefee66..d97b0d0e 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -882,7 +882,7 @@ export class GameScene extends ResizableScene implements CenterListener { createCurrentPlayer(){ //TODO create animation moving between exit and start - const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, this.textures, this.characterLayers); + const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, this.characterLayers); try { this.CurrentPlayer = new Player( this, @@ -1076,7 +1076,7 @@ export class GameScene extends ResizableScene implements CenterListener { return; } - const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, this.textures, addPlayerData.characterLayers); + const texturesPromise = lazyLoadPlayerCharacterTextures(this.load, addPlayerData.characterLayers); const player = new RemotePlayer( addPlayerData.userId, this,