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

Get help using Construct 2

Post » Wed Mar 25, 2015 9:36 am

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:

Image

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!
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,455

Post » Wed Mar 25, 2015 11:12 am

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 :D

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.
B
41
S
10
G
2
Posts: 1,159
Reputation: 6,542

Post » Wed Mar 25, 2015 11:59 am

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.
B
63
S
15
G
57
Posts: 2,138
Reputation: 36,863

Post » Wed Mar 25, 2015 12:07 pm

@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.
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,455

Post » Wed Mar 25, 2015 1:07 pm

A shader is the best bet. Hard to get nice anti-aliased circles though.
Image Image
B
163
S
48
G
101
Posts: 7,462
Reputation: 72,546

Post » Wed Mar 25, 2015 6:27 pm

sqiddster wrote: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...

https://dl.dropboxusercontent.com/u/523 ... _test.capx


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
B
27
S
12
G
1
Posts: 157
Reputation: 3,359

Post » Wed Mar 25, 2015 7:03 pm

So, like everybody knows Canvas wont work with webgl .... right?
Image Image
B
163
S
48
G
101
Posts: 7,462
Reputation: 72,546

Post » Wed Mar 25, 2015 7:10 pm

evidently not me :D thanks for the tip.

so with webgl off, in my above capx i get 60fps, 40% cpu on all line widths from 1-50
B
27
S
12
G
1
Posts: 157
Reputation: 3,359

Post » Wed Mar 25, 2015 8:08 pm

@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? :P

@mattb your results in firefox line up with the theory that Chrome has some sort of optimkzation for 1-pixel width lines.
B
90
S
30
G
24
Posts: 3,189
Reputation: 32,455

Post » Wed Mar 25, 2015 11:40 pm

It will work with webgl on, but it can't take advantage of it.
Paster, on the other hand can.
Image Image
B
163
S
48
G
101
Posts: 7,462
Reputation: 72,546


Return to How do I....?

Who is online

Users browsing this forum: Thndr, xrosax and 14 guests