Wheel lags/freezes while spinning

[lafkpages]

I'm using this library in a game and I just updated from Winwheel 1.0.1 to 2.8.0 and the wheel started to freeze while it was spinning. This only happened when I updated Winwheel.js.

There are no errors in the console.

I downloaded Winwheel.js locally from DougTesting.net:

<script src="/winwheel-2.8.0/Winwheel.min.js" defer></script>

I'm also using TweenMax 2.0.2 from here:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js" defer></script>

The game is here. If you go to the shop and do the daily spin (you can only do this once every 24h though) you can see it lag.

I also made a screenrecording here

[zarocknz]

Hi, I looked at the video and yes the animation is very rough.

Winwheel.js 1.x is almost completely different than the 2.x versions. In the 1.x it only was able to rotate an image on canvas, whereas the 2.x version does a lot of math to code-draw the segments, text, and even the pointer if you add that in.

The performance depends a lot on the processing power of the device as that determines how many frames it can render per second. A number of people asked me about being able to have multiple spinning wheels on a page at the same time but I never released that feature because testing revealed that the animation performance gets very bad very quickly.

I had a look though the code of your site and from what I can understand it seems there is some sort of game engine in there also binding events to the before and after "tick" of an animation loop. Seems every before/after tick some 'bodies' are moved and a camera is updated which will no doubt be adding to workload during the animation cycle.

Not sure if also during the actual tick besides the Winwheel there is other things been drawn on the screen by the game engine?

If you were using Winhweel 1.x before then the wheel must have been an image rather than code drawn. Can you please experiment with using a image wheel and see if the performance improves?

Or can you please double-check and try disabling as much as possible from the tick events of the engine when the wheel is spinning. In the video I did not see any other objects or camera changes on the canvas with the wheel so is there animation happening on another canvas at the same time by the game engine?

Thanks.