Sprite not added to the stage when game is over

[kristof]

Hy everyone, 

My game ends when the player and the enemy collides. Detecting the collision works fine, the issue is not caused by it. When the game ends I stop the ticker with the .stop() function, is that why I cannot add sprites any more to the stage? (I dont think so because I tested it but still asking). 

After I stop the ticker I want to add the game-over.png as a sprite which I see in chrome debugger that it is loaded, but it does not appear on the stage.

if (isCollision(player.getBounds(), enemy.getBounds())) {
		app.stage.removeChild(player);
		app.stage.removeChild(enemy);
		app.ticker.stop();

		PIXI.loader.add('game-over','resources/images/game-over.png').load(ready);
		function ready(){
			let gameOver = new Sprite(PIXI.loader.resources['game-over'].texture);
			
			app.stage.addChild(gameOver);
		}
	}

I played around with setting the coordinates of the sprite too to see if the image may be out of the stage but it did not solve the issue.

[ivan.popelyshev]

I'm not sure if loader can be used twice, you wont get that `complete` event. You should create another loader for it  If you want to know more about pixi loader, please read the code and issues of https://github.com/englercj/resource-loader

If I were on your place, I could just test this thing what it can do and what it cant. I dont see this answer in first page of closed issues, but I remember that there were threads about it in this subforum.

Or just use `Texture.from` or `Sprite.from` , you wont need ready method to use it.

[kristof]

I switched to loading the images at once and modified the code a bit and now I do have the image and a button to take me back to the menu after the game is over, but I am more and more concerned about that stopping the ticker event of the app freezes the whole canvas. Is it true?

When I don't stop the ticker event I can click on the  button and it takes me back to the menu but the enemies keep spawning still, thus I'd need to stop the ticker but then if I do even tho the button appears when I click it it does not do anything. 

Here is the code:

function addBackToMenuBtn(gameOverSign: Sprite){
	let button = new Sprite(PIXI.loader.resources['button'].texture);
	button.anchor.set(0.5);
	button.scale.set(0.5);
	button.position.set(app.view.width /2 , app.view.height/2 + gameOverSign.height/2 + button.height);
	button.interactive = true;
	button.addListener('click', () =>{
		console.log('clicked');
		app.ticker.stop();
		app.stage.destroy();
		app.stage = new PIXI.Container();
		initMenu();
	});
	app.stage.addChild(button);
}

 

[ivan.popelyshev]

ticker also holds `app.render()` thingy that calls `app.renderer.render(app.stage)` , please study the sources of Application class. I don't know if you use v4 or v5 , so I cant point you to correct sources. However, https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop  ,  is correct for both v4 and v5, except "interaction" thing, its always inside the renderer, no need to create it.

As for your case , I recommend to remove your functions from ticker when the game ends, and don't touch other things. Or you can make your ticker events to check if game exists.