How to use KeyListener to paint different images?

Question

this is just my JFrame file. I want to paint down.png when my character moves down, paint up.png when my character moves up, etc. I've been browsing for some time, and I can't quite find a solution for my problem. If someone could either link me to an answer, or provide one, that would be great!

Here is my code:

package Michael;

import java.awt.Canvas;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;

public class MyCanvas extends Canvas implements KeyListener
{
int myX = 100;
int myY = 100;

BufferedImage down;
{
    try
    {
        down = ImageIO.read(new File("Images/down.png"));
    }

    catch (IOException e)
    {
        System.out.println("Cannot find image file.");
    }
}

BufferedImage downrun;
{
    try
    {
        downrun = ImageIO.read(new File("Images/downrun.png"));
    }

    catch (IOException e)
    {
        System.out.println("Cannot find image file.");
    }
}

BufferedImage left;
{
    try
    {
        left = ImageIO.read(new File("Images/left.png"));
    }

    catch (IOException e)
    {
        System.out.println("Cannot find image file.");
    }
}

BufferedImage right;
{
    try
    {
        right = ImageIO.read(new File("Images/right.png"));
    }

    catch (IOException e)
    {
        System.out.println("Cannot find image file.");
    }
}

BufferedImage runleft;
{
    try
    {
        runleft = ImageIO.read(new File("Images/runleft.png"));
    }

    catch (IOException e)
    {
        System.out.println("Cannot find image file.");
    }
}

BufferedImage runright;
{
    try
    {
        runright = ImageIO.read(new File("Images/runright.png"));
    }

    catch (IOException e)
    {
        System.out.println("Cannot find image file.");
    }
}

BufferedImage swoosh;
{
    try
    {
        swoosh = ImageIO.read(new File("Images/swoosh.png"));
    }

    catch (IOException e)
    {
        System.out.println("Cannot find image file.");
    }
}

BufferedImage swordraise;
{
    try
    {
        swordraise = ImageIO.read(new File("Images/swordraise.png"));
    }

    catch (IOException e)
    {
        System.out.println("Cannot find image file.");
    }
}

BufferedImage up;
{
    try
    {
        up = ImageIO.read(new File("Images/up.png"));
    }

    catch (IOException e)
    {
        System.out.println("Cannot find image file.");
    }
}

BufferedImage uprun;
{
    try
    {
        left = ImageIO.read(new File("Images/uprun.png"));
    }

    catch (IOException e)
    {
        System.out.println("Cannot find image file.");
    }
}

public MyCanvas() // The MyCanvas constructor.
{
    this.setSize(600, 400);
    this.addKeyListener(this);
    this.setBackground(Color.WHITE);
    this.setFocusable(true);
}

public void paint(Graphics g)
{
    g.drawImage(down, myX, myY, 55, 55, null);
    g.drawImage(left, myX, myY, 55, 55, null);
    g.drawImage(right, myX, myY, 55, 55, null);
    g.drawImage(up, myX, myY, 55, 55, null);
} // I don't want to draw every image at the same time, I only want to draw 'up', when the charcter is moving up, etc.

public void moveIt(KeyEvent e)
{
    switch(e.getKeyCode())
    {
        case KeyEvent.VK_DOWN:
            myY += 10;
            break;
        case KeyEvent.VK_UP:
            myY -= 10;
            break;
        case KeyEvent.VK_LEFT:
            myX -= 10;
            break;
        case KeyEvent.VK_RIGHT:
            myX += 10;
            break;
        case KeyEvent.VK_SHIFT:

    }

    repaint();
}

@Override
public void keyPressed(KeyEvent e)
{
    moveIt(e);
}

@Override
public void keyTyped(KeyEvent e)
{
    // TODO Auto-generated method stub
}

@Override
public void keyReleased(KeyEvent e)
{
    // TODO Auto-generated method stub
}
}

Much appreciated!

Answer 1

Check out the Motion With Key Bindings example from Motion Using the Keyboard. This examples shows how to do animation using Key Bindings (which is the better solution) not a KeyListener.

Understand the basic concept first because you will need to make changes:

1. The existing code moves a Component. You would want to change that to be a JLabel (with an Icon).

2. When creating the Actions you currently just specify the x/y values you want the Component to move. Now you will need to create the Actions with the x/y values AND an Icon, so you can change the Icon to be painted with every direction change.

3. The move(...) method will need to be modified to accept the Icon and then change the Icon of the JLabel component.