Present loading spinner

[Oshri]

Hi, all

I need to show loading spinner until PIXIJS finish calc all nodes and before the going to render scene.

do you now to give a callback to PIXIJS to call before first render ?

@ivan.popelyshev do you have any idea?

[ivan.popelyshev]

Its more @jonforum and @Exca area

[Exca]

You could do that atleast in two different common ways:

1. Use good old classic css spinner and keep your game canvas hidden and set it visible & start rendering after load is done.

2. Have two containers, one containing a spinner and a second containing your gamescene. Render the spinner container when loading and after load is complete start rendering you scene container.

If on the other hand question is about how to do a spinner animation with pixi, then let me know and I'll help with that.

[Oshri]

First Tnx @Exca.

do you have example code for that? ( not for animate spinner )

[Exca]

1.

In html:

<div id="spinner">...spinner stuff here or in css...</div>

<canvas id="canvas" style="visibility:hidden"></canvas>

In code:
preloadComplete = () => {
  document.getElementById("spinner").remove();
  document.getElementById("canvas").style.visibility = "visible";
}

2.

var spinner = new Spinner(); //Spinner being your spinner class extending container or something else that can be added to maincontainer
app.stage.addChild(spinner);

//Animate update
app.ticker.add((delta)=>{
  if(spinner.visible)  spinner.update(delta);
  if(mainGame !=null) mainGame.renderLoop();
});

//This is your main game placeholder, set value to it whenever it's built after load.
let mainGame = null;

//Do your loading logic, build your game and call onLoadComplete
onLoadComplete = () => {
  spinner.visible = false;
  app.stage.removeChild(spinner);
  app.stage.addChild(mainGame);
}

 

Those would work. Written thom without checking any typos or compilation, so there might be errors.

[Oshri]

First Tnx @Exca,

Do you mean ?

app.loader.on("complete", () => {} )

i am looking more PIXIJS finish all GPU calc and ready to draw? i need to spot that moment and desabled loading 

[Oshri]

Also @Exca i build that cals to handle texture loading.

But what i am locking for is indicator to PXIXJS / GPU finish to calculate and ready to draw at the first time.

Can i spot that inside app.ticker loop ?

import { Application, Container } from 'pixi.js';

export class NodeSprites {
	bbgContainer: Container = null;
	spritesMap: Record<string, any>;

	constructor(private pixiApp: Application) {
		this.loadTextures();
	}

	destroy(): void {}

	/** If node.type don't have ui representation we will give him fallback */
	public getSprite(spriteName: string): string {
		if (this.spritesMap[spriteName]) {
			return spriteName;
		} else {
			console.log(`${spriteName} don't have sprite representation, please make one!!`);
			return 'NODE.png';
		}
	}

	private handleLoadProgress(loader, resource) {
		// console.log(loader.progress + '% loaded');
	}

	private handleLoadAsset(loader, resource) {
		// console.log('asset loaded ' + resource.name);
	}

	private handleLoadError() {
		// console.error('load error');
	}

	private loadTextures(): void {
		const SPRITES_JSON = 'assets/nodes/node_sprites.json';
		this.pixiApp.loader
			.add('spritesheet', SPRITES_JSON)
			.on('progress', this.handleLoadProgress.bind(this))
			.on('load', this.handleLoadAsset.bind(this))
			.on('error', this.handleLoadError.bind(this))
			.load(this.handleLoadSpritesComplete.bind(this));
	}

	private handleLoadSpritesComplete(loader, resource) {
		this.spritesMap = resource.spritesheet.data.frames;
		// console.log('Load Sprites Complete');
	}
}

 

[Exca]

I'm sorry but I dont know what you mean with gpu & pixijs calculations? There shouldnt be any other than loading the assets.

Or do you mean there happens some texture upload which causes a lag spike? You could avoid that by having the textures uploaded before rendering or waiting for one frame to be rendered and on the next frame swap the spinner with scene. Though in that case you couldnt use pixi spinner as the upload would halt it's rendering also.