Rotation of translucent images (png)

Newbie & Debugging Questions
#1

Ok, I have a few questions I’d like some comments on. I’m doing some things in my game I’m making that I don’t think are very effecient, but I don’t know of any other way (little experience), so any comments, hints and some help on how to do stuff RIGHT is appreciated :slight_smile:

This is all Java2D, and my game is a 3rd-person-strategy-shooter, meaning that you pilot a small unit with your keyboard and mouse and blow up things :slight_smile:

  1. This tank you play, is composed of 2 PNG/TRANSLUCENT images. The “tank base” and the “tank tower”. The tower looks at the position of the mouse-pointer. You can rotate the tank left/right using the A and D keys, while W moves you 3 up, S moves you 1 down (since it’s slower to go in the back-gear).
    QUESTION: Anyway, there is a lot of rotation here, rotating the tower and the base, according to how the tank is. Is this a very effecient way?

  2. You can also shoot by clicking the mouse buttons. You shoot some sort of a missile or bullet, which is a PNG/TRANSLUCENT image also. Anyway, when you shoot the bullet needs to be rotated to match the direction. So, each time I fire I create a Sprite, and when that sprite draws the image it rotates it everytime. I notice that when I shoot alot of bullets, the game slows down a bit. But I need to do this because the bullet can be travelling toward any x,y point from the tank location, and the bullet needs to be rotated to match the direction.

QUESTION: I know this isn’t very effecient, but I don’t want some ugly bullets. I’ve tried scaling down the quality of the graphics, but any better way to do this?

  1. In this game there is this Gun Tower, it shoots bullets (sprites) and it uses the same rotation for them as the tank does.
    This gun tower composed of a TOWER and a BASE. The tower rotates on it’s base, and that tower has a cannon that needs to look at the tank you’re piloting. While this Gun Tower is idle (tank not in range) it rotates on it’s base.

All this is related to the rotation of translucent png high quality png images.

My idea: I was thinking about having some sort of RotationSpriteCacher, to store the rotated images, so they don’t need to be rotated again, but simply retrieved from the rotationSpriteCacher and then drawn.

Any thougs?

#2

Pre-rotating your images will certainly help. Also, since you are using alpha you are going to take some slow down on the copying.

If you use transparent ie alpha 0 or 255, you will get some performance gain that way. There used to be some sample code for a simple performance test of png with alpha on the forums here. I didn’t write it, but it was because of some similiar questions I had asked. If I find it, I’ll reply with a link to it.

HTH,
Dr. A>

PS - Do you have a sample app to demo?

PPS - Found a link
http://www.java-gaming.org/forums/index.php?topic=5407.0

#3

http://www.gamelizard.com/game.php?game=robotank#game

Here’s a game I made in the past which works like you’re describing. All of the images are translucent png’s. All of the images are drawn with the Graphics2D.drawImage(BufferedImage, AffineTransform) method.

Does this game run smoothly for you? If so, perhaps there is something different in the code which makes things work a little nice. I’d be happy to share with you the code for rendering a tank and its bullets so you can see how I did it.

#4

Hey, thanks for that. Your game runs smoothly and it looks similar to mine, except that I have perhapse higher quality sprites/images and also stationary defensive structures.

There is one thing that I’m interested in though.

In my game I want to create maps that are maybe 2048x2048, or 4096x4096 in dimension.
My player (tank) should start at some given point on the map, let’s say (2000,2000).
Then I have 2 enemy tanks and one enemy defense structure somewhere at position (400,400).

Appearently if I’m running the game in a 800x600 window, then my player (tank) should be positioned at point (400,300) that is in the middle. But then the enemy units and defense structure can’t be located at point (400,400) ???

This is what’s troubling me. How do you deal with this sort of problem? Do you have some sort of worldYOffset and worldXOffset ?

#5

appel, yeah, you’ll have to translate everything that you render by the coordinates of the thing your camera is following. Btw, I’m presently writing a game in which the map size is several screen width on each side. I wrote a Viewport class and an interface, ViewportListener, in order to keep track of camera positions and have other panels correctly respond to camera location changes (or rather, not worry about them when it’s not necessary). Of course your camera might be moving continuously, in that case it would make sense just to ask about the camera position every frame.

#6

man, this runs perfectly smooth … how do you do that?
when i use translucent images in my games the performance goes down dramatically. only transparent images work for me. did you pre-render the rotated tank images?

#7

Interesting. You care to share it with me? :slight_smile: I’d like to see what other people are doing, because this is currently what I’ve been working on. I’ve actually solved my problem, but personally I feel that my code is a bit of a hack.

Also, how do you solve the problem with the scrolling background image? For example, when you move your unit in any direction, then the background image should scroll in the opposite direction, making it appear that the unit is moving, but still it’s stationary and everything else is moving :slight_smile:

My solution was to create a background image that had extra external padding. So if my texture as 256x256, then the extra external padding was 256 pixels on all sides. So when I would move my unit upward, this external padding would be displayed…until it had reached the boundary, then the camera would be reset to it’s default position on Y-axis (or X-axis if you’re moving to left/right) and if the tank is still moving upward then this process would simply repeat itself, making it appear that the background is scrolling continiously.

#8

appel, I’ll share the code at some time not too far in the future, but there are a few adjustments and inline commenting before we have our “prealpha 0.0001” in a state which doesn’t contain too many half-implemented things :). I’d hate to share code containing known but un-documented errors so others make mistakes.

#9

[quote]Here’s a game I made in the past which works like you’re describing. All of the images are translucent png’s. All of the images are drawn with the Graphics2D.drawImage(BufferedImage, AffineTransform) method.

Does this game run smoothly for you? If so, perhaps there is something different in the code which makes things work a little nice. I’d be happy to share with you the code for rendering a tank and its bullets so you can see how I did it.
[/quote]
That game was totally awesome. I can imagine how it will look in V1.0 :slight_smile:

I also noticed how smooth your Loader worked. Is there any hints that you can give, of how to make a loader like that. I’ve fiddled with a loader but it’s nothing like the one you developed.

#10

loader loading images:



/*****	Load Images	*****/		
int status = 0;
bottomBar.setTotal(totalImageSize);
String string = null;

for (int i = 0; i < imageStrings.length; i++) {
	string = imageStrings[i];

	topBar.setStatus(currentProgress);
	bottomBar.setStatus(status);
	bottomBar.setText(new String[] {"Loading Image: ", string.substring(string.lastIndexOf("/")+1)});
	
	refreshLoader();
		
	BufferedImage image = null;
	try {
	    image = GLUIUtil.loadImage(getResourceAsStream(codeBase+string));
	}
	catch (Exception e) {
	    throw new Exception("image: " + string + "\n" + e.getMessage());
	}
	
	loadedImages.put(string, image);
	
	status += imageSizes[i].intValue();
	currentProgress += imageSizes[i].intValue();
}
/*****	Done Loading Images	*****/

Move the screen (camera code)


public void moveScreen() {
	double centerX 	= screenX+SCREEN_WIDTH/2;
	double centerY 	= screenY+SCREEN_HEIGHT/2;
	double heroX 	= heroTank.xCoord();
	double heroY 	= heroTank.yCoord();
	
	heroX -= heroTank.getDx()*8 - (double)SCREEN_WIDTH/4*Math.cos(heroTank.getBaseTheta());
	heroY -= heroTank.getDy()*8 - (double)SCREEN_HEIGHT/4*Math.sin(heroTank.getBaseTheta());
	
		
	if 		(heroX > centerX)				screenX+=(heroX-centerX)*.25;
	else if (heroX < centerX)				screenX-=(centerX-heroX)*.25;
	if 		(heroY > centerY)				screenY+=(heroY-centerY)*.25;
	else if (heroY < centerY)				screenY-=(centerY-heroY)*.25;
	
	
	if (Math.abs(heroX-centerX) < 1)		screenX = heroX-SCREEN_WIDTH/2;
	if (Math.abs(heroY-centerY) < 1)		screenY = heroY-SCREEN_HEIGHT/2;
		
	if 		(screenX > mapWidth-SCREEN_WIDTH)	screenX = mapWidth-SCREEN_WIDTH;
	else if (screenX < 0)						screenX = 0;
	if 		(screenY > mapHeight-SCREEN_HEIGHT)	screenY = mapHeight-SCREEN_HEIGHT;
	else if (screenY < 0)						screenY = 0;
	
	grassStartX = -(int)(screenX)%grassWidth;
	grassStartY = -(int)(screenY)%grassHeight;
}

important stuff in my render method:


moveScreen();
		
//Draw Grass
for (int i=grassStartX-grassWidth; i<SCREEN_WIDTH; i+=grassWidth)
	for (int j=grassStartY-grassHeight; j<SCREEN_WIDTH; j+=grassHeight)
		g2d.drawImage(grass, i, j, null);		

//Draw all tanks that are on the screen
heroTank.draw(g2d, screenX, screenY);
for (int i=0; i<esOnScreen.size(); i++) 
	((Tank)esOnScreen.get(i)).draw(g2d, screenX, screenY);

And the Tank render method:


resetTrans(screenX, screenY);

for (int i=0; i<projectile.length; i++)
	if (projectile[i].isAlive())
		projectile[i].draw(g2d, screenX, screenY);
g2d.drawImage(RoboTank.getTankImage(color), trans, null);
g2d.drawImage(RoboTank.getTankImage(Constants.IMAGE_TURRET), tTrans, null);

resetTrans method:


public void resetTrans(double screenX, double screenY) {
	
	if (hasCapability(Constants.TURRET_HOVER))
		turretTheta = (Math.atan2(y-screenY-mouseY, x-screenX-mouseX))+Math.PI;
	else
		turretTheta = baseTheta;
	
	trans.setTransform(scaleX, 0, 0, scaleY, x-screenX-desiredWidth/2, y-screenY-desiredHeight/2);
	tTrans.setTransform(scaleX, 0, 0, scaleY, x-screenX-desiredWidth/2, y-screenY-desiredHeight/2);
	
	trans.rotate(baseTheta, imageWidth/2, imageHeight/2);
	tTrans.rotate(turretTheta, imageWidth/2, imageHeight/2);
}

And the Projectile draw method is basically the same. I hope that helps! :slight_smile:

#11

i wonder why you can turn on antialiasing and use translucent images (had a look at your code after a bit of decompiling) without getting any performance problems.
when i do this in my games the framerate goes down dramatically. i noticed you set some system properties (sun.java2d.transaccel/opengl = true). is this the magic bit? i remember i tried these once but with no success…

#12

Perhaps it’s a balance of other performance issues. Maybe if you profiled your app you’d find other bottlenecks that you could work on and end up with performance like mine.