0 Favourites

How do I draw lots of big circles without huge lag?

  • Hey,

    In my game I have a cool 'portal effect' at the end of every level. Currently, it's done by drawing a whole lot of sprites that look like this:

    They are quite large and there's a lot of them, so it's a HUGE strain on the GPU fillrate - it's drawing something like 90% empty pixels for every circle! Add to that the pixel shader on each of them, and, well... you can see the problem.

    Recently I came up with the idea of using Canvas instead to draw the circles, however that option didn't work either - drawing a circle with a line width of >1 is apparently something Canvas can't handle too well without making a ton of draw calls. You can turn this option on in the capx to see the performance problems.

    Since it looks like attachments are broken at the moment, here's a temporary link to the capx (requires Canvas).

    https://dl.dropboxusercontent.com/u/41931267/SpiralCircles.capx

    So, does anyone have any ideas about how to draw a few big circles (of different colours) without melting the computer?

    Cheers!

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Still weird you cant draw 2d shapes in C2, being a 2D game engine and all, its a bit funny, that it cant draw 2d shapes. I think

    Anyway, your problem is not uncommon I think and personally I would try to see if you could use the video functionality to do it. Even though it also have its problems, it might be better for performance.

  • Have you tried using Particles? I understand they have a minimal overhead compared to the Sprite object. I'm on my phone so can't check the capx yet.

  • Colludium they have lower CPU overhead however I'd highly doubt that they have lower GPU overhead - if it's using an image file at all, no matter what the GPU will be pushing a huge amount of empty pixels.

  • A shader is the best bet. Hard to get nice anti-aliased circles though.

  • drawing a circle with a line width of >1 is apparently something Canvas can't handle too well without making a ton of draw calls

    I've only just started looking into this, but I'm finding my frame rates are higher when drawing lots of circles with thick line widths than with a width of 1.

    Try this capx - with the line width at 10 I'm getting 75% cpu, 60fps in firefox, but with width at 1 it's 85% cpu, 40fps...

    edit - sqiddster - I get almost the same results with your capx - low frame rate with 1 pixel width, then 60fps at 10 pixels, & it drops off after that

  • So, like everybody knows Canvas wont work with webgl .... right?

  • evidently not me thanks for the tip.

    so with webgl off, in my above capx i get 60fps, 40% cpu on all line widths from 1-50

  • newt uhh I thought it was fixed to work with webGL? Like, it clearly *works* with webGL on.

    I might have a crack at writing a shader, how hard could it be?

    mattb your results in firefox line up with the theory that Chrome has some sort of optimkzation for 1-pixel width lines.

  • It will work with webgl on, but it can't take advantage of it.

    Paster, on the other hand can.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)