How do I change the rectangles to an image?

Question

I just started learning Java (OOP) and I am trying to develop a simple game (like space invaders). I want to replace the guards (brown rectangles) to an image to make the game more aesthetically pleasing.

I am not sure how to do this as the guards are dependent on a lot of things. I tried using the loadImage() method and others but it did not work.

Relevant codes:

Guard.java

public class Guard {

    private List<Square> squares;

    public Guard(int x, int y) {
        squares=new ArrayList<>();
        for(int i=0; i<3; i++) {
            for (int j = 0; j < 6; j++) {
                squares.add(new Square(x + SQUARE_SIZE * j, y + SQUARE_SIZE * i));
            }
        }
    }

    public void collisionWith(MovingObject obj) {
        for(Square square : squares) {
            if(square.visible && square.intersects(obj.getBoundary())) {
                square.setVisible(false);
                obj.die();
            }
        }
    }

    public void draw(Graphics g) {
        for(Square square : squares) 
        {
            if(square.visible) square.draw(g);
        }
    }

}

Square.java

    class Square extends Rectangle  {

    boolean visible;

    Square(int x, int y) 
    {
        super(x, y, SQUARE_SIZE, SQUARE_SIZE);
        setVisible(true);
    }

    void setVisible(boolean visible) {
        this.visible = visible;
    }

    void draw(Graphics g) {
        g.setColor(new Color(228, 155, 30));
        g.fillRect(x, y, width, height);
    }
}

Screenshot for reference: Instead of brown boxes, I want to change it to other things using images

In order to draw Images in components with Graphics class, you should use the drawImage() method. Maybe this question help you: https://stackoverflow.com/questions/9083096/drawing-an-image-to-a-jpanel-within-a-jframe — Edgar Magallon, Feb 03 '21 at 17:25
1) *"I tried using the loadImage() method and others but it did not work."* How did it fail? Always copy/paste error and exception output! 2) *"Relevant codes:"* What's relevent in your eyes, and what's relevant for getting help, are two different things. a) For better help sooner, [edit] to add a [MCVE] or [Short, Self Contained, Correct Example](http://www.sscce.org/). b) 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. The code in [this answer](https://stackoverflow.com/a/10862262/418556) .. — Andrew Thompson, Feb 03 '21 at 20:32
.. hot links to an image embedded in [this question](https://stackoverflow.com/q/10861852/418556). — Andrew Thompson, Feb 03 '21 at 20:32

c0der · Answer 1 · 2021-02-05T09:08:09.657

The following mre demonstrates using an image to represent a rectangle. Note that for easier implementation Gurd extends Componenet:

import java.awt.*;
import java.io.IOException;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;
import javax.swing.*;

public class SwingMain {

    SwingMain() {
        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setLocationRelativeTo(null);
        frame.add(new Guard(0,0));
        frame.pack();
        frame.setVisible(true);
    }

    class Guard extends Component{

        private static final int GAP = 3,  W = 6, H = 3;
        private int squareSize, totalX, totalY;
        private final List<Square> squares;

        public Guard(int x, int y) {
            squares=new ArrayList<>();
            totalY = 0;
            Square square = null;
            for(int i=0; i< H; i++) {
                totalX = 0;
                for (int j = 0; j < W; j++) {
                    square = new Square(x + totalX , y + totalY );
                    squares.add(square);

                    totalX += square.getWidth() +GAP;
                }
                totalY += square.getHeight() +GAP;
            }
        }

        @Override
        public void paint(Graphics g) {
            super.paint(g);
            for(Square square : squares) {
                square.draw(g);
            }
        }

        @Override
        public Dimension getPreferredSize(){
            return new Dimension(totalX, totalY);
        }
    }

    class Square{

        private static final String BOX =
                "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Box_Orange.png";
        private  Image image = null;

        private final int x,y;

        Square(int x, int y)   {
            this.x=x; this.y = y;
            try {
                image = new ImageIcon(new URL(BOX)).getImage();
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }

        void draw(Graphics g) {
            g.drawImage(image, x,y, null);
        }

        int getWidth(){
            return image.getWidth(null);
        }

        int getHeight(){
            return  image.getHeight(null);
        }
    }

    public static void main(String[] args) {
        new SwingMain();
    }
}

Square is not efficient because it reads and constructs image over again.
To make it more efficient you can introduce a static block to initialize image only once:

static class Square{

    private static final String BOX =
            "https://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Box_Orange.png";
    private static Image image = null;
    static{

        try {
            image = new ImageIcon(new URL(BOX)).getImage();
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }

    private final int x,y;

    Square(int x, int y)   {
        this.x=x; this.y = y;
    }

    void draw(Graphics g) {
        g.drawImage(image, x,y, null);
    }

    int getWidth(){
        return image.getWidth(null);
    }

    int getHeight(){
        return  image.getHeight(null);
    }
}

How do I change the rectangles to an image?

1 Answers1