2d wheel animation ideas?

[Matej]

Ok now i have one sprite of the wheel.

I rotate the sprite in the update function, with property "wheel.rotation += 0.0200;".

When i set the angle of the wheel to 0 on spin action and run the ball animation. Almost every time on the angle is different. I guess it depends on the browser and code optimization for the update function.

Is there a way to rotate the sprite exactly every time? So i can calculate the angle, so that the ball falls in at the right number?

Maybe with time based animation?

 

Any suggestions?

[alex_h]

Yes, you should try making the radians quantity added to the rotation on each update be proportional to the number of milliseconds elapsed since the previous update call.

function update(delta){
   wheel.rotation += 0.02 * delta;
}

One way of tracking this is by calling Date.now() in your state update

state.create = function(){
   this.currentTime = Date.now();
}

state.update = function(){
   var oldTime = this.currentTime;
   this.currentTime = Date.now();
   var delta = this.currentTime - oldTime;
   wheel.update(delta);
};