Develop Reference

Java offset drawing canvas

I am trying to make a simple java game, and i got stumped on this. The game requires that you play in a square window, but can resize the sprites on the canvas. I though it would be really annoying if I used a ComponentListener and didn't let the user change size, so I thought that I would just offset the canvas from the left and right side so that it is centered until it is square.
Right now I understand that I need to create a Canvas object for the Game, and then offset it but I'm not sure how.
Game Canvas:
public class GameCanvas extends Canvas {
public Vector size;
public GameCanvas(Vector size) {
this.size = size;
setBackground(Color.BLUE);
setSize(size.x, size.y);
}
}
Any help is appreciated :) thank you.

You could...
Make your own layout manager which maintained the Canvas in a square shape based on the available space of the parent Container.
This might be a little bit of over kill, but, it's generally more efficient and means you can keep using the properties of the Canvas (ie getWidth and getHeight), so it's more de-coupled from other solutions
You could...
Calculate a "playable area" based on the size of the Canvas and use that as the bounds range checking, for example...
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Rectangle;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class Test {
public static void main(String[] args) {
new Test();
}
public Test() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
ex.printStackTrace();
}
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new TestPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class TestPane extends JPanel {
public TestPane() {
}
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
protected Rectangle getPlayableBounds() {
Dimension size = getSize();
int playableSize = Math.min(size.width, size.height);
int x = (size.width - playableSize) / 2;
int y = (size.height - playableSize) / 2;
return new Rectangle(x, y, playableSize, playableSize);
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g.create();
g2d.setColor(Color.BLACK);
g2d.draw(getPlayableBounds());
g2d.dispose();
}
}
}
This example is not optimised, as calling getPlayableBounds recalculates the playable area, regardless if its changed since the last call or not.
I'd be tempted to use a ComponentListener and make the playableBounds an instance field. When the component is resized, I'd simply invalidate the playableBounds property, which would force the getPlayableBounds to recalculate the value and cache the result

Adding random graphical squares to ArrayList (JAVA)

I want to learn to use ArrayList together with graphical elements in java.
I have a class that creates squares with a random x and a random y position:
import java.awt.Canvas;
import java.awt.Color;
import java.awt.Graphics;
import java.util.Random;
public class Square extends Canvas {
public int x, y;
Random r = new Random();
public void paint(Graphics g) {
x = r.nextInt(640);
y = r.nextInt(480);
g.setColor(Color.BLACK);
g.fillRect(x, y, 30, 30);
}
}
And i have a class that creates a JFrame and Add square elements to an ArrayList. But i can't figure it out. I think the solution might be simple and technical, i just need a slight push.
import java.util.ArrayList;
import javax.swing.JFrame;
public class Frame {
public int width, height;
public String title;
public JFrame jframe;
ArrayList<Square> squares = new ArrayList<Square>();
public Frame(String title, int width, int height) {
this.width = width;
this.height = height;
this.title = title;
display();
}
public void display() {
jframe = new JFrame();
jframe.setTitle(title);
jframe.setSize(width, height);
jframe.setResizable(false);
jframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
jframe.setVisible(true);
jframe.setLocationRelativeTo(null);
for(int i = 0; i < 20; i++) {
squares.add(new Square());
}
jframe.add(squares);
}
}

Get rid of the Square class and restart.
Do not have it extend Canvas -- you do not want to unnecessarily mix AWT and Swing
And your Square class should be a logical class, not a GUI class, meaning it shouldn't extend any GUI component.
Do not randomize within the painting method.
Give your Square class x and y int fields
Give it a public void draw(Graphics g) method where it draws itself using the Graphics object passed in.
Create another class, one that extends JPanel, and give it an ArrayList<Square>.
Override this JPanel's paintComponent method.
In the override be sure to call the super's method.
In the override, iterate through the array list, calling each Square's draw method.
Place this JPanel into your JFrame.

From what I see you are doing you are adding multiple canvases to the frame which will overlap each other.
Rather create a canvas with a list of Squares(x and y ints) that it draws in its paint and then add one canvas to the frame.
Also I am not sure if JFrame.add() will add the whole canvas and resize it. Rather use a layoutManager to add your components like FlowLayout.
Layout managers

Problems in mixing two JPanels in 1 JFrame

I was mixing two JPanels in one frame and it gives me this output!
Here's my code in which I add the two JPanels:
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import javax.swing.*;
import java.util.*;
public class Board extends JFrame{
private int width=500;
private int height=450;
Obstacles asd= new Obstacles();
Human human;
private Dimension mindim= new Dimension(width+10,height+10);
Board(){
human = new Human();
this.setTitle("Athwart");
//setLayout(null);
human.add(asd); //!!!we see here, I add asd (which is inherited from a JPanel)
// to another existing JPanel
this.setMinimumSize(mindim); //
this.getContentPane().setLayout(new BorderLayout());
this.getContentPane().add(human);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //
this.setLocationRelativeTo(null); //
this.setResizable(true); //
pack(); //
setVisible(true);
human.requestFocus(); //
}
}
This is how my Obstacles class looks like.
import javax.swing.*;
import java.awt.*;
public class Obstacles extends JPanel {
private int width=500;
private int height=450;
private Dimension mindim= new Dimension(width+10,height+10);
Obstacles()
{
this.setBackground(Color.white);
// this.addKeyListener(this);
// this.setFocusable(true);
// this.setRequestFocusEnabled(true);
setSize(mindim);
this.setVisible(true);
}
public void paintComponent(Graphics g)
{
super.paintComponent(g); //
g.fillRect(0, 0, 60, 30);
g.setColor(Color.black);
g.draw3DRect(0, 0, 60, 30, true);
g.setColor(Color.black);
}
}
So as you can see the height of the component is 30 and the width is 60 but the Image above shows not even a half of it!
Is there anything I can do to make that two JPanels mixed together? By the way,
I tried using BoxLayout earlier but it didn't worked. Is there something wrong or it's just my IDE is not working properly? Cheers and thanks for an awesome reply. I'm just a starting gui programmer and I really don't know how to handle things. And yeah, if you would ask the complete code, I'll edit this if it would matter. :)

Finally, you put in a requirement:
I was just trying to put an image of a rectangle inside a jframe together with another Jpanel of an image of a circle. to see if how i would be that far in mixing two Jpanels together without overlapping.
Yes, this can be done, say by using a JLayeredPane, you could layer one JPanel over another, but you need to make sure that the upper JPanel is not opaque (setOpaque(false)).
But having said that, I still stand by my comment, that you look to be going about this wrong. You should not create a JPanel for drawing one thing and try to combine multiple JPanels because this can lead to an unholy mess. Instead you should consider creatomg one drawing JPanel, and give it logical objects, say non-GUI Obstacle objects, put them in a collection such as an ArrayList, and then in the drawing JPanel, iterate through all the Obstacles in the drawing JPanel's paintComponent method, drawing each Obstacle as it directs.
Edit
For example:
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.RenderingHints;
import java.util.ArrayList;
import java.util.List;
import javax.swing.*;
public class ObstacleDrawer extends JPanel {
private static final int PREF_W = 800;
private static final int PREF_H = PREF_W;
private List<Obstacle> obstacleList = new ArrayList<>();
public ObstacleDrawer() {
}
public void addObstacle(Obstacle obstacle) {
obstacleList.add(obstacle);
}
#Override
public Dimension getPreferredSize() {
if (isPreferredSizeSet()) {
return super.getPreferredSize();
}
return new Dimension(PREF_W, PREF_H);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
// smooth out the drawing
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
// iterate through the obstacle list, drawing each obstacle
for (Obstacle obstacle : obstacleList) {
obstacle.draw(g2);
}
}
private static void createAndShowGui() {
ObstacleDrawer mainPanel = new ObstacleDrawer();
mainPanel.addObstacle(new CircleObstacle(new Point(200, 200), 100, Color.red));
mainPanel.addObstacle(new CircleObstacle(new Point(400, 300), 150, Color.blue));
JFrame frame = new JFrame("ObstacleDrawer");
frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
frame.getContentPane().add(mainPanel);
frame.pack();
frame.setLocationByPlatform(true);
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
createAndShowGui();
}
});
}
}
interface Obstacle {
public Point getCenter();
public void setCenter(Point center);
public int getWidth();
public void setWidth(int width);
public Color getColor();
public void setColor(Color color);
public void draw(Graphics2D g2);
}
class CircleObstacle implements Obstacle {
private Point center;
private int width;
private Color color;
public CircleObstacle(Point center, int width, Color color) {
this.center = center;
this.width = width;
this.color = color;
}
#Override
public Point getCenter() {
return center;
}
#Override
public void setCenter(Point center) {
this.center = center;
}
#Override
public int getWidth() {
return width;
}
#Override
public void setWidth(int width) {
this.width = width;
}
#Override
public Color getColor() {
return color;
}
#Override
public void setColor(Color color) {
this.color = color;
}
#Override
public void draw(Graphics2D g2) {
Color oldColor = g2.getColor();
g2.setColor(color);
int x = center.x - width / 2;
int y = center.y - width / 2;
int height = width;
g2.fillOval(x, y, width, height);
g2.setColor(oldColor);
}
}

When you want to mix JPanels, the best way to do it is to nest them inside another JPanel. For nesting, the best layouts (in my experience) are BoxLayout and GridLayout. The example below tries to replicate the drawing in your JFrame.
JPanel outsidePanel = new JPanel();
Obstacle obstacle1 = new Obstacle();
Human human1 = new Human();
outsidePanel.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
outsidePanel.add(human1);
outsidePanel.add(obstacle1);
Furthermore, I recommend you to actually use BorderLayout in your JFrame, and then add this Panel to the CENTER location of the BorderLayout. Following your example:
this.setLayout(new BorderLayout());
this.add(outsidePanel(), BorderLayout.CENTER);
Usually this will give you the best results. More about nesting panels in the BoxLayout documentation (http://docs.oracle.com/javase/7/docs/api/javax/swing/BoxLayout.html). Hope this helps.

Custom painting not being performed when the custom painting code is in another class

I'm trying to write some custom painting code. Specifically, I want to have a bunch of extended JPanels which paint different aspects of my GUI, but each of these extended panels holds the instructions for how it is to be painted.
I've created the code, but for some reason, the extended JPanel isn't being painted on the main JPanel in my JFrame regardless of what I do. Here is a gist of my main class and one of my extended JPanels. What am I missing?
Breakout
//Java imports
import javax.swing.JFrame;
import java.awt.Dimension;
import javax.swing.JPanel;
//Personal imports
import Ball;
public class Breakout {
public static void main (String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() {//start the GUI in a new thread
public void run(){
showGUI();
}
});
}
private static void showGUI() {
JFrame frame = new JFrame("Breakout");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Dimension d = new Dimension(640,480);
frame.setMinimumSize(d);
frame.setResizable(false);
JPanel p = new JPanel();
p.add(new Ball(200,200,50,255,0,0));
frame.add(p);
frame.setVisible(true);
}
}
Ball
import javax.swing.JPanel;
import java.awt.Color;
import java.awt.Graphics;
public class Ball extends JPanel {
public int x;
public int y;
public int radius;
public Color colour;
public Ball(int x, int y, int radius, int r, int g, int b) {
super();
this.x = x;
this.y = y;
this.radius = radius;
colour = new Color(r,g,b);
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
//define constants
int topLeftX = x+radius;
int topLeftY = y+radius;
int diameter = radius *2;
//draw outline
g.setColor(Color.BLACK);
g.drawOval(topLeftX, topLeftY, diameter, diameter);
//fill it in
g.setColor(colour);
g.fillOval(topLeftX, topLeftY, diameter, diameter);
}
}

Using JPanels in this way is going to cause you no end of problems.
The two main problems you have are...
JPanels already have an idea of size and position, adding another x/y coordinate is just confusing and could lead you to painting off the components viewable space
The default preferred size of a JPanel is 0x0. This means when you add it another JPanel, using FlowLayout, the panel is given a size of 0x0, so nothing gets painted.
Instead, create an interface which has a method called paint and takes a Graphics2D object.
For each shape you want to paint, create a new class which implements this interface and use it's paint method to paint the object as you see fit.
Create a custom component, extending from JPanel and maintain a List of these shapes. In it's paintComponent, use a for-loop to paint each shape in the List.
This custom component should then be added to your frame...

In your showGUI method in your main class you have this code:
JPanel p = new JPanel();
p.add(new Ball(200,200,50,255,0,0));
frame.add(p);
This code creates a new JPanel then adds another JPanel to that. This is incorrect because it simply does not make sense to add another JPanel to a perfectly good JPanel that you just created. Instead just do this:
frame.getContentPane().add(new Ball(200, 200, 50, 255,0,0));
Or if you prefer:
Ball ball = new Ball(200, 200, 50, 255,0,0);
frame.getContentPane().add(ball);

JFrame Menu's being drawn over and Graphics disappearing upon JFrame Resize

I am a high school student, and I am working on my final project for my computer science class. My assignment was to make a simple paint application, however I am having some problems. These include: the painted image being erased when the window is resized and that I can draw over the menu's in my window.
I believe I am drawing over the menu's because I am using the graphics object of the JFrame itself. However I can not find any alternatives. I have tried making separate components to draw in, and even using BufferedImage, but none of my attempts have been successful.
Here is my code:
import java.awt.Color;
import java.awt.Graphics;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;
import javax.swing.*;
public class Paint implements MouseMotionListener{
private JFrame window;
private drawingComponent pComp;
private int xPos; //xPos of mouse;
private int yPos; //yPos of mouse;
private Color color; // new color
private JTextArea sizeBox;
private int brushShape = 0;
public static void main(String[] args) {
Paint paint = new Paint();
paint.ImplementGUI();
}
public Paint() {
this.pComp = new drawingComponent();
this.window = new JFrame("JPaint");
this.window.setSize(500, 500);
this.window.setVisible(true);
this.window.addMouseMotionListener(this);
this.window.add(this.pComp);
}
public void ImplementGUI() {
JMenuBar menu = new JMenuBar();
JMenu brush = new JMenu("Brush Settings");
JMenu brushShape = new JMenu("Shape");
brush.setSize(100,100);
brush.add(brushShape);
menu.add(brush);
menu.setSize(window.getWidth(), 20);
menu.setVisible(true);
this.sizeBox = new JTextArea("Brush Size:");
this.sizeBox.setText("20");
brush.add(this.sizeBox);
this.window.setJMenuBar(menu);
}
public void mouseDragged(MouseEvent pMouse) {
if (pMouse.isShiftDown() == true) {
this.pComp.paint(this.window.getGraphics(), pMouse.getX(), pMouse.getY(),
window.getBackground(), Integer.parseInt(sizeBox.getText()));
}
else {
this.pComp.paint(this.window.getGraphics(), pMouse.getX(), pMouse.getY(),
color, Integer.parseInt(sizeBox.getText()));
}
}
public void mouseMoved(MouseEvent pMouse) {
}
}
class drawingComponent extends JComponent {
public void paint(Graphics g, int x, int y, Color color, int size) {
g.setColor(color);
g.fillOval(x-(size/2), y-(size/2), size, size); // 10 is subtracted from
// coordinates so the mouse pointer is at the exact middle of the brush.
}
}
How can I fix this problem?

Never use the getGraphics() method to do painting. The effect is only temporary as you have noticed.
Custom painting is done by overriding the paintComponent() method, not the paint() method.
See Custom Painting Approaches for a couple of example of how to paint multiple objects on a panel.

camickr is right. When you resize the window, the ImplementGUI component is repainted, so ImplementGUI.paintComponent() will be invoked to repaint the whole surface of the component, and what you did paint within mouseDragged() will be lost.