Update rectangle color on hover

[klg]

Hi,

 

I'm new to Phaser. I'm trying to update the color of a rectangle on hover. Here's what I currently have:

 

var mysprite = game.add.sprite(pos.x, pos.y);

mysprite.inputEnabled = true;


var rect = game.add.graphics(0, 0);

rect.lineStyle(0);

rect.beginFill(0x333333, 1);

rect.drawRect(0, 0, rectWidth, rectHeight);


mysprite.addChild(rect);


mysprite.events.onInputOver.add(function() {  rect.graphicsData[0].fillColor = 0x5B5B5B; }, this);

I'm trying to make this work since yesterday and have tried a lot of other approaches but nothing seem to work. 

 

Thanks for your help in advance.

 

[XekeDeath]

Your sprite object is tiny, because you gave it no texture or dimensions...

My approach to this is similar, except I don't attach the graphics object to the sprite.

By keeping them seperate, you can resize the sprite all you want to change the input hit area without changing anything about the graphics object.

 

I'd try something like this:

var rect = game.add.graphics(0, 0);rect.lineStyle(0);rect.beginFill(0x333333, 1);rect.drawRect(pos.x, pos.y, rectWidth, rectHeight);var mysprite = game.add.sprite(pos.x, pos.y);mysprite.width = rectWidth;mysprite.height = rectHeight;mysprite.inputEnabled = true;mysprite.events.onInputOver.add(function() {  rect.graphicsData[0].fillColor = 0x5B5B5B; }, this);

[klg]

Your sprite object is tiny, because you gave it no texture or dimensions...

My approach to this is similar, except I don't attach the graphics object to the sprite.

By keeping them seperate, you can resize the sprite all you want to change the input hit area without changing anything about the graphics object.

 

I'd try something like this:

var rect = game.add.graphics(0, 0);rect.lineStyle(0);rect.beginFill(0x333333, 1);rect.drawRect(pos.x, pos.y, rectWidth, rectHeight);var mysprite = game.add.sprite(pos.x, pos.y);mysprite.width = rectWidth;mysprite.height = rectHeight;mysprite.inputEnabled = true;mysprite.events.onInputOver.add(function() {  rect.graphicsData[0].fillColor = 0x5B5B5B; }, this);

 

Thank you so much XekeDeath, I will try your approach. Also, I have some of text inside these rectangles and because of the text the frame rate drops below 10 in WebGL mode. It works properly in Canvas. Are text really that expensive for webGL or am I doing anything wrong here. I am using web font.

 

Thanks again.

[Jacobross85]

I'm having a similar problem. have an array of graphic objects and I can access then like 

this.legend[x]// I'm trying to change the fillColor like sofunction update(){

this.legend[1].graphicData[0].fillAlpha = 1;

this.legend[1].graphicData[0].fillColor = 0xFFFFFF; } // but it only works in the create state function create(){ this.legend[1].graphicData[0].fillAlpha = 1;

this.legend[1].graphicData[0].fillColor = 0xFF0000;

}

So basically, my graphic is only ever white and never turns green on create, but never on update. I don't see what could be different.