Problem drawing tiles in platform game

Hello,

Im making a platform game for the learning experience, and im having a problem.

The tiles are overlapping eachother by one pixel. Or at least that's what i think is happening. The result is a gray line between tiles and my coordinates are thrown further and further off as the player goes right.

Ive included an illustration: http://i276.photobucket.com/albums/kk15/stkguy/tileProblem.png

The purple writing shows that the tile is shown as 19 pixels when it should be 20, and that there is a unintentional gray line.

Here is the code that reads in the map file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
void Map::LoadMap(const char *file){
	tileImage[0].LoadFromFile("Load/tile0.png");
	tileImage[1].LoadFromFile("Load/tile1.png");
	tileImage[2].LoadFromFile("Load/tile2.png");

	std::ifstream infile(file);

	int t[32][24];
	for( int j = 0; j < MAPHEIGHT; j++){
		for( int i = 0; i < MAPWIDTH; i++){
			if( infile >> t[i][j] ){
				switch(t[i][j]){
				case 0://non solid
					tiles[i][j].solid = false;
					break;
				case 1://solid
					tiles[i][j].solid = true;
					break;
				case 2://dirt w/ grass
					tiles[i][j].sprite.SetImage(tileImage[2]);
					break;
				case 3://topgrass
					tiles[i][j].sprite.SetImage(tileImage[1]);
					break;
				case 4://dirt
					tiles[i][j].sprite.SetImage(tileImage[0]);
					break;
				}
			}
		}
	}
}


And the code that draws the tiles. Note that this problem has been occuring since before i implemented scrolling.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
void Map::Draw(sf::RenderWindow& window){
	int xPixel, yPixel; //screen coord for currenttile
	int mapTileX, mapTileY;//current tile map coord
	int startX = 0-(scroll_X)/TILESIZE; //start x
	int smx = (startX+scroll_X)/TILESIZE; //start y


	for( yPixel = 0-(scroll_Y % TILESIZE), mapTileY = (yPixel + scroll_Y)/TILESIZE; yPixel < SCREENHEIGHT; yPixel += TILESIZE){
		for( xPixel = startX, mapTileX = smx; xPixel < SCREENWIDTH; xPixel+=TILESIZE){
			if( tiles[mapTileX][mapTileY].sprite.GetImage() != NULL)
			{
				tiles[mapTileX][mapTileY].sprite.SetPosition(xPixel+1,yPixel);
				window.Draw(tiles[mapTileX][mapTileY].sprite);
			}
			mapTileX++;
		}
		mapTileY++;
	}

}


I'm also making a side scroller with SFML, I think you are setting the tile position wrong. Try something like tiles[mapTileX][mapTileY].sprite.SetPosition(mapTileX*TILESIZE,mapTileY*TILESIZE);

Edit: As a side note, why not use SFML 2?
Last edited on
No that doesn't work. I'm not sure what you thought would happen, but mapTileX and mapTileY are the tile coordinates on the map, not the screen if that makes sense.

And for your side note, i diddnt feel like going through all that building and i heard its unstable. Also, im loosely following a video tutorial and he is using SMFL 1.6
I assumed mapTileX/Y are the indices of the tile and that TILESIZE is
what it says and that it is a square. If all that is true it should work as that is what I do
tiles[i][j].sprite.setPosition(j*32, i*32); and it works with no overlap.
Last edited on
Okay sorry the tile image doesnt show up so i assummed the character was falling endlessly, but he actually landed on the tile and i couldnt tell because scrolling is implemented.

So the tiles are in the right place (maybe) but the image is not showing. I'll keep looking at it i guess and let you know if i can get the image to show
The switch in loadMap if a tile is solid it will set it solid but wont set an image.
Load map is called twice, once for the solid/notsolid layer and again for the images.

EDIT: I just realized that is unneccary but im keeping it for now lol

EDIT 2: I had SCREENHEIGHT and SCREENWIDTH switched in the two for loops in Map::Draw. But that diddnt solve the problem -_-

EDIT 3: I got it to work :). The problem was the guy who made the tutorial doesnt test his code and he got all his x's and y's and width's and heigh'ts messed up. Thanks for the help though!

EDIT 4: Nvm, i just put it back to the way it was originally. The lines are still there.

I was thinking i should try to find a way to make it work with your method, but using "setPosition(j*32, i*32)" it wouldnt be smooth because there can never be only portion of a tile drawn.
Last edited on
Okay i think ive discovered the problem.

The "gray line" is from the blue sky background i have. When i disabled that, black lines appeared because the background was black. So for some reason the background png is coming through between the cracks of the tiles. The alpha of ever pixel in the tile is 255 so im not sure why thats happening.
Have you tried removing the + 1 in the SetPosition in the Draw function?
No, but i did find the answer! The problem wasnt that the tiles were being drawn incorrectly, i just had to use
 
tileImage[i].SetSmooth(false);


for all the images!
Topic archived. No new replies allowed.