Sign in to follow this  
klg

Update rectangle color on hover

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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);

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.