3

I am making a game using html canvas.

Here is my progress:

http://db.tt/ei3LlR (use WASD and Left/Right Arrow keys) Helps to ZOOM.

My questions are:

  • 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.

What's going on here? Is this a problem on my end at all?

Tiby312
  • 53
  • 5
  • 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 Sanchez Aug 04 '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... – MooGoo Aug 05 '10 at 00: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 Sanchez Aug 05 '10 at 00: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? – Tiby312 Aug 05 '10 at 00:08
  • Yeah. I see it now. Unfortunately I have no idea what would cause that. Good luck. – Cristian Sanchez Aug 05 '10 at 00:20
  • I can reproduce the flicker - but at first I thought it was the tank 'rumbling' - perhaps it could be an unintended effect! – Nathan Osman Aug 05 '10 at 02:09
  • Had this same problem on Linux chrome. No problems on Linux with Opera and Firefox, as well as Nexus-S's browser and Mac-Os Chrome and Safari. Yeah, probably not worth the trouble of working around it.... – Daniel Ribeiro Jan 27 '11 at 13:55
  • Tried in FireFox 3.6.17 and works fine for me. Looked at your code, quite a few things to learn from you. Thanks for sharing. – CyberFonic May 17 '11 at 02:26

2 Answers2

1

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.

This question has a bit about double buffering with Canvas 2D: Does HTML5/Canvas Support Double Buffering?

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.

Community
  • 1
  • 1
andrewmu
  • 14,276
  • 4
  • 39
  • 37
  • 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! – Tiby312 Aug 05 '10 at 22:32
  • On second thought. this processing.js thing seems like overkill. I'll give the method you linked to a go. – Tiby312 Aug 05 '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. :( – Tiby312 Aug 06 '10 at 00:22
0

UPDATE. The problem no longer exists! They must have fixed it!

Tiby312
  • 53
  • 5