Strange grid appearing in tile based game (probably rounding error)

Howdy folks,

So my game progresses at an astoundingly slow rate because I have no real idea on mathematics or processes to do things, so I’ve turned my attention to making it look pretty instead.

I’ve come across a little problem though…

I have this weird grid showing over my map. To start with I thought I’d written a little routine to show a grid but when I couldn’t find one I thought maybe I have a rounding error.

The problem is I have no idea how to sort it out!

This is my level drawing code:


public void draw(Graphics2D gfx, double scale, double scrollX, double scrollY) {
		
		//  draw the game tiles
		int x;
		int y;
		
		for (y = (int)scrollY; y <= (int)scrollY+game.tilesOnScreen(); y++) {
		
			for (x = (int)scrollX; x <= (int)scrollX+game.tilesOnScreen(); x++) {			
				
				if (x >= width || y >= height) {
					continue;
				}
				getTileAtLocation(x, y).draw(gfx, (x-scrollX)*tileSize/scale, (y-scrollY)*tileSize/scale, tileSize/scale, tileSize/scale);
				
			}
			
		}
	
	}

scale is 0.48 in the image above,
scrollX and scrollY are both 0.0 in the image above,
tileSize is integer 16.
getTileAtLocation returns a tile object and it’s draw method is this:

	public void draw(Graphics2D gfx, double x, double y, double width, double height) {
		
		gfx.drawImage(sprite, (int)Math.round(x), (int)Math.round(y), (int)Math.round(width), (int)Math.round(height), null);
		
	}

I was originally just casting the values to (int) but just in case the error was because they were all rounding down, I changed to Math.round(). This hasn’t made any difference though :confused:

Running through it with a calculator, I get the following:

tileSize / scale = 33.333333333
Tile 0,0 - draw at 0, 0
Tile 0,1 - draw at 0, 33.333333333
Tile 0,2 - draw at 0, 66.666666667
Tile 0,3 - draw at 0, 100

I can’t get my head round why tile 3 isn’t at 99.999999 (thus rounding down to a flat 99).

Any help here would be greatly appreciated. I really hope I’m just missing a very simple idea!

P.S. I have tried it at different scales but I always get these lines appearing at different places (evidently because of these darn rounding errors).

Well I just had my eureka moment… I changed to Math.ceil() instead of Math.round() and it now doesn’t have the odd missed pixel.

Instead I now have the odd stretched tile as every few tiles is a pixel taller or wider.

What do you guys use to make this go smoothly? Is a stretched tile here or there not really a problem I should be worrying about?

[quote=“rwatson462,post:2,topic:50970”]
Drawing the tiles at the right size so that no scaling is necessary.

If for some reason that’s completely impossible, your options are probably either to draw everything to an unscaled back-buffer and then do one scaled draw to the main buffer or to look at setting anti-aliasing etc. rendering hints on the Graphics2D object.

Aye, I was trying to implement a scale system so no matter what the screen resolution, everything would take up the same amount of space.

That was one of my pet hates from old style computer games - if you bumped up your screen res you had an advantage over players on lower screen resolutions :confused:

Hmm, interesting idea though to draw everything at normal size then upscale the whole screen in one go. Wouldn’t have a clue how to go about that, but I’m sure it’s possible!

Thanks for your comments

[quote=“rwatson462,post:4,topic:50970”]
If you’re sticking to Java2D then you’d create a BufferedImage, call its getGraphics, paint onto that, and then do a single drawImage call on the Graphics2D you’re currently drawing to.

Awesome, you make it sound so easy! To be fair though, everything about using Java 2d graphics seems fairly straight forward once you know the commands to use :slight_smile: