Game is lagging

[voodooEntity]

I experienced serious laggs (both in editor and in exported & browser used via webserver). A friend tested it and had the lags too. Since im trying to build an extended "simple game builder" based on pixelbox, i first guessed it may be because of my advanced collision detection. But since most of the time the test project runs smooth and its just sometimes i can just narrow it down to the pixelbox lib.

Current state:
https://github.com/voodooEntity/2d-tile-engine

Since i try to build a small gamebuilder that should be able to build top down rpg same as plattformer, gamelaggs are pretty lethal to me.

I deployd an export of the code under the following URL:
http://scriptjungle.de/pixelbox/7/

If i can provide you with any more information to narrow the Problem down, please let me know.

[cstoquer]

I don't see anything wrong when testing the demo you provided. I do see few things that could be optimized in your code, but I don't think this is the cause of the problem. Are you testing with more complex data before experiencing lag? What are the specifications of the machine you are testing on?

Here are some techniques to debug performances issues:

• Frame rate can be monitored from the debug console: More tools > Rendering, then enable the FPS meter checkbox. My test shows a steady 60FPS

• You can measure JavaScript performances from the Performance tab of the debug console and record a few seconds of the gameplay. From my test, I can see that the game is using only 6% of the CPU time

One frame is executed in 0.38ms which is good. 60FPS is around 16ms per frame, so this is the limit before the game starts to lag.

• I don't think the rendering is a problem. All the screen should be batched in only one draw call. If you want to inspect the WebGL rendering, I can recommend to use SpectorJS which is a Chrome extension created by the Babylon.js developers.

[voodooEntity]

First of all a big thx for your fast and detailed response!

Since (as my code probably shows) im usually not a Javascript developer there might be a lot of optimizations apart from cleaning the code as it is in an "get shit done" development/tryout state.

• PC Specs
  I doubt my specs are the reason for lagging in this case, especially since at a testing moment with lags i even shut down mostly all other applications running to make sure other things arent interfering the performance. But just for your interrest , CPU : i7-6700k , 16gb RAM , GFX: Geforce 1070 , HDD: Samsung 860 EVO SSD

• FPS
  The FPS displaying already revealed something really interesting. Im working on a Desktop attached with two screens. One of them is running at 144hz , the other one 60hz. What i just realiced after enable the FPS counter, the game will automaticly change the FPS rate based on the HZ of the monitor you drag the window to. While im developing most of the time on the 144hz display i didn't realice this before. Since i bound the movement to the update function this means a significant speed change between the monitors. (screenshots seen below)
  
  

• Testing environment
  To answer your question if im using more elements/data in my lag test case, no i didn't. The lags occured in the exact same code that was deployd at the URL in my previous post and same as the github repository.

• Performance tracking
  Thank you alot for pointing out what i have to look for here. On my way to try to find the bottlekneck creating the lags i stumbled over this performance tab, but it feld kinda counterintuitive and so i stopped using it. I just recorded a couple of seconds and checked the "Animation Frame Fired" Stack execution times. It appreas that most of the frames are done in < 1ms. There are some that go up a little higher (worst case see 2nd image below), but in total it looks fine and considering the 16ms window i got i think it easily should get done all the things im planing to implement so good on this side. (images below, average frame and worst frame)
  
  

• Reproducing the lagging
  As right now the only way to on spot reproduce the bug is (and it may sound stupid but it works) to recieve a Steam Chat message while playing the game. I just tried to make a shadowplay record for better understanding, but for whatever reason shadowplay desktop record is laggy itself so its not relly helpfull, i gonne try give it a shot with OBS later. On looking at the performance analysis for the times the lagging occured i couldnt spot any major differences to the above included screenshots. But (at least right now) i only could reproduce it on the 144hz screen , which as mentioned above runs the game at a 144hz framerate (vsync?).

• Conclusion
  My temporary conclusion is that this primary may be cause due to the framerate behaviour on the 144hz screen. I could in theory fix this by implementing a tickrate and tickrate check in the update function. but there might be a better solution i don't see rn. The Steam Message thing is a consistent way to reproduce it, even tho it doesnt make to much sense to me because even doing things like opening several streams and videos in parallel or doing other heavy load (hdd/gpu/cpu) stuff doesn't seems to affect it (or at least consistently).

[cstoquer]

The different framerate on 144Hz screen is an interesting discovery. I didn't know that Chrome had such behavior. Pixelbox uses requestAnimationFrame to handle the update loop which delegate the refresh rate to the browser. I alway assumed it would max to 60FPS, but as you said, it probably uses vsync. I am now considering adding an option to allow the framerate to be forced to a particular value.

The Steam Message issue is more mysterious. My first guess would be that the app is also using Chronium for its rendering, and for some reasons, it could interfere with other Chronium process? I'm not sure what could be done about that, but I'll try to investigate.

[voodooEntity]

According to the idea of chromium renderer beeing used by steam chat too. The lagging could be reproduced even by deploying it on a webserver (the url i posted before) running it in firefox and recieving steam messages. So it's not bound to "chrome". But since firefox uses a fair amount of chromium elements these days it still might be any intereferance at this level.