I'm creating a java game. In the game there are a hero and a bubble. The hero is supposed to move when I press the arrow keys and the bubble is supposed to have continuous diagonal movement. When I add the hero or the bubble directly into to the `JFrame` separately I get the desired behavior, but when I add them both I just get a very small square! I tried to add them to the same `JPanel` and after add that `JPanel` to the `JFrame` but it is not working. Probably I have to define some type of layout to the `JPanel`s.

What am I doing wrong?

**Code:**

```
public class Pang {
public static void main(String[] args) {

    JFrame f=new JFrame();
    JPanel gamePanel=new JPanel();
    gamePanel.setPreferredSize(new Dimension(800, 600));

    DrawHero d=new DrawHero();
    DrawBubble bubble=new DrawBubble();

    gamePanel.add(d);
    gamePanel.add(bubble);

    f.add(gamePanel);

    f.setVisible(true);
    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    f.setSize(800, 600);
}
}

public class DrawHero extends JPanel implements ActionListener, KeyListener {
    Timer myTimer = new Timer(5, this);
    int x = 0, y = 0, dx = 0, dy = 0, step = 10;
    private transient Image imageHero = null;

    public DrawHero() {
        myTimer.start();
        addKeyListener(this);
        setFocusable(true);
        setFocusTraversalKeysEnabled(false);

    }

    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D) g;

        imageHero = getHeroImage();

        g2.drawImage(imageHero, x, y, 40, 40, null);

    }

    public Image getHeroImage() {
        Image image = null;

        image = getImage("hero.png");
        return image;
    }

    public Image getImage(String path) {
        Image tempImage = null;
        try {
            URL heroiURL = DrawHero.class.getResource(path);
            tempImage = Toolkit.getDefaultToolkit().getImage(heroiURL);
        } catch (Exception e) {
            System.out.println("Error loading hero image! - "
                    + e.getMessage());
        }
        return tempImage;
    }

    public void actionPerformed(ActionEvent e) {

        repaint();
    }

    public void moveUp() {

        y = y - step;

    }

    public void moveDown() {
        y = y + step;

    }

    public void moveLeft() {

        x = x - step;

    }

    public void moveRight() {
        x = x + step;

    }

    public void keyPressed(KeyEvent e) {
        int keyCode = e.getKeyCode();
        if (keyCode == KeyEvent.VK_UP) {
            moveUp();
        }
        if (keyCode == KeyEvent.VK_DOWN) {
            moveDown();
        }
        if (keyCode == KeyEvent.VK_LEFT) {
            moveLeft();
        }
        if (keyCode == KeyEvent.VK_RIGHT) {
            moveRight();
        }
    }

    public void keyTyped(KeyEvent e) {
    }

    public void keyReleased(KeyEvent e) {
    }
}

public class DrawBubble extends JPanel implements ActionListener, KeyListener {
    Timer myTimer = new Timer(5, this);
    int x = 100, y = 200, dx = 0, dy = 0, step = 10;
    private transient Image imageHero = null;

    public DrawBubble() {
        myTimer.start();
        addKeyListener(this);
        setFocusable(true);
        setFocusTraversalKeysEnabled(false);

    }

    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        Graphics2D g2 = (Graphics2D) g;
        g2.fill(new Ellipse2D.Double(x, y, 40, 40));

    }

    public void actionPerformed(ActionEvent e) {

         x=x+dx;
         y=y+dy;
        repaint();
    }

    public void moveBubble() {
         dy=2;
         dx=2;
    }

    public void keyPressed(KeyEvent e) {
        moveBubble();

    }

    public void keyTyped(KeyEvent e) {
    }

    public void keyReleased(KeyEvent e) {
    }
}

```