Why does the shadow flicker in google
chrome when the tank is turning?

Why does the turret image flicker in
safari when the turret is turning?

Why does it work fine in Firefox?

The tank image and the turret image are plain old pngs. The shadows are dynamically created using those images. The shadows are not image objects but canvas elements.

The flickering only seems to happen when I am changing the rotation of the image. When I say flickering I mean that the image appears to shrink and grow a bit very fast. The flickering stops again when the image stops rotating.

I don't see any of the "flickering" in either Chrome or Firefox. The only thing I see is the little turret animation. But nice work though.. it seems pretty smooth for me.
–
Cristian SanchezAug 4 '10 at 23:58

I see the tanks turret flickers in a way that makes it look like a rotating gatling gun, and there's a white-ish rectangle on each tank that is moving back and forth. Is this what you mean? Almost looks intentional...
–
MooGooAug 5 '10 at 0:03

@MooGoo: I think that was the intended effect. Zoom in and you'll see it in more detail. I was also wondering if that's what the OP was talking about.
–
Cristian SanchezAug 5 '10 at 0:06

I disabled the turret animation to make it easier to see. Doesn't the shadow flicker when you guys turn the tank in chrome?
–
Tiby312Aug 5 '10 at 0:08

Yeah. I see it now. Unfortunately I have no idea what would cause that. Good luck.
–
Cristian SanchezAug 5 '10 at 0:20

2 Answers
2

Regarding the flickering issues, you do not seem to be double buffering your canvas. So it's possible things are flickering because the ground or shadows are drawn before the tanks and a screen refresh happens before you draw the tanks and turrets.

I'm also wondering if small rounding errors in the context's rotate and translate methods might be causing the juddering of the turrent image. Different browser implementations might have different accuracy levels for these operations. You could try rounding your parameters to the nearest integer to check this.

PS: Your game so far looks great - the tank graphics and handling are really good.

Thank you for the help. I tried rounding the numbers, but it didn't help. The problem is most likely what you describe. This processing.js library looks quite neat. I think i'll port it over and report back. Thanks again!
–
Tiby312Aug 5 '10 at 22:32

On second thought. this processing.js thing seems like overkill. I'll give the method you linked to a go.
–
Tiby312Aug 5 '10 at 23:24

Argh! I put in double buffering and it's still jiggling on me. So it doesn't seem to be that or a rounding error that's causing this. Maybe this is just a shortcoming of Google Chrome. :(
–
Tiby312Aug 6 '10 at 0:22