How to deal with flickering?

I am playing a bit with Snap but I noticed heavy flickering, when I run my silly example full screen:


I read a bit about browsers and vsync and found this side:

www vsynctester com

I am wondering why scrolling the whole image in the test page runs smoother than moving a tiny ball in my simple Snap program? Is there something fundamentally wrong with my program? I am using "glide" with a 16x16 sprite 25 times per second.

Have you shared your project?

Yes but I am not allowed to include a link.

Can't see anything on your profile


I have not published it, because it is not worth to be published. But I have shared it. If you add the URL fragment to the base URL of the server, you will see it.

I can't access anything unfortunately :frowning:

It works. I tried it in a private window. But you have to add base URL in front:

You were probably adding it to the editor url, which uses different parameters as the community site page.

I thinking that using glide to (presumabley) move small distances in small time units might be the main cause.

I was :slight_smile:

But I had also a version with "go to" instead of "glide". I did not notice much difference. In this particular case it might be possible to glide straight to the border in one step. But my next project should be some kind of tank game with parabolic trajectory. What else but small steps can be used for that?

Try just setting direction and moving maybe?

When I use Snaps rotation, the sprite with its Phong shading gets rotated, which does not make sense in this case.

aah - good point

Then I'd stick with using goto then

Snap! threads are synchronized to the browser animation loop@60FPS (usually).
Every loop iteration imposes 17ms delay.
With the "frame duration" 40ms, you add extra delay. Sprite glides 40ms then stays in place for 17-33ms.
With the "goto" you may reduce the ball increment to get the same speed.

The "timer" has 100ms resolution. For game logic use PingPong script pic (5)

The "increment" is comparable to the size of the ball, so the movement may be perceived as jittered.

Dont use empty "else", it adds an extra yield (17ms).
PingPong script pic (3)

PingPong script pic (4)


Thanks! I was not aware of that. This simplifies the problem and all my timer calculations are completely useless. A simple forever loop is just enough.

2024-02-13 09_32_44-Snap! 9.2.5 – Mozilla Firefox

BTW: I do not understand the option "Thread safe scripts". Is it safe to do the above or do I have to activate the option? It seems to work without activating the option.

And: where can I find this duration function?

It's a user function. Export as XML or script pic. Then import into your project.

It means non-reentrant hat script. The default policy is to break pending, long-running scripts started by a hat block if a new script is about to start. "Safe" means that the script runs until it is completed, but a new script is blocked.

Even with the most basic example it seems to be impossible to get below 16ms. And the flickering is still insane. Example:

I am not convinced that Snap implements Vsync properly as explained here.

Yes, it's the interframe delay @ 60FPS. Every iteration of the loop yields at the end, i.e., waits till the next "requestAnimationFrame()"

Snap! throttles the max frame rate to 67, so it's possible to have a frame duration of ~15 ms, though you must have a computer that works with 67 frames per second. If your computer frame rate is above that it is throttled by (currentFrameRate / Math.ceil(currentFrameRate / 67)). For example, if your computer frame rate is 100, it is throttled to 50. If 150, it becomes 50 too. If 120, it becomes 60.