Jerky animation image sprite on canvas

Good morning to all,

let’s see if I get an answer today. :wink:

My problem: During an animation of “flaps”, the animation of another image sprite is jerky.

I only use one clock to open the flaps, leave them open for a while and then close them again.

You can control the ball with a “touchpad”.

But the moment the flaps open or close, the ball jerks.
Without the animation, the ball moves smoothly.

I have attached a sample file.

Maybe someone can give me some advice this time?
Thanks a lot

Jerky.aia (127.9 KB)

Many thanks for the answer. That helped me alot.

Don’t be like that as many users don’t have a clue how to work with canvas and animations (I’m one of them), so unfortunately you have to wait until right person gets online, @Italo something you can take a look at.

Secondly, your aia doesn’t contain any src folder and thereby no one will be able to help you

Latest release bug, workaround


Thanks for the note on the file. I uploaded it again.

I took a little look at your aia.
The lagging is caused by your timer block. But as I can see you done it very well in my opinion.
I can’t find a way to make this up/down spriteanimation blocks shorter . Even if you raise the clock interval the lagging occurs. Maybe someone else got an idea. My only solution would be to search for another way to implement your “hole” animation. maybe this: Phase • Animations made easy!
edit: updated link

1 Like

Thank you for taking the time to look into my file.
In my understanding, animations are made in exactly this way, controlled by a clock with changing images.
Or am I wrong?


1 Like

Your code is okay.
I played around with your aia, and the only solution I found was a workaround:
Set the canvas bg to transparent and let your animation play on the screen background. For that you will have to make full size frames with all your “holes” on a bg.
But I am sure you wish to use your “holes” later as an active element, e.g. when the ball collides with a hole it disapears in it.
So this workaround won’t help you.
Ok, maybe you place another invisible sprites right on the places of your bg-holes an let them do the work. But this may be another big task to syncronize them with the animated bg on different screen resolution. But I believe this is possible with some calculations. You will get the idea.

1 Like

I shortened it a little bit. I took the loop out, because the “Klappe” sprites all got the same image as Klappe1. But not better, the lagging stays. When you have just one “Klappe” it works so far, but if you add more it starts lagging on ball movement. I think the touch event listener of the canvas causes that as it starts lagging when you touch down and maybe through that the frame images don’t load fast enough .
Just a guess.

1 Like

Hi Django,
First of all, thank you for taking the time to look at the files.

I ran tests based on your suggestions.
I change: Now every “Flap” has his own Clock and i reduce the “ticks” of the clock.
Now it seems to work better
Thank you for your food for thought! :+1:

I am attaching the changed file.

Jerky2.aia (223.0 KB)


1 Like

I tried Juan_Antonio’s GIF extension (Kodular version) from here
It’s easy to use, but the lagging is much more.
JerkyAlso.aia (279,0 KB)

Yeah, Jerky2 is much better! :+1:
Strange, because it uses nearly the double amount of blocks as my version that uses the gif extension.

1 Like

Based on Django’s suggestions, I tested something else.
I have now added a little delay. Now it runs almost smoothly.
It seems as if 2 simultaneous animations and the movement of a “game object” is the maximum that a device can process without jerking.

I have attached the file as an example. Maybe someone can use it.
A big thank you to Django for taking the time!

Jerky3.aia (225.4 KB)