2D Animating

Newbie & Debugging Questions
#1

I seem to be really bad at it… I’ve tried various different approaches using arrays of bufferedImages looping through, but nothing seems to work out very well. I’ve been tring to replicate the character walking in the old pokemon games on the gameboy, but that is very hard! I’ tried to record it and play it in slow-motion just see it frame-by-frame and I have no idea how it fit’s together code-wise with the image-switches and when they are done.

When walking sideways there is two different pictures, but vertically there is three :L So, I’d really like to read somehting about how this should be done “correctly”. “Killer game programming” didn’t really have too much on this topic… Anything… Articles, books, videos :stuck_out_tongue:

Oh, and if you know how that pokemon walking works, please shout it out loud :smiley:

#2

For basic 2d animations you need 1 array with all of the images.
Then for each animation sequence you need an int array of frame numbers.
You loop over the int array for the current animation sequence and use the value as the index for the image array.

#3

The other piece of this is the timing. How long will each frame stay up on the screen before changing to the next frame. In your main game loop, you will get the time for a loop and pass it to your animation. The animation will add up all the time until the frames duration is reached. Then you increase you frame number. When you reach you max frame number you set it back to zero and start the loop all over again.
I have examples here: http://www.abberkeep.us/projects/game/gameBase.htm

#4

Sprite Sheets and BufferedImage arrays is the way to go so it looks like you are on the right track.
Not familiar with Pokemon walking but this is a nice tutorial for walking Animation in general:
http://www.manningkrull.com/pixel_art/tutorials/walking.asp

Having the skills to do it is an entirely different matter… You have my full sympathy as am struggling with this too as we speak!!

#5 
public class Animation {
	public int millisPerFrame = 128;
	public boolean playing;

	private final boolean loop;
	private final Image[] frames;
	private int time;
	private int frameIndex;

	public Animation (Image[] frames, boolean loop) {
		this.frames = frames;
		this.loop = loop;
	}

	public void reset () {
		time = 0;
		frameIndex = 0;
	}

	public boolean update (int delta) {
		if (!playing) return true;
		time += delta;
		while (playing && time < millisPerFrame) {
			time -= millisPerFrame;
			frameIndex++;
			if (frameIndex == frames.length) {
				if (loop) {
					frameIndex = 0;
				} else {
					frameIndex--;
					playing = false;
					return true;
				}
			}
		}
		return false;
	}

	public void draw (int x, int y) {
		frames[frameIndex].draw(x, y);
	}
}
#6

Where should the animation-code be? The object thats animated?

#7

I think you use it as super-class of your character.

#8

So you’d have an animation class and extend that? I’ve been thinking about having an animation class, where all the objects that needs animation, make their own objects of animation…

I know this is a little off topic, but I’d rahter not create a new topic just for this:
How do you guys know what classes should be used as parameters for which classes? For example you can have a map, and something controlling entities so you create that class with the map as parameter - because they need to know where they can be… But what if the map needs to do something based on where the entities are? The map doesn’t know about entities, because the entities have the map as parameter and not the other way around?

#9

I would put the Animation class inside your sprite (your character class). If you keep the Animation separated from your character class, you gain the flexability to change the type of Animation, plus you have the ability to add multiple animations (e.g. one for walking, one for running, and right and left of those). In your character, you determine which animation to use. Use a vector to control the characters direction and speed, and thus the animation to use.

EX: pseudo code

if (direction.isRight()) {
    use AnimationRight.
}
else if (direction.isLeft()) {
   use AnimationLeft.
}
#10

That is going to update each loop, right? Do you have the animation running all along, or how do you make sure you draw the right animation?

#11

Do you want the EXACT same movement from Pokemon?
In the new Games you can look in the directions if you push once the button.
But in the old games you immediately walk if you push the Move Button.
Which one do you want?

#12

The one used in ruby and that epoch… I’ve looked at silver movement though, because I thought they were the same :o

#13

[quote]That is going to update each loop, right? Do you have the animation running all along, …
[/quote]
If you use code like Nate posted you would add an Animation field to your character, maybe call it currentAnimation. Then in the characters update you call currentAnimation.update(delta), and do the same with draw in the characters draw function.

[quote]… or how do you make sure you draw the right animation?
[/quote]
A simple solution is whenever the players performs an action that code would set the characters currentAnimation.
This way could have problems if the animations can be interrupted by the players action so you would need to use transitions or some type of queuing if that’s a problem.

#14

Ok you ask if the Player push ONCE a MovementButton.
So if he use DOWN you set a Variable LastDirection=1 in your KeyPressed Event. (1=Downlooking 2=Uplooking aso).

In your drawAnimation Method you ask if a MovementButton was pusehd ONCE and which was the last Direction.
This way you can do it that your character can look around without going around.

If he pressed the MovementButton you increment a Variable. If the variable reach a spexific value show the first animation and then the next and so on. If it reach some point reset it or if the player release the key.

#15

Ey Mads! :slight_smile:

Ok cool, something I hope I can explain to you! :slight_smile:

I struggled with this at first too, but I found some animation tutorials that helped me INCREDIBLY. They can be found at zetcode.com/tutorials/javagamestutorial/

In animation, it’s reliant on the timer for updatin the graphics on the screen. When ever the timer reaches it’s intervals at the given times, it must execute and/or process the following tasks:

  1. to paint all the images on the screen by means of the repaint() method
  2. update any variables where necessary, such as time, etc…
  3. any other extras you may have added.

To animate the players character, its quite a simple process: increment the array point, of the array of images for simulating the person moving, by one through the interval of the update from the timer and when it redraws everything, according to the direction the character is facing.

Read those tutorials and keep in mind what I mentioned, I’m sure it’ll help! :slight_smile:
Keep well

#16

Via state variables in the animatable objects.

Consider this possibility: make a Interface called something like Animatable, and have it include an UpdateAnimation() method. Have every object being animated implement this interface. The animation software calls the UpdateAnimation() method of every object once per frame. The UpdateAnimation() method in the object being animated relies exclusively on “State” variables in that object to determine what to do that frame cycle.

For example if you have a state variable (boolean?) for “ascending” set to true, you refer the counter for the ascending graphic sprite sequence, if you are moving “left” or “right” you refer to those counters instead.

Game events can and probably should be set up to affect the state variables of Animatable objects, nothing more. Let the UpdateAnimation() method handle the specifics of what to do, given the state.

The animation software (that calls all the Animatable objects) will need to be able to reference an array of type Animatable[] to cycle through. It could be some code that has a Timer or that uses a game loop, and could also hold this array itself. Or an Animatable[] could also be located on the object(s) that you use for displaying, such as the game board itself. Lots of variations on this theme.

I think using an Interface for animation is better than Extending an animation object. You get a lot more flexibility–anything that you want to animate can use the interface, whereas it might not make sense to extend some wildly different objects all from the same parent object.

#17

Thanks for the replies guys. It helped me lots 8)