hadoken
Guest |
Quote
|
| 2021-04-01 13:03:59 |
|
I would like to animate transformations of an object with javascript over time but frame rate independently.
My following example code seems to work fine so far. But I'm not sure if this is the proper way to do so. What do you think? Please let me know & thanks for your opinions!
var Delta_Time_Last_Update = Date.now();
var Delta_Time_Now = 0;
var Delta_Time = 0;
var cube = ccbGetSceneNodeFromName("cubeMesh1");
var cuberot = ccbGetSceneNodeProperty(cube, "Rotation");
function onFrameDrawing()
{
Delta_Time_Now = Date.now();
Delta_Time = (Delta_Time_Now - Delta_Time_Last_Update) / (1000/60);
Delta_Time_Last_Update = Delta_Time_Now;
cuberot.y = cuberot.y + (1 * Delta_Time);
if (cuberot.y >= 360) {cuberot.y = 0; }
////////////////////////////////////////////////////////////////////////////////////
// uncomment the following line for simulating lower frame rate:
// if (cuberot.y >=200) {Delta_Time = Delta_Time * 0.5; }
////////////////////////////////////////////////////////////////////////////////////
ccbSetSceneNodeProperty(cube, "Rotation", cuberot);
print("Rotation: " + cuberot);
print("Delta Time: " + Delta_Time);
if (cuberot.y >= 360) {cuberot.y = 0;}
}
ccbRegisterOnFrameEvent(onFrameDrawing);
|
smnmhmdy
Registered User |
Quote
|
| 2021-04-01 13:23:04 |
|
I don't know if what I do is over simplifying, But you can calculate the delta time just by subtracting last frame time by current frame's.
function fTime(){
this.currentTime = new Date().getTime();
Time.deltaTime = this.currentTime - Time.lastTime;
Time.lastTime = this.currentTime;
Time.Time = this.currentTime - Time.startTime;
if(Time.deltaTime > 1000) // if you want to cap the frame time
Time.deltaTime = 1000;
}
Most engines return ~0.0166 deltatime at 60 fps, which seems to be the same value using this function.
|
hadoken
Guest |
Quote
|
| 2021-04-01 14:59:57 |
|
Thanks @smnmhmdy, your simplified version logically sounds good to me although I'm still struggling with how to use it with my example. Maybe you could give me some more details.
1.) So, how would my example use your code snippet?
2.) Would my first approach also do the job judged from your expertise?
|
hadoken
Guest |
Quote
|
| 2021-04-01 15:27:20 |
|
my updated suggestion to question 1.) which also seems to work very well:
var cube = ccbGetSceneNodeFromName("cubeMesh1");
var cuberot = ccbGetSceneNodeProperty(cube, "Rotation");
var lastTime = 0;
function onFrameDrawing()
{
// delta time handling:
absTime = new Date().getTime();
deltaTime = (absTime - lastTime) / 1000;
lastTime = absTime;
cuberot.y = cuberot.y + (100 * deltaTime);
//
if (cuberot.y >= 360) {cuberot.y = 0; }
////////////////////////////////////////////////////////////////////////////////////
// uncomment the following line for simulating lower frame rate:
// if (cuberot.y >=200) {deltaTime = deltaTime * 0.5; }
////////////////////////////////////////////////////////////////////////////////////
ccbSetSceneNodeProperty(cube, "Rotation", cuberot);
print("Rotation: " + cuberot);
print("deltaTime: " +deltaTime);
if (cuberot.y >= 360) {cuberot.y = 0;}
}
ccbRegisterOnFrameEvent(onFrameDrawing);
|
smnmhmdy
Registered User |
Quote
|
| 2021-04-01 16:12:01 |
|
Yup that looks good. Although you can multiply the deltaTime by 0.0625 to roughly match the speed before implementing frame independence...
// delta time handling:
absTime = new Date().getTime();
deltaTime = (absTime - lastTime) * 0.0625;
lastTime = absTime;
cuberot.y += 1 * deltaTime;
However if you don't care about the speed difference, generally multiplying it by some number like 0.1 would be better since multiplications are executed faster than divisions :)
|
){kind=link}