How do I Fix Tiled Background / Sprite

  • 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 )

  • 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.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I don't think the OP means TileMap, but instead TiledBackground

  • did you resize the source image in C2 at all? and is it perfectly square 256, 512 etc..?

  • 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

  • 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

  • I have the same problem on putting a 70x70 tiled-background and shows the white spaces in-between the map in the tiled-background layout view. So the solution is to change this 70x70 pixel resolution map to 64x64 pixel and walla...all fixed! apparently all mapping should be in 32x32, 64x64, 256x256 ratio or higher. I'm a newbie (obviously), so need to read more things in the forums...

  • I have the same problem on putting a 70x70 tiled-background and shows the white spaces in-between the map in the tiled-background layout view. So the solution is to change this 70x70 pixel resolution map to 64x64 pixel and walla...all fixed! apparently all mapping should be in 32x32, 64x64, 256x256 ratio or higher. I'm a newbie (obviously), so need to read more things in the forums...

    @haryo146

    Please be wary of such old threads - those over 2 years or more - as the software will likely have changed so much that such threads are no longer relevant.

    Best thing is to create your own thread when you need help.

    Thanks

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)