Jump to content

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


Recommended Posts

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!

Link to comment
Share on other sites

  • 2 weeks later...

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. 

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...