Java Graphics on a null layout

Question

My end game for this panel is that I have an img icon be able to move around the screen and when they land on one of my what are currently buttons the new panel opens up and you get a mini game, i.e. true/false, maze, or word find.

Where I am currently at... I made a basic null layout and put buttons as place holders where the players icon will go to to open the next panel.

I was working on putting a simple rectangle on the screen that would use arrow keyboard listener to move around. I watched tutorials online about creating this as well as searched this data base.

My current code still shows my null layout with with my map img background and buttons with img icons on those buttons. It will not show my rectangle.

Yes I am a student and this is a project from school, my hope is that you give me guidance in the right direction for the 3 main things I am trying to do here. A. Get rectangle on screen and move it. B. Get image icon on rectangle. C. Where should I start with looking into making it so when the object that moves hits a certain spot JLable,Jbutton,Janything I can't think of how to bring up my new panel that I already have made.

Thank you for any help you all can provide.

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;


public class map extends JPanel implements ActionListener, KeyListener{

    Timer t = new Timer(5,this);
    int x = 0, y = 0, velX = 0, velY = 0;
    JButton mapButton, worldCampusB, universityParkB, fayetteB, erieB, yorkB, 
            hazeltonB;  
    JLabel background;
    ImageIcon img;


    public map(){


        t.start();
        addKeyListener(this);
        setFocusable(true);
        setFocusTraversalKeysEnabled(false);


        setBackground(new Color(9, 49, 98));  
        setLayout(new BorderLayout());
        ImageIcon oldmain = new ImageIcon("images/oldmain.jpg");
        ImageIcon hazelton = new ImageIcon("images/hazelton.jpeg");
        ImageIcon york = new ImageIcon("images/york.jpg");
        ImageIcon erie = new ImageIcon("images/erie.jpg");
        ImageIcon fayette = new ImageIcon("images/fayette.jpg");
        ImageIcon worldcampus = new ImageIcon("images/worldcampus.png");
        background = new JLabel(new ImageIcon("images/pennmap.jpg"));
        add (background);
        background.setLayout(null);       
        mapButton = new JButton("Map Menu: Click to return to main menu.");
        mapButton.setBounds(new Rectangle(300,20,300,50));
        worldCampusB = new JButton("World Campus");
        worldCampusB.setIcon(worldcampus);
        universityParkB = new JButton("University Park");
        universityParkB.setIcon(oldmain);
        fayetteB = new JButton("Fayette");
        fayetteB.setIcon(fayette);
        erieB = new JButton ("Erie");
        erieB.setIcon(erie);
        yorkB = new JButton ("York");
        yorkB.setIcon(york);
        hazeltonB = new JButton ("Hazelton");
        hazeltonB.setIcon(hazelton);
        background.add(mapButton);
        background.add(worldCampusB);
        background.add(universityParkB);
        background.add(fayetteB);
        background.add(erieB);
        background.add(yorkB);
        background.add(hazeltonB);
        //adjusted the button locations on the map - jpk5816
        worldCampusB.setBounds(new Rectangle (750,20,195,150));
        worldCampusB.setHorizontalTextPosition(JButton.CENTER);
        worldCampusB.setVerticalTextPosition(JButton.BOTTOM);
        universityParkB.setBounds(new Rectangle(380,250,175,140));
        universityParkB.setHorizontalTextPosition(JButton.CENTER);
        universityParkB.setVerticalTextPosition(JButton.BOTTOM);
        fayetteB.setBounds(new Rectangle(40,445,200,150));
        fayetteB.setHorizontalTextPosition(JButton.CENTER);
        fayetteB.setVerticalTextPosition(JButton.BOTTOM);
        erieB.setBounds(new Rectangle(50,100,175,170));
        erieB.setHorizontalTextPosition(JButton.CENTER);
        erieB.setVerticalTextPosition(JButton.BOTTOM);
        yorkB.setBounds(new Rectangle(625,460,185,130));
        yorkB.setHorizontalTextPosition(JButton.CENTER);
        yorkB.setVerticalTextPosition(JButton.BOTTOM);
        hazeltonB.setBounds(new Rectangle(690,190,170,140));
        hazeltonB.setHorizontalTextPosition(JButton.CENTER);
        hazeltonB.setVerticalTextPosition(JButton.BOTTOM);
    }
        public void paintCompent(Graphics g){
            super.paintComponent(g);
            g.setColor(new Color(9, 49, 98));
            g.fillRect(x, y, 50, 30);
        }
        public void actionPerformed(ActionEvent e){                        
            repaint();
            x += velX;
            y += velY;            
        }
        public void up(){
            velY = -1;
            velX = 0;
        }
        public void down(){
            velY = 1;
            velX = 0;
        }
        public void left(){
            velX = -1;
            velY = 0;
        }
        public void right(){
            velX = 1;
            velY = 0;
        }
        public void keyPressed(KeyEvent e){
            int code = e.getKeyCode();
            if (code == KeyEvent.VK_UP){
                up();
            }
            if (code == KeyEvent.VK_DOWN){
                down();
            }
            if (code == KeyEvent.VK_LEFT){
                left();
            }
            if (code == KeyEvent.VK_RIGHT){
                right();
            }

        }
        public void keyTyped(KeyEvent e){}
        public void keyReleased(KeyEvent e){}

}

To make this question better, can you please post your current undesired results with your current code? (A link is okay since it is supplementary and the code is already quite long) — Ṃųỻịgǻňạcểơửṩ, Jul 29 '18 at 04:40
I'm sorry I am quite new to this, my undesired results is that the code will not show my drawn rectangle on the output, it just shows my background image and the buttons. — Justin, Jul 29 '18 at 04:53
One way to get image(s) for an example is to hot link to images seen in [this Q&A](http://stackoverflow.com/q/19209650/418556). E.G. [This answer](https://stackoverflow.com/a/10862262/418556) hot links to an image embedded in [this question](https://stackoverflow.com/q/10861852/418556). — Andrew Thompson, Jul 29 '18 at 06:07
`I watched tutorials online about creating this as well as searched this data base.` - you should not be using a KeyListener. All the recommendations in the forum are to use "Key Bindings". See [Motion Using the Keyboard](https://tips4java.wordpress.com/2013/06/09/motion-using-the-keyboard/). The example shows how to move an action component, not a drawing of an image. However, the concept is the same. Instead of setting the location of the component, you set the x/y value of the rectangle you want to paint. — camickr, Jul 29 '18 at 18:08

Hovercraft Full Of Eels · Answer 1 · 2018-07-29T15:52:53.553

Your JLabel's ImageIcon is being added to the drawing JPanel, the this or map JPanel (should be re-named "Map"), so that none of the drawing within map will display. But why do this? Why use a JLabel with ImageIcon as a background image when you're already overriding map's paintComponent? A better solution is to get rid of the background JLabel and simply draw that image within the paintComponent method of map, and then draw the rectangle after that.

@Override
protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    g.drawImage(backgroundImg, 0, 0, this); // draw image
    g.setColor(new Color(9, 49, 98));
    g.fillRect(x, y, 50, 30);
}

// rename this to Map so that it complies with Java standards
public class Map extends JPanel implements ActionListener, KeyListener {

    private static String IMAGE_PATH = "images/pennmap.jpg";

    // ..... other code here

    // JLabel background;  // **** get rid of this ****
    // ImageIcon img;

    private BufferedImage backgroundImg;


    // constructor needs to be re-named
    public Map(){

        backgroundImg = ImageIO.read(new File(IMAGE_PATH)); // read in image. Better to use resources though


        // .... code here



        // background = new JLabel(new ImageIcon("images/pennmap.jpg")); // again get rid of
        // add (background); // get rid of

        // .... code here
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        g.drawImage(backgroundImg, 0, 0, this); // draw image
        g.setColor(new Color(9, 49, 98));
        g.fillRect(x, y, 50, 30);
    }

    // ..... 

}

I am getting an error with the- backgroundImg = ImageIO.read(IMAGE_PATH); It is saying "no suitable method found for read(String) method ImageIO.read(File) is not applicable (argument mismatch; String cannot be converted to File) — Justin, Jul 29 '18 at 04:22
@Justin: yes, that should be `new File(...)` in there (corrected), and you may have to handle exceptions, and import classes -- this code isn't posted as a copy-and-paste solution but rather as a general idea post. — Hovercraft Full Of Eels, Jul 29 '18 at 04:37
I'm a bit confused as to the code edit: `@Override protected void paintCompent(Graphics g) {`. Shouldn't that produce a compiler error? (`paintCompent` should be `paintComponent`) — Andrew Thompson, Jul 29 '18 at 06:03
@Andrew, He copied my code and put in an idea to try, the paintCompent was my error and I found and fixed but I still have been unable to solve this. I tried his idea I went on Oracle tutorials about drawing an img and have tried the "try and catch" way and have yet to be able to draw the .jpg image on the panel. Which is supposed to be the better way before I try to do the rectangle keyboard issue. — Justin, Jul 29 '18 at 06:52
@AndrewThompson: carelessness on my part. Thanks for pointing it out! — Hovercraft Full Of Eels, Jul 30 '18 at 01:48

score 0 · Accepted Answer · answered Aug 02 '18 at 20:03

Found a way to draw the image that isn't the odd idea for a beginner in the other answer.

in myJPanel
   public class myJPanel extends JPanel implements ActionListener {

   ImageIcon img; //declare 

public myJPanel(){
    super();
    setBackground(Color.white);
    setLayout (new BorderLayout());
    credits = new credits();
    instructions = new instructions();
    characterTheme = new characterTheme();
    img = new ImageIcon("images/pennmap.jpg");//grab from images foler.

in map.java which is where I wanted the img drawn.

public class map extends JPanel {

    ImageIcon img; 

public map (ImageIcon img){
    this.img = img;
    Dimension size = new Dimension(getWidth(),getHeight());
    setPreferredSize(size);
    setMinimumSize(size);
    setMaximumSize(size);
    setSize(size);
    setLayout(null);  
}
public void paintComponent(Graphics g){
    g.drawImage(img.getImage(), 0, 0, null);
}

There was much more to the question but it appears there isn't much interest in it so I will close it at this. As this was my first hurdle in this mini project of making this game.

Java Graphics on a null layout

2 Answers2