Huge opacity slowdown...

Get help using Construct 2

Post » Mon Oct 24, 2011 3:39 pm

So I was testing something out with transparencies for an effect I was going to use in another game, when I discovered this. Having one transparent square over the screen results in a barely noticeable performance hit, still being plenty playable, but if you put TWO transparent squares, the framerate drops like crazy.

http://db.tt/61FvHuSV

Here's what I'm talking about. I couldn't reproduce it with a barebones project, so I'm guessing it only affects bigger games -- though mine isn't even that big right now! The two transparent objects, one white and one black, are on the "Fade" layer at the top. You can "disable" them by setting the opacity to 0.

You'll notice that with both disabled, the game runs at a smooth 60-63 FPS (as indicated by the little text thingy). With one enabled, it drops to 50-60, but it doesn't disrupt the game much at all. With both enabled... it SAYS it's going about 40 FPS, but it feels more like 15-20. That's not good enough to play with, not even close.

So, I guess my real question here is, is this just a limitation of the current speed of HTML5? Will this eventually go away, or should I just avoid using this for effects till the end of time?
B
20
S
9
G
6
Posts: 607
Reputation: 6,112

Post » Mon Oct 24, 2011 4:01 pm

It depends on the browser. I see you've got 'Preview browser' set to Chrome which does not have a hardware accelerated canvas. It runs 50fps in Chrome for me, but still silky smooth 60fps in Firefox 7 and IE9, which both have a hardware accelerated canvas. It's also slow in Opera and Safari which don't have hardware acceleration yet either.

I think Chrome are adding hardware acceleration soon. Not sure about Opera or Safari.

BTW, you shouldn't use an opacity of 0 to hide an object - it still attempts to render the object, which takes rendering time, you just don't see anything. Set the object to invisible and it does not even attempt to render the object, which is faster.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,600

Post » Mon Oct 24, 2011 6:20 pm

Alright, thanks a bunch for clearing that up -- and for the opacity tip!
B
20
S
9
G
6
Posts: 607
Reputation: 6,112

Post » Mon Oct 24, 2011 6:36 pm

Chrome has an option in about:flags

"GPU Accelerated Canvas 2D
Enables higher performance of canvas tags with a 2D context by rendering using Graphics Processor Unit (GPU) hardware."

I think it's disabled by default though.Davioware2011-10-24 18:36:38
B
25
S
3
G
6
Posts: 1,197
Reputation: 5,620

Post » Mon Oct 24, 2011 8:10 pm

I think they'll be enabling that by default in a future release of Chrome, so probably best to wait it out then everyone's got it.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,600


Return to How do I....?

Who is online

Users browsing this forum: Renfd, supreme676 and 27 guests