[F8] Time-based animation class samples?

[Gamebrew]

Can someone please point me to real samples (AS2 classes) where I can see time-based animation of sprites? I hope I'm using the right terminology, its the one where you set your FLA to 120FPS and it will run say 30FPS anywhere. It would be good if the samples included things like movement, animating frames, speed, gravity, easing etc.

I'm going to start investigating making games this way since I always get different FPS results in my games, unless anyone thinks its a bad idea.

Thanks!

[renderhjs]

120 fps is nonsense- it only eats performance the computer might need for other things. Anyway I have something like that for some forumulas based on robert penners easing equations- will dig for it...

[PRadvan]

Not exactly what you're looking for but this does have the theory on using elapsed time to get consistent frame rates.

http://moock.org/asdg/codedepot/moti...meadjusted.fla

[tonypa]

The idea of using time-based movement is not setting swf to run at incredibly high speed (while crashing half the computers of your visitors) and then using only quarter of the cycles to do something in the game. You could run your game at 12fps too, but the idea is that with whatever speed the game is running, the results of the movement are always same.

Knowledgebase sticky has link to tutorials by webgeek about time based movements.

[MikeMD]

time based is still dependent on frame rate.

If you set it to 120 fps ( or any other frame rate ) it still won't run at that frame rate in a browser.
As FPS fluctuate, so will your time based animation.

It may work better in some cases, but basically it's a waste of time.

[ColbyCheeze]

I've been working on a game framework that handles this but it is in AS3. It loads in MCs or tile maps and then converts to bitmapdata and animates at the speed you request...

if anyone wants the source code give me a message...id link it right now but I am waiting until I am done with the entire framework, and then I was going to make some documentations on it before I release to everyone.

[691175002]

time based is still dependent on frame rate.
As FPS fluctuate, so will your time based animation.
It may work better in some cases, but basically it's a waste of time.

That is a contradiction of what time based animation is. Time based animation is completely frame rate independent. Instead of something like:

x += 1;

You could have

x = getTimer() / 1000 * 30;

This is inherently framerate independant, the rate of movement will always be the same no matter how the frame rate fluctuates. This is particularly important for multiplayer games where all computers regardless of speed must stay in sync.

I have never heard of what the opening post is talking about. There is no way to "Guarentee" 30fps. Flash already does its best to ensure constant framerates, it is highly unlikely you will be able to go behind its back and do a better job.

[MikeMD]

That is a contradiction of what time based animation is. Time based animation is completely frame rate independent. Instead of something like:

There is no such thing as frame rate independence. Otherwise we'd never experience any choppines or slowdown in any games, flash or consoles.

Whatever the code is, it can only be executed "once per frame"

put your code on a movie clip and run your movie at 10 fps, and then at 40 fps, the difference will be obvious. The distance covered may be the same, but animation will be choppy at low frame rates. So, it may work better in some situation where this is important ( as in the example you mentioned ) , but it may be worse in some situations.

If you want smooth animation, the only option is still, optimizing to make sure your game runs on your target machine at desired frame rate.

[Gamebrew]

I guess I was wrong. From reading around I thought that advanced Flash game developers were using some method to either skip or smoothly tween frames depending on how fast the computer was going to keep the FPS steady on all browsers. It would also let you create slowdown or speedup effects. I don't remember where, but I saw main loop based on time (difference of last call), and a sprite class that moved, animated and rotated also based on time too.

What I do now is pick 24 FPS while I'm developing, then when ready to publish push it to 31 FPS so the speed matched around what I saw in dev. Does anyone else have this problem? Maybe this is an onEnterFrame vs setInterval type issue?

[tonypa]

put your code on a movie clip and run your movie at 10 fps, and then at 40 fps, the difference will be obvious. The distance covered may be the same, but animation will be choppy at low frame rates.

I feel we may have mixed up 2 completely different things:

*movement speed - object moves from coordinate x1 to x2
*animation speed - how many times per second object is drawn on screen

To quarantee object is moving at same speed with every fps and so in every computer, use time based movement. When played at lower fps, the movement becomes less smooth (choppy) but the object still moves at same speed. So having time based movement does not make the animation play exactly same way, well nothing does, as you commonly redraw the animation at each frame meaning it is drawn at maximum speed the game can handle.

Why is it bad idea to set very high fps for your game? Lets suppose you design game to be run at 120 fps and while testing it in your own super-computer, it achieves fps 100, thats ~80% of desired speed. Now if someone else plays your game with not-so-super-computer, in different browser, with 5 windows opened and multiple Flash ads running on same page, the speed most likely drops to 40-50 fps. So your game is actually played only at ~40% of its original fps, thats huge difference and totally different game experience.

Now if you desing game to be run at 30-40 fps, you still get speed drop when it is played but even if it drops from 30 to 20, still only 10 fps are lost (not 80 fps) which means most players get to play it at nearly same conditions.

[MikeMD]

I feel we may have mixed up 2 completely different things:

Not really, or it could be a matter of phrasing.

The object does not move at same speed with time based animation. Object will end up in approximately the same place after 2 seconds, 5 seconds, etc..

But at low frame rates it will not move at same speed, or move at all, it will make small jumps, that is the choppiness, and it can be very annoying if the frame rate drops down to 10 or under. In real life this doesn't happen, so we cannot use real life formula: "if it covers the same distance in the same amount of time, it's moving at same speed"

If it's important that your object ends up in the same place after certain time, then time based is obviously better, for smoother animation, makes no difference ( I thought that was what the original poster was asking, because he seemed to be interested in a steady frame rate ).

If you need it to create slowdown or speed up effects, it's easy to do. I've used it in a racing game with bitmap sequences for roads, where you set the gearbox, and as gears rev up, you send the road clip to the next frame faster and faster ( and just slow it down when you brake ), You can apply the same thing to anything ( scaling, rotation ).

[691175002]

The object does not move at same speed with time based animation.
Object will end up in approximately the same place after 2 seconds, 5 seconds, etc..

But at low frame rates it will not move at same speed, or move at all, it will make small jumps, that is the choppiness, and it can be very annoying if the frame rate drops down to 10 or under.

The object does always move that the same speed. It doesn't matter how it looks, something like x = getTimer()/1000*30; will always move the object 30 pixels to the right per second. That is practically the definition of frame rate independence.

It doesn't matter that the computer may not render every position along that time. Its speed is constant.

You say that choppiness in time based games is annoying, but its better to be choppy and still playing at the intended speed than choppy and playing at a quarter of the intended speed.

The object does not move at same speed with time based animation. Object will end up in approximately the same place after 2 seconds, 5 seconds, etc..

And how is objects being at the same position at the same times not moving at the same speed? I will point out that your usage of the word approximate is untrue as well, while a frame render may not happen at precisely 2 seconds, when one does it will always be at the same location.


Time based animation does lead to smoother animation as well. It is very possible for spurts of effects to temporarily knock down the FPS substantially. In both cases, the animation will turn choppy, however if its time based movement will not slow down.

You can find a comparison of the two here:
http://www.jmckell.com/drivingp.html#demo
You will notice that while both forms of animation become choppy at low frame rates, time based still completes the trip in the same amount of time, while frame based slows to a crawl.

[MikeMD]

It doesn't matter that the computer may not render every position along that time. Its speed is constant.

That's like saying it wouldn't matter in real life if I were going blind every 200ms, or some some interval like that.

It makes all the difference.

x = getTimer()/1000*30; will always move the object 30 pixels to the right per second

Maybe, because a second is a long time, but it may not move the object same number of pixels every 1/2 a second, or every 1/5 of a second if frame rate drops low enough, and both of those are well within the reaction time of an average human. So speed is not the same, because until it's actually rendered at a new position, it's not moved.

You say that choppiness in time based games is annoying, but its better to be choppy and still playing at the intended speed than choppy and playing at a quarter of the intended speed.

No, I'm saying that time based animation will not improve smoothness or give you more stable frame rates, or the appearance of stable frame rate ( and that is what the original poster wanted ).

My point is that the only way to ensure good gameplay is to optimize for whatever your target machine happens to be, and develop with that in mind. You have to do that either way, time or frame based.

[renderhjs]

here is something I used through Flash 6 till Flash 8:
tween.as

tween = new Object();
tween.objects = new Array();
tween.interpolate = function(t,type){//is the decimal of completenes in time e.g 0.25 is a 1/4 of time
    switch (type) { 
        case 1 : //linear
            return(t);
            break; 
        case 2 : //decceleration
            return(Math.sin(Math.PI/2*t));
            break; 
        case 3 : //acceleration
            return(t*t);
            break; 
        case 4 : //bouncing
            return(1.3*Math.sin(Math.PI/2*t)+0.3*Math.sin(3*Math.PI/2*t));
            break; 
        case 5 : //easing in and out
            //return(0.4*Math.sin(Math.PI*(t-0.5))+0.6);
            return(0.5*Math.sin(Math.PI*(t-0.5))+0.5);
            break; 
        case 6 : //warming up
            //return(0.4*Math.sin(Math.PI*(t-0.5))+0.6);
            return(0.5*Math.sin(Math.PI*(t-0.5))+0.5 - 0.2 * Math.sin(Math.PI*1.5*t)*(1-t));
            break; 
         default : 
            return(t);
     }
}
tween.render = function(){
    for (var i=1;i<=tween.objects.length;i++){
        var trgt= tween.objects[i-1].trgt;
        var prop = tween.objects[i-1].prop;
        var mov = tween.objects[i-1].val_shift;
        var type = tween.objects[i-1].type;
        
        var t = (getTimer()-tween.objects[i-1].s_time)/tween.objects[i-1].duration;
        out2="time: "+t;
        if (t>=1){
            eval(trgt)[prop]= mov + tween.objects[i-1].val_start;
            tween.objects.splice(i-1,1);
            //i=object_tween.length+1;
        }else{
            eval(trgt)[prop]= (tween.interpolate(t,type)*mov + tween.objects[i-1].val_start);
        }
    }
    //output
    for (var i=1;i<=tween.objects.length;i++){
        
        var trgt= tween.objects[i-1].trgt;
        var prop = tween.objects[i-1].prop;
        var mov = tween.objects[i-1].val_shift;
        var t = (getTimer()-tween.objects[i-1].s_time)/tween.objects[i-1].duration;
        //output+="\n- "+tween.objects[i-1].trgt+"."+tween.objects[i-1].prop+", "+int(t*100)+"%";
    }
}
tween.set = function(obj,val,duration,type){
    if (obj.indexOf(".")<>-1) {
        trgt = obj.slice(0, obj.lastIndexOf("."));
        prop = obj.slice(obj.lastIndexOf(".")+1, obj.length);
        //check if already in database
        for (var i=1;i<=tween.objects.length;i++){
            if (tween.objects[i-1].trgt == trgt && tween.objects[i-1].prop == prop){
                tween.objects.splice(i-1,1);
                i=tween.objects.length+1;
            }
        }
        var nr=tween.objects.length;
        
        tween.objects[nr] = new Object();
        tween.objects[nr] = {trgt:trgt,prop:prop,val_start:eval(trgt)[prop],
                            val_shift:(Number(val)-eval(trgt)[prop]),s_time:getTimer(),duration:duration};
        
        

                            
        if (type==null){
            tween.objects[nr].type = 1;//default type of interpolation
        }else{
            tween.objects[nr].type = type;//type of interpolation
        }

    }
} 

in order to let it run in the background you need to assign the render function in a onEnterFrame event like:

_root.onEnterFrame = function(){
    tween.render();
    //do rest stuff that needs to be updated every frame
} 

after you included that on the main timeline (#inlcude "tween.as") or write it down in the most upper layer you can start tweening variables and movieClip attributes with:

tween.set("myMovieClipInstanceName._x",128,500,2); 

wich will tween the movieClip with instance name "myMovieClipInstanceName" and it´s attribute _x (x position) to the position 128 within 500 miliseconds (1000 = 1 scond thus 1/2 second) in the interpolation method 2 (easing decceleration).

what I really like about my method is that it eats the object and it´s property with just 1 string e.g "mc_world.mc_house._xscale". the other thing is that you dont need to specify the start position (wich is so stupid with many other kits) it just tweens starting with the current value. If the framerate drops down the motion gets even spread over the correct time- meaning no delays if the time is out it really gets set to the goal value.
The other thing is that it comes with a manager so it automaticly kicks out jobs that are alredy finished providing a stable performance.

perhaps some other examples:
rotation extend 90°´s within a second (1000 ms) with a bouncing effect (4)

tween.set("mcCirlce._rotation",mcCirlce._rotation+90,1000,4); 

like
http://www.renderhjs.net/bbs/flashki...tate_menu2.swf

tween within textfields or variables like in this case count up from 0 to 1000 and display in the textfield linear (1)

myTextfield.text = 0;//a textfield
tween.set("myTextfield.text",1000,2000,1); 

scale image and center it to screen

var s = 1.8;//scale of 180%
var t = 500;//time in ms
mc._x = Stage.width/2-mc._width/2;
mc._y = Stage.height/2-mc._height/2;
var x = Stage.width/2 - (mc._width*s)/2;
var y = Stage.height/2 - (mc._height*s)/2;
tween.set("mc._width",mc._width*s,t,2);
tween.set("mc._height",mc._height*s,t,2);
tween.set("mc._x",x,t,2);
tween.set("mc._y",y,t,2); 

I even tweend in some demos some physics attributes wich works well with this as well. The only con it now has is that it doesn´t work great with arrays and their values wich are simply not readablie right now but anything else wich is based on numerics can be tweened with this.
If you like it feel free to use it or improve it


some examples I used this for in the past:
http://www.renderhjs.net/bbs/flashki...iso/index2.htm
(works even in custom 3d space)
http://www.renderhjs.net/bbs/mobile/christoph/
even great performance with flash lite 1 & 2 (mobile phones)
http://www.renderhjs.net/bbs/flashkit/tank_move/demo14/
for various effects like the icon hovering, explosions,....
http://www.renderhjs.net/renderhjs/renderhjs_2k7/
for the camera tweens and movement of the character,- again great with custom setups e.g anything that doesn´t work with _x,_y,_width,_rotation,... alone.

[webgeek]

This is a quick and dirty one I did a few years ago. Shows both trajectory and time-based animation with a 30FPS and a 5 FPS example.

http://www.electrotank.com/junk/mike...geting.electro

[691175002]

That's like saying it wouldn't matter in real life if I were going blind every 200ms, or some some interval like that.
It makes all the difference.

You are correct, Going blind would have absolutely no effect on the speed of an object, both real and perceived. The only impact it would have is annoyance.

No, I'm saying that time based animation will not improve smoothness or give you more stable frame rates, or the appearance of stable frame rate ( and that is what the original poster wanted ).

But it does give you the appearance of a stable frame rate when the frame rate may be varying drastically. Take two examples:

A person plays your game on his brand new computer at 40fps, like it a lot, goes to a friends house with a 7 year old PC playing at 20fps. Twenty frames per second is still visually smooth, but suddenly the game is playing in slow motion. Time based fixes this.

Your game has excessive particle effects so every couple of seconds the frame rate hits 15 for a split second. In frame based you would get a disconcerting jolt in the speed or moving objects, time based doesn't have this issue.

Many flash games run as high as 60fps, and you really cant call animation above 20fps choppy, so there is a wide range where time based animation will consistently beat out frame based animation.

Yes, in both cases it is partially the fault of the designer, however unless you have a guaranteed constant frame rate, time based animation will always appear more consistent.