Draw grid issue

Question

I want to create a simple grid in Java as a map editor working with tiles. In my render method I've put this

public void render(Graphics g){
    renderGrid(g,96,64);

}

private void renderGrid(Graphics g,int width, int height) {
    g.setColor(Color.white);
    for (int y = 0; y < height; y += 32){
        for (int x = 0;x<width; x+= 32){
                g.drawRect(x, y, x+32, y+32);
                System.out.println("x =" + x + " y= " + y + " width= " + (x + 32 - x) + " height=" + (y + 32 - y)+ " column No= " + x/32 + " row No= " + y / 32);
        }
    }
}

But when I start the program, it gives me this:

Here's the debug message

x =0 y= 0 width= 32 height=32 column No= 0 row No= 0
x =32 y= 0 width= 32 height=32 column No= 1 row No= 0
x =64 y= 0 width= 32 height=32 column No= 2 row No= 0
x =0 y= 32 width= 32 height=32 column No= 0 row No= 1
x =32 y= 32 width= 32 height=32 column No= 1 row No= 1
x =64 y= 32 width= 32 height=32 column No= 2 row No= 1

Any suggestion? Why aren't the cells square?

Answer 1

Your problem is that drawRect takes start locations and sizes, not start locations and end locations. So it should be:-

//drawRect(int x, int y, int width, int height)
g.drawRect(x, y, 32, 32);

Additionally

This (x + 32 - x) and this (y + 32 - y) are the same as (32)

Answer 2

The problem is right here:

g.drawRect(x, y, x+32, y+32);

It should be:

g.drawRect(x, y, 32, 32);

The 3rd and 4th parameters are width and height, rather than 'draw to that point'. Vis:

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

class GridCells {

    public static void main(String[] args) {
        Runnable r = new Runnable() {

            @Override
            public void run() {
                JOptionPane.showMessageDialog(null, new GridCellPanel());
            }
        };
        // Swing GUIs should be created and updated on the EDT
        // http://docs.oracle.com/javase/tutorial/uiswing/concurrency
        SwingUtilities.invokeLater(r);
    }
}

class GridCellPanel extends JPanel {

    @Override
    public void paintComponent(Graphics g) {
        super.paintComponent(g);
        setBackground(Color.BLACK);
        render(g);
    }

    @Override
    public Dimension getPreferredSize() {
        return new Dimension(200, 100);
    }

    public void render(Graphics g) {
        renderGrid(g, 96, 64);
    }

    private void renderGrid(Graphics g, int width, int height) {
        g.setColor(Color.white);
        for (int y = 0; y < height; y += 32) {
            for (int x = 0; x < width; x += 32) {
                g.drawRect(x, y, 32, 32);
                System.out.println("x =" + x + " y= " + y + " width= " + 
                        (x + 32 - x) + " height=" + (y + 32 - y) + 
                        " column No= " + x / 32 + " row No= " + y / 32);
            }
        }
    }
}

Answer 3

After Accepted Answer I wasn't sure if you were looking to fill the entire scrren or not, so before I saw the accepted answer I was working on this one. I'll keep it up in case it's what you were looking for

---

Not completely sure your code logic, but I came up with my own logic that seems to be easier to follow.

1. Get the width of the drawing surface

   private static final int SCREEN_SIZE = 300;
   

2. Set the Size you want for each sqaure.

   private static final int G_W = 30;
   private static final int G_H = 30;
   

3. Get the number of rows and columns by dividing the SCREEN_SIZE by the the square width/height

   int columns = SCREEN_WIDTH / G_W;
   int rows = SCREEN_WIDTH / G_H;
   

4. After you do the above, the loop is a lot easier to manage

   for (int i = 0; i < rows; i++) {
       for (int j = 0; j < columns; j++) {
           g.drawRect(x, y, G_W, G_H);
           x += G_W;
       }
       y += G_H;
       x = 0;
   }
   

---

Complete code

import java.awt.Dimension;
import java.awt.Graphics;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;


public class Grid extends JPanel{

    private static final int SCREEN_SIZE = 300;
    private static final int G_W = 30;
    private static final int G_H = 30;

    protected void paintComponent(Graphics g) {
        super.paintComponent(g);

        int x = 0;
        int y = 0;

        int columns = SCREEN_SIZE / G_W;
        int rows = SCREEN_SIZE / G_W;

        for (int i = 0; i < rows; i++) {
            for (int j = 0; j < columns; j++) {
                g.drawRect(x, y, G_W, G_H);
                x += G_W;
            }
            y += G_H;
            x = 0;
        }

    }

    public Dimension getPreferredSize() {
        return new Dimension(SCREEN_SIZE, SCREEN_SIZE);

    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                JFrame frame = new JFrame();
                frame.add(new Grid());
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);

            }
        });
    }
}

---

Result