Java-Gaming.org    
Featured games (79)
games approved by the League of Dukes
Games in Showcase (477)
Games in Android Showcase (107)
games submitted by our members
Games in WIP (535)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  2D Animating  (Read 1966 times)
0 Members and 1 Guest are viewing this topic.
Offline Mads

JGO Ninja


Medals: 26
Projects: 3
Exp: 6 years


One for all!


« Posted 2011-04-11 22:32:41 »

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 Tongue

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

Offline zoto

Senior Member


Medals: 4



« Reply #1 - Posted 2011-04-11 23:08:24 »

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.
 
Offline aazimon
« Reply #2 - Posted 2011-04-11 23:55:40 »

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
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline steveyO
« Reply #3 - Posted 2011-04-12 00:42:42 »

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!!

https://play.google.com/store/apps/details?id=com.bullsquared.alggame Annoying Little Gits (Android)
www.bullsquared.com   Play java (applet) games! www.chessclockpro.com Free Online Chess Clock
Offline Nate

JGO Kernel


Medals: 145
Projects: 4
Exp: 14 years


Esoteric Software


« Reply #4 - Posted 2011-04-12 02:42:31 »

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
12  
13  
14  
15  
16  
17  
18  
19  
20  
21  
22  
23  
24  
25  
26  
27  
28  
29  
30  
31  
32  
33  
34  
35  
36  
37  
38  
39  
40  
41  
42  
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);
   }
}

Offline Mads

JGO Ninja


Medals: 26
Projects: 3
Exp: 6 years


One for all!


« Reply #5 - Posted 2011-04-12 08:19:57 »

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

Offline ReBirth
« Reply #6 - Posted 2011-04-12 13:57:37 »

Where should the animation-code be? The object thats animated?
I think you use it as super-class of your character.

Offline Mads

JGO Ninja


Medals: 26
Projects: 3
Exp: 6 years


One for all!


« Reply #7 - Posted 2011-04-12 15:13:39 »

Where should the animation-code be? The object thats animated?
I think you use it as super-class of your character.

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?

Offline aazimon
« Reply #8 - Posted 2011-04-12 20:10:22 »

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
1  
2  
3  
4  
5  
6  
if (direction.isRight()) {
    use AnimationRight.
}
else if (direction.isLeft()) {
   use AnimationLeft.
}
Offline Mads

JGO Ninja


Medals: 26
Projects: 3
Exp: 6 years


One for all!


« Reply #9 - Posted 2011-04-13 10:01:45 »

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
1  
2  
3  
4  
5  
6  
if (direction.isRight()) {
    use AnimationRight.
}
else if (direction.isLeft()) {
   use AnimationLeft.
}


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?

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline GustavXIII

Junior Member


Projects: 1



« Reply #10 - Posted 2011-04-13 12:23:53 »

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?
Offline Mads

JGO Ninja


Medals: 26
Projects: 3
Exp: 6 years


One for all!


« Reply #11 - Posted 2011-04-13 23:41:44 »

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?

The one used in ruby and that epoch.. I've looked at silver movement though, because I thought they were the same Shocked

Offline zoto

Senior Member


Medals: 4



« Reply #12 - Posted 2011-04-14 02:50:04 »

Quote
That is going to update each loop, right? Do you have the animation running all along, ...
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?
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.

Offline GustavXIII

Junior Member


Projects: 1



« Reply #13 - Posted 2011-04-14 11:26:22 »

The one used in ruby and that epoch.. I've looked at silver movement though, because I thought they were the same Shocked

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.
Offline N15M0

Senior Newbie





« Reply #14 - Posted 2011-04-18 10:23:05 »

Ey Mads! Smiley

Ok cool, something I hope I can explain to you! Smiley

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! Smiley
Keep well
Offline philfrei
« Reply #15 - Posted 2011-04-19 00:38:13 »

...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?
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.

"Greetings my friends! We are all interested in the future, for that is where you and I are going to spend the rest of our lives!" -- The Amazing Criswell
Offline Mads

JGO Ninja


Medals: 26
Projects: 3
Exp: 6 years


One for all!


« Reply #16 - Posted 2011-04-19 11:34:48 »

Thanks for the replies guys. It helped me lots  Cool

Pages: [1]
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

E.R. Fleming (6 views)
2014-07-29 03:07:13

E.R. Fleming (3 views)
2014-07-29 03:06:25

pw (38 views)
2014-07-24 01:59:36

Riven (39 views)
2014-07-23 21:16:32

Riven (26 views)
2014-07-23 21:07:15

Riven (28 views)
2014-07-23 20:56:16

ctomni231 (59 views)
2014-07-18 06:55:21

Zero Volt (50 views)
2014-07-17 23:47:54

danieldean (42 views)
2014-07-17 23:41:23

MustardPeter (44 views)
2014-07-16 23:30:00
HotSpot Options
by dleskov
2014-07-08 03:59:08

Java and Game Development Tutorials
by SwordsMiner
2014-06-14 00:58:24

Java and Game Development Tutorials
by SwordsMiner
2014-06-14 00:47:22

How do I start Java Game Development?
by ra4king
2014-05-17 11:13:37

HotSpot Options
by Roquen
2014-05-15 09:59:54

HotSpot Options
by Roquen
2014-05-06 15:03:10

Escape Analysis
by Roquen
2014-04-29 22:16:43

Experimental Toys
by Roquen
2014-04-28 13:24:22
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!