Merge branch 'develop' of github.com:thecodingmachine/workadventure
This commit is contained in:
commit
04a7d20d54
@ -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);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
@ -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
|
||||
@ -299,7 +301,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, {
|
||||
@ -333,7 +335,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.
|
||||
@ -1850,6 +1852,8 @@ export class GameScene extends DirtyScene {
|
||||
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) {
|
||||
|
@ -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() {
|
||||
|
@ -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() {
|
||||
|
@ -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() {
|
||||
|
Loading…
Reference in New Issue
Block a user