lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Making the loader resizable

Browse source 
This way, if the window is resized while loading, the loading bar will stay in the middle
This commit is contained in:
David Négrier 2021-11-24 15:21:07 +01:00
parent dfad0a7b57
commit 7c6105d93a
5 changed files with 121 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

161
front/src/Phaser/Components/Loader.ts
View file

@ -6,73 +6,114 @@ const TextName: string = "Loading...";
const LogoResource: string = "static/images/logo.png";
const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 };
export const addLoader = (scene: Phaser.Scene): void => {
// If there is nothing to load, do not display the loader.
if (scene.load.list.entries.length === 0) {
return;
const loadingBarHeight: number = 16;
const padding: number = 5;
export class Loader {
private progressContainer!: Phaser.GameObjects.Graphics;
private progress!: Phaser.GameObjects.Graphics;
private progressAmount: number = 0;
private logo: Phaser.GameObjects.Image|undefined;
private loadingText: Phaser.GameObjects.Text | null = null;
public constructor(private scene: Phaser.Scene) {
}
let loadingText: Phaser.GameObjects.Text | null = null;
const loadingBarWidth: number = Math.floor(scene.game.renderer.width / 3);
const loadingBarHeight: number = 16;
const padding: number = 5;
const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
if (scene.load.textureManager.exists(LogoNameIndex)) {
return res(
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
);
} else {
//add loading if logo image is not ready
loadingText = scene.add.text(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 50, TextName);
public addLoader(): void {
// If there is nothing to load, do not display the loader.
if (this.scene.load.list.entries.length === 0) {
return;
}
scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
if (loadingText) {
loadingText.destroy();
const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
if (this.scene.load.textureManager.exists(LogoNameIndex)) {
return res(
this.logo = this.scene.add.image(this.scene.game.renderer.width / 2, this.scene.game.renderer.height / 2 - 150, LogoNameIndex)
);
} else {
//add loading if logo image is not ready
this.loadingText = this.scene.add.text(this.scene.game.renderer.width / 2, this.scene.game.renderer.height / 2 - 50, TextName);
}
return res(
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
);
this.scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
this.scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
if (this.loadingText) {
this.loadingText.destroy();
}
return res(
this.logo = this.scene.add.image(this.scene.game.renderer.width / 2, this.scene.game.renderer.height / 2 - 150, LogoNameIndex)
);
});
});
});
const progressContainer = scene.add.graphics();
const progress = scene.add.graphics();
progressContainer.fillStyle(0x444444, 0.8);
progressContainer.fillRect(
(scene.game.renderer.width - loadingBarWidth) / 2 - padding,
scene.game.renderer.height / 2 + 50 - padding,
loadingBarWidth + padding * 2,
loadingBarHeight + padding * 2
);
this.progressContainer = this.scene.add.graphics();
this.progress = this.scene.add.graphics();
this.progressContainer.fillStyle(0x444444, 0.8);
scene.load.on("progress", (value: number) => {
progress.clear();
progress.fillStyle(0xbbbbbb, 1);
progress.fillRect(
(scene.game.renderer.width - loadingBarWidth) / 2,
scene.game.renderer.height / 2 + 50,
loadingBarWidth * value,
this.resize();
this.scene.load.on("progress", (value: number) => {
this.progressAmount = value;
this.drawProgress();
});
this.scene.load.on("complete", () => {
if (this.loadingText) {
this.loadingText.destroy();
}
promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => {
resLoadingImage.destroy();
});
this.progress.destroy();
this.progressContainer.destroy();
if (this.scene instanceof DirtyScene) {
this.scene.markDirty();
}
});
}
public removeLoader(): void {
if (this.scene.load.textureManager.exists(LogoNameIndex)) {
this.scene.load.textureManager.remove(LogoNameIndex);
}
}
public resize(): void {
const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
this.progressContainer.clear();
this.progressContainer.fillStyle(0x444444, 0.8);
this.progressContainer.fillRect(
(this.scene.game.renderer.width - loadingBarWidth) / 2 - padding,
this.scene.game.renderer.height / 2 + 50 - padding,
loadingBarWidth + padding * 2,
loadingBarHeight + padding * 2
);
this.drawProgress();
if (this.loadingText) {
this.loadingText.x = this.scene.game.renderer.width / 2;
this.loadingText.y = this.scene.game.renderer.height / 2 - 50;
}
if (this.logo) {
this.logo.x = this.scene.game.renderer.width / 2;
this.logo.y = this.scene.game.renderer.height / 2 - 150;
}
}
private drawProgress() {
const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
this.progress.clear();
this.progress.fillStyle(0xbbbbbb, 1);
this.progress.fillRect(
(this.scene.game.renderer.width - loadingBarWidth) / 2,
this.scene.game.renderer.height / 2 + 50,
loadingBarWidth * this.progressAmount,
loadingBarHeight
);
});
scene.load.on("complete", () => {
if (loadingText) {
loadingText.destroy();
}
promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => {
resLoadingImage.destroy();
});
progress.destroy();
progressContainer.destroy();
if (scene instanceof DirtyScene) {
scene.markDirty();
}
});
};
export const removeLoader = (scene: Phaser.Scene): void => {
if (scene.load.textureManager.exists(LogoNameIndex)) {
scene.load.textureManager.remove(LogoNameIndex);
}
};
}

10
front/src/Phaser/Game/GameScene.ts
View file

@ -28,7 +28,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
import { mediaManager } from "../../WebRtc/MediaManager";
import { SimplePeer } from "../../WebRtc/SimplePeer";
import { addLoader, removeLoader } from "../Components/Loader";
import { Loader } from "../Components/Loader";
import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
import { RemotePlayer } from "../Entity/RemotePlayer";
import type { ActionableItem } from "../Items/ActionableItem";
@ -203,6 +203,7 @@ export class GameScene extends DirtyScene {
private sharedVariablesManager!: SharedVariablesManager;
private objectsByType = new Map<string, ITiledMapObject[]>();
private embeddedWebsiteManager!: EmbeddedWebsiteManager;
private loader: Loader;
constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
super({
@ -221,6 +222,7 @@ export class GameScene extends DirtyScene {
this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
this.connectionAnswerPromiseResolve = resolve;
});
this.loader = new Loader(this);
}
//hook preload scene
@ -297,7 +299,7 @@ export class GameScene extends DirtyScene {
//if SpriteSheetFile (WOKA file) don't display error and give an access for user
if (this.preloading && !(file instanceof SpriteSheetFile)) {
//remove loader in progress
removeLoader(this);
this.loader.removeLoader();
//display an error scene
this.scene.start(ErrorSceneName, {
@ -331,7 +333,7 @@ export class GameScene extends DirtyScene {
});
//this function must stay at the end of preload function
addLoader(this);
this.loader.addLoader();
}
// FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
@ -1832,6 +1834,8 @@ ${escapedMessage}
right: camera.scrollX + camera.width,
bottom: camera.scrollY + camera.height,
});
this.loader.resize();
}
private getObjectLayerData(objectName: string): ITiledMapObject | undefined {
for (const layer of this.mapFile.layers) {

7
front/src/Phaser/Login/CustomizeScene.ts
View file

@ -4,7 +4,7 @@ import { loadAllLayers } from "../Entity/PlayerTexturesLoadingManager";
import Sprite = Phaser.GameObjects.Sprite;
import { gameManager } from "../Game/GameManager";
import { localUserStore } from "../../Connexion/LocalUserStore";
import { addLoader } from "../Components/Loader";
import { Loader } from "../Components/Loader";
import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
import { AbstractCharacterScene } from "./AbstractCharacterScene";
import { areCharacterLayersValid } from "../../Connexion/LocalUser";
@ -30,10 +30,13 @@ export class CustomizeScene extends AbstractCharacterScene {
private moveHorizontally: number = 0;
private moveVertically: number = 0;
private loader: Loader;
constructor() {
super({
key: CustomizeSceneName,
});
this.loader = new Loader(this);
}
preload() {
@ -55,7 +58,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.lazyloadingAttempt = false;
//this function must stay at the end of preload function
addLoader(this);
this.loader.addLoader();
}
create() {

6
front/src/Phaser/Login/SelectCharacterScene.ts
View file

@ -4,7 +4,7 @@ import { EnableCameraSceneName } from "./EnableCameraScene";
import { CustomizeSceneName } from "./CustomizeScene";
import { localUserStore } from "../../Connexion/LocalUserStore";
import { loadAllDefaultModels } from "../Entity/PlayerTexturesLoadingManager";
import { addLoader } from "../Components/Loader";
import { Loader} from "../Components/Loader";
import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
import { AbstractCharacterScene } from "./AbstractCharacterScene";
import { areCharacterLayersValid } from "../../Connexion/LocalUser";
@ -31,11 +31,13 @@ export class SelectCharacterScene extends AbstractCharacterScene {
protected pointerTimer: number = 0;
protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
private loader: Loader;
constructor() {
super({
key: SelectCharacterSceneName,
});
this.loader = new Loader(this);
}
preload() {
@ -49,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
this.lazyloadingAttempt = false;
//this function must stay at the end of preload function
addLoader(this);
this.loader.addLoader();
}
create() {

6
front/src/Phaser/Login/SelectCompanionScene.ts
View file

@ -1,4 +1,4 @@
import { addLoader } from "../Components/Loader";
import { Loader } from "../Components/Loader";
import { gameManager } from "../Game/GameManager";
import { ResizableScene } from "./ResizableScene";
import { EnableCameraSceneName } from "./EnableCameraScene";
@ -22,11 +22,13 @@ export class SelectCompanionScene extends ResizableScene {
private currentCompanion = 0;
private pointerClicked: boolean = false;
private pointerTimer: number = 0;
private loader: Loader;
constructor() {
super({
key: SelectCompanionSceneName,
});
this.loader = new Loader(this);
}
preload() {
@ -35,7 +37,7 @@ export class SelectCompanionScene extends ResizableScene {
});
//this function must stay at the end of preload function
addLoader(this);
this.loader.addLoader();
}
create() {