affine transformation, rotate, area for collision detection..

Newbie & Debugging Questions
#1

Hi!

I’m making a a top down car game (how original huh?) to teach myself some Java and game programming… it’s going ok so far (in fact, I’ve already made a lot more I ever thought I could pull off) but I’m now facing my biggest problem so far: collision detection.

I’m trying to use an Area made from the bounds of my car sprite, rotate it the same way as my sprite and move them together and then I would use the Area to check for collisions. My problem I guess is that I don’t really understand affine transformations, I originally just rotated the Image holding my sprite but as I started to realize I might have to go for Areas to get the collision detection working, I switched into using an AffineTransform to rotate my car.

I got it rotating the sprite correctly into the correct coordinates by trial and error but for some reason it’s not working for the Area - the Area rotates but the coordinates are no where near the car itself.

Here’s the code for my car’s draw method, I put the area code there as I’m already messing around with affinetransformations. If you forget about all the Area stuff, it works the way it should (i.e. it rotates the car correctly and draws it to the correct location). But the area gets drawn in funny places… the fact that I don’t understand my affine transformation code aside, I further don’t understand why it works for the sprite but not for the area…


	// draw onto the Graphics2D object
	public void draw(Graphics2D g) {
		
		// create a new area from the sprite
		carArea = new Area(getBounds());
		
		// transformation, get the coords
		AffineTransform atCar = new AffineTransform();
		atCar.translate((int)this.getX(), (int)this.getY());
		
		// rotate the sprite around the middle of the rear axel
		atCar.rotate(
			Math.toRadians((int)this.getRotation()),
			this.getWidth() / 2,
			this.getHeight() - (this.getHeight() / 4)
		);

		// apply the transformation to the area
		carArea.transform(atCar);
		
		// draw the readily rotated sprite		
		g.drawImage(this.sprite, atCar, null);

		// visualize the Area
		g.setColor(Color.red);
		g.draw(carArea);
		
	}

I don’t understand the translate part, but without that the sprite would be in funny places as well…

my getBounds


	// get the car bounds
	public Rectangle getBounds() {
		return new Rectangle((int)getX(), (int)getY(), getWidth(), getHeight());
	}

anything else from my crappy code you need to see, ask 8)

#2

Could you clarify what you mean by “funny places”? Is there some sort of pattern to where the area is drawn (such as always offset by x or rotated around y). Finding where the area is incorrectly being offset should help you to debug.

#3

the coordinates are all out of whack… not the best quality video but take a look: http://www.youtube.com/watch?v=OsYdl_57Q4k

#4

Hmm - what’s the getBounds() call return? I think maybe you’re pre-translating the bounds, resulting in them getting moved twice (once in getBounds(), once by the transform).

“translate” just means “move to location”. So you can think of your affine transform as doing this, in order:

  1. move to location
  2. rotate around anchor point (anchor point being relative to location that was moved to).

For it to work correctly on the bounds, the bounds need to be defined relative to the origin.

#5

Hm yes it’s something to that effect - commenting out the translate line, the area is initially drawn in the correct place (the sprite however is not) and it moves correctly for as long as I don’t rotate, but rotating makes it go haywire.

So, I guess easiest/best would be to separate the sprite and area transformations and figure out the correct translation / rotation for the area so that it behaves correctly…?

Then to figure out what’s going wrong with the rotation. The getbounds as far as I can tell returns a rectangle with the x and y coordinates (on the whole “play area”) of the sprite’s top left corner pixel, and it’s width and height in pixels.

#6

I see, this is starting to make sense.

The simplest thing would be to put back the translate line and use untranslated bounds for the area, e.g:


carArea = new Rectangle(this.getWidth(), this.getHeight());

What you’re saying should also work, though. I suggest reading up on transforms, though, or you’ll drive yourself crazy.

#7

I think I got it :slight_smile: this seems to work:


	// draw onto the Graphics2D object
	public void draw(Graphics2D g) {
		
		// create a new area from the sprite
		carArea = new Area(this.getBounds());
		
		// transformations, set the coords for the sprite ("car") AT
		AffineTransform atCar = new AffineTransform();
		AffineTransform atArea = new AffineTransform();
		atCar.translate((int)this.getX(), (int)this.getY());
		
		// rotate the sprite around the middle of the rear axel
		atCar.rotate(
			Math.toRadians((int)this.getRotation()),
			this.getWidth() / 2,
			this.getHeight() - (this.getHeight() / 4)
		);

		// rotate the area
		atArea.rotate(
			Math.toRadians((int)this.getRotation()),
			(int)this.getX() + (this.getWidth() / 2),
			(int)this.getY() + (this.getHeight() - this.getHeight() / 4)
		);
		
		// apply the transformation to the area
		carArea.transform(atArea);
		
		// draw the readily rotated sprite		
		g.drawImage(this.sprite, atCar, null);

		// visualize the Area
		g.setColor(Color.red);
		g.draw(carArea);
		
	}

Now I’ll have to figure out how to implement it wisely so it’s easy to use it for collision detection etc, but now that it’s at least working it will be easy.

Thanks for nudging me to the correct direction

#8

my very first “AI” cars re-enabled again, the area stuff does seem to work indeed :slight_smile: http://www.youtube.com/watch?v=ElnEpBAsUAc

next up, use it for collision detection (hm I’m going to want to detect in what angle and what point the collisions happens as well), and when that’s done my next bigger goal I think would be a scrolling game world. Having fun so far

#9

Cool! Looks very nice.

Btw, for a great resource on various collision computations, check this out.

#10

Your problem with your earlier code was that your Area was already translated! You were translating it a second time with the AffineTransform. You can still use the same AffineTransform for the car and Area if you set your area to (0,0,width,height) and transforming it with “atCar”.

#11

I separated it from the draw method totally so that I can just call getArea() when needed (i.e. when I check for collisions)


	// get the area
	public Area getArea() {
		// create a new area from the sprite
		this.carArea = new Area(this.getBounds());
		
		AffineTransform atArea = new AffineTransform();

		// rotate the area
		atArea.rotate(
			Math.toRadians((int)this.getRotation()),
			(int)this.getX() + (this.getWidth() / 2),
			(int)this.getY() + (this.getHeight() - this.getHeight() / 4)
		);
		
		// apply the transformation to the area
		this.carArea.transform(atArea);

		return carArea;
	}



	// draw onto the Graphics2D object
	public void draw(Graphics2D g) {
				
		// transformation, set the coords
		AffineTransform atCar = new AffineTransform();
		atCar.translate((int)this.getX(), (int)this.getY());
		
		// rotate the sprite around the middle of the rear axel
		atCar.rotate(
			Math.toRadians((int)this.getRotation()),
			this.getWidth() / 2,
			this.getHeight() - (this.getHeight() / 4)
		);
		
		// draw the readily rotated sprite		
		g.drawImage(this.sprite, atCar, null);

		// visualize the Area
		if (debugging) {
			g.setColor(Color.red);
			g.draw(this.getArea());
		}
		
	}
#12

Looks good to me.

You might run into trouble down the line if your rendering gets out of sync with the collision area (say, you update one but not the other - an example might be if you decide that different cars have a different center, and only update the render). Probably not worth worrying about now though.

Main thing is to understand exactly what both those methods are doing and why :slight_smile:

#13

Yeah, that crossed my mind too when I realized I now have these hard coded values in two separate places in the code - I shrugged it off with “I’ll just make two more integer variables representing the rotation point for the car and these methods can then use those variables”, I’ll just have to remember to actually do it (takes like 2 minutes but I didn’t get around to it yet) 8)

#14

Fine, ignore me :frowning:

#15

Aw no, it was kind of meant as a reply to you - I already separated the two, as I want the area “detection” (for a lack of a better word) to be separate from the drawing anyway. I guess I could create the AT elsewhere and use it in both of the methods though, would at least save me one very frequently used “new AT” call bu I don’t think efficiency will play too big of a role in a game like this (although I have big plans and a vivid imagination but I’m sure my programming skills will be a huge bottleneck in what I can actually do)

#16

Hrm ok so contrary to what I thought (without reading enough about it beforehand) it would appear you can’t simply do “if(oneAreaObject.intersects(anotherAreaObject))” … :-X

back to the drawing board

#17

Something like:

boolean intersects(Area a1, Area a2) {
  Area result = a1.clone();
  result.intersect(a2);
  return ( !result.isEmpty() );
}

Simon

#18

Right on, thanks. Seems the result of clone() needs to be cast as an Area (returned Object otherwise) but otherwise it works just like that, small modifications and it’s another method for my car class:


	// collides with another car?
	public boolean collidesWith(Car otherCar) {
		Area check = (Area)this.getArea().clone();
		Area otherArea = otherCar.getArea();
		check.intersect(otherArea);
		return(!check.isEmpty());
	}
#19

Urgh, Area is so slooow. I highly recommend not doing this.

Instead look up line intersection and go with that.

#20

It makes sense to do a quick bounding circle or bounding box check(*) before intersecting Areas if you’re checking for collisions between lots of entities. But either way, if it works and it doesn’t show up as significant in the profiler, why worry about it?

(*) E.g.,

public boolean collidesWith(Car otherCar) {
  if ( distanceSquared(this.position, otherCar.position) > maxCarDiameter*maxCarDiameter ) {
    return false;
  } else {
    // do a proper check with Areas
  }
}

Simon