クイズゲームに背景画像を表示する方法を教えてください

Question

前提・実現したいこと

javaでクイズゲームに背景として全体に画像を表示したまま、ゲームをプレイできるようにしたいです。

発生している問題

画像が一部しか表示されなかったり、クイズゲームが消えてしまったりします。

試したこと

public void paint(Graphics g) {
g.drawImage(img, 10, 30,500,500, this);
}
で画像を表示しました。

補足

windows,vscodeを使用しています。
初歩的なミスかもしれませんが、よろしくお願いします。

該当のソースコード

import java.awt.*;
import java.awt.BorderLayout;
import java.awt.CardLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.event.ActionListener;
import java.awt.event.WindowEvent;
import java.util.ArrayDeque;
import java.util.Arrays;
import java.util.Collections;
import java.util.Deque;
import java.util.List;

import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;



public class QuizGame3 extends JFrame {
    Image img = getToolkit().getImage("フォルダ名/ファイル名");

  public static void main(String[] args){
    new QuizGame3("NOBUクイズ", 500, 500);
  }
  

  public void paint(Graphics g) { //画像描画メソッド
    g.drawImage(img, 10, 30,500,500, this);
  }

  
  static private class Quiz {
    String question; //問題文
    String[] answers; //選択肢
    String correct; //正解
    Quiz(String question, String[] answers) {
      this(question, answers, 0);
    }
    Quiz(String question, String[] answers, int correctNo) {
      this.question = question;
      this.answers = shuffle(answers);
      this.correct = answers[correctNo];
    }
    private static String[] shuffle(String[] array) {
      List<String> a = Arrays.asList(array.clone());
      Collections.shuffle(a);
      return a.toArray(new String[array.length]);
    }
  }

  static private Quiz[] quizArray = {
      new Quiz("ドラえもんに登場するスネ夫の苗字は？",
          new String[]{"骨川", "馬川"}),
      new Quiz("ドラえもんの好物はどら焼き、では妹のドラミちゃんの好物は？",
          new String[]{"メロンパン", "チョコレートパン"}),
      new Quiz("硬式テニスで０点の事を２文字で何と言うでしょう？",
          new String[]{"ラブ", "レイブ"}),
      new Quiz("パソコンのコンはコンピュータの略。ではパソの略は？",
          new String[]{"パーソナル", "ターミナル"}),
      new Quiz("ばいきんまんが愛用しているロボットの名前は？",
          new String[]{"だだんだん", "どどんどん"}),
  };

  private Deque<Quiz> quizStack = new ArrayDeque<Quiz>();
  private Quiz quiz; //出題中のクイズ

  static private final int ANSWERS_SIZE = 2;
  private JLabel questionLabel;
  private JButton[] answerButtons = new JButton[ANSWERS_SIZE];
  private SouthPanel southPanel;

  public QuizGame3(String title, int width, int height) {
    super(title);
    setVisible(true);
    setSize(width, height);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setResizable(false);

    JPanel headerPanel = new JPanel();
    headerPanel.setBackground(Color.BLACK);
    headerPanel.setPreferredSize(new Dimension(500,50));
    add(headerPanel, BorderLayout.NORTH);

    questionLabel = new JLabel("");
    questionLabel.setHorizontalAlignment(JLabel.CENTER);
    add(questionLabel, BorderLayout.CENTER);//中心に問題を表示

    JPanel answerPanel = new JPanel();
    for(int i=0; i<answerButtons.length; i++) {
      answerButtons[i] = new JButton();
      answerButtons[i].addActionListener(e -> {
        decide(((JButton)e.getSource()).getText());
      });
      answerPanel.add(answerButtons[i]);
    }

    southPanel = new SouthPanel(answerPanel, e->drawQuiz(), e->end());
    add(southPanel, BorderLayout.SOUTH);

    //クイズをシャッフルして山にする
    List<Quiz> quizList = Arrays.asList(quizArray.clone());
    Collections.shuffle(quizList);
    quizStack.addAll(quizList);

    drawQuiz();
  }

  //下部の表示を進行状況に応じて切り替える
  static private class SouthPanel extends JPanel {
    

    enum Card {
      ANSWER, //回答
      NEXT,   //次の問題へ
      END     //全問終了
    };

    private CardLayout southCard;

    SouthPanel(JComponent answer, ActionListener nextActionListener, ActionListener endActionListener) {
      super(null);
      southCard = new CardLayout();
      setLayout(southCard);

      add(answer, Card.ANSWER.name());

      JButton nextButton = new JButton("次へ");
      nextButton.addActionListener(nextActionListener);
      add(nextButton, Card.NEXT.name());

      JButton endButton = new JButton("終了");
      endButton.addActionListener(endActionListener);
      add(endButton, Card.END.name());
    }

    void show(Card card) {
      southCard.show(this, card.name());
    }
  }

  private void end() {
    dispatchEvent(new WindowEvent(this, WindowEvent.WINDOW_CLOSING));
  }

  //山からクイズを引き, 表示する.
  private void drawQuiz() {
    quiz = quizStack.pollFirst();

    southPanel.show(SouthPanel.Card.ANSWER);

    questionLabel.setText(quiz.question);
    questionLabel.setForeground(Color.red);
    for(int i=0; i<answerButtons.length; i++) {
      answerButtons[i].setText(quiz.answers[i]);
    }
  }

  //判定
  private void decide(String answer) {
    if(answer.equals(quiz.correct)){
      questionLabel.setText("正解");
      questionLabel.setForeground(Color.PINK);
    }else{
      questionLabel.setText("不正解");
      questionLabel.setForeground(Color.DARK_GRAY);
    }

    southPanel.show(quizStack.isEmpty() ? SouthPanel.Card.END : SouthPanel.Card.NEXT);
  }
}

Comments

[m.ts10806]

どういう規格の画像を載せようとしているのでしょうか。
載せようとしているパネルより画像が大きかったり、重ね順の問題に見えますが、
そのあたりはどこまで認識（もしくは検証）されていますか？

[taku_ro21]

反応していただきありがとうございます。
画像はJPEGを使っています。
ゲームの上に背景画像が上乗せされている状態だと考え、以下のサイトを参考に画像の透過をためしたのですが、画像が表示されませんでした。https://oshiete.goo.ne.jp/qa/8697589.html
ほかに考えられる原因を理解できていない状況です。
初心者のため理解が浅いですが、よろしくお願いいたします。

[m.ts10806]

質問は編集できますので適宜追記してください。

[m.ts10806]

＞画像はJPEGを使っています。
いえ、拡張子や圧縮形式ではなく、ファイルサイズ、縦横幅のことです。

Answer 1

JFrame の paint では super.paint(g) を呼び出す必要があると思います。
ただ、JFrame の paint はウインドウ全体を描画しますので、ウインドウタイトルやエッジ等を考慮する必要があり、結構面倒では無いでしょうか。

可能であれば、背景を含んでゲーム画面としてパネル化し、そのパネルを JFrame に設定して、 JFrame の paint は触らないほうが良いように思います。

コンストラクタのみ(JFrame のオーバーライトしていた paint() はコメント化)

  public QuizGame3(String title, int width, int height) {
    super(title);
    //setVisible(true); //setVisible は最後に行うこと
    setSize(width, height);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setResizable(false);

    JPanel background = new JPanel(new BorderLayout()) {
      @Override
      protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(img,  0,  0,500,500,this);
      }
    };
    add(background);

    JPanel headerPanel = new JPanel();
    headerPanel.setBackground(Color.BLACK);
    headerPanel.setPreferredSize(new Dimension(500,50));
    background.add(headerPanel, BorderLayout.NORTH);

    questionLabel = new JLabel("");
    questionLabel.setHorizontalAlignment(JLabel.CENTER);
    background.add(questionLabel, BorderLayout.CENTER);//中心に問題を表示

    JPanel answerPanel = new JPanel();
    for(int i=0; i<answerButtons.length; i++) {
      answerButtons[i] = new JButton();
      answerButtons[i].addActionListener(e -> {
        decide(((JButton)e.getSource()).getText());
      });
      answerPanel.add(answerButtons[i]);
    }

    southPanel = new SouthPanel(answerPanel, e->drawQuiz(), e->end());
    background.add(southPanel, BorderLayout.SOUTH);

    //クイズをシャッフルして山にする
    List<Quiz> quizList = Arrays.asList(quizArray.clone());
    Collections.shuffle(quizList);
    quizStack.addAll(quizList);

    drawQuiz();

    setVisible(true);
  }

Comments

[taku_ro21]

丁寧に答えていただきありがとうございます。
無事、解決しました。
この場合、paintは使わない方がよいのですね。勉強になりました。
また、setVisibleのミスも自分で見つけられなかったので、ご指摘いただけて良かったです。
本当にありがとうございました。

[jimbe]

setVisible に関しましては、本当に"ベスト"にするには main メソッドのほうを書き換えないといけないのですが、個人的に"ベター"として setVisible を main メソッドの最後のタイミングで実行するようにしています。(main の書き換えは大した量では無いのですが ^^;)

書き換えは次の記事が具体的です。

[mainメソッドでSwingを書かない訳]
https://torutk.hatenablog.jp/entry/20060928/p2