Weird render glitch?

Newbie & Debugging Questions
#1

Hi there JGO,

I am experiencing a long time now a render glitch with is really been a pain in the “arssh”. I never knew why this happened nor I wanted to ask it on the forums… But since I implemented mouseListener the coords are not always right because of lines that are bad drawn.

Normally a pixel in the game is 3 pixels from the screen but sometimes this 3 changes to 4 at several points (if you look at the grass/sand texture you will see bigger pixels that arent really 3x pixels but 4x (as in the ratio game:screen). I dont know what I am doing really wrong can’t see something that is wrong… Maybe it is just java and need to put more RAM into the game?

Screenshots:

http://img27.imageshack.us/img27/2621/bvo.png

information:
If you look at the inventoryGrid you see that some lines are 4 pixels wide and have the same draw code as others that are 3 pixels wide (what the normal ratio is). If you see at the left of the screen(top screenshot), then you see that the eyes of the MobPlayerMP are 4 wide aswell So I think I made a small error on how to draw the first coords or something.

Code:

public void render(int xPos, int yPos, int tile, int colour, int mirrorDir, int scale) {
		xPos -= xOffset;
		yPos -= yOffset;
		
		boolean mirrorX = (mirrorDir & BIT_MIRROR_X) > 0;
		boolean mirrorY = (mirrorDir & BIT_MIRROR_Y) > 0;
		
		int scaleMap = scale - 1;
		int xTile = tile % 32;
		int yTile = tile / 32;
		int tileOffset = (xTile << 3) + (yTile << 3) * sheet.width;

		for(int y = 0; y < 8; y++) {
			int ySheet = y;
			if(mirrorY) 
				ySheet = 7 - y;
			int yPixel = y + yPos + (y * scaleMap) - ((scaleMap << 3) / 2);
			for(int x = 0; x < 8; x++) {
				int xSheet = x;
				if(mirrorX) 
					xSheet = 7 - x;
				int xPixel = x + xPos + (x * scaleMap) - ((scaleMap << 3) /2);
				int col = (colour >> (sheet.pixels[xSheet + ySheet * sheet.width + tileOffset] * 8)) & 255;
				if(col < 255){
					for(int yScale = 0; yScale < scale; yScale++) {
						if(yPixel + yScale < 0 || yPixel + yScale >= height) 
							continue;
						for (int xScale = 0; xScale < scale; xScale++) {
							if(xPixel + xScale < 0 || xPixel + xScale >= width) 
								continue;
							pixels[(xPixel + xScale) + (yPixel + yScale) * width] = col;
						}
					}
				}
			}
		}
	}

If you can help just say something It will always be great!
-RoseSlayer

#2

Your scaled image is not a multiple of three pixels wide or tall.

#3

How do you mean?

#4

Still the same problem and I can’t seem to find the problem… It is getting really annoying when I am trying to add buttons some positions are wrong drawed :/… Does anyone have an idea?

#5

Thats because your image has a border. When you render two images next to each other, it will look like your each slot has an extra pixel.

#6

try drawing your border with lines instead of using images with lines in them already

#7

Without analyzing your code, I had a similar problem with a game for android that I made.
I was converting my position from double to integer to draw my images.
Example:
If you add 32.5 pixels each loop and you start at 0:
0 + 32.5 = 32
32.5 + 32.5 = 65

but 32 + 32 = 64… you have 1 extra pixel there.

#8

[quote=“opiop65,post:5,topic:44049”]
Thats because your image has a border. When you render two images next to each other, it will look like your each slot has an extra pixel.

This graphical glitch only happends at certain coords on the screen. It are always the same coords. And because I think the images are moving constantly, that there is nothing wrong with the border. Still Thanks for trying to help!

The problem is I am not using any doubles except from my movingspeed… But still thanks for trying to help me!

#9

If you upgrade a 4-pixel wide image to 9-pixels wide, one of those pixels will be scaled to 3 times normal while the rest are only 2 times.

Of course this may not be your problem, but that’s all I can guess from the information I have.

#10

This is exactly the problem the 4pixels wide pixel is sometimes scaled to 5pixels, But I can’t seem to find where the code is wrong :confused:

#11

How big is your original image, before any scaling? Never mind.

All I can think of is a rounding error somewhere with your ints.

EDIT: Actually, I don’t even see it. And I couldn’t check the actual width in Paint.NET, because the image is scaled. :frowning:

#12

All the scales are most times 1, except text. I think it might be a graphical error that the 1 pixel is just missing and there is nothing rendered on it… Or something… But it keeps getting more and more annoying as I want to progress with my game :confused:

#13

I know a tutorial very similar with your game. Maybe if you check how it is made, you find what you have wrong.

DesignsbyZephyr tutorial

#14

That is this game, only I took it a step further. He also has the render glitch but he probably doesn’t saw it

#15

Where is you draw code?
Just to test it, make sure you scale all your tiles:

g.draw(tile, x, y, SCALE_W, SCALE_H, null)
#16

all the colours from the render script are made into 1 single image, and then it is drawn:

g.drawImage(image, 0, 0, getWidth(), getHeight(), null);
#17

Yes but you need to draw to that image before…

#18

Hold up Ive seen that tutorial and had the same issue you use the image.getwidth and image.getheight when rendering. Look at the code below for the solution to that issue!!!. However if you have your sprites and an odd size and you are not compensating for it then you will have an issue like this.

vaanzeeban yes?

Edit :
if it is from the vanzeeban tutorials which it looks like it is goto this section of code

private void render() {
		
		BufferStrategy bs = getBufferStrategy();
		if (bs == null) {
			createBufferStrategy(2);
			return;
		}
		Graphics g = bs.getDrawGraphics();
		screen.clear();
		
		screen.render(xoffset, yoffset);
		for (int i = 0; i < pixels.length; i++) {
			pixels[i] = screen.pixels[i];
		}
		g.drawImage(image, 0, 0, image.getwidth(), image.getheight(), null);
		g.dispose();
		bs.show();

	}

and change it to

private void render() {
		
		BufferStrategy bs = getBufferStrategy();
		if (bs == null) {
			createBufferStrategy(2);
			return;
		}
		Graphics g = bs.getDrawGraphics();
		screen.clear();
		
		screen.render(xoffset, yoffset);
		for (int i = 0; i < pixels.length; i++) {
			pixels[i] = screen.pixels[i];
		}
		g.drawImage(image, 0, 0, WIDTH * SCALE, HEIGHT * SCALE, null);
		g.dispose();
		bs.show();

	}
#19

@Icass, thank you very much! And all the others that’ve been helping me to fix this problem. So it was a border problem

#20

:slight_smile: not problem I had that issue for ages. Glad it worked!