Thread: Animation tweening definition/example

Well, alot of people don't understand what "Animation tweening" means, so i decided to write a short but informative thread about what animation tweening does and how it can be usefull to us.

When you have an animation it uses "frames", whether we are talking about 2D or 3D animation there are always these "frames" which drawn after each other create the illusion of animation.

The basic animation system uses a frame for every movement of the character, however, by introducing "tweening" it is possible to add more smooth emotes with less "frames".

Basically;

Instead of using normal "frames", the animation would use "key frames" these frames would be used as the guideline for generating new frames and drawing them in between.

Example;

The following example i wrote for a simple 2D x, y based animation.

Code:

	public void drawAnimation()
	{
		Animation animation; // Let's assume this is already instanced, animation is our animation
		long timeSince = 0;
		int currentFrame = 0;
		while (currentFrame < animation.frames.size())
		{
			if(animation.frames.get(currentFrame).delay <= (System.currentTimeMillis() - timeSince))
			{
				drawFrame(animation.frames.get(currentFrame).x, animation.frames.get(currentFrame).y);
				timeSince = System.currentTimeMillis();	
				currentFrame++;
			}
			Thread.sleep(animation.frames.get(currentFrame).delay);
		}
	}

Whereas this would be an example of a basic tweening system;

Code:

	public void drawAnimation()
	{
		Animation animation; // Let's assume this is already instanced, animation is our animation
		int currentFrame = 0;
		int currentX;
		int currentY;
		while (currentFrame < animation.frames.size())
		{
			if(animation.frames.get(currentFrame).delay <= (System.currentTimeMillis() - timeSince))
			{
				drawFrame(animation.frames.get(currentFrame).x, animation.frames.get(currentFrame).y);
				currentX = 0;
				currentY = 0;
				timeSince = System.currentTimeMillis();	
				currentFrame++;
			} else
			{
				int addX = ((animation.frames.get(currentFrame).x + currentX) > animation.frames.get(currentFrame + 1).x) ? currentX-- : currentX++);
				int addY = ((animation.frames.get(currentFrame).y + currentY) > animation.frames.get(currentFrame + 1).y) ? currentY-- : currentY++);
				drawFrame((animation.frames.get(currentFrame).x + addX), (animation.frames.get(currentFrame).y + addY));
				int largest = (animation.frames.get(currentFrame).x > animation.frames.get(currentFrame).y ? animation.frames.get(currentFrame).x : animation.frames.get(currentFrame).y);
				int sleepTime = (animation.frames.get(currentFrame).delay) / largest;
				Thread.sleep(sleepTime);
			}
		}
				

	}

Please note, the above code may not work, i just wrote it for an example.

__

As you can see, with the above to draw an animation with the old system you would have to have the frames like this;

Code:

frames.add(new Frame(0, 1, 0));
frames.add(new Frame(0, 2, 20));
frames.add(new Frame(0, 3, 20));
frames.add(new Frame(0, 4, 20));
frames.add(new Frame(0, 5, 20));
frames.add(new Frame(0, 6, 20));
frames.add(new Frame(0, 7, 20));

Which would draw the dot going up from pixel 0,0 to 0,7, the delay for the movement would be every 20 milliseconds.

Now, to do the same with the tweening system you would only have to do;

Code:

frames.add(new Frame(0, 1, 0));
frames.add(new Frame(0, 7, 120));

Now, the delay is 120, so devide that by the 5 frames we added plus the last frame itself and that is;

120 / 6 = 20.

Now, the tweening system would draw the exact same animation but using 2 "key frames" not 7 normal frames;

Basically, what "key frame" means is a frame which is needed, it's a key part of the system.

__

How this relates to RuneScape;

Basically, now instead of creating single frames which gives choppy animations, they can create frames and let their client generate the rest of the frames, this means less data is needed to preform the task and less effort.

If anyone wants any more information feel free to ask.

I might right a system to work with the 317 client if i get time.