Can't get rid of gap that appears on image..

Hi,

I'm having a small issue with applying a scrolling background to my game. I'm using the same method as the Autorunner template to create a scrolling background but the issue is that any image i insert (as a tiled background) seems to have a small gap when it scrolls back to the the beginning of the image.

The actual scrolling background seem to work fine, but its just this gap thats causing an issue.

It's not an issue with the image itself as i created the image myself and both sides match perfectly to create the effect of scolling continuously. I've tried increasing the size of the image but with no luck.

I'm not sure what the problem is so i hope someone can help.

I've included an image to show what i'm referring to.

Thanks

Project settings: point sampling, pixel rounding, letterbox integer scale.

Thanks for the reply but unfortunately that doesn't solve the problem, there's still a gap and also, because i've changed it to point sampling, the quality of my image decreases. Any other suggestions?

I know you said that it's not a problem with the image - does this also happen if you insert the image into a tiled background? What software did you use to create the seamless texture and did you resize the output to fit into your sprite? If you resized it then that line could be an artifact of the compression.

I used Photoshop to create my images, these pictures definately match together to create a seamless image. These images that i'm having problems with are already inserted as Tiled Backgrounds. I did resize the images in Construct to make it slightly bigger to fit my layout size as they were a little smaller. But even if i resized the image in Photoshop to the exact size as my layout size and then insert it into Construct, it's still the same issue.

I have just noticed that the gap appears on the black line that shows the layout size, this is with all the images i'm having trouble with.

I've uploaded a couple of pictures to give a clearer view of what i mean.

The 1st picture i uploaded shows how it normally looks when i insert an image. In the 2nd picture, i've moved the image so you can see a gap that appears where the black line is in the 1st picture.

I've tried different things to solve this like increase the layout size, increase the image size but to no avail.

Resizing is the problem - it's compressing/stretching the image and creating the line. I am not familiar with Photoshp's capabilities for making seamless tiles, so I can't help there - but there are quite a few free programs available that will properly create seamless tiles of any size for you (quick google search and loads will appear).

I don't understand how its a resizing issue, if its compressing/stretching the image, how does that make the gap appear? I downloaded a random image online and placed inserted it and the gap still appears. Is this some sort of bug? I don't get why this gap appears. Can anyone else offer any other suggestions? I cant be the only one that has experienced this issue....

Because when you resize an image the pixels are averaged according to the change in size / ratio and their neighbors influence the calculation - pixels at the edges don't have neighbors on one side... Create a sprite of, say 32x32 pixels and fill it with a pure color. Resize the image to 8x8 and see the compression effect on the edge pixels. I have no idea what random image you downloaded and so cannot comment....

Never mind, i've solved the issue. I had a close look at the edges of my images in Construct, and after zooming in i noticed a small gap appearing on both sides of the image. After filling the gaps in with the color picker and brush tool, my issue was solved. Don't know why the gaps appeared but thanks to everyone that replied.

when you click the trim feature in C2 it ads a 1 pixel blank space around the image, which is not good for tile objects.

-Mike Parent