Jump to content

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())) {

		function ready(){
			let gameOver = new Sprite(PIXI.loader.resources['game-over'].texture);

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.

Link to comment
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.

Link to comment
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.position.set(app.view.width /2 , app.view.height/2 + gameOverSign.height/2 + button.height);
	button.interactive = true;
	button.addListener('click', () =>{
		app.stage = new PIXI.Container();


Link to comment
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.

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...