0

im making a mathematical game and want to use a gif as a background. Its dimensions are 1100*800

I searched many posts how to add a GIF as background, but with no success. Any suggestions for a easy method (if using other components -JPanel,...; could you please show how?)

So far, this is my code of the JFrame:

public class Game extends JFrame implements ActionListener {
       private JButton play, endG, tutorial, login, easy, medium, hard, next, checkAnswer;
       private JTextArea answer;
       int total, goodAnswer = 0;

       public Game(String heading) {
           super(heading);
           this.setSize(1100, 800);
           this.setLayout(null);


           firstScreen();
           setResizable(false);

       }

       public void firstScreen() {
           getContentPane().removeAll();

           play = new JButton();
           play.setBounds(373, 350, 354, 80);
           play.setIcon(new ImageIcon("entrancePlayButton.png"));
           play.addActionListener(this);
           play.setOpaque(false);
           play.setContentAreaFilled(false);
           add(play);

           tutorial = new JButton("Tutorial");
           tutorial.setBounds(345, 520, 150, 50);
           tutorial.setFont(new Font("Arial", Font.PLAIN, 20));
           tutorial.addActionListener(this);
           tutorial.setOpaque(false);
           tutorial.setContentAreaFilled(false);
           add(tutorial);

           endG = new JButton("End Game");
           endG.setBounds(605, 520, 150, 50);
           endG.setFont(new Font("Arial", Font.PLAIN, 20));
           endG.addActionListener(this);
           endG.setOpaque(false);
           endG.setContentAreaFilled(false);
           add(endG);

           revalidate();
           repaint();
       }

       public void difficultyScreen() {
           getContentPane().removeAll();

           easy = new JButton("Easy");
           easy.setBounds(450, 310, 200, 80);
           easy.setFont(new Font("Arial", Font.PLAIN, 30));
           easy.addActionListener(this);
           easy.setOpaque(false);
           easy.setContentAreaFilled(false);
           add(easy);

           medium = new JButton("Medium");
           medium.setBounds(450, 440, 200, 80);
           medium.setFont(new Font("Arial", Font.PLAIN, 30));
           medium.addActionListener(this);
           medium.setOpaque(false);
           medium.setContentAreaFilled(false);
           add(medium);

           hard = new JButton("Hard");
           hard.setBounds(450, 570, 200, 80);
           hard.setFont(new Font("Arial", Font.PLAIN, 30));
           hard.addActionListener(this);
           hard.setOpaque(false);
           hard.setContentAreaFilled(false);
           add(hard);

           endG = new JButton("Exit");
           endG.setBounds(1000, 700, 60, 30);
           endG.setFont(new Font("Arial", Font.PLAIN, 15));
           endG.addActionListener(this);
           endG.setOpaque(false);
           endG.setContentAreaFilled(false);
           add(endG);

           revalidate();
           repaint();
       }

       public void playGameScreen() {
           getContentPane().removeAll();



           revalidate();
           repaint();
       }

       public void tutorialScreen() {
           getContentPane().removeAll();



           revalidate();
           repaint();
       }

       private static double stringToDouble(String number) {
           double num = Double.parseDouble(number);
           return num;
       }

       public static void main() {
           Game areaGame = new Game("Area Game");
           areaGame.setVisible(true);
       }

       public void actionPerformed(ActionEvent actionEvent) {
           if (actionEvent.getSource() == play) {
               difficultyScreen();
           }

           if (actionEvent.getSource() == tutorial) {
               tutorialScreen();
           }

           if (actionEvent.getSource() == endG) {
               int reply = JOptionPane.showConfirmDialog(null, "You are about to exit the game, are you sure?", "Exit game", JOptionPane.YES_NO_OPTION);
               if (reply == JOptionPane.YES_OPTION) {
                   System.exit(0);
               }

           }

       }


   }
Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Filip Pitak
  • 31
  • 10
  • Have a look at javaFX – Aaron Aug 03 '16 at 09:55
  • ATM im trying to break the gif into frames and use a timer to change the frames which should look like a fluent animations – Filip Pitak Aug 03 '16 at 10:07
  • 1
    You can look this url [http://stackoverflow.com/questions/10836832/show-an-animated-bg-in-swing](http://stackoverflow.com/questions/10836832/show-an-animated-bg-in-swing) – SerefAltindal Aug 03 '16 at 12:52
  • 1) `this.setLayout(null);` Java GUIs have to work on different OS', screen size, screen resolution etc. using different PLAFs in different locales. As such, they are not conducive to pixel perfect layout. Instead use layout managers, or [combinations of them](http://stackoverflow.com/a/5630271/418556) along with layout padding and borders for [white space](http://stackoverflow.com/a/17874718/418556). 2) `...removeAll();` Use a [`CardLayout`](http://download.oracle.com/javase/8/docs/api/java/awt/CardLayout.html) as shown in [this answer](http://stackoverflow.com/a/5786005/418556). – Andrew Thompson Aug 03 '16 at 20:50

1 Answers1

2

There are two ways to do this:

  • you can override the paintComponent() method of your JPanel. like this:

@Override

protected void paintComponent(Graphics g) {

        super.paintComponent(g);
        g.drawImage(yourImage, 0, 0, this);

}
  • or you can use a JLabel by loading the image as an ImageIcon and then displaying it in a JLabel.
Gherbi Hicham
  • 2,416
  • 4
  • 26
  • 41
  • Earlier i commented that i would break the gif into frames (41) and load every frame one by one with a timer function. If i just call the function u wrote in a timer will it work just fine? Or any other edits will be needed? – Filip Pitak Aug 03 '16 at 12:31
  • I'm not sure if this could work in an animation, but you can always try it in your code and see how it turns out.Since you are doing animations i strongly suggest using a SwingWorker: https://docs.oracle.com/javase/7/docs/api/javax/swing/SwingWorker.html – Gherbi Hicham Aug 03 '16 at 12:40
  • Certainly will try all ways you recommeded! :) – Filip Pitak Aug 03 '16 at 14:28
  • `g.drawImage(yourImage, 0, 0, null);` should be `g.drawImage(yourImage, 0, 0, this);` – Andrew Thompson Aug 03 '16 at 20:52
  • Andrew, im quite having a drag with completing the code. Could u show/post the complete part how to load an image (lets say the name is "f15.png"). – Filip Pitak Aug 03 '16 at 21:02
  • @AndrewThompson Thanks, I had an old program that used the null parameter , and it worked as well as your code, any idea why it works with a null Observer? – Gherbi Hicham Aug 03 '16 at 21:28
  • What did **reading the documentation** suggest to you? – Andrew Thompson Aug 03 '16 at 21:37
  • *"Could u show/post the complete part how to load an image (lets say the name is "f15.png")."* When an animated GIF is involved, see the duplicate Q&A! – Andrew Thompson Aug 03 '16 at 21:39
  • @AndrewThompson Well I found this: "The observer parameter notifies the application of updates to an image that is loaded asynchronously. The observer parameter is not frequently used directly and is not needed for the BufferedImage class, so it usually is null". using a current instance seems more logical than a null Observer so I don't get why it still works. – Gherbi Hicham Aug 03 '16 at 21:39
  • 1
    There are many ways of loading an image that are synchronous (the code is blocked until the image is loaded). But using `this` for the `ImageObserver` covers those cases ***as well as*** cases where the image is loaded asynchronously. – Andrew Thompson Aug 03 '16 at 21:42