How do I Fix Tiled Background / Sprite

Get help using Construct 2

Post » Tue May 12, 2015 10:05 pm

hey guys i have another weird question for you :)

im using a tiled background for my "ground" in game and the tiled background has a sprite that has to repeat(so i dont have to copy paste the same sprite over and over again), problem is, on hi res phones (i presume only on those) each time the sprite is over you can see a small almost invisible line a little lighter than the color of the pixel before it that separates each sprite in the tile
In photoshop i check the names of each of the colors on the pixels on each sides and they are practically the same idk why these few devices i tested it on show these lines at each end of repeat, so weird :/


any ideas? Im kinda worried about this because it's not appealing to the eye, and i thought i had gone through this already and fixed it way back when i first started.. guess i just thought i did huh xD

P.s. to give a "visual" (kind of) idea:

H is the sprite that we are using in tiled background

this is how it shows on editor in construct HHHHHHH
this is how it shows on one of the phones i tested it on ( and a tablet as well ) H|H|H|H|H| (the | between the H is almost the same width if not thinner and the space between the| and H is 0 in the phone preview i mean )
B
5
Posts: 48
Reputation: 319

Post » Wed May 13, 2015 4:31 pm

This is a known issue caused by the effect of scaling a tiled object. Basically put, when you scale the tiled background, spaces may appear because the images making up the tiles scale as well and may not scale the same.

Basically, if you scale a 100 x 100 object made up of a tiled 10 x 10 image down to 95 x 95, the 10 x 10 image has to scale down to 9 x 9. Pixels don't have the ability to show just half a pixel. This means the first 2 tiles will be right next to each other then there will be a 1 pixel space between the next. This isn't an issue in C2, it is the nature of how pixels work.

C2 has a way to deal with this by implementing "Seamless Mode." If you had read through the manual, you would have found the information about this here:
https://www.scirra.com/manual/172/tilemap

I hope that helps you out and good luck with your project.
B
38
S
12
G
11
Posts: 331
Reputation: 7,712

Post » Wed May 13, 2015 4:52 pm

I don't think the OP means TileMap, but instead TiledBackground
B
88
S
29
G
14
Posts: 1,154
Reputation: 15,003

Post » Wed May 13, 2015 4:54 pm

did you resize the source image in C2 at all? and is it perfectly square 256, 512 etc..?
B
88
S
29
G
14
Posts: 1,154
Reputation: 15,003

Post » Wed May 13, 2015 5:04 pm

I recommend you use the tile map support C2 has built in, because this by default does have a seamless mode that prevents this from happening. To my knowledge the tiled background object does not have this built in feature that guarantees no seams when the game is scaled to fit any given screen resolution,

The only other option is to set your game to use pixel rounding AND point sampling. This is perfect for retro style pixel art games and guarantees no seams. At least as far as I've experienced.

cheers,
Mike
B
49
S
9
G
4
Posts: 425
Reputation: 7,037

Post » Wed May 13, 2015 9:31 pm

Thanks for all the answers guys!

I read somewhere on the forums that this is what's causing the issue (as stated in some of the answers here as well) wikipedia link : /wiki/Power_of_two
The tiled background has to be a power of two in order for it to work the best...
Now i've fixed it, went to 32x32 for the small objects and as far as 1024x1024 (or whatever numbers it was) for the big boys :)


I still dont know if this will fix the issue as i have not yet rendered the project to test on mobile, but i assume this will be the fix to it.. I MIGHT come back here and say if it's workin once i've finished with the huge bug Fix but as far as intuition goes, im very positive on this ;)
B
5
Posts: 48
Reputation: 319


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 1 guest