# Help with animation

Hello All,

I need some help with writing code to animate a logo smoothly onto the
screen.

The logo can be drawn by using a function say, DrawLogo(frame, x,y), where
’frame’ is the current frame of the logo, x and y are top left co-ordinates
of the logo.
The logo moves through 16 frames and cycles back to frame 1 after frame 16.
All its animations are complete within 16 frames.
It begins somewhere beyond the edges of the screen at frame 1.
My problem is: How to get the logo moving smoothly onto the screen from
beyond the edges?

We can make assumptions as to the resolution of the screen, the BPP values
and the colour depth.

Regards,
Smitha.

It’s not exactly clear what specific challenge you are facing, however if I
can take a guess, I’d tell you that you have to remember to crop blitting
operations to the dimensions of your destination surface. This means
specifying a source rectangle to SDL_BlitSurface() that only includes the
visible portion of the picture you are blitting (a single frame of your
animation.) The particulars of the algorithm will depend on how you
structure your animation data: are multiple frames of animation packed into
a single surface, or is each frame on its own individual surface?

Hope this helps :)On Thu, Jun 24, 2010 at 3:28 AM, Smitha Rathnam <rathnam.smitha at gmail.com>wrote:

Hello All,

I need some help with writing code to animate a logo smoothly onto the
screen.

The logo can be drawn by using a function say, DrawLogo(frame, x,y), where
’frame’ is the current frame of the logo, x and y are top left co-ordinates
of the logo.
The logo moves through 16 frames and cycles back to frame 1 after frame 16.
All its animations are complete within 16 frames.
It begins somewhere beyond the edges of the screen at frame 1.
My problem is: How to get the logo moving smoothly onto the screen from
beyond the edges?

We can make assumptions as to the resolution of the screen, the BPP values
and the colour depth.

Regards,
Smitha.

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

Smitha Rathnam wrote:

Hello All,

I need some help with writing code to animate a logo smoothly onto the
screen.

The logo can be drawn by using a function say, DrawLogo(frame, x,y),
where ‘frame’ is the current frame of the logo, x and y are top left
co-ordinates of the logo.
The logo moves through 16 frames and cycles back to frame 1 after frame
16. All its animations are complete within 16 frames.
It begins somewhere beyond the edges of the screen at frame 1.
My problem is: How to get the logo moving smoothly onto the screen from
beyond the edges?

We can make assumptions as to the resolution of the screen, the BPP
values and the colour depth.

Regards,
Smitha.

“Smooth” may be tough to accomplish because you’re moving from offscreen
to onscreen in 16 steps.

You may be able to achieve apparent smoothness at 16 frames per second,
but that implies the whole offscreen to onscreen transition is
accomplished in 1 second, which is rather abrupt.

If you’re just trying to move a static image smoothly from offscreen to
onscreen see how it looks moving it one pixel at a time. It will be
smooth as glass, but if it’s too slow, then try 2 pixels etc until you
find the right balance between speed and smoothness.

Ok, you have to problems, one is that you are animating the logo (at a
very high speed actually) and two that you are moving the logo.

So, first get the logo to animate in one place and then move it
around. BTW just because you have 16 frames for the logo do not make
the mistake of thinking you have to change the logo frame every time
the video frame updates. If you did that and the video is updating at
60 frames per second the logo would run through all its frames in
0.027 seconds, rather fast.

They’re a good introduction to how to do animation in SDL 1.2 and they
apply to SDL 1.3. They cover all the basics that you need to address
to do what you want done.

Bob Pendleton.On Thu, Jun 24, 2010 at 2:28 AM, Smitha Rathnam <rathnam.smitha at gmail.com> wrote:

Hello All,

I need some help with writing code to animate a logo smoothly onto the
screen.

The logo can be?drawn by using a function say, DrawLogo(frame, x,y), where
’frame’ is the current frame of the logo, x and y are top left co-ordinates
of the logo.
The logo moves through?16 frames and cycles back to frame 1 after frame 16.
All its animations are complete within 16 frames.
It begins somewhere beyond the edges of the screen at frame 1.
My problem is: How to get the logo moving smoothly onto the screen from
beyond the edges?

We can make assumptions as to the resolution of the screen, the BPP values
and the colour depth.

Regards,
Smitha.

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

±----------------------------------------------------------

I would recommend animating the frame very differently from how you want to
do it. I’d do this:

struct animate {
int sx, sy; // Start position
int x, y; //Position to get to/if the animation is done
int tx, ty; // Translated coordinates of the surface
Uint32 ms; // Time it should take to finish this animation
}

You tell the logo to get to a certain coordinate in a certain amount of
milliseconds (keep it independent of the frames…frame dependency is a very

Here how I would do it:
animate animation[5]; // 5 Step animation
animation[0].x = x; animation[0].y = y; animation[0].done = 0;
animation[0].ms = 500;
animation[0].tx = 0; animation[0].ty = 0;
// … for all animations

int doAnimation( animate *animations, int num, int *step, SDL_Surface
*surface, float framerate ) {
// calculate magnitude for x and y
float mx = 0.0f, my = 0.0f;
float dist = sqrt( (animations[*step].sx+animations[*step].x)^2 -
(animations[*step].sy+animations[*step].y)^2 ); // For some reason, I think
my distance formula is off - I haven’t had to use it in a while, so just
double check it…
mx = (animations[*step].tx - animations[*step].x) / dist;
my = (animations[*step].ty - animations[*step].y) / dist;
float distperframe = (framerate / 1000);
animations[*step].tx += mx * distperframe;
animations[*step].ty += my * distperframe;
// Blit here…
if( ( animations[*step].tx == animations[*step].x ) && (
animations[*step].ty == animations[*step].y ) ) {
*step++; if( *step >= num ) *step -= num;
return 0;
}
return 1;
}

I haven’t tested that code at all, so there is bound to be some problems
with it, but at least it’s a starting point.
Here is how you’d use it:

int step = 0;
float fr = 0.0f;
Uint32 startframe = 0;
while( 1 )
startframe = SDL_GetTicks();
if( ( doAnimation( &animation[0], 5, &step, surface, fr ) == 0 ) && (
steps == 5 ) ) {
break;
}
fr = ( (float)(SDL_GetTicks() - startframe) * 100 ) / 6; // or *1000)/60

}

I hope that is at least a start for you,
-AlexOn Thu, Jun 24, 2010 at 11:39 AM, Bob Pendleton wrote:

Ok, you have to problems, one is that you are animating the logo (at a
very high speed actually) and two that you are moving the logo.

So, first get the logo to animate in one place and then move it
around. BTW just because you have 16 frames for the logo do not make
the mistake of thinking you have to change the logo frame every time
the video frame updates. If you did that and the video is updating at
60 frames per second the logo would run through all its frames in
0.027 seconds, rather fast.

They’re a good introduction to how to do animation in SDL 1.2 and they
apply to SDL 1.3. They cover all the basics that you need to address
to do what you want done.

Bob Pendleton.

On Thu, Jun 24, 2010 at 2:28 AM, Smitha Rathnam <rathnam.smitha at gmail.com> wrote:

Hello All,

I need some help with writing code to animate a logo smoothly onto the
screen.

The logo can be drawn by using a function say, DrawLogo(frame, x,y),
where
’frame’ is the current frame of the logo, x and y are top left
co-ordinates
of the logo.
The logo moves through 16 frames and cycles back to frame 1 after frame

All its animations are complete within 16 frames.
It begins somewhere beyond the edges of the screen at frame 1.
My problem is: How to get the logo moving smoothly onto the screen from
beyond the edges?

We can make assumptions as to the resolution of the screen, the BPP
values
and the colour depth.

Regards,
Smitha.

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

±----------------------------------------------------------

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

Hi Alex,

Thanks a ton for the help !!
It is definitely a good starting point for me. I had some questions:

1. By framerate, do u mean “frames per second”? I am not clear about the
"fr" calculation. Why divide by 6 or 60?
2. What does “translated coordinates of the surface” mean?

Thanks and regards,
Smitha.On Fri, Jun 25, 2010 at 2:18 AM, Alex Barry <alex.barry at gmail.com> wrote:

I would recommend animating the frame very differently from how you want to
do it. I’d do this:

struct animate {
int sx, sy; // Start position
int x, y; //Position to get to/if the animation is done
int tx, ty; // Translated coordinates of the surface
Uint32 ms; // Time it should take to finish this animation
}

You tell the logo to get to a certain coordinate in a certain amount of
milliseconds (keep it independent of the frames…frame dependency is a very

Here how I would do it:
animate animation[5]; // 5 Step animation
animation[0].x = x; animation[0].y = y; animation[0].done = 0;
animation[0].ms = 500;
animation[0].tx = 0; animation[0].ty = 0;
// … for all animations

int doAnimation( animate *animations, int num, int *step, SDL_Surface
*surface, float framerate ) {
// calculate magnitude for x and y
float mx = 0.0f, my = 0.0f;
float dist = sqrt( (animations[*step].sx+animations[*step].x)^2 -
(animations[*step].sy+animations[*step].y)^2 ); // For some reason, I think
my distance formula is off - I haven’t had to use it in a while, so just
double check it…
mx = (animations[*step].tx - animations[*step].x) / dist;
my = (animations[*step].ty - animations[*step].y) / dist;
float distperframe = (framerate / 1000);
animations[*step].tx += mx * distperframe;
animations[*step].ty += my * distperframe;
// Blit here…
if( ( animations[*step].tx == animations[*step].x ) && (
animations[*step].ty == animations[*step].y ) ) {
*step++; if( *step >= num ) *step -= num;
return 0;
}
return 1;
}

I haven’t tested that code at all, so there is bound to be some problems
with it, but at least it’s a starting point.
Here is how you’d use it:

int step = 0;
float fr = 0.0f;
Uint32 startframe = 0;
while( 1 )
startframe = SDL_GetTicks();
if( ( doAnimation( &animation[0], 5, &step, surface, fr ) == 0 ) && (
steps == 5 ) ) {
break;
}
fr = ( (float)(SDL_GetTicks() - startframe) * 100 ) / 6; // or *1000)/60

}

I hope that is at least a start for you,
-Alex

On Thu, Jun 24, 2010 at 11:39 AM, Bob Pendleton wrote:

Ok, you have to problems, one is that you are animating the logo (at a
very high speed actually) and two that you are moving the logo.

So, first get the logo to animate in one place and then move it
around. BTW just because you have 16 frames for the logo do not make
the mistake of thinking you have to change the logo frame every time
the video frame updates. If you did that and the video is updating at
60 frames per second the logo would run through all its frames in
0.027 seconds, rather fast.

They’re a good introduction to how to do animation in SDL 1.2 and they
apply to SDL 1.3. They cover all the basics that you need to address
to do what you want done.

Bob Pendleton.

On Thu, Jun 24, 2010 at 2:28 AM, Smitha Rathnam <@Smitha_Rathnam> wrote:

Hello All,

I need some help with writing code to animate a logo smoothly onto the
screen.

The logo can be drawn by using a function say, DrawLogo(frame, x,y),
where
’frame’ is the current frame of the logo, x and y are top left
co-ordinates
of the logo.
The logo moves through 16 frames and cycles back to frame 1 after frame

All its animations are complete within 16 frames.
It begins somewhere beyond the edges of the screen at frame 1.
My problem is: How to get the logo moving smoothly onto the screen from
beyond the edges?

We can make assumptions as to the resolution of the screen, the BPP
values
and the colour depth.

Regards,
Smitha.

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

±----------------------------------------------------------

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

“Framerate” is a rate of frames. A frame is a new picture, and a rate
is how many you get in a given *time period. If you get (60 frames) /
(60 seconds) that is a frame rate, but everyone would just say (1
frame) / (1 second), or 1 FPS for short.

A rate by analogy can include something besides time in the
denominator, especially when there can be a relationship between time
and this other denominator of rate. For example: “One security camera
every block,” or "Four non-binding resolutions for each time our
representatives convene."On Thu, Jun 24, 2010 at 8:24 PM, Smitha Rathnam <rathnam.smitha at gmail.com> wrote:

1. By framerate, do u mean “frames per second”? I am not clear about the “fr” calculation. Why divide by 6 or 60?

To simplify what Donny said, the rate is how much time elapses per frame
fr = ( (float)(SDL_GetTicks() - startframe) * 100 ) / 6; // or *1000)/60 …
In the above code, first, you should know that SDL_GetTicks() returns the
number of milliseconds since SDL was initialized. By subtracting
SDL_GetTicks() from startframe (SDL_GetTicks() at the beginning of the
rendering code), we can calculate how many milliseconds went by in one
frame. By *100/6, that is the simplified code of *1000/60. *1000 translates
the milliseconds into seconds (as we want data in regards to frames per
"second"), and divide by 60, because that will give us the frame time in
terms of one second. Now, when fr is multiplied by a number, it should be a
rate independent movement” (there is a good gamedev article on it).

I hope that helps,
-AlexOn Thu, Jun 24, 2010 at 8:48 PM, Donny Viszneki <donny.viszneki at gmail.com>wrote:

On Thu, Jun 24, 2010 at 8:24 PM, Smitha Rathnam <rathnam.smitha at gmail.com> wrote:

1. By framerate, do u mean “frames per second”? I am not clear about the
"fr" calculation. Why divide by 6 or 60?

“Framerate” is a rate of frames. A frame is a new picture, and a rate
is how many you get in a given *time period. If you get (60 frames) /
(60 seconds) that is a frame rate, but everyone would just say (1
frame) / (1 second), or 1 FPS for short.

A rate by analogy can include something besides time in the
denominator, especially when there can be a relationship between time
and this other denominator of rate. For example: “One security camera
every block,” or “Four non-binding resolutions for each time our
representatives convene.”

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

I am just guessing, but why do you need timers for framerate-independent movement?
Can’t you just do something like this:

#define DEFFPS 56 //The default framerate (frames per second)

int fps = 32; //The current framerate (frames per second)

#define SPEED(x) (DEFFPS*x/fps) //Convert speed in pixels per frame in default framerate to pixels per frame in current framerate.

and then use it like:

x+=SPEED(3);
y-=SPEED(4);

This way you specify a speed value which is independent of framerate.
At least this is what I do in my games.On June 25, 2010, at 4:03:58.00, Alex Barry wrote:

To simplify what Donny said, the rate is how much time elapses per frame
fr = ( (float)(SDL_GetTicks() - startframe) * 100 ) / 6; // or *1000)/60 …
In the above code, first, you should know that SDL_GetTicks() returns the number of milliseconds since SDL was initialized. By subtracting SDL_GetTicks() from startframe (SDL_GetTicks() at the beginning of the rendering code), we can calculate how many milliseconds went by in one frame. By *100/6, that is the simplified code of *1000/60. *1000 translates the milliseconds into seconds (as we want data in regards to frames per “second”), and divide by 60, because that will give us the frame time in terms of one second. Now, when fr is multiplied by a number, it should be a consistent increase per second. For more information, you can google “frame rate independent movement” (there is a good gamedev article on it).

I hope that helps,
-Alex

On Thu, Jun 24, 2010 at 8:48 PM, Donny Viszneki <donny.viszneki at gmail.com> wrote:
On Thu, Jun 24, 2010 at 8:24 PM, Smitha Rathnam <rathnam.smitha at gmail.com> wrote:

1. By framerate, do u mean “frames per second”? I am not clear about the “fr” calculation. Why divide by 6 or 60?

“Framerate” is a rate of frames. A frame is a new picture, and a rate
is how many you get in a given *time period. If you get (60 frames) /
(60 seconds) that is a frame rate, but everyone would just say (1
frame) / (1 second), or 1 FPS for short.

A rate by analogy can include something besides time in the
denominator, especially when there can be a relationship between time
and this other denominator of rate. For example: “One security camera
every block,” or “Four non-binding resolutions for each time our
representatives convene.”

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

You can limit the frame rate, it’s true, but I don’t think it’s ever a good
idea to put a fixed framerate in a game - if a computer isn’t able to get up
to that frames per second, then the game/animation will look horrible
(unless the default is really low, in which case, it won’t look as good as
it could).
But I suppose that all depends on what sort of specs the game/application is
being directed at.

Thanks for the alternative, though, Kiklani. I gave it a bit of a bad
review, but it is a good alternative.
-AlexOn Fri, Jun 25, 2010 at 2:09 AM, Kikolani wrote:

I am just guessing, but why do you need timers for framerate-independent
movement?
Can’t you just do something like this:

#define DEFFPS 56 //The default framerate (frames per second)

int fps = 32; //The current framerate (frames per second)

#define SPEED(x) (DEFFPS*x/fps) //Convert speed in pixels per frame in
default framerate to pixels per frame in current framerate.

and then use it like:

x+=SPEED(3);
y-=SPEED(4);

This way you specify a speed value which is independent of framerate.
At least this is what I do in my games.

On June 25, 2010, at 4:03:58.00, Alex Barry wrote:

To simplify what Donny said, the rate is how much time elapses per frame
fr = ( (float)(SDL_GetTicks() - startframe) * 100 ) / 6; // or *1000)/60

In the above code, first, you should know that SDL_GetTicks() returns the
number of milliseconds since SDL was initialized. By subtracting
SDL_GetTicks() from startframe (SDL_GetTicks() at the beginning of the
rendering code), we can calculate how many milliseconds went by in one
frame. By *100/6, that is the simplified code of *1000/60. *1000 translates
the milliseconds into seconds (as we want data in regards to frames per
"second"), and divide by 60, because that will give us the frame time in
terms of one second. Now, when fr is multiplied by a number, it should be a
rate independent movement” (there is a good gamedev article on it).

I hope that helps,
-Alex

On Thu, Jun 24, 2010 at 8:48 PM, Donny Viszneki <donny.viszneki at gmail.com>wrote:

On Thu, Jun 24, 2010 at 8:24 PM, Smitha Rathnam <rathnam.smitha at gmail.com> wrote:

1. By framerate, do u mean “frames per second”? I am not clear about the
"fr" calculation. Why divide by 6 or 60?

“Framerate” is a rate of frames. A frame is a new picture, and a rate
is how many you get in a given *time period. If you get (60 frames) /
(60 seconds) that is a frame rate, but everyone would just say (1
frame) / (1 second), or 1 FPS for short.

A rate by analogy can include something besides time in the
denominator, especially when there can be a relationship between time
and this other denominator of rate. For example: “One security camera
every block,” or “Four non-binding resolutions for each time our
representatives convene.”

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org