Sign in to follow this  
kristof

Sprite not added to the stage when game is over

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.