A little thing about performance

[maitrungduc1410]

Hi everyone, 

I'm new with PIXI, and I'm wondering this situation. 

I want to make a rectangle, and its border can be changed when we hover. I tried search on Google and almost people say I should redraw the rectangle everytime mouse over or out the rectangle to change its border. Like this:

Quote

rect.mouseover = function(){    rect.clear();    rect.lineStyle(1, 0x00ffff);    rect.drawRect(...);}

But then I ask myself why don't create another rectangle on top of the first rectangle, set it the color we want, make it invisibe and only show it when hover. By doing this we don't have to redraw the original rectangle everytime mouse hover. This is good for optimization, I think.

 

Does anyone can explain me this is good or bad?

Thank you for your answer.

[ivan.popelyshev]

Its good idea, because every time your clear() stuff, pixi recalculates vertex buffers for that graphics. Using several graphics elements with only one being recalculated is much better, especially for IO games. 

[AnDG]

That is simple, the best way to do that is to draw a rectangle and another one as soon as it's created. That will save you a lot of memory when having to redraw every time you hover on it. You just need to hide and show it or update coordinates (if necessary).