Tiled background glitch

0 favourites
  • 13 posts
From the Asset Store
Each tile 64 by 64 pixels - Ultimate Tile Set for your awesome games
  • I don't know if this could be related to R87, because I installed it before noticing this. Also didn't find any similar bugs in the recent posts, so here it goes:

    I made a Tiled Background and I noticed that, if rotated or zoomed in, a small (probably less than a pixel) part of the next tile will bleed in, creating a glitch.

    <img src="http://www.gamma-beam.com/construct/bugex/weird_line_01.png" border="0" />

    <img src="http://www.gamma-beam.com/construct/bugex/weird_line_02.png" border="0" />

    (the horizontal line is there because of the lower tiled bg)

    A few more information:

    • Setting the sampling to POINT will remove the problem.
    • Pixel rounding won't solve it.
    • The tile width & height is 128.
  • The diagonal seam is a tell-tale. That looks more like a driver bug than any sampling or tiling issue. Do you have up to date drivers? Is it the same on all browsers?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • I've always had this problem as well for some reason and have been unable to fix it by setting it to point/pixel rounding on.

    I just changed each of the backgrounds it affected by adding a couple of transparent rows of pixels at the botttom/top which works pretty well.

  • Hi Ashley

    I'm not sure I understand the concept of "tell-tale" <img src="smileys/smiley17.gif" border="0" align="middle" />

    Yes, it's happening on all browsers, also tested on PC & Macs, updated drivers on all of them.

    I'll send you the link to the exported project on a PM (supa-secret stuff going on here!)

  • Haematite

    Yeah I'm using this workaround, I've added a transparent pixel on the left. <img src="smileys/smiley2.gif" border="0" align="middle" />

  • Sorry, by "tell-tale" I mean a giveaway, as in the diagonal line indicates a driver bug. Seams along the edges of the tiles are one thing, but diagonal lines inside a tile usually means the graphics driver is old and crappy and can't draw a 2D image without screwing up the contents :P (I don't see any diagonal lines on my machine)

    Lines along the edges of tiles are a different issue though. I'm not sure why they are there. Is WebGL on? Is it any different with WebGL off?

  • Hi Ashley

    I tested with the WebGL off - the lines move a bit diferent, more precise, but they're still there. The only way to remove them is to add the point sampling. Drivers are totally up to date on my pc, just installed the catalyst this morning. I don't know about the mac tho.

    However, my workaround for now was to make the tiled bg 127px wide. Since it's a gradient, and the tiling is one-dimension only, the last pixel would not impact on the visuals.

  • I'm also having a similar problem and was just searching the forums for a solution. Here's what I'm seeing.

    tiled_background_glitch.capx

  • It might be a browser bug - it should certainly be possible to tile power-of-two textures seamlessly at any zoom level. I'll take a look and see if it's a browser issue.

    For now the only way to guarantee seamless rendering is to turn WebGL on and set sampling to Point. It seems to be an issue with linear sampling only.

  • yeah I noticed this too in my first project. I found out the only way to get rid of it was point sampling or adding transparent pixels like mentioned above. That was in r85

  • anymore information about this issue because I've been having the same problem as well but I want my project to set to linear sampling since I have hand drawn sprites.

    And what is the method of adding transparent pixels?

  • Hmmm I'm not sure if Ashley had a deeper look into this.

    Adding a transparent pixel only works if you are using tiled backgrounds that repeat on one axis. Just go to the image editor and resize it by one pixel (without stretching).

  • I don't believe this is a bug - I think people usually are getting confused by sub-pixel positioning and non-power-of-two textures. You can still use linear sampling and avoid tiled background seaming by enabling 'pixel rounding' in project properties.

    So I'm actually going to close this report, especially since I can no longer find any of the repro .capx's or the links are dead (part of the reason I recommend Dropbox). If you have a Tiled Background which isn't tiling properly, and the Point sampling or Pixel Rounding project properties don't seem to help, please reproduce the project in a minimal new project and post a new bug report (and host the file on Dropbox!).

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