front: added animated Loader logo

This commit is contained in:
Ludwig Behm 2022-02-04 04:26:11 +01:00
parent f175a7c8ed
commit f910c833dd
4 changed files with 37 additions and 1 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
front/dist/static/images/logo.webm vendored Normal file

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View file

@ -2,8 +2,10 @@ import ImageFrameConfig = Phaser.Types.Loader.FileTypes.ImageFrameConfig;
import { DirtyScene } from "../Game/DirtyScene";
const LogoNameIndex: string = "logoLoading";
const LogoAnimationNameIndex: string = "logoAnimationLoading";
const TextName: string = "Loading...";
const LogoResource: string = "static/images/logo.png";
const LogoAnimationResource: string = "static/images/logo.webm";
const LogoFrame: ImageFrameConfig = { frameWidth: 310, frameHeight: 60 };
const loadingBarHeight: number = 16;
@ -14,6 +16,7 @@ export class Loader {
private progress!: Phaser.GameObjects.Graphics;
private progressAmount: number = 0;
private logo: Phaser.GameObjects.Image | undefined;
private animation: Phaser.GameObjects.Video | undefined;
private loadingText: Phaser.GameObjects.Text | null = null;
public constructor(private scene: Phaser.Scene) {}
@ -27,7 +30,14 @@ export class Loader {
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)) {
if (this.scene.load.cacheManager.video.exists(LogoAnimationNameIndex)) {
this.animation = this.scene.add.video(
this.scene.game.renderer.width / 2,
this.scene.game.renderer.height / 2 - 150,
LogoAnimationNameIndex);
this.animation.play(true);
return res(this.animation);
} else if (this.scene.load.textureManager.exists(LogoNameIndex)) {
return res(
(this.logo = this.scene.add.image(
this.scene.game.renderer.width / 2,
@ -44,10 +54,14 @@ export class Loader {
);
}
this.scene.load.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
this.scene.load.video(LogoAnimationNameIndex, LogoAnimationResource, 'loadeddata', false, true);
this.scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
if (this.loadingText) {
this.loadingText.destroy();
}
if (this.animation) {
return res(this.animation);
}
return res(
(this.logo = this.scene.add.image(
this.scene.game.renderer.width / 2,
@ -56,6 +70,20 @@ export class Loader {
))
);
});
this.scene.load.once(`filecomplete-video-${LogoAnimationNameIndex}`, () => {
if (this.loadingText) {
this.loadingText.destroy();
}
if (this.logo) {
this.logo.destroy();
}
this.animation = this.scene.add.video(
this.scene.game.renderer.width / 2,
this.scene.game.renderer.height / 2 - 150,
LogoAnimationNameIndex);
this.animation.play(true);
return res(this.animation);
});
});
this.progressContainer = this.scene.add.graphics();
@ -86,6 +114,9 @@ export class Loader {
}
public removeLoader(): void {
if (this.scene.load.cacheManager.video.exists(LogoAnimationNameIndex)) {
this.scene.load.cacheManager.video.remove(LogoAnimationNameIndex);
}
if (this.scene.load.textureManager.exists(LogoNameIndex)) {
this.scene.load.textureManager.remove(LogoNameIndex);
}
@ -114,6 +145,11 @@ export class Loader {
this.logo.x = this.scene.game.renderer.width / 2;
this.logo.y = this.scene.game.renderer.height / 2 - 150;
}
if (this.animation) {
this.animation.x = this.scene.game.renderer.width / 2;
this.animation.y = this.scene.game.renderer.height / 2 - 150;
}
}
private drawProgress() {