Forums » Help » Chrome Bizarre Foreground Error

Under the bridge in this test level I wanted the color to match the water that is further to the right past the bridge. I applied the same tile that I use to color the foreground layer above my entities so they have an immersed water effect.

For some reason Chrome hates when I add this tile below the bridge. It's used in other areas without an issue (just keep running right and your fps in chrome will adjust back to 60)

without overlay of water under the bridge (runs fine in chrome ~60fps_
[removed] - issue solved

with overlay of water (runs with a large amount of system lag until your run right to the water hole or jump to the 3rd platform)
[removed] - issue solved

The only difference in the above links is that the overlay tile (used elswhere and in more levels without issue) is applied under the bridge (you can tell by the green hue)

Anyone else have a similar experience and/or resolution where chrome does not like a specific tile used in a specific portion of a level?

Thanks

-TigerJ

I don't think it has much to do with the tile other than it being a PNG with an alpha channel. Drawing is the most expensive thing in HTML5/Impact. Using a transparent image is probably even more expensive.

You are pushing nearly 2000 draws in a single frame which in most cases is considered to be quite a bit. If you watch the performance graph as you have the transparent water tiles go off screen the FPS rises dramatically (just as you have observed).

The bottom line is you are simply pushing the limits of HTML5. Adding more of the tansparent tiles under the bridge is just pushing it over the edge and you are starting to see the performance issues.

With that said I'm doing a similar effect but instead of using an image I've opted to use fillRect() with globalAlpha directly on the canvas. This is more of an advanced technique but it was much more efficient and every bit counts sometimes.

ig.system.context.fillStyle = 'rgb(0,0,0)';
ig.system.context.globalAlpha = 0.5;
ig.system.context.fillRect(x,y,width,height);

=D

PS. http://impactjs.com/documentation/baking

Actually... why is your draw count so high? My guess is you are drawing a bunch of tiny tiles for the background. They all look to be the same color so I'd suggest killing that layer and just setting the clearColor

http://impactjs.com/documentation/class-reference/game#clearcolor

That would reduce the amount of draws and improve the performance a lot. Also you could consider pre-rendering the background maps.

http://impactjs.com/documentation/class-reference/backgroundmap#prerender

=D

I don't know why I didn't even think of using a vector for that. thanks for the post. :)

I've been toying with the engine for about a week or two. It's so much fun, thanks for all the tips/links I will be sure to check them out.

I swear this forum has the best community of people.