You can load more than one image, perhaps one of the character running, and display the second one when the character is moving. This is a very generic question, hence very generic advice. I believe that there is an animated GIF library if you want to use that...

I've already made the sprites myself, but I haven't been able to figure out how to make the code work properly to show the transition from the standing sprite to a moving sprite when using keyPressed(). That's what I need help with ^^;;

What do you have?

2. PImage bg;
3. PImage jeds;
4. PImage jedp;
5. Jed jed;
6. Animation jedR;
7. float xpos;
8. float ypos;
9. float drag = 30.0;
10. int numFrames = 4;
11. int frame = 0;
12. PImage[] images = new PImage[numFrames];
13. 
    
14. 
    
15. void setup() {
16.  
17.   size(300,150);
18.   frameRate(4);
19.   bg = loadImage("bg.png");
20.   jed = new Jed(10, 80, 10);
21.   jedR = new Animation("jedrunfull", 4);
22.   jeds = loadImage("jed.png");
23.   jedp = loadImage("jedpunch.png");
24.   ypos = height * 0.25;
25.   
26. }
27. 
    
28. void draw() {
29. 
    
30.  background(bg);
31.  jed.keyPressed();
32.  jed.display();
33.  }
34.  
35.    
36. 
    
37. 
    
38. class Jed {
39. 
    
40.   int dx, dy;
41.   int moveSpeed = 5;
42.   
43.   Jed(int tempXpos, int tempYpos, int tempSpeed) {
44.    
45.    dx = tempXpos;
46.    dy = tempYpos;
47.    moveSpeed = tempSpeed;
48.     
49.   }
50. 
    
51. 
    
52. void keyPressed() {
53.  
54.   if(key == 'w') {dy-=moveSpeed;}
55.   if(key == 'd') {dx+=moveSpeed;}
56.   if(key == 'a') {dx-=moveSpeed;}
57.   if(key == 's') {dy+=moveSpeed;}
58. 
    
59.    }
60. 
    
61. void display() {
62.  
63.  image(jeds,dx,dy);
64.   
65. }
66. 
    
67. }
68. 
    
69. class Animation {
70.   
71.   PImage[] images;
72.   int imageCount;
73.   int frame;
74.   
75.   Animation(String imagePrefix, int count) {
76.    
77.     imageCount = count;
78.     images = new PImage[imageCount];
79.     
80.     for(int i = 0; i < imageCount; i++) {
81.      // Use nf() to number format 'i' into four digits
82.      String filename = imagePrefix + nf(i, 4) + ".gif";
83.      images[i] = loadImage(filename);
84.       
85.     }
86.     
87.   }
88.   
89. void display(float xpos, float ypos) {
90.  
91.  frame = (frame+1) % imageCount;
92.  image(images[frame], xpos, ypos);
93.   
94. }
95. 
    
96. 
    
97.   
98. }

That's all I have so far. 

You should have started by showing your code... I almost moved the topic to the General Discussion (the place I move questions without any code to show... so quite generic).

Some general remarks:
- wsad is a popular, but bad keyboard configuration for playing, for those without a Qwerty keyboard, like myself (French keyboard, Azerty configuration)... Better use UP, DOWN, etc. keys.
- You call the class' keyPressed() method from draw(). It is OK if you want continuous move while you press the key, but then at least test the keyPressed variable! The key variable keeps its value even when the key is released...

" show the transition from the standing sprite to a moving sprite when using keyPressed()"
What kind of transition is it? How would you do this, expressed in simple English? That's part of the specification, which is an important step in programming: knowing precisely where you going.

Perhaps you need a global state telling draw() to call either the standing sprite class' display() method or the moving sprite class' display one.
Or perhaps you just need one class to handle the sprite, that internally manage this state and choose the method to do the display. Will be better, since the keyboard handling part is common to both.

Mmm, so basically I have one picture for normal standing, but when the character moves, I want to switch to the animation of him running. I've tried a few things before, but when it loads it shows the picture underneath the normal standing picture. I want to figure out how to get the standing picture to become the running animation, with the running one replacing the standing one.

Hopefully that paints a clearer picture of what I want to do.

when a animated figure walks, let's say you have 3 images where it walks or runs.

let's say you have 1 or two when it stands (looking around e.g.)

now like in a movie, when running you want to show one image after the other and after three go back to number one.

It's called the frames of the movement.


How to do it

you have a 2D array, fill it with pictures

first dimension is the kind of movement, e.g. walkLeft, walkRight, stand, fall, shootLeft, shootRight

1. // actions for the sprite
   
2. final int actionNone      = 0 ;
3. final int actionStopper   = 1 ;
4. final int actionExplode   = 2 ;
5. final int actionParachute = 3 ;
6. final int actionNuke      = 4 ;
7. 
   
8. // the text for that; must be exact same values as above
9. final String actionString  [] = {
10.   "None", "Stopper", "Explode", "Parachute", "Nuke",
11.   "None", "None", "None", "None", "None"
12. };
13.  
14. int currentMovement = actionNone;  // current action

2nd is the current frame within this type of movement, just have frameCount++

1. image ( images [currentMovement] [frameCount], xPos, yPos);

when the number of frames is different for different types of movement (as in my example) have another array giving you this maximum

maxFrames [currentMovement]

So you can say

1. frameCount++;
2. if ( frameCount > maxFrames [currentMovement] )
3. {
4. frameCount = 0;
5. }

Change the type of movement

When it now comes to usage of wasd or cursors, you change the
currentMovement and set frameCount = 0;

When you shoot or stop or fall as well: change the
currentMovement and set frameCount = 0;


Hope this helps.

Greetings, Chrisir   

For  something like this I'd use a simple 'flag' to indicate which animation frames to show - part pseudocode for clarity....

Boolean flagRunning;
int iFrame
....

in the draw loop...

if running key pressed set flagRunning to true else set flagRunning to false

if(flagRunning) animate_frames();
      else static_frame()

then....

void animate_frames(){

      show frame iFrame
      increment iFrame
}

void static_frame(){

      show standing frame

}

As long as you clear the background in your draw loop this will work. The static frame could be a series of frames - characters in video games often display movement even when 'standing still'.

sorry, I just looked at your code a little longer.

these lines (line 63):

1.   void display() {
2.     image(jeds, dx, dy);
3.   }

I think mean that the player stands.

You could have a global var boolean playerStands and switch it true or false when needed.
Whenn player runs, using animation, say

1. playerStands = false;

Then say

1.   void display() {
2.     if (playerStands) {
3.       image(jeds, dx, dy);
4.    }
5.   }

Alternatively, have a global var carrying the current type of movement and ask:

1. void display() {
2.     if (currentMovement == actionStands) {
3.     image(jeds, dx, dy);
4.    }
5.   }

As said above, if your running character is animated by using an animated Gif, you need the gifAnimation library to properly handle it.
Alternatively, make several images, load them and display them in sequence.
Or make a sprite sheet and use get to extract the images to display.

sorry, mine and not_55's post came in at the same time...

@PhiLho: a sprite sheet is used here: http://www.openprocessing.org/sketch/56124

Ohhhh, thanks for all the advice! I'll try and incorporate all that and see if I can get it to work.