noby
/
workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Redesigning loading bar

This commit is contained in:
David Négrier 2021-02-02 17:11:52 +01:00
parent 788e22e8b0
commit 3f274df813
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
front/src/Phaser/Components/Loader.ts
View File

@ -7,28 +7,35 @@ const LogoFrame: ImageFrameConfig = {frameWidth: 307, frameHeight: 59};
export const addLoader = (scene: Phaser.Scene): void => { export const addLoader = (scene: Phaser.Scene): void => {
let loadingText: Phaser.GameObjects.Text|null = null; 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) => { const promiseLoadLogoTexture = new Promise<Phaser.GameObjects.Image>((res) => {
if(scene.load.textureManager.exists(LogoNameIndex)){ 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{ }else{
//add loading if logo image is not ready //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.spritesheet(LogoNameIndex, LogoResource, LogoFrame);
scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => { scene.load.once(`filecomplete-spritesheet-${LogoNameIndex}`, () => {
if(loadingText){ if(loadingText){
loadingText.destroy(); 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(); 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) => { scene.load.on('progress', (value: number) => {
progress.clear(); progress.clear();
progress.fillStyle(0xffffff, 1); progress.fillStyle(0xBBBBBB, 1);
progress.fillRect(0, 270, 800 * value, 60); progress.fillRect((scene.game.renderer.width - loadingBarWidth) / 2, scene.game.renderer.height / 2 + 50, loadingBarWidth * value, loadingBarHeight);
}); });
scene.load.on('complete', () => { scene.load.on('complete', () => {
if(loadingText){ if(loadingText){
@ -38,5 +45,6 @@ export const addLoader = (scene: Phaser.Scene): void => {
resLoadingImage.destroy(); resLoadingImage.destroy();
}); });
progress.destroy(); progress.destroy();
progressContainer.destroy();
}); });
} }