Forums » Help » System Lag Issues

Hi guys/girls,

I'm current writing an endless runner style game using ImpactJS and everything had been going fine until I tried testing it on some lower spec'd machines.

On my dev machine (i7 3960x with GTX Titan) it obviously runs fine 1-2ms and 60FPS without a problem in Chrome. IE takes a little longer on draws but still maintains 60FPS.

On an older 2009 iMac (Core 2 Duo) it behaves very strangely. When I first load the game there is quite bad system lag showing in the performance tab. It spikes up to about 16ms every 2nd frame and then back to 0ms lag and can only maintain a maximum of 20FPS. But then suddenly for no reason maybe a minute or more later the system lag stops and the FPS jumps back up to 60. I'm really at a loss to see why, the machine is doing nothing else, no system updates or other network activity. I thought it might have been a preloading issue as the game uses some quite large (3mb) MP3/OGG files as background music, but even with the assets cached in the browser system lag was still all over the place.

On a slightly newer 2012 Lenovo X220 notebook (i5) the framerate jumps all over the place randomly, sometimes its running at 60FPS, sometimes it randomly dips down to 30FPS, back up to 40FPS... there really seems to be little logic behind it as the computer is not doing anything else. In all cases the performance graph always attributes it to system lag.

I've posted the game in its current state online at:

http://privatelifeband.com/oside/

And I've put an unbaked copy of the game code from the 'lib' folder in a ZIP file at:

http://privatelifeband.com/oside/lib.zip

Two questions-

1. Can somebody external please try the game out and tell me if they experience anything similar.

2. Can anyone see anything obvious I doing wrong in my code?

1. I experience pretty severe lag when playing your game. It seems to freeze for a few seconds at a time, then get better for a while, then freeze up some more, and repeat.

Editted for spelling.

Well, I'm glad its not just me, but I'm at a complete loss now as to how to fix this issue now.

I've done a bit of reading on JS/HTML5 games stuttering and the only plausible advice I could see was regarding garbage collection. At first I thought it was the birds I was drawing, so I optimized the code to prevent creating/deleting birds, no luck. I removed the birds altogether and still no luck.

In the end I started coding from scratch again learning from earlier mistakes and optimizing it quite a bit. The draw times did decrease to around 4-6ms but it seems that even stripping the game back to absolute bare basics (5 entites at all times, no music, no birds, no rain, nothing remotely interesting), optimizing my tilesets and code it still stutters every few seconds.

http://www.privatelifeband.com/oside2 (with rain, thunder, lightning, birds, music)
http://www.privatelifeband.com/oside2stripped (without anything interesting)

I'm slowly reaching the conclusion JS/HTML5 is just too slow to handle something like this. The only PC I can get this to run smoothly on consistently is the i7-3960x which I can't realistically expect everyone to own. Every other computer I try this game on stutters randomly- sometimes it will run perfectly on a computer for 30 seconds or more (draw times of 2-5ms, system lag of 3-4ms) which makes me think my code is fine, and then for no apparently reason it reverts to stuttering every few seconds again with lag up to 33ms or more at times.

Am I fighting a pointless battle, and should I just give up and develop this in something else?

I have no issues whatsoever on latest Chrome and Firefox 21.0. But I have an i7 3770k. The only visible lag is a short jitter every now and then when the GC kicks in, but it doesn't last long.

How about creating a webGL enabled build and then re-test using that one? What specifications are you targeting?

I am afraid that looking at your code would be a too long task, but one thing is sure : the 'random' behaviour you are experimenting is due to the garbage collector. We quite cannot guess when it will happen since its mechanism is quite complex, nor can we know how long it will wait. (Chrome might use 7 garbage collections to finally reclaim the tougher 'disposed' memory).
We only know that the less garbage, the less lag.
It is not that uneasy to only allocate generation 1 garbage = var declarations and function calls.
So you most probably are allocating / 'forgetting' far too many objects in all of your game loops.
Too many new / { } / [ ] / slice / splice / shift / ... / bind / ...
Re-use your objects/arrays as much as you can and all that should disapear.

About your game :
the bad i must talk about : putting misleading bonuses (some hearts leads you to death) is a big issue imho.
Improve the accuracy of the 'am-i-on-a-platform?' computation to avoid frustating the player when he should have landed and still gets a game over.
Give more sight so we can oversee obstacles.
The music is great, and i played quite several times with a smile : classic-but-amazing.
Keep on going and post if you have news.

Thanks for the feedback. The misleading bonuses were actually going to be a pathway to a second game involving falling through clouds, but I kinda got stuck on the stuttering and never got around to that part.

I'm going to go back to the start again and test it on a low end notebook at every step to see if I can get rid of this problem while begin VERY cautious about memory allocation. Fingers crossed.

Quote from dddaaammmooo
I'm going to go back to the start again and test it on a low end notebook at every step to see if I can get rid of this problem while begin VERY cautious about memory allocation. Fingers crossed.

That sounds like a lot of work. If it were me, I'd slowly start pulling things out of your game, like the birds for example. And checking how it performs with each new change you make. Chances are you'll find that after one of the change you make, it will suddenly start running smoothly, and bam, now you know what was causing it.

HTML / JS is more than capable when trying to pull off high speed code.

Take a look at Score Rush, which even implements WebGL and 4 play online multiplayer in a bullet hell.

https://turbulenz.com/games/scorerush-mp

They throw thousands of draw calls and particles on screen at once, without even a hint of slow down.

@DaveVoyles That was a nice find. Its very impressive what they have accomplished with that codeset. How did you find them?

As far as objects go, there is too great a tendency by many to create multiple entities/objects for everything for death scenes, animating 'giblets', adding dust clouds, etc... Its always best to work and rework your objects/entities.

I tried to click on the top link but the game is no longer there. I guess it was taken down.