Help for getting smoother movement and fix blinking :D

[quentin]

Hi all!

 

I just started with html5 and after reading some tutorials and stuff, i decided to make a simple pong. Just for practicing.

 

In chrome it runs fine (sometimes the fps decase, but normally it runs well) but firefox makes the ball blink a lot and the movement doesn't looks good (I'm using double buffering tho).

 

Has this happened to anyone else? Is this a firefox problem? Or its just a noob mistake?

 

You can try the actual version here:

 

http://www.myhtml5tests.tk/pong/

 

The source:

 

https://github.com/CreepyCereals/simplest-pong-ever

 

It might be awesome if someone could take a look

 

I'll apreciate any kind of correction as well.

 

Thank you so much.

 

PD: sorry if i made mistakes in the text, english is not my main language

[rich]

You don't need to double buffer, if anything this is harming your FPS rate, not helping it. Canvas GPU rendering automatically double buffers for you, so all you've really done is double the amount of work it needs to do.

 

You should really do context.clearRect() to clear it between frames rather than a fill. To keep the game black just set the canvas background color to black. Drawing shape primitives is actually quite expensive, more so than using drawImage, but as you're doing so little of it I wouldn't worry much at this stage.

 

Updating innerHTML properties in the main loop is probably causing a document reflow as well which would be sensible to eliminate at some point.

 

I didn't check but look to see if you've got a gc issue going on too. Chrome devtools will give you a performance graph, if you've got a sawtooth shape after a few minutes playing and the drop is considerable (a few MB) then that's gc causing spikes.

[quentin]

Thanks for your reply, i've done all you said, but the ball movement keeps lagging at some points in firefox.

 

After the performance tests with chrome, this were the results:

 

Frames: (with continuous page repainting enabled)

 

url: http://imageshack.us/a/img703/2595/a4ar.png
 

Memory:

url: http://imageshack.us/a/img22/9934/oyqa.png

 

Are that memory spikes normal?

 

Thanks.

[rich]

I can't make out the values on the memory graph, but that is a perfect sawtooth effect going on, meaning gc is kicking in and dumping a load of ram at those points, which often leads to FPS blips.

[Straker]

There is nothing that can be done about the garbage collection, both requestAnimFrame and settimeout/interval both create sawtooth patterns in the memory profiler. This stackoverflow question explains it pretty well. So no matter what you do, you will have the sawtooth pattern because of how chrome works to profile the memory. 

 

I've created way more complex/ugly code that doesn't have the blipping problem in any browser (http://sklambert.com/gamejam/), but still has the sawtooth effect from animation loops. I've tried looking all over your code and editing it, I can't seem to find the problem with why it looks jumpy. Your FPS calculation seems to be jumping all over the board as well (going up to 100 sometimes), so I'm not sure what is going on.

[quentin]

Ok, thank you for all your efforts!

 

I'm going to explore others people render techinques, and see if i can implement them.