Jump to content

DisplayObjectContainer and interactivity


Recommended Posts

When i do this : 
this.myCont.setInteractive(true);this.myCont.hitArea = new PIXI.Rectangle(0, 0, 20, 20); 


My container doesn't take the hitArea coords.
myCont contain some object and his size is approximatively 64*96.
I can't get hit at 0, 0, 20, 20 only ^^


Link to comment
Share on other sites

Hmmm something else  :wacko:


If you i do this :

var test = new PIXI.DisplayObjectContainer();// Add some drawing to test...var otherObject = new PIXI.DisplayObjectContainer();var graphics = new PIXI.Graphics();graphics.beginFill(0xFFFFFF, 0.5);graphics.lineStyle(1, 0x000000, 0.5);graphics.drawRect(20, -90, 32, 90);otherObject.addChild(graphics);test.addChild(otherObject);
​/* ############# Here the "problem"​*/ #####// If i do this, the children is visible again (in Chrome | but it's ok with Opéra Next)otherObject.visible = false;// I do that to fix itotherObject.visible = false;otherObject.getChildAt(0).visible = false; 
Link to comment
Share on other sites

oh! yes, again good catch!


This is exactly why the dev branch is so useful, it lets us hammer out the bugs before pushing to the main branch :)


I will fix and then give ya a shout when it is done


If you find anymore little issues let me know and we will get them nailed too.



Link to comment
Share on other sites

As far as the hitArea question goes, can you give a bit more context than just that code? Did you change the anchor of the sprite?


I've been trying to reproduce the issue you are having, but I cannot. The only thing I can think of is there is something that I am missing in the large context of your code. A minimal example that exhibits the issue is the most useful.

Link to comment
Share on other sites

I try to set an hit area less huge than the image size.


y image : 64-96px

this.myCont.hitArea = new PIXI.Rectangle(10, 10, 20, 50);


And i can't reduce the size of hitArea.


Other question, can we use a Polygon to set the hitArea?

Link to comment
Share on other sites

Yes you can use a polygon to set the hitArea:


this.myCont.hitArea = new PIXI.Polygon([   new PIXI.Point(/* first point */),   new PIXI.Point(/* second point */),   new PIXI.Point(/* third point */),   new PIXI.Point(/* fourth point */),   new PIXI.Point(/* fifth point */)]);


Again, I have been trying to reproduce the issue you have, and I cannot. Can you give me a page where it is broken (minimal code to reproduce the bug is the most helpful).

Link to comment
Share on other sites

Hm, i'm sorry but i have try too and cannot get it... I do in 1 week ago :s


That's great for polygon but you forgot the []


// hitArea for isometric TilesTile.hitArea = new PIXI.Polygon([new PIXI.Point(64, 32),new PIXI.Point(128, 64),new PIXI.Point(64, 96),new PIXI.Point(0, 64)]);
Link to comment
Share on other sites

Here you go @rolnaaba - this doesn't work on the latest PIXI build - regardless of where you click it still registers the click:


var doc = new PIXI.DisplayObjectContainer();        doc.hitArea = new PIXI.Rectangle(0, 0, 10, 10);        var mc = new PIXI.MovieClip([            PIXI.Texture.fromImage("img/BadGuys_03.png")        ]);        doc.setInteractive(true);        doc.click = function () {            console.log('clicked');        };        doc['addChild'](mc);        this.gameScene['addChild'](doc);
Link to comment
Share on other sites

  • 2 months later...

Hy people,

I'm try to use hitArea in spine object, but I can not!  :unsure:

 See the code below.


spine = new PIXI.Spine("../content/animations/page2/boy.json");
//Set to page scale;
spine.scale.x = spine.scale.y = scale;
//Get the size in layout;
spine.position.x = $('#page-2').offset().left + origialX + (70*scale)/2 + 240;
spine.position.y = 274 + (104*scale)/2;
//Set the current Animation
spine.state.setAnimationByName("Idle", true);
// make the button interactive..
spine.hitArea = new PIXI.Rectangle(0,0,100000, 100000);
// set the mousedown and touchstart callback..
spine.mousedown = spine.touchstart = function(data){



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