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 1/5] 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; + } } From dcd44f283f1b98136db251e7af8cdd56515512a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Mon, 14 Jun 2021 16:40:33 +0200 Subject: [PATCH 2/5] Making code more robust regarding scene being null in Character class Not sure how this can happen but it does. Closes #1167 --- front/src/Phaser/Entity/Character.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index b1e8dc73..2ff66178 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -56,7 +56,7 @@ export abstract class Character extends Container { this.addTextures(textures, frame); this.invisible = false }) - + this.playerName = new Text(scene, 0, playerNameY, name, {fontFamily: '"Press Start 2P"', fontSize: '8px', strokeThickness: 2, stroke: "gray"}); this.playerName.setOrigin(0.5).setDepth(DEPTH_INGAME_TEXT_INDEX); this.add(this.playerName); @@ -80,7 +80,7 @@ export abstract class Character extends Container { this.setDepth(-1); this.playAnimation(direction, moving); - + if (typeof companion === 'string') { this.addCompanion(companion, companionTexturePromise); } @@ -94,7 +94,7 @@ export abstract class Character extends Container { public addTextures(textures: string[], frame?: string | number): void { for (const texture of textures) { - if(!this.scene.textures.exists(texture)){ + if(this.scene && !this.scene.textures.exists(texture)){ throw new TextureError('texture not found'); } const sprite = new Sprite(this.scene, 0, 0, texture, frame); @@ -239,23 +239,23 @@ export abstract class Character extends Container { this.scene.sys.updateList.remove(sprite); } } - this.list.forEach(objectContaining => objectContaining.destroy()) + this.list.forEach(objectContaining => objectContaining.destroy()) super.destroy(); } - + playEmote(emoteKey: string) { this.cancelPreviousEmote(); const scalingFactor = waScaleManager.uiScalingFactor * 0.05; const emoteY = -30 - scalingFactor * 10; - + this.playerName.setVisible(false); this.emote = new Sprite(this.scene, 0, 0, emoteKey); this.emote.setAlpha(0); this.emote.setScale(0.1 * scalingFactor); this.add(this.emote); this.scene.sys.updateList.add(this.emote); - + this.createStartTransition(scalingFactor, emoteY); } From 6af9b5d0fc7366f08fc9a26375f20504c4972183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Mon, 14 Jun 2021 18:18:57 +0200 Subject: [PATCH 3/5] Disable screensharing button if user refuses rights If the user refuses the popup to screen-share, we should switch back the button to gray. Closes #1179 --- front/src/Stores/ScreenSharingStore.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/front/src/Stores/ScreenSharingStore.ts b/front/src/Stores/ScreenSharingStore.ts index 0a7ef3e6..ec5aa46f 100644 --- a/front/src/Stores/ScreenSharingStore.ts +++ b/front/src/Stores/ScreenSharingStore.ts @@ -169,6 +169,7 @@ export const screenSharingLocalStreamStore = derived Date: Mon, 14 Jun 2021 18:40:58 +0200 Subject: [PATCH 4/5] Fixing size of camera on resize The size of the Camera after a change in zoom is only computed on the "render" step. Therefore, we should wait the "render" step to call GameScene.onResize. Closes #1180 --- front/src/Phaser/Services/WaScaleManager.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index acbecc38..1fa46e4f 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -3,6 +3,7 @@ import ScaleManager = Phaser.Scale.ScaleManager; import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; import type {Game} from "../Game/Game"; import {ResizableScene} from "../Login/ResizableScene"; +import * as Phaser from "phaser"; class WaScaleManager { @@ -39,10 +40,11 @@ class WaScaleManager { const style = this.scaleManager.canvas.style; style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px'; style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px'; - // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way. + // Note: onResize will be called twice (once here and once in Game.ts), but we have no better way. for (const scene of this.game.scene.getScenes(true)) { if (scene instanceof ResizableScene) { - scene.onResize(); + // We are delaying the call to the "render" event because otherwise, the "camera" coordinates are not correctly updated. + scene.events.once(Phaser.Scenes.Events.RENDER, () => scene.onResize()); } } From 6bca3469b6469ba4576644e49e5ef9d32ebb8354 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Mon, 14 Jun 2021 18:44:20 +0200 Subject: [PATCH 5/5] Removing useless import --- front/src/Phaser/Services/WaScaleManager.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index 1fa46e4f..1da0fcf3 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -3,7 +3,6 @@ import ScaleManager = Phaser.Scale.ScaleManager; import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager"; import type {Game} from "../Game/Game"; import {ResizableScene} from "../Login/ResizableScene"; -import * as Phaser from "phaser"; class WaScaleManager {