0 Favourites

How do I stop getting seams in tile or 9patch?

  • It seems to be browser based - any ideas?

    <img src="http://seannoonan.co.uk/development/dev_noonanrun/browsers.png" border="0">

    Link to fullsize image

    I have the project scaled up by x2 - that seems to be the cause of this...

  • One thing to look at is the origin point and if you are using a combination of tiled background in conjunction with regular sprite based tiles... in this case if you are trimming your tiles you are getting a 1px transparent border around your tiles. But this does not happen on tiled backgrounds. This means that for example if you use the upper left corner as the image point, then when you put tiled backgrounds next to regular sprite tiles you need to move the tiled background right 1px and then down 1px to get it to line up and take into account the transparent pixels in the regular sprites.

    You may also want to look at pixel rounding and if there is a difference in browsers that do not support webGL vs. ones that do... just some thoughts on how to narrow it down. Hope it helps a bit...

  • I made a tiled thing as a test in my first weeks and found seams appearing when I had the projecct propperties "sampling" on point.

    Point is suposed to be faster but found that Linear gave better quality.

  • Set Pixel Rounding to 'Yes', sampling to 'Point', and fullscreen mode to 'letterbox integer scale'.

  • Set Pixel Rounding to 'Yes', sampling to 'Point', and fullscreen mode to 'letterbox integer scale'.

    These are the settings I am using. I tried letterbox integer fullscreen and still had the same problems.

    <img src="http://seannoonan.co.uk/development/dev_noonanrun/settings.png" border="0" />

    Please bear in mind, this is only happening when the project is scaling in any way - if I leave Fullscreen in browser to 'Off' then there are no problems at all. Every browser has the same visual quality (the performance varies however).

    It seems only Chrome is able to scale correctly :(

  • Another thing I have noticed is that tile objects and 9patch also become slightly blurred if WebGL is enabled...

  • When you say "I have the project scaled up by x2", what do you mean exactly? Do you mean that you make the projet smaller, then have the browser scale it bigger? Like the game is 100x100, but you make it appears 200x200 in the browser?

  • I scale it either using the letterbox integer fullscreen method or use the scale action.

    Basically any method of scaling seems to cause problems.

  • You should post a .capx so we can see ourselves. It ought to work just fine with the settings you have shown.

  • Construct 3

    Buy Construct 3

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

    Buy Now Construct 3 users don't see these ads
  • Sorry that I never got around to putting up a capx, however this issues has now been resolved thanks to "Low-resolution fullscreen scaling" in the latest version. If I set Fullscreen Scaling to low quality, tiled backgrounds and 9 patch are fixed.

    The only remaining issue it seems is that pixels on 9 patch become slightly blurred if WebGL is enabled...

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