Swing Background Image in JFrame implementieren

[Ruffyg]

Guten Morgen,
ich habe vor kurzem angefangen mich für Java zu interessieren. Nach einigen Tagen habe ich beschlossen das Spiel Flappy Bird nach zu programmieren.
Ich habe versucht es Objektorientiert zu gestalten. Ich nutze Apache NetBeans IDE 11.2 als Entwicklungsumgebung. Es funktioniert bisher ganz gut, einige Features wie ein Score der nach oben zählt pro geschaffte Röhre fehlt noch (Score geht derzeit nur um 1 hoch per Klick). Aber das ist gar nicht das Problem.

Mein Problem ist das ich eine BackgroundPanel.java Class habe und gerne in meiner initComponents Methode mein Hintergrundbild aufrufen möchte welches im src Bereich liegt.

Sobald ich jedoch versuche per initComponents mein Hintergrundbild anzeigen zu lassen, bekomme ich eine Compiler Fehlermeldung.

warning: [options] bootstrap class path not set in conjunction with -source 8
1 warning
compile:
run:
Exception in thread "main" java.lang.IllegalArgumentException: input == null!
    at java.desktop/javax.imageio.ImageIO.read(ImageIO.java:1400)
    at flappybird.gui.BackgroundPanel.<init>(BackgroundPanel.java:18)
    at flappybird.gui.Hauptfenster.initComponents(Hauptfenster.java:62)
    at flappybird.gui.Hauptfenster.<init>(Hauptfenster.java:45)
    at flappybird.FlappyBird.main(FlappyBird.java:21)
D:\Fritz\Desktop\FlappyBird\nbproject\build-impl.xml:1330: The following error occurred while executing this line:
D:\Fritz\Desktop\FlappyBird\nbproject\build-impl.xml:968: Java returned: 1
BUILD FAILED (total time: 3 seconds)

Es wäre sehr nett, wenn jemand mein Programm etwas ausbessern könnte. Ich habe das Aufrufen des Hintergrundbildes in meiner initComponent Methode auskommentiert damit das Programm zumindest läuft

Hier könnt ihr euch den Ordner herunterladen:

FlappyBird – Google Drive

drive.google.com

Mein Code ist bestimmt nicht sauber und fehlerfrei, also macht euch schon mal darauf gefasst nach hinten umzukippen

Mit freundlichen Grüßen Fritz

 

[kneitzel]

Also ein erster Ansatz wäre in meinen Augen:
img = ImageIO.read(getClass().getResource("/hintergrund.jpg"));

Das Laden der Ressourcen erfolgt relativ zu der Klasse. "hintergrund.jpg" würde also am Ort der .class Datei suchen. Das Bild ist aber im root der Klassen zu finden, daher "/hintergrund.jpg".

Das wäre jetzt zumindest auf den ersten Blick das, was ich meine zu sehen.

Siehe z.B. https://docs.oracle.com/javase/7/docs/api/java/lang/Class.html#getResource(java.lang.String) für die genaue Erklärung.

Edit: Ursache ist natürlich, dass getResource die Ressource nicht finden kann und daher null zurück gibt. Damit kann dann ImageIO.read auch kein Bild laden.

 

[Ruffyg]

Also ein erster Ansatz wäre in meinen Augen:
img = ImageIO.read(getClass().getResource("/hintergrund.jpg"));

Das Laden der Ressourcen erfolgt relativ zu der Klasse. "hintergrund.jpg" würde also am Ort der .class Datei suchen. Das Bild ist aber im root der Klassen zu finden, daher "/hintergrund.jpg".

Das wäre jetzt zumindest auf den ersten Blick das, was ich meine zu sehen.

Siehe z.B. https://docs.oracle.com/javase/7/docs/api/java/lang/Class.html#getResource(java.lang.String) für die genaue Erklärung.

Edit: Ursache ist natürlich, dass getResource die Ressource nicht finden kann und daher null zurück gibt. Damit kann dann ImageIO.read auch kein Bild laden.

Ich habe es ausprobiert, ich bekomme keine Fehlermeldung mehr, jedoch ist auch kein Hintergrund zu sehen. Er findet denke ich die Ressource aber vermutlich fehlt ihm eine Eigenschaft wie zum Beispiel visibility.

 

[kneitzel]

Also mir fällt da nicht wirklich etwas auf. Außer das ich beim drawImage statt this als letzten Parameter ein null gesetzt hätte. Aber das sollte eigentlich nichts ausmachen....

Das Bild ist richtig, hat auch eine Größe, so dass dies gesehen werden sollte und so?

 

[Ruffyg]

Also mir fällt da nicht wirklich etwas auf. Außer das ich beim drawImage statt this als letzten Parameter ein null gesetzt hätte. Aber das sollte eigentlich nichts ausmachen....

Das Bild ist richtig, hat auch eine Größe, so dass dies gesehen werden sollte und so?

NetBeans meckert ja auch nicht, deshalb weiß ich echt nicht wo das Problem ist :/

 

[Ruffyg]

Die Try and Catch Funktion gibt auf der Konsole "Picture loaded" aus, was ja eigentlich nur passieren soll wenn es geklappt hat

 

[mihe7]

Überschreib mal paintComponent statt paint.

 

[Ruffyg]

Überschreib mal paintComponent statt paint.

Entschuldigung wie mache ich das? Ich bin wie bereits gesagt ein wirklich blutiger Anfänger (NetBeans)

 

[Ruffyg]

Habe jetzt wie du sagtest paint mit paintComponent ausgetauscht. Das Problem ist das Bild hat anscheinend die höchste Priorität und ist im Vordergrund. Aber ich möchte ja das es die unterste Ebene ist

 

[mihe7]

Ja, die Komponenten bilden eine Hierarchie. Unten liegt die "content pane" Deines JFrames. Darüber liegen die Komponenten, die Du der content pane hinzugefügt hast usw. Gezeichnet wird von unten nach oben.

Das Spielfeld muss ja über dem Hintergrund liegen, d. h. entweder zeichnest Du beides in einer Komponente (erst Hintergrund, dann Spielfeld) oder Du fügst eine Spielfeldkomponente der Hintergrundkomponente hinzu.

 

[Ruffyg]

Ja, die Komponenten bilden eine Hierarchie. Unten liegt die "content pane" Deines JFrames. Darüber liegen die Komponenten, die Du der content pane hinzugefügt hast usw. Gezeichnet wird von unten nach oben.

Das Spielfeld muss ja über dem Hintergrund liegen, d. h. entweder zeichnest Du beides in einer Komponente (erst Hintergrund, dann Spielfeld) oder Du fügst eine Spielfeldkomponente der Hintergrundkomponente hinzu.

Habe jetzt eine initHintergrund Methode geschrieben und Sie mit this.initHintergrund() als aller erstes aufgerufen. Trotzdem ist mein Hintergrund noch die oberste Ebene und steht über allem :/

Ja, die Komponenten bilden eine Hierarchie. Unten liegt die "content pane" Deines JFrames. Darüber liegen die Komponenten, die Du der content pane hinzugefügt hast usw. Gezeichnet wird von unten nach oben.

Das Spielfeld muss ja über dem Hintergrund liegen, d. h. entweder zeichnest Du beides in einer Komponente (erst Hintergrund, dann Spielfeld) oder Du fügst eine Spielfeldkomponente der Hintergrundkomponente hinzu.

Ich weiß leider wirklich nicht mehr weiter. Habe locker 1h versucht innerhalb einer Initialisierung Hintergrund und Spielfeld aufzurufen, aber entweder hat es gar nicht funktioniert oder mein Hintergrund war der Vordergrund :/

 

[Ruffyg]

/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package flappybird.gui;

import flappybird.model.Bar;
import flappybird.model.Bird;
import flappybird.model.Punkte;
import flappybird.model.Boden;
import flappybird.model.Spielfeld;
import static java.awt.Color.black;
import static java.awt.Color.green;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;

/**
*
* @author Fritz
*/
public class Hauptfenster extends JFrame implements ActionListener,MouseListener,KeyListener{
   
    private Spielfeld spielfeld = new Spielfeld();
    private Punkte punkte = new Punkte();
   
    private int interval = 25;
    private Timer timer = new Timer(interval, this);
   
    public Hauptfenster(){
       
        super("FlappyBird");
       
        this.initHintergrund();
        this.initSpielfeld();
        this.initComponents();
       
       
    }
   
    private void initHintergrund(){
        BackgroundPanel backgroundPanel = new BackgroundPanel();
    add(backgroundPanel);

    setSize(backgroundPanel.getBackgroundImage().getWidth(backgroundPanel),    backgroundPanel.getBackgroundImage().getHeight(backgroundPanel));
    }
   
   
    private void initSpielfeld(){
   
        this.spielfeld.setBreite(800);
        this.spielfeld.setHoehe(600);
        Bird bird = this.spielfeld.getBird();
        bird.setxPos(100);
        bird.setyPos(100);
        bird.setBreite(100);
        bird.setHoehe(100);
       
       
    }
   
    private void initComponents(){
        this.setSize(800, 600);
        this.addMouseListener(this);
        this.addKeyListener(this);
       
        this.timer.start();
       
    }

      public void paintComponent(Graphics g) {
        Graphics2D graphics = (Graphics2D) g;

        Bird bird = this.spielfeld.getBird();
       
        graphics.clearRect(0,0,800, 600);
       
        //Vogel zeichnen
        graphics.drawRect(bird.getxPos(), bird.getyPos(), bird.getBreite(), bird.getHoehe());
       
        //Boden zeichnen
        for(Boden boden : this.spielfeld.getBoden()){
            graphics.setColor(green);
            graphics.fillRect(boden.getxPos(), boden.getyPos(), boden.getBreite(), boden.getHoehe());
           
        }
       
        //BottomBars zeichnen
        for(Bar b : this.spielfeld.getBottomBars()){
            graphics.setColor(black);
            graphics.fillRect(b.getxPos(), b.getyPos(), b.getBreite(), b.getHoehe());
        }
       
        //TopBars zeichnen
        for(Bar b : this.spielfeld.getTopBars()){
            graphics.setColor(black);
            graphics.fillRect(b.getxPos(), b.getyPos(), b.getBreite(), b.getHoehe());
        }
       
       
    }
   
   
   
   
   

    @Override
    public void actionPerformed(ActionEvent e) {
        System.out.println("ActionPerformed " + e.getActionCommand());
       
        this.spielfeld.update(this.interval);
       
        this.repaint();
    }

    @Override
    public void mouseClicked(MouseEvent e) {
        System.out.println("MouseClicked");
        Bird bird = this.spielfeld.getBird();
        bird.setyPos(bird.getyPos()-50);
        punkte.plus();
        System.out.println("Ihr Punktestand hat sich um eins erhöht. Er beträgt nun: " + punkte.getPunktestand());
       
    }

    @Override
    public void mousePressed(MouseEvent e) {
       
    }

    @Override
    public void mouseReleased(MouseEvent e) {
       
    }

    @Override
    public void mouseEntered(MouseEvent e) {
       
    }

    @Override
    public void mouseExited(MouseEvent e) {
       
    }

    @Override
    public void keyTyped(KeyEvent e) {
       
    }

    @Override
    public void keyPressed(KeyEvent e) {
        System.out.println("KeyPressed " + e.getKeyCode());
    }

    @Override
    public void keyReleased(KeyEvent e) {
       
    }
   
   
}

Meine Spielfeld Klasse

 

[mihe7]

Gezeichnet wird nicht irgendwo (schon gar nicht in einer Initialisierung), sondern in paintComponent - die Methode hat den Namen nicht zum Spaß

Und: ich meinte nicht, dass Du paintComponent des hinzugefügten Hintergrundbildes aufrufen sollst, das bringt gar nichts.

Du hast drei Alternativen:
1. Du sorgst dafür, dass drawImage in paintComponent Deines Hauptfensters aufgerufen wird. Die Komponente Hintergrundbild darf dann nicht verwendet werden.
2. Du sorgst dafür, dass der Zeichencode aus Deinem Hauptfenster und drawImage in einer neuen Komponente (neue Klasse) aufgerufen werden. Die Komponente Hintergrundbild darf dann nicht verwendet werden.
3. Du verschiebst nur den Zeichencode aus Deinem Hauptfenster in eine neue Komponente (neue Klasse) und baust dann die entsprechende Komponentenhierachie auf: Hauptfenster enthält Hintergrundbild enthält Spielfeld

 

[Ruffyg]

Gezeichnet wird nicht irgendwo (schon gar nicht in einer Initialisierung), sondern in paintComponent - die Methode hat den Namen nicht zum Spaß

Und: ich meinte nicht, dass Du paintComponent des hinzugefügten Hintergrundbildes aufrufen sollst, das bringt gar nichts.

Du hast drei Alternativen:
1. Du sorgst dafür, dass drawImage in paintComponent Deines Hauptfensters aufgerufen wird. Die Komponente Hintergrundbild darf dann nicht verwendet werden.
2. Du sorgst dafür, dass der Zeichencode aus Deinem Hauptfenster und drawImage in einer neuen Komponente (neue Klasse) aufgerufen werden. Die Komponente Hintergrundbild darf dann nicht verwendet werden.
3. Du verschiebst nur den Zeichencode aus Deinem Hauptfenster in eine neue Komponente (neue Klasse) und baust dann die entsprechende Komponentenhierachie auf: Hauptfenster enthält Hintergrundbild enthält Spielfeld

Habe mich für Alternative Nummer Eins entschieden, da ich faul bin und keine Lust habe eine vollständige Hierarchie zu programmieren (wüsste auch nicht wie es geht).

Mit g.drawImage() innerhalb von paintComponents soll ich arbeiten... aber ich weiß nicht wie die Methode funktioniert. Ich verstehe absolut nicht die Dokumentation von drawImage

g.drawImage("/hintergund.jpg", 800, 600, contentPane);

Bei rootPane habe ich contentpane auf gut Glück probiert, funktioniert leider nicht.

Tut mir leid das ich so blöd nachfragen muss, es ist schließlich nicht selbstverständlich das du mir hilfst... aber das ich an so einem kleinen Problem so lange sitzen muss macht mich echt fertig haha.

 

[mihe7]

Hä? Du hast doch drawImage schon in BackgroundPanel verwendet, dann musst Du doch wissen, wie es geht.

 

[Ruffyg]

Hä? Du hast doch drawImage schon in BackgroundPanel verwendet, dann musst Du doch wissen, wie es geht.

Nein, ich weiß eben nicht wie es funktioniert. Das hat mir NetBeans nach 100 von Fehlermeldungen zusammen gebaut haha.

        Container contentPane = rootPane.getContentPane() ;
        g.drawImage("hintergrund.jpg", 800, 600, contentPane);

Das sieht schon etwas besser aus, aber er findet einfach das hintergrund.jpg nicht

 

[kneitzel]

Also Du hast Code in einer Klasse der funktioniert. Unabhängig davon, ob du da irgendwie mit trial and error etwas erstellt hast oder ob es vom Himmel gefallen ist: Du solltest Code immer verstehen! Deine Situation derzeit ist also:
- Du hast Code, den du nicht verstehst.
- Du hast keine Tests (mit vernünftiger Abdeckung)
- Du willst da irgend etwas bauen, dass doch ein kleines bisschen größer ist als ein "Hello world" oder ein kleines Beispiel aus dem Unterricht.

==> Das wird in großem Frust enden. Wenn Du das willst: Da gibt es bestimmt einfachere Wege.

Aus meiner Sicht ist es existenziell, dass Du den Code, den Du verwendest, 100% verstehst! Wenn irgendwann etwas nicht mehr geht, hast Du sonst 0 Chance, den Fehler zu beheben und das wird massiven Frust mit sich bringen!

Der zweite Punkt ist da ansonsten auch sehr wichtig, aber da gehe ich jetzt nicht weiter drauf ein. Da ist der Hintergrund, dass Du Änderungen am Code direkt vollständig prüfen kannst. Du vermeidest also die Situation, dass Du nach und nach immer mehr kaputt machst und dann, wenn es auffällt, hast Du kaum eine Chance, Fehler zielgerichtet zu finden und zu beheben, da Du einfach eine größere Menge an Fehlern hast, die sich ja auch gegenseitig beeinflussen.

Was hast Du denn in deinem BackgroundPanel?
a) img = ImageIO.read(getClass().getResource("hintergrund.jpg"));
b) g.drawImage(img, 0, 0, this);

Was machen diese beiden Zeilen Code? Zu erstem habe ich dir unter anderem auch einen Link geschickt (Das hat schon den Sinn, dass man sich den etwas ansieht )...

 

[Ruffyg]

a) img = ImageIO.read(getClass().getResource("hintergrund.jpg"));
b) g.drawImage(img, 0, 0, this);

a) benutzt die die ImageIO Klasse mit der .getResource() Methode um mein Bild zu finden und initialisiert damit die img Variable.
b) bei g.drawImage(img, 0, 0, this) müsste mein Bild geladen werden, aber mit den Abmaßen von 0px Breite und 0px Höhe und this ist eine Referenz auf ??? ... ja da bin ich überfragt....

Ich weiß wie ich auf meinen Hintergrund zugreife aber nicht wie ich ihn zeichne... und zwar im Hintergrund, weil ich die Methoden von paintContent nicht kenne. Das ist wirklich frustrierend, aber ich denke nicht wirklich eine Liga zu hoch für mich...

 

[kneitzel]

ImagieIO.read liest ein Bild aus einer Ressource und erstellt ein Image Objekt. Damit bekommst Du also ein Abbild des Bildes im Speicher.
Bei der paintComponent Methode wird eine Graphics übergeben. Diese bietet Methoden zum Malen und Zeichnen. Eine Methode ist das drawImage, welches ein Bild malt. Und als Parameter bekommt es das Bild, das gemalt werden soll und die x/y Koordinate wo es hin gemalt werden soll. Das letzte ist ein ImageOberserver - Wie der Name schon sagt, kommt hier ein ObserverPattern zum tragen. Denn wichtig ist in dem Zusammenhang auch der Return Code. Wenn false zurück gegeben wurde, dann verändert sich das Bild noch. In so einem Fall wird der ImageObserver benachrichtigt, wenn das Bild fertig gemalt wurde.
(Braucht man hier nicht, da kann also auch null statt this stehen).

https://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html#drawImage(java.awt.Image, int, int, java.awt.image.ImageObserver)

Ich würde Dir raten, die mit der Dokumentation des Java Frameworks zu beschäftigen. Diese Dokumentation ist immer zu rate zu ziehen, wenn man da etwas machen will.... Auch wenn es am Anfang noch unübersichtlich scheint: Schau einmal drüber und probiere dann von mir aus an Beispielen rum. Und wenn etwas läuft, dann schau noch einmal in der Dokumentation nach. So kommt dann nach und nach ein Verständnis der Dokumentation auf!

Edit: Ach ja: http://openbook.rheinwerk-verlag.de/javainsel9/javainsel_20_006.htm

 

[Ruffyg]

ImagieIO.read liest ein Bild aus einer Ressource und erstellt ein Image Objekt. Damit bekommst Du also ein Abbild des Bildes im Speicher.
Bei der paintComponent Methode wird eine Graphics übergeben. Diese bietet Methoden zum Malen und Zeichnen. Eine Methode ist das drawImage, welches ein Bild malt. Und als Parameter bekommt es das Bild, das gemalt werden soll und die x/y Koordinate wo es hin gemalt werden soll. Das letzte ist ein ImageOberserver - Wie der Name schon sagt, kommt hier ein ObserverPattern zum tragen. Denn wichtig ist in dem Zusammenhang auch der Return Code. Wenn false zurück gegeben wurde, dann verändert sich das Bild noch. In so einem Fall wird der ImageObserver benachrichtigt, wenn das Bild fertig gemalt wurde.
(Braucht man hier nicht, da kann also auch null statt this stehen).

https://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html#drawImage(java.awt.Image, int, int, java.awt.image.ImageObserver)

Ich würde Dir raten, die mit der Dokumentation des Java Frameworks zu beschäftigen. Diese Dokumentation ist immer zu rate zu ziehen, wenn man da etwas machen will.... Auch wenn es am Anfang noch unübersichtlich scheint: Schau einmal drüber und probiere dann von mir aus an Beispielen rum. Und wenn etwas läuft, dann schau noch einmal in der Dokumentation nach. So kommt dann nach und nach ein Verständnis der Dokumentation auf!

Edit: Ach ja: http://openbook.rheinwerk-verlag.de/javainsel9/javainsel_20_006.htm

Danke das ist echt super nützlich , aber ich könnte mittlerweile echt weinen. Habe versucht in meiner paintComponent KLASSE ein neues Objekt der KLASSE paintComponent mit dem Namen img zu erzeugen. Wie erwartet hat es nicht geklappt. Auf diesem Objekt img wollte ich gerne mit IO.Read das Bild als Parameter übergeben.

img = ImageIO.read(getClass().getResource("/hintergrund.jpg"));

Alles ab getClass war rot unterstrichen...

Somit war es spätestens klar das drawImage auch nicht funktioniert...

Mein Code sieht jetzt so aus aber natürlich geht es nicht

public void paintComponent(Graphics g) {
        Graphics2D graphics = (Graphics2D) g;
        paintComponent img = new paintComponent();
        img = ImageIO.read(getClass().getResource("/hintergrund.jpg"));
        g.drawImage(img, 0, 0, null);
        
        Bird bird = this.spielfeld.getBird();
        
        graphics.clearRect(0,0,800, 600);
        
        //Vogel zeichnen
        graphics.drawRect(bird.getxPos(), bird.getyPos(), bird.getBreite(), bird.getHoehe());
        
        //Boden zeichnen
        for(Boden boden : this.spielfeld.getBoden()){
            graphics.setColor(green);
            graphics.fillRect(boden.getxPos(), boden.getyPos(), boden.getBreite(), boden.getHoehe());
            
        }

Warum kann ich kein Objekt img mit dem Standartkonstruktur von paintComponent erstellen?
Warum findet er mein hintergrund.jpg nicht?

 

[mihe7]

paintComponent-Klasse? Bitte, tu Dir einen Gefallen und lern ein paar Grundlagen. Das ist nicht böse gemeint aber so wird das nichts.

 

[Ruffyg]

paintComponent-Klasse? Bitte, tu Dir einen Gefallen und lern ein paar Grundlagen. Das ist nicht böse gemeint aber so wird das nichts.

Entschuldigung Methode... hab ein paar Stunden Schlaf zu wenig

 

[kneitzel]

paintComponent ist keine Klasse sondern eine Methode. Und zwar von der Klasse Container. (JFrame erbt von Frame erbt von Window erbt von Container ...)

Also was solltest Du machen?
a) Instanzvariable private Image backgroundImage;
b) Im Konstruktor das Image laden: backgroundImage = ImageIO.read(getClass().getResource("/hintergrund.jpg"));
c) In der paintComponent Methode von dir dann das malen: g.drawImage(backgroundImage, 0, 0, null);

 

[Ruffyg]

Die Frage für mich ist für euch vermutlich ganz einfach, aber ich verstehe es nicht...

Wie erzeuge ich ein Objekt in der paintComponent Methode auf die ich mit imageIO zugreifen kann

 

[Ruffyg]

paintComponent ist keine Klasse sondern eine Methode. Und zwar von der Klasse Container. (JFrame erbt von Frame erbt von Window erbt von Container ...)

Also was solltest Du machen?
a) Instanzvariable private Image backgroundImage;
b) Im Konstruktor das Image laden: backgroundImage = ImageIO.read(getClass().getResource("/hintergrund.jpg"));
c) In der paintComponent Methode von dir dann das malen: g.drawImage(backgroundImage, 0, 0, null);

Ich weiß das ich die Image Klasse importiert habe. Aber genau da liegt das Problem. Wie soll ich auf deren Konstruktor zugreifen? Und wie bereits gesagt findet er mein hintergrund.jpg nicht

 

[kneitzel]

Also das Objekt, das Du bei ImageIO.read brauchst, ist z.B. eine URL. Und die kannst Du per getClass().getResource(...) erzeugen.
Aber das würde ich nur einmal machen im Konstruktor, denn das Bild muss man ja nur einmal laden.
Daher war mein Vorschlag, das Bild als Instanzvariable zu speichern.

 

[Ruffyg]

Also das Objekt, das Du bei ImageIO.read brauchst, ist z.B. eine URL. Und die kannst Du per getClass().getResource(...) erzeugen.
Aber das würde ich nur einmal machen im Konstruktor, denn das Bild muss man ja nur einmal laden.
Daher war mein Vorschlag, das Bild als Instanzvariable zu speichern.

Ich verstehe es komplett das ihr keinen fertigen Code verschickt und versucht die andere Person zur Lösung hinzuführen. Aber kannst du es mir mal bitte so schreiben wie du es meinst. Ich lerne ja auch wenn ich es sehen...

 

[mihe7]

Also, Du hast eine Klasse, die eine Menge von gleichartigen Objekten beschreibt. Die Objekte sind gleichartig bzgl. ihrer Eigenschaften (Attribute) und ihres Verhaltens (Methoden) und unterscheiden sich voneinander durch ihre Identität.

Ein Attribut besitzt erstmal einen Namen und in Java legt man auch noch den Wertebereich in Form eines Typs fest. Hinzu kommen noch andere Dinge, die aber an der Stelle nebensächlich sind.

Attribute von Objekten legt man in Instanzvariablen fest. Wenn Du eine Klasse Hauptfenster hast und Du sagst, dass die Hauptfenster-Objekt ein Attribut für das Hintergrundbild besitzen, dann formulierst Du das z. B. so:

public class Hauptfenster {
    private Image backgroundImage; // privates Attribut mit dem Namen "backgroundImage", das Werte vom Typ Image aufnehmen kann.
}

Der Konstruktor einer Klasse wird bei der Erzeugung neuer Objekte verwendet, um diese zu initialisieren. Instanzvariablen werden immer initialisiert, auch wenn Du keinen Konstruktor angibst. Handelt es sich - wie hier - beim dem Typ um einen Referenztyp, dann wird die Variable mit null initialisiert.

Du möchtest jetzt also, dass bei der Erzeugung eines Hauptfensters das Bild geladen wird. Dem entsprechend könnte man das im Konstruktor erledigen:

public class Hauptfenster {
    private Image backgroundImage;
    public Hauptfenster() {
         backgroundImage = ImageIO.read(/* URL zur Datei, hier also: */ getClass().getResource("/hintergrund.jpg"));
    }
}

Wir nun ein Hauptfenster-Objekt erzeugt, wird backgroundImage das geladene Bild enthalten, sofern es geladen werden konnte.

Auf die Instanzvariable kannst Du nun überall im Objekt zugreifen, z. B. auch in paintComponent:

public class Hauptfenster extends JFrame {
    private Image backgroundImage;
    public Hauptfenster() {
         backgroundImage = ImageIO.read(/* URL zur Datei, hier also: */ getClass().getResource("/hintergrund.jpg"));
    }
    public void paintComponent(Graphics g) {
        g.drawImage(backgroundImage, 0, 0, null);
    }
}

Den Spaß musst Du jetzt nur in Deine Hauptfensterklasse integrieren.

 

[Ruffyg]

Also, Du hast eine Klasse, die eine Menge von gleichartigen Objekten beschreibt. Die Objekte sind gleichartig bzgl. ihrer Eigenschaften (Attribute) und ihres Verhaltens (Methoden) und unterscheiden sich voneinander durch ihre Identität.

Ein Attribut besitzt erstmal einen Namen und in Java legt man auch noch den Wertebereich in Form eines Typs fest. Hinzu kommen noch andere Dinge, die aber an der Stelle nebensächlich sind.

Attribute von Objekten legt man in Instanzvariablen fest. Wenn Du eine Klasse Hauptfenster hast und Du sagst, dass die Hauptfenster-Objekt ein Attribut für das Hintergrundbild besitzen, dann formulierst Du das z. B. so:

public class Hauptfenster {
    private Image backgroundImage; // privates Attribut mit dem Namen "backgroundImage", das Werte vom Typ Image aufnehmen kann.
}

Der Konstruktor einer Klasse wird bei der Erzeugung neuer Objekte verwendet, um diese zu initialisieren. Instanzvariablen werden immer initialisiert, auch wenn Du keinen Konstruktor angibst. Handelt es sich - wie hier - beim dem Typ um einen Referenztyp, dann wird die Variable mit null initialisiert.

Du möchtest jetzt also, dass bei der Erzeugung eines Hauptfensters das Bild geladen wird. Dem entsprechend könnte man das im Konstruktor erledigen:

public class Hauptfenster {
    private Image backgroundImage;
    public Hauptfenster() {
         backgroundImage = ImageIO.read(/* URL zur Datei, hier also: */ getClass().getResource("/hintergrund.jpg"));
    }
}

Wir nun ein Hauptfenster-Objekt erzeugt, wird backgroundImage das geladene Bild enthalten, sofern es geladen werden konnte.

Auf die Instanzvariable kannst Du nun überall im Objekt zugreifen, z. B. auch in paintComponent:

public class Hauptfenster extends JFrame {
    private Image backgroundImage;
    public Hauptfenster() {
         backgroundImage = ImageIO.read(/* URL zur Datei, hier also: */ getClass().getResource("/hintergrund.jpg"));
    }
    public void paintComponent(Graphics g) {
        g.drawImage(backgroundImage, 0, 0, null);
    }
}

Den Spaß musst Du jetzt nur in Deine Hauptfensterklasse integrieren.

Vielen lieben dank, im Unterricht haben wir Attribute noch nie behandelt, daher sind Sie für mich absolutes Neuland.

Ich denke das es klappen würde, leider findet er wie im letzten Screenshot von mir zu sehen den Pfad für mein Bild nicht. Hier noch ein Screen.

 

[kneitzel]

Also da ist etwas rot umrandet, d.h. er meckert etwas an. Wenn Du mit der Maus auf den rot unterkringelten Text gehst, dann sollte er Anzeigen, was da nicht stimmt.

Und da dürftest Du dann zu lesen bekommen, dass ImageIO.read eine IOException werfen kann und dieses behandelt werden sollte. Es fehlt also ein try / catch Konstrukt:

try {
    backgroundImage = ImageIO.read(....);
} catch (IOException ex) {
    System.err.println("Unable to load background image: " + ex.getMessage());
    ex.printStackTrace();
}

 

[Ruffyg]

Also da ist etwas rot umrandet, d.h. er meckert etwas an. Wenn Du mit der Maus auf den rot unterkringelten Text gehst, dann sollte er Anzeigen, was da nicht stimmt.

Und da dürftest Du dann zu lesen bekommen, dass ImageIO.read eine IOException werfen kann und dieses behandelt werden sollte. Es fehlt also ein try / catch Konstrukt:

try {
    backgroundImage = ImageIO.read(....);
} catch (IOException ex) {
    System.err.println("Unable to load background image: " + ex.getMessage());
    ex.printStackTrace();
}

Habe ich gemacht und es wurden keine Fehler mehr angezeigt. Also habe ich das Programm gestartet und jetzt ist da nur noch ein leerer Bildschirm uff...




Keine Ahnung was ich jetzt tun soll... ich gebe euch nochmal eine aktualisierte Variante meines Quellcodes... wäre schön wenn sich das jemand mal anschaut...

FlappyBird – Google Drive

drive.google.com

Ich bin für jede Hilfe extremst dankbar

 

[kneitzel]

Also das mit dem Sharen über Google Drive ist nicht zielführend, wenn Da ständig Deine Veränderungen rein kommen....

Ich wollte es nachvollziehen und dann ist da jetzt eine Version ganz ohne Hintergrund...

 

[Ruffyg]

Also das mit dem Sharen über Google Drive ist nicht zielführend, wenn Da ständig Deine Veränderungen rein kommen....

Ich wollte es nachvollziehen und dann ist da jetzt eine Version ganz ohne Hintergrund...

Welche Version meines Programmes hättest du denn gerne?

Also, Du hast eine Klasse, die eine Menge von gleichartigen Objekten beschreibt. Die Objekte sind gleichartig bzgl. ihrer Eigenschaften (Attribute) und ihres Verhaltens (Methoden) und unterscheiden sich voneinander durch ihre Identität.

Ein Attribut besitzt erstmal einen Namen und in Java legt man auch noch den Wertebereich in Form eines Typs fest. Hinzu kommen noch andere Dinge, die aber an der Stelle nebensächlich sind.

Attribute von Objekten legt man in Instanzvariablen fest. Wenn Du eine Klasse Hauptfenster hast und Du sagst, dass die Hauptfenster-Objekt ein Attribut für das Hintergrundbild besitzen, dann formulierst Du das z. B. so:

public class Hauptfenster {
    private Image backgroundImage; // privates Attribut mit dem Namen "backgroundImage", das Werte vom Typ Image aufnehmen kann.
}

Der Konstruktor einer Klasse wird bei der Erzeugung neuer Objekte verwendet, um diese zu initialisieren. Instanzvariablen werden immer initialisiert, auch wenn Du keinen Konstruktor angibst. Handelt es sich - wie hier - beim dem Typ um einen Referenztyp, dann wird die Variable mit null initialisiert.

Du möchtest jetzt also, dass bei der Erzeugung eines Hauptfensters das Bild geladen wird. Dem entsprechend könnte man das im Konstruktor erledigen:

public class Hauptfenster {
    private Image backgroundImage;
    public Hauptfenster() {
         backgroundImage = ImageIO.read(/* URL zur Datei, hier also: */ getClass().getResource("/hintergrund.jpg"));
    }
}

Wir nun ein Hauptfenster-Objekt erzeugt, wird backgroundImage das geladene Bild enthalten, sofern es geladen werden konnte.

Auf die Instanzvariable kannst Du nun überall im Objekt zugreifen, z. B. auch in paintComponent:

public class Hauptfenster extends JFrame {
    private Image backgroundImage;
    public Hauptfenster() {
         backgroundImage = ImageIO.read(/* URL zur Datei, hier also: */ getClass().getResource("/hintergrund.jpg"));
    }
    public void paintComponent(Graphics g) {
        g.drawImage(backgroundImage, 0, 0, null);
    }
}

Den Spaß musst Du jetzt nur in Deine Hauptfensterklasse integrieren.

Bevor ich das hinzugefügt habe und nichts mehr angezeigt wurde oder das neuste?

 

[kneitzel]

Also - ich habe jetzt in deine Version (Wo Du den Hintergrund wieder ausgebaut hast), das eingebaut, was wir Dir genannt haben und es funktioniert problemlos.

Worauf du achten musst, ist die Reihenfolge der Befehle:

graphics.clearRect(0,0,800, 600);
g.drawImage(backgroundImage, 0, 0, null);

Wenn Du das Hintergrundbild erst malst und dann das clearRect aufrufst, dann ist das gemalte Bild natürlich wieder weg! Evtl. war das ja Dein Problem. Wobei ein ganz graues Fenster sollte eigentlich nie gekommen sein...

Spoiler: Ganze Klasse

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package flappybird.gui;

import flappybird.model.Bar;
import flappybird.model.Bird;
import flappybird.model.Punkte;
import flappybird.model.Boden;
import flappybird.model.Spielfeld;
import static java.awt.Color.black;
import static java.awt.Color.green;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;

/**
 *
 * @author keschke
 */
public class Hauptfenster extends JFrame implements ActionListener,MouseListener,KeyListener{
    
    private Spielfeld spielfeld = new Spielfeld();
    private Punkte punkte = new Punkte();
    
    private int interval = 25;
    private Timer timer = new Timer(interval, this);
    
    private Image backgroundImage;

    public Hauptfenster(){
        super("FlappyBird");
        this.initSpielfeld();
        this.initComponents();
    try {
            backgroundImage = ImageIO.read(getClass().getResource("/hintergrund.jpg"));
        } catch (IOException ex) {
            System.out.println("Unable to load background image: " + ex.getMessage());
        }
    }
    
    private void initSpielfeld(){
        this.spielfeld.setBreite(800);
        this.spielfeld.setHoehe(600);
        Bird bird = this.spielfeld.getBird();
        bird.setxPos(100);
        bird.setyPos(100);
        bird.setBreite(100);
        bird.setHoehe(100);
    }
    
    private void initComponents(){
        this.setSize(800, 600);
        /* BackgroundPanel backgroundPanel = new BackgroundPanel();
    add(backgroundPanel);

    setSize(backgroundPanel.getBackgroundImage().getWidth(backgroundPanel),    backgroundPanel.getBackgroundImage().getHeight(backgroundPanel)); */
        
        this.addMouseListener(this);
        this.addKeyListener(this);
        
        this.timer.start();
        
    }

    @Override
    public void paint(Graphics g) {
        Graphics2D graphics = (Graphics2D) g;
      
        Bird bird = this.spielfeld.getBird();
        
        graphics.clearRect(0,0,800, 600);
    g.drawImage(backgroundImage, 0, 0, null);
        
        //Vogel zeichnen
        graphics.drawRect(bird.getxPos(), bird.getyPos(), bird.getBreite(), bird.getHoehe());
        
        //Boden zeichnen
        for(Boden boden : this.spielfeld.getBoden()){
            graphics.setColor(green);
            graphics.fillRect(boden.getxPos(), boden.getyPos(), boden.getBreite(), boden.getHoehe());
            
        }
        
        //BottomBars zeichnen
        for(Bar b : this.spielfeld.getBottomBars()){
            graphics.setColor(black);
            graphics.fillRect(b.getxPos(), b.getyPos(), b.getBreite(), b.getHoehe());
        }
        
        //TopBars zeichnen
        for(Bar b : this.spielfeld.getTopBars()){
            graphics.setColor(black);
            graphics.fillRect(b.getxPos(), b.getyPos(), b.getBreite(), b.getHoehe());
        }
        
        
    }
    
    
    
    
    

    @Override
    public void actionPerformed(ActionEvent e) {
        System.out.println("ActionPerformed " + e.getActionCommand());
        
        this.spielfeld.update(this.interval);
        
        this.repaint();
    }

    @Override
    public void mouseClicked(MouseEvent e) {
        System.out.println("MouseClicked");
        Bird bird = this.spielfeld.getBird();
        bird.setyPos(bird.getyPos()-50);
        punkte.plus();
        System.out.println("Ihr Punktestand hat sich um eins erhöht. Er beträgt nun: " + punkte.getPunktestand());
        
    }

    @Override
    public void mousePressed(MouseEvent e) {
        
    }

    @Override
    public void mouseReleased(MouseEvent e) {
        
    }

    @Override
    public void mouseEntered(MouseEvent e) {
        
    }

    @Override
    public void mouseExited(MouseEvent e) {
        
    }

    @Override
    public void keyTyped(KeyEvent e) {
        
    }

    @Override
    public void keyPressed(KeyEvent e) {
        System.out.println("KeyPressed " + e.getKeyCode());
    }

    @Override
    public void keyReleased(KeyEvent e) {
        
    }
    
    
}

 

[Ruffyg]

Also - ich habe jetzt in deine Version (Wo Du den Hintergrund wieder ausgebaut hast), das eingebaut, was wir Dir genannt haben und es funktioniert problemlos.

Worauf du achten musst, ist die Reihenfolge der Befehle:

graphics.clearRect(0,0,800, 600);
g.drawImage(backgroundImage, 0, 0, null);

Wenn Du das Hintergrundbild erst malst und dann das clearRect aufrufst, dann ist das gemalte Bild natürlich wieder weg! Evtl. war das ja Dein Problem. Wobei ein ganz graues Fenster sollte eigentlich nie gekommen sein...

Spoiler: Ganze Klasse

/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package flappybird.gui;

import flappybird.model.Bar;
import flappybird.model.Bird;
import flappybird.model.Punkte;
import flappybird.model.Boden;
import flappybird.model.Spielfeld;
import static java.awt.Color.black;
import static java.awt.Color.green;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;

/**
*
* @author keschke
*/
public class Hauptfenster extends JFrame implements ActionListener,MouseListener,KeyListener{
   
    private Spielfeld spielfeld = new Spielfeld();
    private Punkte punkte = new Punkte();
   
    private int interval = 25;
    private Timer timer = new Timer(interval, this);
   
    private Image backgroundImage;

    public Hauptfenster(){
        super("FlappyBird");
        this.initSpielfeld();
        this.initComponents();
    try {
            backgroundImage = ImageIO.read(getClass().getResource("/hintergrund.jpg"));
        } catch (IOException ex) {
            System.out.println("Unable to load background image: " + ex.getMessage());
        }
    }
   
    private void initSpielfeld(){
        this.spielfeld.setBreite(800);
        this.spielfeld.setHoehe(600);
        Bird bird = this.spielfeld.getBird();
        bird.setxPos(100);
        bird.setyPos(100);
        bird.setBreite(100);
        bird.setHoehe(100);
    }
   
    private void initComponents(){
        this.setSize(800, 600);
        /* BackgroundPanel backgroundPanel = new BackgroundPanel();
    add(backgroundPanel);

    setSize(backgroundPanel.getBackgroundImage().getWidth(backgroundPanel),    backgroundPanel.getBackgroundImage().getHeight(backgroundPanel)); */
       
        this.addMouseListener(this);
        this.addKeyListener(this);
       
        this.timer.start();
       
    }

    @Override
    public void paint(Graphics g) {
        Graphics2D graphics = (Graphics2D) g;
     
        Bird bird = this.spielfeld.getBird();
       
        graphics.clearRect(0,0,800, 600);
    g.drawImage(backgroundImage, 0, 0, null);
       
        //Vogel zeichnen
        graphics.drawRect(bird.getxPos(), bird.getyPos(), bird.getBreite(), bird.getHoehe());
       
        //Boden zeichnen
        for(Boden boden : this.spielfeld.getBoden()){
            graphics.setColor(green);
            graphics.fillRect(boden.getxPos(), boden.getyPos(), boden.getBreite(), boden.getHoehe());
           
        }
       
        //BottomBars zeichnen
        for(Bar b : this.spielfeld.getBottomBars()){
            graphics.setColor(black);
            graphics.fillRect(b.getxPos(), b.getyPos(), b.getBreite(), b.getHoehe());
        }
       
        //TopBars zeichnen
        for(Bar b : this.spielfeld.getTopBars()){
            graphics.setColor(black);
            graphics.fillRect(b.getxPos(), b.getyPos(), b.getBreite(), b.getHoehe());
        }
       
       
    }
   
   
   
   
   

    @Override
    public void actionPerformed(ActionEvent e) {
        System.out.println("ActionPerformed " + e.getActionCommand());
       
        this.spielfeld.update(this.interval);
       
        this.repaint();
    }

    @Override
    public void mouseClicked(MouseEvent e) {
        System.out.println("MouseClicked");
        Bird bird = this.spielfeld.getBird();
        bird.setyPos(bird.getyPos()-50);
        punkte.plus();
        System.out.println("Ihr Punktestand hat sich um eins erhöht. Er beträgt nun: " + punkte.getPunktestand());
       
    }

    @Override
    public void mousePressed(MouseEvent e) {
       
    }

    @Override
    public void mouseReleased(MouseEvent e) {
       
    }

    @Override
    public void mouseEntered(MouseEvent e) {
       
    }

    @Override
    public void mouseExited(MouseEvent e) {
       
    }

    @Override
    public void keyTyped(KeyEvent e) {
       
    }

    @Override
    public void keyPressed(KeyEvent e) {
        System.out.println("KeyPressed " + e.getKeyCode());
    }

    @Override
    public void keyReleased(KeyEvent e) {
       
    }
   
   
}

Bei dir funktioniert es??

Bei mir sieht es so aus

Anhang anzeigen 12729

 

[kneitzel]

Hast Du die Klasse übernommen, die ich im Spoiler hinterlegt habe?

Macht da deine IDE irgendwas falsch? Hast Du mal alles neu übersetzt? Also erst ein clean und dann ein neues bauen? Ich setze kein Netbeans ein, daher kann ich dazu nicht viel sagen...

Aber ja: Bei mir funktioniert es problemlos:

 

[Ruffyg]

Hast Du die Klasse übernommen, die ich im Spoiler hinterlegt habe?

Macht da deine IDE irgendwas falsch? Hast Du mal alles neu übersetzt? Also erst ein clean und dann ein neues bauen? Ich setze kein Netbeans ein, daher kann ich dazu nicht viel sagen...

Aber ja: Bei mir funktioniert es problemlos:
Anhang anzeigen 12730

Ja hatte den Spoiler nicht gesehen ^^ hat jetzt auch bei mir geklappt ... viele vielen lieben Dank


Jetzt flimmert alle paar Millisekunden der Bildschirm weiß auf... aber das Problem werde ich mal versuchen alleine anzugehen... habe aber keinen Ansatz xd

 

[kneitzel]

Flackern und so kannst Du durch Double Buffering lösen. Die Idee ist relativ einfach:
- Du malst nicht mehr im eigentlich UI Thread sondern hast einen anderen Thread, der für alles verantwortlich ist.
- Dieser andere Prozess malt immer wieder ein Bild und dein Fenster zeigt dann nur noch dieses Bild an.

Siehe dazu einfach einmal http://www.tutego.de/java/articles/Doppelpufferung-Java-Double-Buffering.html

Es gibt aber noch viel mehr Ressourcen, die man unter dem Suchbegriff per Google finden kann.

 

[Ruffyg]

Flackern und so kannst Du durch Double Buffering lösen. Die Idee ist relativ einfach:
- Du malst nicht mehr im eigentlich UI Thread sondern hast einen anderen Thread, der für alles verantwortlich ist.
- Dieser andere Prozess malt immer wieder ein Bild und dein Fenster zeigt dann nur noch dieses Bild an.

Siehe dazu einfach einmal http://www.tutego.de/java/articles/Doppelpufferung-Java-Double-Buffering.html

Es gibt aber noch viel mehr Ressourcen, die man unter dem Suchbegriff per Google finden kann.

Klingt nach einem schönen Projekt für die nächsten Stunden.

Danke nochmal an alle die geholfen haben

 

[mihe7]

im Unterricht haben wir Attribute noch nie behandelt, daher sind Sie für mich absolutes Neuland.

Vermutlich ging es bislang um die Grundlagen imperativer Programmierung. Dafür brauchst Du im Allgemeinen weder Klassen noch Objekte (imperative Programmierung ist nicht auf das objektorientierte Paradigma beschränkt). Da in Java aber immer eine Klasse benötigt wird, werdet ihr vermutlich alles in main und/oder ggf. anderen statischen (static) Methoden erledigt haben.

 

[Ruffyg]

Vermutlich ging es bislang um die Grundlagen imperativer Programmierung. Dafür brauchst Du im Allgemeinen weder Klassen noch Objekte (imperative Programmierung ist nicht auf das objektorientierte Paradigma beschränkt). Da in Java aber immer eine Klasse benötigt wird, werdet ihr vermutlich alles in main und/oder ggf. anderen statischen (static) Methoden erledigt haben.

Halt absoluter Spaghetticode in der Main Klasse. Wollte direkt auf Objektorientiert umsteigen...