Jump to content

PIXIJS How to disable all children?


Recommended Posts

How can I disable a component and all it's children?


In the following example, I added a clickable sprite into a container, and disabled the container's interactivity. The sprite remains clickable.

I then add an interactive Graphics object in front of the container, hoping that would block the interactivity of the sprite, but this also achieves nothing as the sprite remains clickable.

	//build stage	var stage = new PIXI.Stage(0x66FF99);	stage.interactive = true;	var renderer = PIXI.autoDetectRenderer(400, 300);	document.body.appendChild(renderer.view);		requestAnimFrame( animate );		function animate() {		    requestAnimFrame( animate );	    renderer.render(stage);	}		//create clickable sprite	var sprite = PIXI.Sprite.fromImage("bunny.png");	sprite.interactive = sprite.buttonMode = true;	sprite.click = function(e){		//this always logs, even though container is disabled, and covered by graphics		console.log("click me");	};               //add a container to hold the sprite. Disable the interaction on the container               var container = new PIXI.DisplayObjectContainer();               container.position.x = 200;               container.position.y = 150;               container.interactive = false;               stage.addChild(container);               container.addChild(sprite);              //cover container with graphics              var g = new PIXI.Graphics();              g.interactive = true;              g.beginFill(0);              g.drawRect(0,0,400,300);              g.endFill();              stage.addChild(g);
Is there anyway to easily disable all children of a component? Or would I have to manually overwrite the interactive property of a DisplayObject and force it to disable all it's children as well?


I realize this example is impractical, however, in my actual application, when you click a certain button, a popup will display on top of all other components. While the popup is displayed, the user should not be able to click on any other components underneath it. I could achieve this by building the popup outside of the Canvas and disabling the entire canvas, but I would really like to keep the popup as part of this canvas, because it is very dynamic and needs to have direct communication with many other parts of the application.



Link to comment
Share on other sites

Thanks for the link xerver. I looked at the JSFiddle code and realized that in order for the second case to work, I need to supply a hit area to the graphics.

g.hitArea = new PIXI.Rectangle(0, 0, 400, 300);

Not sure why the first case of disabling interaction on the parent object doesn't effect it's children, but it's not necesary so I will accept this as a working solution =)

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