Can't figure out how to overlap images in java

Question

So I decided to pick up programming as a hobby, and am now working on creating a slot machine with help from tutorials. However, I ran into problems with overlapping images. I used a photo editor to create a .png file of what I want to be the background with three transparent boxes for the slot animators.

The code to paint the background:

  public class SlotMachineBackground extends JPanel
        {
          private ImageIcon image;

      public void paintComponent (Graphics g)
      {
        super.paintComponent (g);
        image = new ImageIcon ("/Users/Documents/slotmachine.png");
        image.paintIcon (this, g, 0,0);
      }
    }//end class

then I made slot animators:

public class SlotAnimator extends JPanel implements ActionListener
{
  private Timer animator;
  private ImageIcon imageArray []= new ImageIcon [22];
  int currentFrame = 0;
  int slotNumber = 1;
  int box = 1;
  SlotMachine m = new SlotMachine ();
  String [] mP = m.returnTurn();

  public SlotAnimator (int delay)
  {
    for (int i = 1; i < 22; i += 2)
      imageArray [i] = new ImageIcon ("/Users/Documents/blank.gif");
    for (int i = 0; i < 21; i ++)
    {
      if (i == 0 || i == 8 || i== 12)
        imageArray [i] = new ImageIcon ("/Users/Documents/cherry.gif");
      if ( i == 2 || i == 6 || i == 16)
        imageArray[i] = new ImageIcon ("/Users/Documents/1bar.gif");
      if (i == 4)
        imageArray [i] = new ImageIcon ("/Users/Documents/seven.gif");
      if (i== 10 || i == 14)
        imageArray[i] = new ImageIcon ("/Users/Documents/2bar.gif");
      if (i == 18)
        imageArray[i] = new ImageIcon ("/Users/Documents/3bar.gif");
      if (i==20)
        imageArray [i] = new ImageIcon ("/Users/Documents/jackpot.gif");
    }

    animator = new Timer (delay, this);
    animator.start();

    }

  public void paintComponent (Graphics g)
  {  
    super.paintComponent (g);

    if (currentFrame >= imageArray.length)
    {
      animator.stop();
      ImageIcon im = m.findPicture (mP[box]);
      box++;
      im.paintIcon (this, g, 0, 0);
    }
    imageArray [currentFrame].paintIcon (this, g, 0, 0);
  }

  public void actionPerformed (ActionEvent e)
  {
    repaint();

     currentFrame ++;
  }
}//end class

Next, I tried to combine the two into a JFrame:

public class SlotAnimatorTest 
{
  public static void main (String [] args)
  {
    JFrame frame = new JFrame (); 
    SlotMachineBackground b = new SlotMachineBackground ();


    SlotAnimator a0 = new SlotAnimator (45);
    SlotAnimator a1 = new SlotAnimator (90);
    SlotAnimator a2 = new SlotAnimator (180);


    frame.add (b);
    frame.add(a0);
    frame.setSize (1500,1500);
    frame.setVisible (true);

  }
}

However, only the animator comes up. I'm stumped, as you can tell I am still an amateur. Anyways, thank you in advance for any advice!!

Answer 1

It's mostly a matter of layouts, and I suggest that you read the tutorial on them: The Layout Tutorials

In your situation a JLayeredPane might work well. It uses a default null layout, and so you would need to specify your component's sizes and positions if you were to use this, but you can also tell it the z-order of your components and thus be able to place the slot machine in the lowest position and things that go on top in higher positions. Again, the tutorial will help with the details: JLayeredPane Tutorial

Also, you really shouldn't be reading in any files from within a paintComponent method, especially a file of an image that doesn't change -- what's the sense of re-reading an image slowing down the drawing each time you repaint the image when the image doesn't change and you can just store it in a variable in the class? So read it once in the class's constructor, and then save it in a variable.