Trying to fire events when hovering over Graphics element. click event works as expected, but mouseover does not seem to fire.

Here's excerpt with fiddlejs link:

var renderer = PIXI.autoDetectRenderer(500, 500, null, true);
var stage = new PIXI.Stage(0xFFFFFF);
stage.interactive = true;

document.getElementById("canvas").appendChild(renderer.view);

var rect = new PIXI.Graphics();
rect.lineStyle(1, 0x000);

rect.interactive = true;
rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);
rect.drawRect(0,0, 200,200);
rect.click = function(ev) { console.log("clicked"); }
rect.mouseover = function(ev) { console.log("over"); }
stage.addChild(rect);

renderer.render(stage);

FiddleJS link: /

Maybe I should use sprites instead of Graphics elements?

Thanks!

Trying to fire events when hovering over Graphics element. click event works as expected, but mouseover does not seem to fire.

Here's excerpt with fiddlejs link:

var renderer = PIXI.autoDetectRenderer(500, 500, null, true);
var stage = new PIXI.Stage(0xFFFFFF);
stage.interactive = true;

document.getElementById("canvas").appendChild(renderer.view);

var rect = new PIXI.Graphics();
rect.lineStyle(1, 0x000);

rect.interactive = true;
rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);
rect.drawRect(0,0, 200,200);
rect.click = function(ev) { console.log("clicked"); }
rect.mouseover = function(ev) { console.log("over"); }
stage.addChild(rect);

renderer.render(stage);

FiddleJS link: http://jsfiddle/anps0abt/

Maybe I should use sprites instead of Graphics elements?

Thanks!

• javascript
• pixi.js

1 Answer 1

PIXI.InteractionManager handles mouseover and mouseout events in its update() function. You need to continuously update the renderer each frame in order to get a response from those events

var renderer = PIXI.autoDetectRenderer(500, 500, null, true);
var stage = new PIXI.Stage(0xFFFFFF);
stage.interactive = true;

document.getElementById("canvas").appendChild(renderer.view);

var rect = new PIXI.Graphics();
rect.lineStyle(1, 0x000);

rect.interactive = true;
rect.hitArea = new PIXI.Rectangle(0,0, 200, 200);
rect.drawRect(0,0, 200,200);
rect.click = function(ev) { console.log("clicked"); }
rect.mouseover = function(ev) { console.log("over"); }
stage.addChild(rect);

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

http://jsfiddle/anps0abt/3/