Sign in to follow this  
Oshri

Present loading spinner

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

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');
	}
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.