One sprite clicks, the other does not.

[Gyldstrand]

var MapObjects = {};

function setupMapObjects() {
    MapObjects.chest = new PIXI.Sprite(frame("images/chest.png", 0, 0, 50, 50));
    MapObjects.chest.x = 200;
    MapObjects.chest.y = 200;
    MapObjects.chest.anchor.x = 0.5;
    MapObjects.chest.anchor.y = 0.7;
    MapObjects.chest.interactive = true;
    MapObjects.chest.on('click', openChest);
    MapObjects.chest.hitArea = new PIXI.Circle(MapObjects.chest.x, MapObjects.chest.y, 10);
    MapObjectsArray.push(MapObjects.chest);
    stage.addChild(MapObjects.chest);    
};

function openChest() {
    console.log('open');
};


var Player = {};

function setupPlayer(){
    Player.sprite = new PIXI.Sprite(frame("images/Player.png", 0, 0, 128, 128));
    Player.sprite.anchor.x = 0.5;
    Player.sprite.anchor.y = 0.7;
    Player.sprite.x = 150;
    Player.sprite.y = 150;
    Player.vx = 0;
    Player.vy = 0;
    Player.direction;
    Player.directionIdle;
    Player.idle;
    Player.moving;
    Player.frameCycle = 0;
    Player.action = false;
    Player.run = false;
    Player.melee = false;
    Player.sprite.interactive = true;
    Player.sprite.on('click', openChest);
    stage.addChild(Player.sprite);
};

 

MapObjects.chest does not respond to the .on('click', openChest) but Player.sprite does. I don't know man.... I just don't know. I marked this off my To Do list a few days ago cause it was working but now... (head explodes) 

 

I guess I should ask if there is another way to apply the click event to the sprite.

[ivan.popelyshev]

Chest is under player, right? There was a commit in 3.0.8 or 3.0.9 that made clicking on two objects at the same time impossible. I was against it. For now you can take old version of InteractionManager.processInteractive, that'll solve the problem. Dump it in JS script and execute before you create the renderer:

	//and that's old 3.0.6 precessInteractive
	PIXI.interaction.InteractionManager.prototype.processInteractive = function (point, displayObject, func, hitTest, interactive )
	{
	    if(!displayObject.visible)
	    {
	        return false;
	    }
	
	    var children = displayObject.children;
	
	    var hit = false;
	
	    // if the object is interactive we must hit test all its children..
	    interactive = interactive || displayObject.interactive;
	
	    if(displayObject.interactiveChildren)
	    {
	
	        for (var i = children.length-1; i >= 0; i--)
	        {
	            if(! hit  && hitTest)
	            {
	                hit = this.processInteractive(point, children[i], func, true, interactive );
	            }
	            else
	            {
	                // now we know we can miss it all!
	                this.processInteractive(point, children[i], func, true, false );
	            }
	        }
	
	    }
	
	    if(interactive)
	    {
	        if(hitTest)
	        {
	            if(displayObject.hitArea)
	            {
	                // lets use the hit object first!
	                displayObject.worldTransform.applyInverse(point,  this._tempPoint);
	                hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y );
	            }
	            else if(displayObject.containsPoint)
	            {
	                hit = displayObject.containsPoint(point);
	            }
	        }
	
	        if(displayObject.interactive)
	        {
	            func(displayObject, hit);
	        }
	    }
	
	    return hit;
	};

 

[Gyldstrand]

I just discovered that if I take out the MapObjects.chest.hitArea, it will work. Is there a reason for that? 

[ivan.popelyshev]

because hitArea overrides containsPoint : 

if(displayObject.hitArea)
{
	// lets use the hit object first!
	displayObject.worldTransform.applyInverse(point,  this._tempPoint);
	hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y );
}
else if(displayObject.containsPoint)
{
	hit = displayObject.containsPoint(point);
}

 

[Gyldstrand]

There it is. Very good.