To show preloading screen before welcome screen

[ozgun]

Hello, I've made a pixi project and it's done. I need to show preloading bar graphic before game is started. How can i do this? By the way i am using webpack babel and typescript.

Here is my index.ts:

import { WelcomeScreen } from './screens/WelcomeScreen';
import { ScenesManager } from './ScenesManager';
import { Settings } from './utils/Settings';

import * as PIXI from 'pixi.js';

ScenesManager.create(Settings.ScreenWidth, Settings.ScreenHeight, true);

const loader = PIXI.Loader.shared;
loader.add('gameAtlasTexture', './assets/images/texture.json')
    .add('introAtlasTexture', './assets/images/happyIntroTexture.json')
    .add('letterSound', './assets/sounds/letterSound.mp3')
    .add('bounceSound', './assets/sounds/bounceSound.mp3')
    .add('voiceSound', './assets/sounds/voiceSound.mp3')
    .add('background', './assets/sounds/background.mp3')
    .add('vs2Sound', './assets/sounds/vs2Sound.mp3')
    .add('shakeSound', './assets/sounds/shakeSound.mp3')
    .add('moveSound', './assets/sounds/moveSound.mp3')
    .add('victorySound','./assets/sounds/victory.mp3')
    .add('clickSound','./assets/sounds/click.mp3')
    .add('introLetterTexture', './assets/images/letters.json').load();

loader.onProgress.add((percent) => {
 console.log(percent.progress)
   
   // I NEED TO SHOW PRELOADING BAR PROGRESS IN HERE

 });
loader.onError.add((error) => { console.error(`********* Error! ${error} ${error.file}`) });
loader.onComplete.add(() => {
    bringFirstScene();
});

function bringFirstScene() 
{
    if(mobileCheck())
    {
        Settings.isMobile = true;
    }

    ScenesManager.createScene('welcomeScene', WelcomeScreen);
    ScenesManager.goToScene('welcomeScene');
}

Thank you.

[ivan.popelyshev]

Just make a preloading Graphics object. Add it to stage, remove when its done. As for what to use for animation - you can just draw a bar, a circle, or maybe base64 simple image somewhere for that bar and use "beginTextureFill" in graphics to show part of that bar corresponding to progress.

[ozgun]

Thanks for your quick answer ivan. Sorry it's my bad. I set up the Pixi structure a bit complicated. I'm little bit confused.

[ivan.popelyshev]

Oh, do you want even more complicated? OK  here it is. I have preloader, then there is a level select

https://codesandbox.io/s/sad-forest-1m4r5

Edited October 16, 2020 by ivan.popelyshev