A little thing about performance

Recommended Posts

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:


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.

Screen Shot 2018-11-23 at 18.07.40.png

Screen Shot 2018-11-23 at 18.07.43.png

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.