Request Animation Frame Causing massive jank?

Ashley

It's been boggling my mind a bit why i was getting janks on almost every device and browser and used the firefox dev tools to see if I could find any reason. Every other second i get a massive fps drop from about constant 60fps to 4-8fps.

I don't really know what to make of this but there is something causing massive jank and I doub't it's V-sync related. It seems to happen very regularly, pretty much every time the 15 frame walk animation repeats, or when other animations run.

Here are links to a few more screenshots:

https://www.dropbox.com/s/zaos0s7mwu3as ... 3.JPG?dl=0

https://www.dropbox.com/s/zrnqn94mbamlm ... 5.JPG?dl=0

Do you have any idea what can be causing this and how to reduce it? It happens on almost every device i test on (that is not super powerful)

It seems to be related to animations and animationframes. Maybe a bug that should be reported?

The request animation frame time is where the c2 runtime is running through your events once to tell the graphics card what to draw to give to the browser for the next frame of your game. If the whole process takes more than 16 ms then you will have jank.

There are 3 main things that can cause a super long animation frame request.

An issue in your events at this time like an loop issue or a huge parsing sorting array issue or performing a calc on 100 objects at once etc , ie something that will hang up the CPU.

Or

An event that is producing a lot of sprites all at once, big sprites, or lots of sprites with effects all at once like in a for loop. Basically something that will hang up the GPU.

Or

Something running in the browser on a different tab or another program running on the pc that is accessing resources or network every couple of seconds eg YouTube streaming video or your

face book or email update. even Spotify playing in background will cause

regular janking as the pc or browser prioritises this operation over the animation frame request.

I think....

If you are seeing exactly the same timing on different devices then it sounds like an events or graphics thing. Maybe disable some of animation s you think and test performance again.

NetOne turning off animations completely seems to work. I was able to narrow it down to being the action set animation play from beginning that was doing it. BUT the problem is why. I can not, not use that action.

Maybe I'm using it incorrectly? Does it have to be used in a trigger?

Anyway it seems like every time the animation starts over or loops the jank appears.

I haven't really explored animation yet in construct 2/3 so am a bit in the dark on this but set animation definitely sounds like something you want in a trigger or trigger once sub event as otherwise you might be asking for multiple repaints of the same thing , especially if the animation is looping, which could cause a gpu hangup. But I'm just speculating.

Even setting the animation in a trigger produces the jank. The odd thing is that it starts after a little while.

Just moving around the character. A few seconds it's perfect no janks. Then after a little bit A massive jank and then regular janks ever 1.5 seconds or so.

It really bothers me as the game otherwize runs very smootly, even on lower end phones but the janks, I can't find a reason for.

With set animation as trigger instead.

Ashley Any insigt on this?

It looks like the jank comes from a "Create object" action. My best guess is that you are creating an object that is not already placed on the layout, so does not have textures pre-loaded when the layout starts. This means when you create it, the engine is forced to load its WebGL textures on-demand the moment it is created, which is very expensive and can definitely cause jank. This is why you should take advantage of layout-by-layout texture loading, which uses the fact an object is initially placed on a layout as a signal to pre-load it. (You can destroy it on start of layout if it doesn't need to be there initially, but must be placed on the layout for Construct to pre-load it.)

Ashely Thanks for the reply.

Usually you get a warning if the object is not in layout right?

I do have a layout called "hidden" where I place some objects that is used across several layouts. I use that hidden layout so I wouldn't get the warning about no instances. Could it be that hidden layout causing it?

I never play on this hidden layout, it just holds object that are not available or layoutstart for the map.

Ashely It seemed to help a bit actually. Removed all the objects form the hidden layout.

I'm curious though if this is the case for Global Layers as well? Can you use a hidden global layer to automatically preload common objects that are used across multiple layouts? Will they preload correctly, or do you have to manually place the objects that needs to preload in their respective layout?

ASHLEY.

Fixing the preload fixed most of the jank, but I'm still getting some janks from time to time. This time not from create object. It's from this.

You know what to make of this? Render cells? Force own texture? or something else? Or just an artifact of preview? It doesn't happen all the time, but it's quite noticeable when it does with recurring hickups during the span of a couple of seconds. I'm trying to mitigate it as much as possible. Since I'm doing a fast paced online multiplayer you don't really want janks in life and death situations :p

Any help appreciated.

Usually you get a warning if the object is not in layout right?

No, that's a different thing - there must be an instance of the object somewhere in the entire project to be able to create it.

Separately, there must be an instance on the layout for it to be pre-loaded. If you create an object that is not pre-loaded, there is no warning, it just silently loads it on the spot, which often janks.

As for the other issue, I'm afraid my telepathic debugging has its limits and I don't know. Try making a minimal repro.

Ashley

I'm getting the jank on any project any machine.(More noticeable and frequent on slower machines) Even the endless runner template running on my powerful iMac at work. So I'm wondering what it could be.

Here's a screenshot of endless runner with similar jank on the iMac.. They happen occasionally, and seems to be WebGL related.

Reproduction Steps.

1. Run Endless runner template.

2. Just keep it running for a while.

3. Every now and then you will notice a small jank.

4. Try again and record what's happening with dev tools.

So I'm wondering if this is an artifact of WebGL? It's not that big of an issue, but just a bit annoying, since games run really well otherwize. Pretty much constant 60fps.

Nothing worth crying about but just wanted to highlight it, if it's something caused by the runtime.

Hi tunepunk

Is this when previewing from C3 or when playing actual hosted/nwjs

i have found there is a huge difference in jank between C3 preview and actual hosted/nwjs

NetOne It's nothing major.

Not as much, but it happens. I just thought I would highlight it, in case it was some kind of bug, or something that could be improved. No big deal really.

The trace looks like it's updating the text object and there's an unusually long WebGL operation to update a texture. Endless Runner is fairly unique in having an every-tick-changing-text which will hit the text updating code regularly. It's strange if it's normally fast though, since it's doing the same thing every frame, so it's odd if one frame is suddenly longer. It could be the browser going off to do GC or something, or maybe even the graphics driver suddenly choking for some reason. Not sure...

Does this only happen in Firefox? It says Gecko in the trace in places. Is it better in Chrome/Edge/Safari?

Ashley yes this happens in chrome as well. I just tested the endless runner example in chrome, on a fairly good iMac. I just left it running and every now and then I get a pretty heavy jank.

3.4 GHz Intel Core i5

24 GB 1600 MHz DDR3

NVIDIA GeForce GTX 775M 2048 MB

So that's why i found it odd. It seemed to happen across several devices and browsers, so no idea what it could be. A very lightweight game like that shouldn't have any janks on that powerful machine.

Using the debugger in Chrome and recording performance, I get Major GC, and DOM GC on the spikes, so i guess it's some garbage collection?