Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bad performance of fillRoundedRect #5491

Closed
kaktus42 opened this issue Jan 8, 2021 · 3 comments
Closed

bad performance of fillRoundedRect #5491

kaktus42 opened this issue Jan 8, 2021 · 3 comments
Labels
🤷‍♂️ More info needed

Comments

@kaktus42
Copy link

@kaktus42 kaktus42 commented Jan 8, 2021 •
edited

Version

  • Phaser Version: 3.50.1
  • Operating system: Linux Xubuntu 20.04
  • Browser: Firefox 84.0.1

Description

I created a time bar element that just consists of two rounded rectangles.

    updateBar() {
        let frac = this._time / this.maxTime * barWidth;

        this.graphics.clear();

        this.graphics.fillStyle(0xC9A3C9);
        this.graphics.fillRoundedRect(0, 0, barWidth, barHeight, 5);
        // this.graphics.fillRect(0, 0, barWidth, barHeight);

        this.graphics.fillStyle(0x210021);
        this.graphics.fillRoundedRect(0, 0, frac, barHeight, 5);
        // this.graphics.fillRect(0, 0, frac, barHeight);
    }

This function gets called every second, because this._time gets updated every second.
However, this is incredibly laggy:
image

When using just fillRect, it's smooth:
image
@photonstorm
Copy link
Owner

@photonstorm photonstorm commented Jan 8, 2021 •
edited

Are you clearing the Graphics object between fills? If not, make sure you do so (this.graphics.clear), otherwise those fill rects will just stack up and up on top of each other.

@kaktus42
Copy link
Author

@kaktus42 kaktus42 commented Jan 9, 2021 •
edited

I added the clear() command. Still the same.

EDIT:
Let me clarify after some investigation. With this clear(), the performance gets better with greater values for this._time.
With a value of 1 (setting it fix, but still calling updateBar()), it looks like in my first screenshot.

My guess would be that for some values, this intersectsPolygon() wreaks havoc.

@photonstorm
Copy link
Owner

@photonstorm photonstorm commented Nov 4, 2021

I believe the issue here is that a rounded rectangle will create 4 'arcs' for each corner, which are created from lots of triangles all 'earcut' together. I guess the values are so overlapping it's just causing this function to freak out. We don't control earcut as it's a 3rd party library, so I think it may be better to use a rectangle with a 'rounded' mask over the top of it, to avoid it creating all of these triangles for the corners.

@photonstorm photonstorm closed this Nov 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🤷‍♂️ More info needed
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
@photonstorm @kaktus42