From 3f274df813f4d9407decc362a8f30ecac9edb618 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 2 Feb 2021 17:11:52 +0100 Subject: [PATCH] Redesigning loading bar --- front/src/Phaser/Components/Loader.ts | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/front/src/Phaser/Components/Loader.ts b/front/src/Phaser/Components/Loader.ts index a81b7f25..0eda58dc 100644 --- a/front/src/Phaser/Components/Loader.ts +++ b/front/src/Phaser/Components/Loader.ts @@ -7,28 +7,35 @@ const LogoFrame: ImageFrameConfig = {frameWidth: 307, frameHeight: 59}; export const addLoader = (scene: Phaser.Scene): void => { 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((res) => { if(scene.load.textureManager.exists(LogoNameIndex)){ - return res(scene.add.image(scene.game.renderer.width / 2, 100, 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, 200, TextName); + 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}`, () => { if(loadingText){ loadingText.destroy(); } - return res(scene.add.image(scene.game.renderer.width / 2, 100, LogoNameIndex)); + return res(scene.add.image(scene.game.renderer.width / 2, 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); + scene.load.on('progress', (value: number) => { progress.clear(); - progress.fillStyle(0xffffff, 1); - progress.fillRect(0, 270, 800 * value, 60); + progress.fillStyle(0xBBBBBB, 1); + progress.fillRect((scene.game.renderer.width - loadingBarWidth) / 2, scene.game.renderer.height / 2 + 50, loadingBarWidth * value, loadingBarHeight); }); scene.load.on('complete', () => { if(loadingText){ @@ -38,5 +45,6 @@ export const addLoader = (scene: Phaser.Scene): void => { resLoadingImage.destroy(); }); progress.destroy(); + progressContainer.destroy(); }); -} \ No newline at end of file +}