How do I fix this graphics issue?

Hello everyone, I'm new here. Been using Construct 2 Business for the last few months and I love it.

Up until now I've mostly been doing layout tests and programming things, and only recently started implementing graphics. I noticed though that I'm experiencing some problems with the borders of the PNGs inside the program. Nothing I've looked up so far has helped me solve the problem. Please have a look at the image below.

Almost every graphic I implement as a sprite gets a little transparent border around the edge which makes it look like the images are torn. Also, every time I create a tiled background there's a little 1 pixel border that appears on the top or the side looping the other side of the graphic.

I've been trying to solve this for the last day and I'm getting a bit frustrated. If anyone can help it would be very appreciated! Thank you.

A few simple questions to help with answering yours:

When is this happening?

Are the sprites scaled in preview?

What program are you using to create your sprites?

Is the transparent border present within the image editor?

I'm using Adobe Photoshop CS5.

This happens inside both the Construct 2 layout editor and when I play the game. It does not happen inside Photoshop or inside the edit image window in Construct 2. The transparent border does not appear in either of those.

One thing I can think of is that your sprites might not be at precise pixel-location (or scaled to cover less than a pixel)..

If the sprite is at x=201.5 instead of 201 half a pixel would be covered by and as such a semi-transparent line would be created..

You could avoid this by either placing the sprites on their exact locations or changing the sampling to point instead of linear and or turning pixelrounding on in the project properties..

If this is not the case I guess seeing your capx/sprites would be the only option to see what's going on..

BTW - is your tiled background a power of 2?

The positions are exact and not at 0.5.

There are tiled backgrounds with both a power of 2 and those that don't follow that and this happens to both of them. I have the grid set up that each tile is 32 x 32 and placing/dragging objects is snapped at 16, and all tiled graphics are divisible by 32.

I think this might be a problem with how the images are saved. PNGs often have this sort of problem and I think I encountered it one time a long time ago in RPG Maker and I forget how I fixed it. The odd thing about it though is that in the image editors there is no such border.

You might want to try using the crop tool inside the image editor, I just remembered some people saying it helps..

Here's a quick .capx I created to show what I'm talking about. The corner sprite does not connect completely with the tiled bg to the left of it due to a semi transparent pixel edge.

The spikes on the bottom have a really tiny line on the top where the bottom loops around. Although that image is not a power of 2, the exact same thing happens to power of 2 tiles.

Edit: It's not letting me post a URL to the download????

Edit 2: Won't let me send PMs either. Great...

Well here you can enter the URL stuff into the address bar I guess. dropbox.com/s/3zbhlwtulwjfhbx/spriteproblem.capx?dl=0

And yeah I also tried using the crop tool and it didn't do anything. Try taking a look at the download above and see if you can figure out what I mean.

I have the same issue at the moment when using tiled backgrounds, in my case I move the tiled backgrounds with 64pix/sec and it flash a ugly border.

When I use the same image but then lay them one by one at a grid you wont see a flashy border when moving.

Image don't have any transparency in the image editor either.

Think the issue has to do with how the tiled background is rendered in construct.

Hope that Ashley want to take a look at this problem.