Java Animation Rotation - java

I have very little experience with Java, and I am an amateur programmer. So mind my vocabulary.
I want to be able to stick a static rectangle on top of a rotating rectangle.
So far when I try to add another object it spins with the other image. I have tried setting the rotation to zero but that doesn't seem to work. I have also tried to create another class that draws components separately and added them to the frame using frame.add. I have also tried creating another part to the Draw class that has no effect on the GUI. Here is my current Draw class. Any help is appreciated.
class DrawRectangle extends JPanel {
#Override
public void paintComponent(Graphics g) {
int h = this.getHeight();
int w = this.getWidth();
Graphics2D g2 = (Graphics2D) g;
//draw background
g2.setColor(Color.WHITE);
g2.fillRect(0, 0, w, h);
//draw roatiing rectangle
g2.setColor(Color.CYAN);
Rectangle rRec = new Rectangle(w / 4, h / 4, 2 * w / 4, 2 * h / 4);
double wr = rRec.getX() + rRec.getWidth() / 2;
double hr = rRec.getY() + rRec.getHeight() / 2;
g2.rotate(Math.toRadians(count), wr, hr);
g2.fill(rRec);
g2.fillRect(w / 3, h / 3, 2 * w / 3, 2 * h / 3);
}
public void paintComponent2(Graphics g) {
int h = this.getHeight();
int w = this.getWidth();
Graphics2D g2 = (Graphics2D) g;
}
}

So far when I try to add another object it spins with the other image.
Create a separate Graphics object to do the rotation so you don't affect the properties of the Graphics object passed into the painting method:
//Graphics2D g2 = (Graphics2D) g;
Graphics2D g2 = (Graphics2D)g.create();
// painting code
g2.dispose();

Move your g2.fill(rRec); BEFORE the rotate call, and it should work (I just tested it out).
This way, you will draw your static rectangle before the rotation, perform the rotation, THEN draw your second rectangle. Assuming your count variable is incremented somewhere, it should show the second rectangle being rotated.

Related

Java Game Dev - How do I create a vertical health bar?

I need some assistance fixing my vertical health bar. It tracks health correctly and updates, but because of how Java draws (from the top left corner, i.e. (0,0)), the bar appears to be upside down. I would like to flip the health bar so it would appear correctly but I am unsure how to do so.
The division in the codes x and y is just to place the bar in the correct position on the canvas. The multiplier is to scale up the health bar to fit a graphical overlay I made for it.
private void drawHealthBar(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.setColor(Color.red);
g2.fillRect(WIDTH - (WIDTH / 50), HEIGHT / 2, 10, ships.get(0).getHealth() * 6);
}
Setup the coordinate system how you want, using transform() and translate(). So:
you want the origin to be at (0, height); bottom left.
then you want to flip the Y axis.
Example code:
AffineTransform tform = AffineTransform.getTranslateInstance( 0, height);
tform.scale( 1, -1);
g2.setTransform( tform);
you need to shift bar depending on amount of health left, like this:
private void drawHealthBar(Graphics g) {
final Graphics2D g2 = (Graphics2D) g;
g2.setColor(Color.red);
final int w = 10;
final int h = ships.get(0).getHealth() * 6; // calculate height first
final int x = WIDTH - (WIDTH / 50);
final int y = HEIGHT / 2 + (MAX_HEIGHT - h); // shift by height of whitespace
g2.fillRect(x, y, w, h);
}

The angle of rotation of the object is wrong

I'm trying to rotate an object in java but i noticed that something is wrong.
When i rotate it of 180 degrees,i get a value of the angle of '90°',so in order to get an angle of 360 degrees i have to rotate it twice.
What's wrong?
0°,90°,180°
The code:
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
if (rotate == true) {
ship.increaseDegress();
}
ship.draw(g);
}
Ship.java
public void increaseDegress() {
rotationAngle += 10;
if(rotationAngle>360) {
rotationAngle = 0;
}
}
public void draw(Graphics g) {
this.g = g;
Graphics2D g2 = (Graphics2D) g;
AffineTransform at = new AffineTransform();
Rectangle rect = this.getBounds();
at.rotate(Math.toRadians(rotationAngle), rect.getX() + rect.getWidth() / 2, rect.getY() + rect.getHeight() / 2);
g2.setColor(Color.BLUE);
g2.setTransform(at);
g2.draw(at.createTransformedShape(this));
}
So, let's take a quick look at your code...
public void draw(Graphics g) {
this.g = g;
Graphics2D g2 = (Graphics2D) g;
AffineTransform at = new AffineTransform();
Rectangle rect = this.getBounds();
at.rotate(Math.toRadians(rotationAngle), rect.getX() + rect.getWidth() / 2, rect.getY() + rect.getHeight() / 2);
g2.setColor(Color.BLUE);
g2.setTransform(at);
g2.draw(at.createTransformedShape(this));
}
So,
First you create AffineTransform, nice
You rotate the transformer, also nice
You apply the transformer to the Graphics context ... okay, there's a problem here, but let's move on
You apply the transformer to the shape!
So, on a single draw pass, you will rotate the shape by rotationAngle * 2! So, when the angle is 10°, the shape will be rendered at 20°, when it's 20°, it will rendered at 40°!
Okay, but there's another problem. Transformations applied to a Graphics context are compounding, this means, based on the available code, each time you call draw, the Graphics context is been rotated by rotationAngle. So if rotationAngle is 10°
On pass #1, the shape will be rotated to 20°
On pass #2, the shape will be rotated to 30°
On pass #3, the shape will be rotated to 40°
... so on and so forth ...
So, what's the answer?
When ever I pass a Graphics context off to some other method, I first create a copy it, because I don't trust anybody!
Graphics gCopy = g.create();
shape.draw(gCopy);
gCopy.dispose();
This ensures that the state of the Graphics context is returned to the state it was before I called draw, that will get rid of the compounding transformation.
The other solution is, don't transform the Graphics context. If you're transforming the shape, what's the point?
public void draw(Graphics g) {
this.g = g;
Graphics2D g2 = (Graphics2D) g;
AffineTransform at = new AffineTransform();
Rectangle rect = this.getBounds();
at.rotate(Math.toRadians(rotationAngle), rect.getX() + rect.getWidth() / 2, rect.getY() + rect.getHeight() / 2);
g2.setColor(Color.BLUE);
g2.draw(at.createTransformedShape(this));
}

Adding an image to a shape

So i'm learning to create a java game on eclipse. I learned adding shapes and such. I also learned how to paint the shapes (change the colours) I was wondering how to add an image to the shape. This is the code for painting the rectangle.
public void paintColumn(Graphics g, Rectangle column)
{
g.setColor(Color.blue.darker());
g.fillRect(column.x, column.y, column.width, column.height);
}
Start by having a look at Reading/Loading an Image for details about how to load a image, also, have a look at 2D Graphics for more details about 2D Graphics API.
Basically, you load the image, you draw it and then draw the shape around it.
Graphics2D g2d = (Graphics2D) g.create();
int x = (getWidth() - img.getWidth()) / 2;
int y = (getHeight() - img.getHeight()) / 2;
g2d.drawImage(img, x, y, this);
g2d.setColor(Color.RED);
g2d.drawRect(x, y, img.getWidth(), img.getHeight());
g2d.dispose();
Now, this just draws the rectangle over the image, if you want to, somehow "frame" the image instead, you could fill the rectangle, making it larger then the image, but you'd have to fill first, then draw the image
Graphics2D g2d = (Graphics2D) g.create();
int x = (getWidth() - img.getWidth()) / 2;
int y = (getHeight() - img.getHeight()) / 2;
g2d.setColor(Color.RED);
g2d.fillRect(x - 10, y - 10, img.getWidth() + 20, img.getHeight() + 20);
g2d.drawImage(img, x, y, this);
g2d.dispose();
Simply create a BufferedImage object:
BufferedImage image = ImageIO.read(filename);
Then instead of doing g.drawShape do:
g.drawImage(image, [starting x], [starting y], [image width], [image height], [image observer]);
In your case, you probably won't need an image observer, so you can just put null in that spot.
Then what would be easiest is to just draw your rectangle on top of the image. Even though the image will not actually be "inside" the the rectangle, the layered effect will make it look as if it is. You can use drawRect instead of fillRect so you just get a border around your image.
To ensure that your rectangle ends up on top of the image, and doesn't get covered since the image is the same size, make sure to put the drawRect line after the drawImage.
g.drawRect([starting x], [starting y], [width], [height]);
Check out these Graphics Java Docs for more information on drawing images.

Graphics 2D rotating on black/white background

I have a function that draws a rotated picture on a g2 component but for some reason I can't give it any colored background...
I was trying to use methods .setColor() and .setBackground() but with no use.
I have seen a similiar case here Graphics2D: Drawing black on white?
but it didn't really help. Here is my function:
public void rotateImage1(double degrees, ImageObserver o){
double sin = Math.abs(Math.sin(Math.toRadians(degrees)));
double cos = Math.abs(Math.cos(Math.toRadians(degrees)));
ImageIcon icon = new ImageIcon(this.spiral);
int w = icon.getIconWidth();
int h = icon.getIconHeight();
int neww = (int)Math.floor(w*cos+h*sin);
int newh = (int)Math.floor(h*cos+w*sin);
BufferedImage blankCanvas = new BufferedImage(neww, newh, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2 = (Graphics2D)blankCanvas.getGraphics();
if(PhotoEdit.black)
g2.setColor(Color.BLACK);
else
g2.setColor(Color.WHITE);
g2.translate((neww-w)/2, (newh-h)/2);
g2.rotate(Math.toRadians(degrees), icon.getIconWidth()/2, icon.getIconHeight()/2);
g2.drawImage(this.spiral, 0, 0, o);
this.spiral = blankCanvas;
}
PhotoEdit.black is a boolean variable that is true if the user selected the checkbox with black background option.
You are setting the color in graphics, but you aren't drawing it to the panel.
You can use g2.setColor(...) and g2.fillRect(...) and specify coordinates that cover the whole panel, and then draw your image on top.
Docs for fillRect: http://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html#fillRect%28int,%20int,%20int,%20int%29

Rotate a rect about an arc in java swing

I want to move this small rectangle about the circumference of the circle, so that I looks and moves like a canon.
Code
private void doDrawing(Graphics g){
g.setColor(Color.BLUE);
g.fillArc(-CANON_RADIUS/2, this.getHeight()-CANON_RADIUS/2, CANON_RADIUS, CANON_RADIUS, 0, 90);
Graphics2D g2d = (Graphics2D) g;
g2d.setColor(Color.BLUE);
Rectangle rect = new Rectangle(CANON_RADIUS/2, this.getHeight()-CANON_RADIUS/2, CANON_WIDTH, CANON_HEIGHT);
AffineTransform transform = new AffineTransform();
transform.rotate(Math.toRadians(-60), rect.getX() + rect.width/2, rect.getY() + rect.height/2);
Shape transformed = transform.createTransformedShape(rect);
g2d.fill(transformed);
}
This code rotates rectangle about its centre. How can I rotate rectangle around the circumference?
First things first, you can use a transformation matrix for this, like you are already using:
http://en.wikipedia.org/wiki/Transformation_matrix
Edit:
looking at your code, you want to rotate your canon around an anchor. Please look at the javadocs:
http://docs.oracle.com/javase/7/docs/api/java/awt/geom/AffineTransform.html
public void rotate(double theta,
double anchorx,
double anchory)
the first argument is your rotation, the last two arguments have to be the middle of your cannon base! like screen.height and 0 for your example:
AffineTransform transform = new AffineTransform();
transform.rotate(Math.toRadians(-60), 0, Screen.height);
Shape transformed = transform.createTransformedShape(rect);
g2d.fill(transformed);
second approach could be move the middle of your rotated rectangle around the radius of your base.
like (pseudocode):
Point p = circle.getPoint();
shape.moveto(p.x-(shape.width/2),p.y-(shape.height/2));
g2d.fill(shape);

Categories

Resources