diff --git a/front/dist/static/images/logo.png b/front/dist/static/images/logo.png index 08e70049..090e56fe 100644 Binary files a/front/dist/static/images/logo.png and b/front/dist/static/images/logo.png differ diff --git a/front/dist/static/images/logo.webm b/front/dist/static/images/logo.webm new file mode 100644 index 00000000..f0fb383a Binary files /dev/null and b/front/dist/static/images/logo.webm differ diff --git a/front/src/Components/images/logo.png b/front/src/Components/images/logo.png index d094e6d2..74cc14c5 100644 Binary files a/front/src/Components/images/logo.png and b/front/src/Components/images/logo.png differ diff --git a/front/src/Phaser/Components/Loader.ts b/front/src/Phaser/Components/Loader.ts index 7eb08e6d..cc755111 100644 --- a/front/src/Phaser/Components/Loader.ts +++ b/front/src/Phaser/Components/Loader.ts @@ -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((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() {