Alternate ways on how to make an object listen for interaction?

[neonwarge04]

I have a very simple task at hand; I loaded the screen with text. Some of the texts are clickable and when I click it it must trigger a certain function which will delete all sprite on the screen. I do this because I need to make way for the new screen and my concept is, remove all child from the container then load the new scene.

Fortunately, I was able to do this. But I am not having luck with interactive mode on. You see, I have object, a PIXI.Text object with interactivity mode on so I can assign it a callback when a click button is pressed for them. Unfortunately, if I clean the screen this way, I am having crashes with error saying it cannot call displayObject since it is undefined and the children.length is null. There is also an issue submitted to the repo but it was not moving.

I am afraid my concept isn't the best way to do this. Using phaser.js to achieve this is outside of my option right now. I need to stick with PIXI.js barebone. 

 

Here's what I've got so far:
 

function GameOverScene(renderer  , screenSize , currentScore , highestScore){this.mRenderer = renderer;this.mScreenSize = screenSize;this.mCurrentScore = currentScore;this.mHighestScore = highestScore;this.mAnimationFrameID = -1;this.mOnFinishCallback = function(difficulty){this.mStage.destroy(true); cancelAnimationFrame(this.mAnimationFrameID);}this.setup();}GameOverScene.prototype.setup = function(){this.mStyle = { font   : 'bold italic 36px Arial', fill   : '#F7EDCA', stroke : '#4a1850', strokeThickness : 5}this.mStage = new PIXI.Container();var centerPos = {x : this.mScreenSize.width / 2.0 , y : this.mScreenSize.height / 2.0};this.mGameOverText = new PIXI.Text("Game Over!" , this.mStyle);this.mGameOverText.anchor.x = 0.5;this.mGameOverText.anchor.y = 0.5;this.mGameOverText.position.x = centerPos.x;this.mGameOverText.position.y = centerPos.y - 150;this.mCurrentScoreLabel = new PIXI.Text("Score:" , this.mStyle);this.mCurrentScoreLabel.anchor.x = 0.5;this.mCurrentScoreLabel.anchor.y = 0.5;this.mCurrentScoreLabel.position.x = this.mGameOverText.x - 180;this.mCurrentScoreLabel.position.y = this.mGameOverText.y + 90;this.mCurrentScoreText = new PIXI.Text(this.mCurrentScore , this.mStyle);this.mCurrentScoreText.anchor.x = 0.5;this.mCurrentScoreText.anchor.y = 0.5;this.mCurrentScoreText.position.x = this.mCurrentScoreLabel.x + 86;this.mCurrentScoreText.position.y = this.mCurrentScoreLabel.y;this.mHighScoreLabel = new PIXI.Text("High Score:" , this.mStyle);this.mHighScoreLabel.anchor.x = 0.5;this.mHighScoreLabel.anchor.y = 0.5;this.mHighScoreLabel.position.x = centerPos.x + 140;this.mHighScoreLabel.position.y = this.mCurrentScoreText.position.y;this.mHighScoreText = new PIXI.Text(this.mHighestScore , this.mStyle);this.mHighScoreText.anchor.x = 0.5;this.mHighScoreText.anchor.y = 0.5;this.mHighScoreText.position.x = this.mHighScoreLabel.x + 140;this.mHighScoreText.position.y = this.mHighScoreLabel.y;this.mRetryLabel = new PIXI.Text("Retry?" , this.mStyle);this.mRetryLabel.anchor.x = 0.5;this.mRetryLabel.anchor.y = 0.5;this.mRetryLabel.position.x = centerPos.x;this.mRetryLabel.position.y = centerPos.y + 50;this.mEasyLabel = new PIXI.Text("Easy" , this.mStyle);this.mEasyLabel.anchor.x = 0.5;this.mEasyLabel.anchor.y = 0.5;this.mEasyLabel.position.x = centerPos.x - 150;this.mEasyLabel.position.y = centerPos.y + 150;this.mEasyLabel.interactive = true;this.mEasyLabel.click = (function(e){console.log("Easy!");this.mOnFinishCallback(Difficulty.MEDIUM);}).bind(this);this.mMediumLabel = new PIXI.Text("Medium" , this.mStyle);this.mMediumLabel.anchor.x = 0.5;this.mMediumLabel.anchor.y = 0.5;this.mMediumLabel.position.x = this.mEasyLabel.position.x + 150;this.mMediumLabel.position.y = this.mEasyLabel.position.y;this.mMediumLabel.interactive = true;this.mMediumLabel.click = (function(e){console.log("Medium!");this.mOnFinishCallback(Difficulty.MEDIUM);}).bind(this);this.mHardLabel = new PIXI.Text("Hard" , this.mStyle);this.mHardLabel.anchor.x = 0.5;this.mHardLabel.anchor.y = 0.5;this.mHardLabel.position.x = this.mMediumLabel.position.x + 150;this.mHardLabel.position.y = this.mMediumLabel.position.y;this.mHardLabel.interactive = true;this.mHardLabel.click = (function(e){console.log("Hard!");this.mOnFinishCallback(Difficulty.HARD);}).bind(this);this.mStage.buttonMode = true;this.mStage.addChild(this.mGameOverText);this.mStage.addChild(this.mCurrentScoreLabel);this.mStage.addChild(this.mCurrentScoreText);this.mStage.addChild(this.mHighScoreLabel);this.mStage.addChild(this.mHighScoreText);this.mStage.addChild(this.mRetryLabel);this.mStage.addChild(this.mEasyLabel);this.mStage.addChild(this.mMediumLabel);this.mStage.addChild(this.mHardLabel);this.mAnimationFrameID = requestAnimationFrame(this.update.bind(this));}GameOverScene.prototype.update = function(){this.mRenderer.render(this.mStage); }

 

Is there an alternative way to do this? I am crashing on this.mOnFinishCallback with this error: https://github.com/pixijs/pixi.js/issues/1817

You can replicate this error by going to this example: http://pixijs.github.io/examples/index.html?s=demos&f=interactivity.js&title=Interactivity and typing in stage.destroy(true) on function onButtonDown like this:
 

function onButtonDown(){    this.isdown = true;    this.texture = textureButtonDown;    this.alpha = 1;    stage.destroy(true);}

Thank you!

 

[xerver]

Have you tried turning interaction off before removing the children?

[neonwarge04]

Yes, I tried turning the interactive mode and unfortunately it still crashes. There is an existing issue on this one in GitHub which is issue #1817, as of the moment, the Interactivity Manager is bound for a rewrite and have no idea when the patch is coming out.

For the moment, I just hide the objects and move on to the next scene.