Pixi.js: Setting a PIXI.Graphics object to be interactive does not work

Created on 28 Jun 2014 · 8Comments · Source: pixijs/pixi.js

I draw a rectangle on stage, mark it as interactive and attach a click handler to it. When I click on the rectangle, I expect my handler to be fired. Yet, nothing happens.

var stage = new PIXI.Stage(0xFFFFFF);

var renderer = PIXI.autoDetectRenderer(620, 380);

document.body.appendChild(renderer.view);

var graphics = new PIXI.Graphics();

graphics.beginFill(0xFF3300);
graphics.lineStyle(10, 0xffd900, 1);

graphics.drawRect(20, 20, 100, 200);
graphics.endFill();

graphics.interactive = true;
graphics.buttonMode = true;
graphics.click = function (e) {
    console.log(this, e);
}

stage.addChild(graphics);

requestAnimFrame(animate);

function animate() {
    requestAnimFrame(animate);
    renderer.render(stage);
}

Is this a bug or am I doing something wrong?

Source

n1313

👍1

Most helpful comment

Hey guys, at the moment graphics objects need to have there hit area specified if they are set to interactive. I am currently working on the graphics side of things at the moment and will certainly add this to my list.. for now solution would be:

var stage = new PIXI.Stage(0xFFFFFF);

var renderer = PIXI.autoDetectRenderer(620, 380);

document.body.appendChild(renderer.view);

var graphics = new PIXI.Graphics();

graphics.beginFill(0xFF3300);
graphics.lineStyle(10, 0xffd900, 1);

graphics.drawRect(20, 20, 100, 200);
graphics.endFill();

graphics.interactive = true;
graphics.buttonMode = true;

// Add a hit area..
graphics.hitArea = new PIXI.Rectangle(20, 20, 100, 200);

graphics.click = function (e) {
    console.log(this, e);
}

stage.addChild(graphics);

requestAnimFrame(animate);

function animate() {
    requestAnimFrame(animate);
    renderer.render(stage);
}

hope this helps!

GoodBoyDigital on 29 Jun 2014

👍2

All 8 comments

I believe that only DisplayObjects like Sprite and MovieClips can be set as interactive.
Graphics objects are lower level primitives, so they don't have the same functionality that DisplayObjects do.
To solve your problem, first generate a texture from graphics.

graphics.boundsPadding = 0;
var texture = graphics.generateTexture();

Then use that texture to create a new Sprite, and set that sprite as interactive

var sprite = new PIXI.Sprite(texture);
sprite.interactive = true;
stage.addChild(sprite);

Now attach your click handler to the sprite and it should work.

kittykatattack on 28 Jun 2014

Thanks @kittykatattack, I will try that approach.

Meanwhile, can you help me in clarifying something? Documentation for Graphics says that it extends DisplayContainer, which extends DisplayObject. Doesn't that mean that properties and methods of DisplayObject are supposed to work on Graphics instance as well? Moreso, it is explicitly stated that interactive is "Inherited from DisplayObject", so why doesn't it work?

n1313 on 29 Jun 2014

👍1

That's a good question! I don't know enough about the API to give you an answer, so hopefully someone with more experience will join this conversation and explain it to us.

kittykatattack on 29 Jun 2014

var stage = new PIXI.Stage(0xFFFFFF);

var renderer = PIXI.autoDetectRenderer(620, 380);

document.body.appendChild(renderer.view);

var graphics = new PIXI.Graphics();

graphics.beginFill(0xFF3300);
graphics.lineStyle(10, 0xffd900, 1);

graphics.drawRect(20, 20, 100, 200);
graphics.endFill();

graphics.interactive = true;
graphics.buttonMode = true;

// Add a hit area..
graphics.hitArea = new PIXI.Rectangle(20, 20, 100, 200);

graphics.click = function (e) {
    console.log(this, e);
}

stage.addChild(graphics);

requestAnimFrame(animate);

function animate() {
    requestAnimFrame(animate);
    renderer.render(stage);
}

hope this helps!

GoodBoyDigital on 29 Jun 2014

👍2

That works, thanks!

n1313 on 30 Jun 2014

Is this right that when hitArea is PIXI.Polygon it doesn't work? With rectangle it's OK.

    var stage = new PIXI.Stage(0xFFFFFF);

    var renderer = PIXI.autoDetectRenderer();
    document.getElementById('pixi').appendChild(renderer.view);

    var graphics = new PIXI.Graphics();

    var poly = new PIXI.Polygon(
        new PIXI.Point(50,100),
        new PIXI.Point(100,100),
        new PIXI.Point(100, 200),
        new PIXI.Point(50, 100)
    );

    graphics.beginFill(0xFF3300);
    graphics.lineStyle(4, 0xffd900, 1);

    graphics.drawPolygon(poly);

    graphics.hitArea = poly;
    graphics.interactive = true;
    graphics.buttonMode = true;
    graphics.click = function (e) {
        console.log(e);
    };

    stage.addChild(graphics);

    requestAnimationFrame(animate);
    function animate() {
        renderer.render(stage);
        requestAnimationFrame(animate);
    }