Java graphics update stutters heavily (simple pong game) - java

Im new to more dynamic java swing programing. I have of course used the regular swing components before with Buttons, Panels and more.
So I'm trying to make a very basic pong game using Swing and Graphics2D. I previously made a painting program which i succeeded to do.
My issue is that the graphics stutters heavily when the program is running. So far I have only implemented the ball and its just choosing a random direction and starts to bounce around in the panel. Which works. But, I can only see the ball if I'm constantly resizing the frame all the time, otherwise it stutters so heavily that it looks blank. In the first second or so you can actually see the ball moving, but heavily stuttering, and then the panel start to seem blank.
Relevant code and structure:
Main parts of the program are the Controller and Frame class. Where the Controller implements runnable and contains a run method that does the game updating.
The Frame class extends JFrame and contains a private instance variable JPanel gamePanel where all the graphics are painted. JFrame also has a Overridden paint(); method
When the Controller updates the program it calls a class in Frame called updateGraphics() which previously called paint(getGraphics());
public class Frame extends JFrame {
private JPanel gamePanel;
....
public void paint(Graphics g) {
super.paint(g);
label.setText(Integer.toString(ball.getPos().x) + ", " + Integer.toString(ball.getPos().y));
Graphics2D g2 = (Graphics2D) gamePanel.getGraphics();
g2.setStroke(new BasicStroke(2));
//g2.drawRect(0, 0, gamePanel.getWidth(), gamePanel.getHeight());
try{
//Draws the ball
g2.fillOval(ball.getPos().x, ball.getPos().y, 10, 10);
//Draws the player1(left) shield
g2.setStroke(new BasicStroke(2));
g2.drawLine(playerShield.getNorthX(), playerShield.getNorthY(), playerShield.getSouthX(), playerShield.getSouthY());
g2.drawLine(playerShield.getNorthX(), playerShield.getNorthY(), playerShield.getSouthX(), playerShield.getSouthY());
//Draws the computer/Player2(right) Shield
g2.drawLine(computerShield.getNorthX(), computerShield.getNorthY(), computerShield.getSouthX(), computerShield.getSouthY());
g2.drawLine(computerShield.getNorthX(), computerShield.getNorthY(), computerShield.getSouthX(), computerShield.getSouthY());
} catch(Exception e) {
System.out.println(e);
}
}
...
public void updateGraphics() {
paint(getGraphics());
}
//Another version of the updateGraphics i have tried to use with as little success
public void updateGrapgics() {
gamePanel.validate();
gamePanel.repaint();
}
}
When searching I have found people that says that I should and shouldn't use the paint or repaint method.
Can someone explain to me why its stuttering and how I should do to make it stutter-free?

There's no need to implement double-buffering or other tricks. Just do the following:
public class SomeVisualObject extends JComponent {
public void paintComponent(Graphics g) {
Graphics2D g2d = (Graphics2D)g;
// paint things
}
}
...
final SomeVisualObject obj = new SomeVisualObject()
frame.add(obj);
...
final Timer repaintTimer = new Timer(20, new ActionListener() {
public void actionPerformed(ActionEvent evt) {
// do some stuff here, for example calculate game physics.
// repaint actually does not repaint anything, but enqueues repaint request
obj.repaint();
}
});
repaintTimer.start();
and it will run and paint smoothly, without glitches.
Just don't mess with the loops. Swing runs it's own event loop, which is vital for repaints and other stuff.
See a complete and working example of 2d game object (bouncing ball) here: https://gist.github.com/akhikhl/8199472

I think that you should implement some kind of double buffering.
Your problem is simillar to this one Java Panel Double Buffering and this tutorial should help you a lot http://www.cokeandcode.com/info/tut2d.html.

Related

Java Graphics only overlaying new shapes?

I'm working on a program that displays an animation using the MVC architecture. The model contains shapes and tells them to mutate themselves. The view in question is a class that extends JPanel. It accepts the shapes from the controller and places them on the Graphics object in paintComponent. The controller has a while loop in its run method that tells the model to mutate all of the shapes, pushes those shapes to the view, and then sleeps the thread for a certain amount of time.
However, the problem I'm running into is this: the Graphics object seems to be simply overlaying the new shapes for every paintComponent call, so that you can see the trail of the shapes throughout the whole run of the program. This is only a problem when the view extends JPanel (program ran fine for the previous implementation, which was a JFrame that had an anonymous JPanel class), and only seems to be a problem on my Linux machine (my project partner uses a macbook -- tagging Linux since it could be tied to Linux platform). Also, I've tried it with Oracle jdk8, open-jdk8, and open-jdk10.
I'm sure it's just a bug in my code, since other programs work. Could it be a bug that the Linux jdk finds but not macOS?
I'm going to do my best to do pseudo code so I don't get docked for plagiarism
current code:
public class MyVisualView extends JPanel implements MyViews {
// store my shapes with name shapes
public MyVisualView() {
JFrame frame = new JFrame();
frame.setSize(width, height);
frame.setResizable(false);
frame.getContentPane().add(this);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
// tried these individually -- didn't work
this.setOpaque(true);
this.setBackground(Color.WHITE);
}
#Override
public void paintComponent(Graphics g) {
for (all of my shapes) {
g.setColor(shape color);
if (oval) g.fillOval(...);
else g.fillRect(...);
}
}
}
previous code, which worked:
public class MyVisualView extends JFrame implements MyViews {
public void run() {
shapes = getShapes();
JPanel panel = new JPanel() {
#Override
public void paintComponent(Graphics g) {
// same paintComponent as above
}
};
while (true) {
panel.repaint();
// wait for a certain amount of time
}
}
}
Edit: Solved it by repainting the JFrame instead of the JPanel
However, the problem I'm running into is this: the Graphics object seems to be simply overlaying the new shapes for every paintComponent call
#Override
public void paintComponent(Graphics g) {
for (all of my shapes) {
The code should be:
#Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
for (all of my shapes) {
You need to invoke the default painting of the panel to clear the background first before repainting all your shapes.
Also:
while (true) {
panel.repaint();
Don't use a while (true) loop for animation. Instead you should be using a Swing Timer to schedule the animation.
Take a look at the Swing Tutorial. There are sections on:
Custom Painting - (ie. you should also be overriding the getPreferredSize() method)
How to Use Swing Timer
to get you started with the basics of each of these functions of Swing.

Custom Drawing loop in Swing

I'm trying to learn how to do custom GUI stuff in Java for a group project I'm working on. I've done user form type GUIs in the past so I know the gist of what I'm doing here, but the custom drawing stuff still confuses me.
I copied this code from online and I've been trying to figure out how it works, but I don't get why I can't loop the drawing method. As a simple test I'm trying to make the program draw an oval on my cursor. It draws the oval on the cursor, but only once on runtime and then does nothing.
How can I make this loop so I can continue to draw things? Or is there a different way I need to call/use the methods?
public class BombermanGUI extends JFrame {
public static final int CANVAS_WIDTH = 640;
public static final int CANVAS_HEIGHT = 480;
private DrawCanvas canvas;
public BombermanGUI() {
canvas = new DrawCanvas();
canvas.setPreferredSize(new Dimension(CANVAS_WIDTH, CANVAS_HEIGHT));
Container cp = getContentPane();
cp.add(canvas);
this.setDefaultCloseOperation(EXIT_ON_CLOSE);
this.pack();
this.setTitle("......");
this.setVisible(true);
}
private class DrawCanvas extends JPanel{
#Override
public void paintComponent(Graphics g){
super.paintComponent(g);
setBackground(Color.BLACK);
int x, y;
x = MouseInfo.getPointerInfo().getLocation().x - this.getLocationOnScreen().x;
y = MouseInfo.getPointerInfo().getLocation().y - this.getLocationOnScreen().y;
g.setColor(Color.YELLOW);
g.drawOval(x, y, 10, 10);
}
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
new BombermanGUI();
}
});
}
}
Painting a complex series of callbacks and responses to changes within the system. The first thing to remember is that you don't control the painting process, but rather make suggestions to the system so that it can make decisions about what and when it should repaint...
Take a look at Painting in AWT and Swing and Performing Custom Painting for more details.
Painting is a destructive process. It is assumed that when a repaint occurs, that you will repaint the entire state of the current component. This means that you will need some kind of model which maintains all the content that needs to be painted...
Have a look at 2D Graphics, in particular, have a look at the section on Shape
MouseInfo is a seriously crappy way to detect the location of the mouse for this purpose, instead, you should be using a MouseListener and/or MouseMotionListener to detect mouse events.
Basically, when the user presses a mouse button, you would record the location of the mouse press. When the mouse is moved, you would calculate the width and height of the movement relative to the mouse press and update the "current" shape. You would call repaint to request that the UI be updated and paint this shape via the paintComponent method (painting all the previous shapes first).
When the mouse button is released, you would commit the "current" shape to the model, so it will be painted every time paintComponent is called.
THIS IS tobais_k ANSWER IM ANSWERING TO CLOSE THE QUESTION!
Either add an event listener and have it call the repaint method, e.g. a mouse motion listener for tracking your mouse cursos, or have some thread run your game and trigger repaint in regular intervals.

Connect Four Falling Animation

I'm currently creating a connect four game for fun and was just about finished when I decided that it would be cool to add a falling animation. I know of a couple different ways to do this, but I'm not sure what would be 'best'.
Since my GUI is made up of JComponents I figured I should use javax.swing.Timer for Thread safety.
ActionListener update = new ActionListener() {
#Override
public void actionPerformed(ActionEvent e) {
// TODO Auto-generated method stub
};
};
Timer timer = new Timer(10, update);
timer.start();
My real question is what should I do to update my game board?
Would it be better to call repaint() (maybe even repaint(Rectangle rec))and handle everything in paint() or create another class for a connect four piece and add that Component to my GUI.
The other class for my connect four piece is currently this...
public class Piece extends JLabel{
private Color color;
private Ellipse2D circle;
public Piece(Color color, int radius) {
this.color = color;
circle = new Ellipse2D.Float(0, 0, radius, radius);
}
#Override
protected void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D)g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
super.paintComponent(g2);
g2.setColor(color);
g2.fill(circle);
}
}
If I add the component to the GUI, I would have to call invalidate() and validate() quite often since the timer I have currently is fast, and I'm not sure if that's better or worse than calling repaint().
I've tried both of these ways, and both seem to work fine, I'm just not sure which is more efficient? I'd rather not have it be more taxing that it needs to be - for learning purposes.
Also if there's a better way than what I've thought of please let me know. I'm open to all suggestions
Your Piece is a component. All you have to do is call setLocation(...) and the component will repaint itself automatically. No need for any custom painting.
If I add the component to the GUI, I would have to call invalidate() and validate()
Just set the layout to null. You will need to set the size of the component, but no need to call invalidate() or validate() since those methods are used by a layout manager.
It will depend. The easiest solution (from my perspective) is to use custom painting (use repaint and handle everything in paintComponent, as it will allow you to better control the layers of graphics (IHMO).
You could, as an exercise, do both.
Basically, it would require to you to manage (directly or indirectly) your own layout manager for the pieces and board.

create game loop thread

Hi I have just been messing about polygons and awt. I have created a Jframe and can draw the polygons ok and have one of them move with keypresses.
I'm wondering how to start a gameloop thread(and where to put it!) that will update the jframe independently.
From googling im led to believe that I should have one thread for user input and one for the game itself.
At the moment I have implemented KeyListener on the board class(code shown below),should I put that out into its own class and make it implement runnable?As the code stands I repaint the JFrame in the keypressed() method just so i can see that it moves correctly
Being at it most of the day and I have myself very very confused :)
As always any help much appreciated!
Also while im at it from online tutourials should I use JPanel instead of JFrame and paintComponent() instead of paint()?
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.geom.AffineTransform;
import javax.swing.JFrame;
public class Board extends JFrame implements KeyListener{
AffineTransform identity = new AffineTransform();
Graphics2D g2d;
Ship ship = new Ship();
public static final int ALIENS = 3;
Alien[] alien = new Alien[ALIENS];
Board(){
super("The Board");
setSize(1280,1024);
setVisible(true);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
getContentPane().setBackground(Color.BLACK);
for(int x=0;x<ALIENS;x++){
alien[x]=new Alien();
}
}
public void paint(Graphics g){
super.paint(g);
addKeyListener(this);
//draw ship
g2d = (Graphics2D)g;
g2d.setTransform(identity);
g2d.translate(ship.getxPos(),ship.getyPos());
g2d.scale(2,2);
g2d.setColor(Color.ORANGE);
g2d.fill(ship.getShape());
g2d.setColor(Color.BLACK);
g2d.draw(ship.getShape());
// draw aliens
for(int x=0;x<ALIENS;x++){
//if alien alive
if(alien[x].isAlive()){
//draw alien
g2d = (Graphics2D)g;
g2d.setTransform(identity);
g2d.translate(alien[x].getxPos(),alien[x].getyPos());
g2d.scale(2,2);
g2d.setColor(Color.BLUE);
g2d.fill(alien[x].getShape());
g2d.setColor(Color.BLACK);
g2d.draw(alien[x].getShape());
}
}
}//end paint
/*****************************************************
* key listener events
*****************************************************/
public void keyReleased(KeyEvent k) { }
public void keyTyped(KeyEvent k) { }
public void keyPressed(KeyEvent k) {
int keyCode = k.getKeyCode();
switch (keyCode) {
case KeyEvent.VK_A:
//move ship left
if(ship.getxPos()<20){
ship.setxPos(20);
}else
ship.setxPos(ship.getxPos()-1);
break;
case KeyEvent.VK_D:
if(ship.getxPos()>1260){
ship.setxPos(1260);
}else
ship.setxPos(ship.getxPos()+1);
}
repaint();
}//end keypressed event
public static void main(String[] args){
new Board();
}
}
These answers depend somewhat on what kind of game you're trying to create.
From googling I'm led to believe that I should have one thread for user input and one for the game itself.
You create one main game loop, which runs in its own thread. In psudeocode
while (running) {
update game model
draw game
wait x milliseconds
}
Your user input would update the game model directly. The game loop updates the game model if the computer is required to make moves or react to your moves. Then, the game loop reads the game model and draws the game based on the values in the model.
At the moment I have implemented KeyListener on the board class(code shown below),should I put that out into its own class and make it implement runnable?
Yes, you should put KeyListener into its own class. No, you don't have to make it a separate thread.
To save yourself future trouble, your Swing components should be defined and used on the Event Dispatch thread.
Here's how you do that.
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
new Board();
}
});
}
Should I use JPanel instead of JFrame and paintComponent() instead of paint()?
Yes.
You should have a JPanel inside of a JFrame. The JPanel is where you perform the draw game psudeocode, using the paintComponent method.
Some people are going to disagree with me, but I've found it best if every object in the game has a draw method to draw itself.
public void draw(Graphics g)
The game model would also have a draw method, which draws all of the objects in the model.
The JPanel paintComponent method would look like this:
public void paintComponent(Graphics g) {
super.paintComponent(g);
gameModel.draw(g);
}

Drawing graphics in java - NetBeans IDE

I created a new JApplet form in NetBeans:
public class UI extends javax.swing.JApplet {
//generated code...
}
And a JPanel in design mode named panou:
// Variables declaration - do not modify
private javax.swing.JPanel panou;
How do I get to draw a line on panou? I've been searching for this for 5 hours now so a code snippet and where to place it would be great. Using Graphics2D preferably.
Go to design mode
Right Click on the panel "panou"
Click "Costumize code"
In the dialog select in the first combobox "costum creation"
add after = new javax.swing.JPanel() this, so you see this:
 
panou = new javax.swing.JPanel(){
#Override
public void paintComponent(Graphics g)
{
super.paintComponent(g); // Do the original draw
g.drawLine(10, 10, 60, 60); // Write here your coordinates
}
};
Make sure you import java.awt.Graphics.
The line that you will see is always one pixel thick. You can make it more "line" by doing the following:
Create this method:
public static final void setAntiAliasing(Graphics g, boolean yesno)
{
Object obj = yesno ? RenderingHints.VALUE_ANTIALIAS_ON
: RenderingHints.VALUE_ANTIALIAS_OFF;
((Graphics2D) g).setRenderingHint(RenderingHints.KEY_ANTIALIASING, obj);
}
And add after super.paintComponent(g); (in your costum creation) this:
setAntiAlias(g, true);
Edit:
What you are doing wrong is: you paint the line once (by creating the frame).
When you paint the line the frame is also invisible. The first draw is happening when the frame becomes visible. The frame will be Repainted, so everything from the previous paint will disappear.
Always you resize the frame, everything will be repainted. So you have to make sure each time the panel is painted, the line also is painted.
To do custom painting in a JPanel, one would need to make a subclass of a JPanel, and then overload the paintComponent method:
class MyPanel extends JPanel {
public void paintComponent(Graphics g) {
// Perform custom painting here.
}
}
In the example above, the MyPanel class is a subclass of JPanel, which will perform whatever custom painting is written in the paintComponent method.
For more information on how to do custom painting in Swing components, Lesson: Performing Custom Painting from The Java Tutorials have some examples.
If one wants to do painting with Java2D (i.e. using Graphics2D) then one could do some painting on a BufferedImage first, then draw the contents of the BufferedImage onto the JPanel:
class MyPanel extends JPanel {
BufferedImage image;
public MyPanel() {
Graphics2D g = image.createGraphics();
// Do Java2D painting onto the BufferedImage.
}
public void paintComponent(Graphics g) {
// Draw the contents of the BufferedImage onto the panel.
g.drawImage(image, 0, 0, null);
}
}
Further reading:
Painting in AWT and Swing
Trail: 2D Graphics

Categories

Resources