_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #1582 from thecodingmachine/end-to-end-tests

Browse Source 
Making the loader resizable
This commit is contained in:
David Négrier 2021-11-24 15:30:15 +01:00 committed by GitHub
commit dc58f16418
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 121 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
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 => {
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) {
}
public addLoader(): void {
// If there is nothing to load, do not display the loader.
if (scene.load.list.entries.length === 0) {
if (this.scene.load.list.entries.length === 0) {
return;
}
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 loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
if (scene.load.textureManager.exists(LogoNameIndex)) {
if (this.scene.load.textureManager.exists(LogoNameIndex)) {
return res(
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
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
loadingText = scene.add.text(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 50, TextName);
this.loadingText = this.scene.add.text(this.scene.game.renderer.width / 2, this.scene.game.renderer.height / 2 - 50, TextName);
}
scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
if (loadingText) {
loadingText.destroy();
this.scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
this.scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
if (this.loadingText) {
this.loadingText.destroy();
}
return res(
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
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,
loadingBarHeight
);
this.resize();
this.scene.load.on("progress", (value: number) => {
this.progressAmount = value;
this.drawProgress();
});
scene.load.on("complete", () => {
if (loadingText) {
loadingText.destroy();
this.scene.load.on("complete", () => {
if (this.loadingText) {
this.loadingText.destroy();
}
promiseLoadLogoTexture.then((resLoadingImage: Phaser.GameObjects.Image) => {
resLoadingImage.destroy();
});
progress.destroy();
progressContainer.destroy();
if (scene instanceof DirtyScene) {
scene.markDirty();
this.progress.destroy();
this.progressContainer.destroy();
if (this.scene instanceof DirtyScene) {
this.scene.markDirty();
}
});
};
export const removeLoader = (scene: Phaser.Scene): void => {
if (scene.load.textureManager.exists(LogoNameIndex)) {
scene.load.textureManager.remove(LogoNameIndex);
}
};
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
);
}
}

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() {