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 LogoResource: string = "static/images/logo.png";
|
||||||
const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 };
|
const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 };
|
||||||
|
|
||||||
export const addLoader = (scene: Phaser.Scene): void => {
|
const loadingBarHeight: number = 16;
|
||||||
// If there is nothing to load, do not display the loader.
|
const padding: number = 5;
|
||||||
if (scene.load.list.entries.length === 0) {
|
|
||||||
return;
|
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) => {
|
public addLoader(): void {
|
||||||
if (scene.load.textureManager.exists(LogoNameIndex)) {
|
// If there is nothing to load, do not display the loader.
|
||||||
return res(
|
if (this.scene.load.list.entries.length === 0) {
|
||||||
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
|
return;
|
||||||
);
|
|
||||||
} 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);
|
|
||||||
}
|
}
|
||||||
scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
|
|
||||||
scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
|
const loadingBarWidth: number = Math.floor(this.scene.game.renderer.width / 3);
|
||||||
if (loadingText) {
|
|
||||||
loadingText.destroy();
|
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(
|
this.scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
|
||||||
scene.add.image(scene.game.renderer.width / 2, scene.game.renderer.height / 2 - 150, LogoNameIndex)
|
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();
|
this.progressContainer = this.scene.add.graphics();
|
||||||
const progress = scene.add.graphics();
|
this.progress = this.scene.add.graphics();
|
||||||
progressContainer.fillStyle(0x444444, 0.8);
|
this.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
|
|
||||||
);
|
|
||||||
|
|
||||||
scene.load.on("progress", (value: number) => {
|
this.resize();
|
||||||
progress.clear();
|
|
||||||
progress.fillStyle(0xbbbbbb, 1);
|
this.scene.load.on("progress", (value: number) => {
|
||||||
progress.fillRect(
|
this.progressAmount = value;
|
||||||
(scene.game.renderer.width - loadingBarWidth) / 2,
|
this.drawProgress();
|
||||||
scene.game.renderer.height / 2 + 50,
|
});
|
||||||
loadingBarWidth * value,
|
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
|
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 { HtmlUtils } from "../../WebRtc/HtmlUtils";
|
||||||
import { mediaManager } from "../../WebRtc/MediaManager";
|
import { mediaManager } from "../../WebRtc/MediaManager";
|
||||||
import { SimplePeer } from "../../WebRtc/SimplePeer";
|
import { SimplePeer } from "../../WebRtc/SimplePeer";
|
||||||
import { addLoader, removeLoader } from "../Components/Loader";
|
import { Loader } from "../Components/Loader";
|
||||||
import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
|
import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
|
||||||
import { RemotePlayer } from "../Entity/RemotePlayer";
|
import { RemotePlayer } from "../Entity/RemotePlayer";
|
||||||
import type { ActionableItem } from "../Items/ActionableItem";
|
import type { ActionableItem } from "../Items/ActionableItem";
|
||||||
@ -203,6 +203,7 @@ export class GameScene extends DirtyScene {
|
|||||||
private sharedVariablesManager!: SharedVariablesManager;
|
private sharedVariablesManager!: SharedVariablesManager;
|
||||||
private objectsByType = new Map<string, ITiledMapObject[]>();
|
private objectsByType = new Map<string, ITiledMapObject[]>();
|
||||||
private embeddedWebsiteManager!: EmbeddedWebsiteManager;
|
private embeddedWebsiteManager!: EmbeddedWebsiteManager;
|
||||||
|
private loader: Loader;
|
||||||
|
|
||||||
constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
|
constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
|
||||||
super({
|
super({
|
||||||
@ -221,6 +222,7 @@ export class GameScene extends DirtyScene {
|
|||||||
this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
|
this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
|
||||||
this.connectionAnswerPromiseResolve = resolve;
|
this.connectionAnswerPromiseResolve = resolve;
|
||||||
});
|
});
|
||||||
|
this.loader = new Loader(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
//hook preload scene
|
//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 SpriteSheetFile (WOKA file) don't display error and give an access for user
|
||||||
if (this.preloading && !(file instanceof SpriteSheetFile)) {
|
if (this.preloading && !(file instanceof SpriteSheetFile)) {
|
||||||
//remove loader in progress
|
//remove loader in progress
|
||||||
removeLoader(this);
|
this.loader.removeLoader();
|
||||||
|
|
||||||
//display an error scene
|
//display an error scene
|
||||||
this.scene.start(ErrorSceneName, {
|
this.scene.start(ErrorSceneName, {
|
||||||
@ -333,7 +335,7 @@ export class GameScene extends DirtyScene {
|
|||||||
});
|
});
|
||||||
|
|
||||||
//this function must stay at the end of preload function
|
//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.
|
// 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,
|
right: camera.scrollX + camera.width,
|
||||||
bottom: camera.scrollY + camera.height,
|
bottom: camera.scrollY + camera.height,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.loader.resize();
|
||||||
}
|
}
|
||||||
private getObjectLayerData(objectName: string): ITiledMapObject | undefined {
|
private getObjectLayerData(objectName: string): ITiledMapObject | undefined {
|
||||||
for (const layer of this.mapFile.layers) {
|
for (const layer of this.mapFile.layers) {
|
||||||
|
@ -4,7 +4,7 @@ import { loadAllLayers } from "../Entity/PlayerTexturesLoadingManager";
|
|||||||
import Sprite = Phaser.GameObjects.Sprite;
|
import Sprite = Phaser.GameObjects.Sprite;
|
||||||
import { gameManager } from "../Game/GameManager";
|
import { gameManager } from "../Game/GameManager";
|
||||||
import { localUserStore } from "../../Connexion/LocalUserStore";
|
import { localUserStore } from "../../Connexion/LocalUserStore";
|
||||||
import { addLoader } from "../Components/Loader";
|
import { Loader } from "../Components/Loader";
|
||||||
import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
|
import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
|
||||||
import { AbstractCharacterScene } from "./AbstractCharacterScene";
|
import { AbstractCharacterScene } from "./AbstractCharacterScene";
|
||||||
import { areCharacterLayersValid } from "../../Connexion/LocalUser";
|
import { areCharacterLayersValid } from "../../Connexion/LocalUser";
|
||||||
@ -30,10 +30,13 @@ export class CustomizeScene extends AbstractCharacterScene {
|
|||||||
private moveHorizontally: number = 0;
|
private moveHorizontally: number = 0;
|
||||||
private moveVertically: number = 0;
|
private moveVertically: number = 0;
|
||||||
|
|
||||||
|
private loader: Loader;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super({
|
super({
|
||||||
key: CustomizeSceneName,
|
key: CustomizeSceneName,
|
||||||
});
|
});
|
||||||
|
this.loader = new Loader(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
preload() {
|
preload() {
|
||||||
@ -55,7 +58,7 @@ export class CustomizeScene extends AbstractCharacterScene {
|
|||||||
this.lazyloadingAttempt = false;
|
this.lazyloadingAttempt = false;
|
||||||
|
|
||||||
//this function must stay at the end of preload function
|
//this function must stay at the end of preload function
|
||||||
addLoader(this);
|
this.loader.addLoader();
|
||||||
}
|
}
|
||||||
|
|
||||||
create() {
|
create() {
|
||||||
|
@ -4,7 +4,7 @@ import { EnableCameraSceneName } from "./EnableCameraScene";
|
|||||||
import { CustomizeSceneName } from "./CustomizeScene";
|
import { CustomizeSceneName } from "./CustomizeScene";
|
||||||
import { localUserStore } from "../../Connexion/LocalUserStore";
|
import { localUserStore } from "../../Connexion/LocalUserStore";
|
||||||
import { loadAllDefaultModels } from "../Entity/PlayerTexturesLoadingManager";
|
import { loadAllDefaultModels } from "../Entity/PlayerTexturesLoadingManager";
|
||||||
import { addLoader } from "../Components/Loader";
|
import { Loader} from "../Components/Loader";
|
||||||
import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
|
import type { BodyResourceDescriptionInterface } from "../Entity/PlayerTextures";
|
||||||
import { AbstractCharacterScene } from "./AbstractCharacterScene";
|
import { AbstractCharacterScene } from "./AbstractCharacterScene";
|
||||||
import { areCharacterLayersValid } from "../../Connexion/LocalUser";
|
import { areCharacterLayersValid } from "../../Connexion/LocalUser";
|
||||||
@ -31,11 +31,13 @@ export class SelectCharacterScene extends AbstractCharacterScene {
|
|||||||
protected pointerTimer: number = 0;
|
protected pointerTimer: number = 0;
|
||||||
|
|
||||||
protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
|
protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
|
||||||
|
private loader: Loader;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super({
|
super({
|
||||||
key: SelectCharacterSceneName,
|
key: SelectCharacterSceneName,
|
||||||
});
|
});
|
||||||
|
this.loader = new Loader(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
preload() {
|
preload() {
|
||||||
@ -49,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
|
|||||||
this.lazyloadingAttempt = false;
|
this.lazyloadingAttempt = false;
|
||||||
|
|
||||||
//this function must stay at the end of preload function
|
//this function must stay at the end of preload function
|
||||||
addLoader(this);
|
this.loader.addLoader();
|
||||||
}
|
}
|
||||||
|
|
||||||
create() {
|
create() {
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { addLoader } from "../Components/Loader";
|
import { Loader } from "../Components/Loader";
|
||||||
import { gameManager } from "../Game/GameManager";
|
import { gameManager } from "../Game/GameManager";
|
||||||
import { ResizableScene } from "./ResizableScene";
|
import { ResizableScene } from "./ResizableScene";
|
||||||
import { EnableCameraSceneName } from "./EnableCameraScene";
|
import { EnableCameraSceneName } from "./EnableCameraScene";
|
||||||
@ -22,11 +22,13 @@ export class SelectCompanionScene extends ResizableScene {
|
|||||||
private currentCompanion = 0;
|
private currentCompanion = 0;
|
||||||
private pointerClicked: boolean = false;
|
private pointerClicked: boolean = false;
|
||||||
private pointerTimer: number = 0;
|
private pointerTimer: number = 0;
|
||||||
|
private loader: Loader;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super({
|
super({
|
||||||
key: SelectCompanionSceneName,
|
key: SelectCompanionSceneName,
|
||||||
});
|
});
|
||||||
|
this.loader = new Loader(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
preload() {
|
preload() {
|
||||||
@ -35,7 +37,7 @@ export class SelectCompanionScene extends ResizableScene {
|
|||||||
});
|
});
|
||||||
|
|
||||||
//this function must stay at the end of preload function
|
//this function must stay at the end of preload function
|
||||||
addLoader(this);
|
this.loader.addLoader();
|
||||||
}
|
}
|
||||||
|
|
||||||
create() {
|
create() {
|
||||||
|
Loading…
Reference in New Issue
Block a user