Why can't i animate the image that's being painted and make animation with a key listener?

Question

I can't animate spaceship.png nor update the image to animate it.
Need to animate it using paint method (could animate it using ImageIcons and labels) in order to rotate. So, rewritten it but now i can't even update its' current position.

How can i make animation with a key listener ?
Why can't i animate the image that's being painted?


public class MyPanel extends JPanel implements KeyListener{
    
    final int PANEL_WIDTH = 1920;
    final int PANEL_HEIGHT = 1080;
    Image spaceship;
    Image spaceship2;
    Image spaceship3;
    Image Alien1;
    Image Alien2;
    Image AlienBoss;
    Image Asteroid1;
    Image Asteroid2;
    Timer timer;
    int xVelocity = 1;
    int yVelocity = 10;
    int x = 0;
    int y = 0;
    
    
    MyPanel(){
        this.setPreferredSize(new Dimension(PANEL_WIDTH,PANEL_HEIGHT));
        this.setBackground(new Color(0x080e12));
        this.addKeyListener(this);
        spaceship = new ImageIcon("D:\\Users\\Xigmatek\\eclipse-workspace\\SpaceGameRev\\src\\spaceship.png").getImage();
    }
    public void paint(Graphics g){
        
        super.paint(g);
        Graphics2D g2D = (Graphics2D) g;
        g2D.drawImage(spaceship, x, y, null);

        
    }
    @Override
    public void keyTyped(KeyEvent e) {
        // TODO Auto-generated method stub
        
    }
    @Override
    public void keyPressed(KeyEvent e) {
        switch(e.getKeyCode()) {
            case 87: x -=xVelocity;
            repaint();  
            break;
        
            case 83: x +=xVelocity;
            repaint();  
            break;
        }
        
    }
        
    
    @Override
    public void keyReleased(KeyEvent e) {
        // TODO Auto-generated method stub
        
    }
    
}

Sorry if i have pasted too much of code but am kind of newbie so, sorry :/

*"Sorry if i have pasted too much of code.."* In some senses too little, as opposed to too much. [Edit] to post a [mre]. 1) Drop the image number to one. Get it working for one and it should be clear how to make it work for others. 2) Add `import` statements and a `main` method which puts it on-screen. 3) One way to get image(s) for an example is to hot link to images seen in [this Q&A](http://stackoverflow.com/q/19209650/418556). E.G. The code in [this answer](https://stackoverflow.com/a/10862262/418556) hot links to an image embedded [here](https://stackoverflow.com/q/10861852/418556). .. — Andrew Thompson, Jun 05 '21 at 11:38
**General tips:** 1) Common problems with using `KeyListener` result from a) the component is not focusable b) the component does not have focus. 2) For Swing, we typically use [key bindings](https://docs.oracle.com/javase/tutorial/uiswing/misc/keybinding.html) rather than the lower level `KeyListener`. 3) For any `JComponent` (`JPanel` is one of them) override the `paintComponent(Graphics)` method, not `paint(Graphics)`. Then change `super.paint(g);` to `super.paintComponent(g);`. 4) `g2D.drawImage(spaceship, x, y, null);` Change `null` to `this` and ensure `x` & `y` change for each paint! — Andrew Thompson, Jun 05 '21 at 11:39

picky potato · Accepted Answer · 2021-06-06T03:53:35.627

The problem with the JPanel you created is that it is not focusable, i.e it does not register key events, it can be fixed with a simple line of code setFocusable(true), and I noticed that you update the frame only once the space ship moves, but it is always a good practice to update it once every 60'th of a second, or any frames per second, you can do this by implementing ActionListenerand passing the class to a Timer.

and I changed the keys to their respective variable(VK_W and VK_S)

Here is the updated code

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;

// in order to repeat after set delay, the class shall implement Action Listener and pass it to a timer(shown below)
public class MyPanel extends JPanel implements KeyListener, ActionListener {

    final int PANEL_WIDTH = 1920;
    final int PANEL_HEIGHT = 1080;
    Image spaceship;
    Image spaceship2;
    Image spaceship3;
    Image Alien1;
    Image Alien2;
    Image AlienBoss;
    Image Asteroid1;
    Image Asteroid2;
    Timer timer;
    int xVelocity = 1;
    int yVelocity = 10;
    int x = 0;
    int y = 0;


    MyPanel(){
        this.setPreferredSize(new Dimension(PANEL_WIDTH,PANEL_HEIGHT));
        this.setBackground(new Color(0x080e12));
        this.addKeyListener(this);
        // set this JComponent focusable so that it can register keyEvents 
        setFocusable(true);
        spaceship = new ImageIcon("res\\spaceship.png").getImage();
        // pass this class to the timer to repeat after 1000/60 eth of a second(60 fps)
        Timer timer = new Timer(1000/60, this);
        timer.start();
    }
    public void paint(Graphics g){

        super.paint(g);
        Graphics2D g2D = (Graphics2D) g;
        g2D.drawImage(spaceship, x, y, null);


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

    }
    @Override
    public void keyPressed(KeyEvent e) {
        // I changed 87 and 83 to their respective VK value
        switch(e.getKeyCode()) {
            case KeyEvent.VK_W: x -=xVelocity;
                repaint();
                break;

            case KeyEvent.VK_S: x +=xVelocity;
                repaint();
                break;
        }

    }


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

    }
    // Override this method from ActionListener
    @Override
    public void actionPerformed(ActionEvent e){
        repaint();
    }
}

Please watch this video, I demonstrated the output in this video.

By the way, you used w and s for horizontal movement(gamedev advice).

1) Don't use a KeyListener. Swing was designed to be used with Key Bindings. See: [Motion Using the Keyboard](https://tips4java.wordpress.com/2013/06/09/motion-using-the-keyboard/) for more information and working examples. 2) Don't use magic numbers. People may not know what "87" and "83" are. Use the variables provided by the API: `KeyEvent.VK_UP` or whatever. — camickr, Jun 05 '21 at 14:43

Why can't i animate the image that's being painted and make animation with a key listener?

1 Answers1