Stretching Causes Lines Between Tiles [FIXED, SEE PAGE 3]

rob1221

  • *
  • Posts: 9472
I can probably edit the source files so tiles in stretch mode ignore the antialias setting.

Kazetoon

  • *
  • Posts: 556
When I'll be able to I'll attach screenshot of my game with and without anti-aliasing.

Edit: I attached 2 images, one with anti-aliasing and one without. As you can see, even without anti-aliasing, there are still some lines.

« Last Edit: August 07, 2013, 10:08:44 pm by Ayzie »
Little Drop - Try it out!
     
iphone/ipad Android
Newgrounds Stencyl Arcade Kongregate
Developer Website

Kazetoon

  • *
  • Posts: 556
Quick question, is this an issue on ios devices?
Little Drop - Try it out!
     
iphone/ipad Android
Newgrounds Stencyl Arcade Kongregate
Developer Website

rob1221

  • *
  • Posts: 9472
Quote
Edit: I attached 2 images, one with anti-aliasing and one without. As you can see, even without anti-aliasing, there are still some lines.
It looks like the antialias option is being ignored in the vertical direction and may be hardcoded to true.  I'll look at the files again today and see if I can find where the problem is.  I don't think I'll be able to fix the line problem another way because it looks like the problem is caused by a native NME method.

Quote
Quick question, is this an issue on ios devices?
Yes.

Update: after some more testing with another game it looks like lines can also be caused by having a scale factor less than 1 (compressed image).  Can you test again and see if scaleX or scaleY are less than 1?  You'll see those numbers in the console log.

« Last Edit: August 08, 2013, 09:42:18 am by rob1221 »

Kazetoon

  • *
  • Posts: 556
Both scale X and scale Y are 1.125.
Little Drop - Try it out!
     
iphone/ipad Android
Newgrounds Stencyl Arcade Kongregate
Developer Website

rob1221

  • *
  • Posts: 9472
I'm not sure what's going on then.  I blame NME, which is probably a good guess.

EDIT: Confirmed, see this thread: http://www.openfl.org/developer/forums/bugs/drawtiles-pixel-bleeding/

Does separating tiles into separate tilesets still not work for you?  Have you also checked the resource folder to confirm all the tiles are in separate images?

« Last Edit: August 08, 2013, 11:55:16 am by rob1221 »

Kazetoon

  • *
  • Posts: 556
I could check again but I'm not sure if I would like doing it because I have more than 30 tiles and 70 levels which would take a lot of time to replace everything. If this isn't too hard to fix maybe Jon or mike can take a look at it? Otherwise I'll just try again your solution.
Little Drop - Try it out!
     
iphone/ipad Android
Newgrounds Stencyl Arcade Kongregate
Developer Website

rob1221

  • *
  • Posts: 9472
I'm still looking, but for now I don't know how to fix this.  Another workaround you can consider is to ditch stretching and just use full screen.  If you add space evenly around the sides and move the camera to the center, it works somewhat like perfect fit but without the black bars.

Update: I think this will have to be a toolset fix to give the tileset image 1px transparent space between each tile.  Doing so at runtime would be bad for performance Maybe not?.

Another Update: I see that editing the pixels of the tileset is very easy, but changing the size is more complicated and I don't know if I can make it work.  Right now I'm working on a function that takes a bitmapData of tiles, splits the image into the individual tiles, adds a 1px transparent border around each tile, and then recombines the tiles into the original bitmapData.  Then I have to see if I can draw the tiles correctly.

« Last Edit: August 08, 2013, 05:40:07 pm by rob1221 »

Kazetoon

  • *
  • Posts: 556
I feel bad that I'm not of much help but if you need testing just ask.
Little Drop - Try it out!
     
iphone/ipad Android
Newgrounds Stencyl Arcade Kongregate
Developer Website

rob1221

  • *
  • Posts: 9472
I think I'll be able to pull this off.  I tested on Windows, but I think I can tweak what I have so far to work with mobile.  Attached is a screenshot of the same tiles, the only difference being the transparency of the border.  The drawn tiles are actually 34x34, but are drawn in a way that they look like 32x32 when the borders are transparent.  In theory this should solve the line problem, but I haven't tested that yet.

OK I tested on Android with 1x scale and stretching.  Without antialias it's perfect, but with antialias it looks like the first image in my screenshot with all the black lines.  That's pretty weird considering the border is supposed to be 100% transparent.

« Last Edit: August 08, 2013, 10:21:46 pm by rob1221 »

Kazetoon

  • *
  • Posts: 556
Nice keep up the good work. Anti-aliasing on tiles is not a must since my tiles are pretty simple graphically but if you can figure out a way to enable it, it would probably be useful for other users experiencing this problem.
Little Drop - Try it out!
     
iphone/ipad Android
Newgrounds Stencyl Arcade Kongregate
Developer Website

rob1221

  • *
  • Posts: 9472
I finally made some progress trying a different idea.  Rather than surround the tiles with transparent pixels, I duplicated the border pixels in each direction.  I also found out I can use whatever tile size I want, so depite using a larger tilesheet, the tiles can still be 32x32.  Testing on Android with stretching and antialias enabled, there were no lines.  I still need to fix my code for the other scales, but I think this will work.  Compressing the screen still causes lines as before, but with a 480x320 (or 320x480) resolution and the default Universal.hx, the screen should never compress.

Kazetoon

  • *
  • Posts: 556
Good to know. Keep up the good work.
Little Drop - Try it out!
     
iphone/ipad Android
Newgrounds Stencyl Arcade Kongregate
Developer Website

rob1221

  • *
  • Posts: 9472
OK, use this file and see if it works for you.  It goes under plaf/haxe/lib/stencyl/1,00/com/stencyl/models/scene/

Edit: Updated to include both scaleToFit modes.

« Last Edit: August 10, 2013, 08:13:16 am by rob1221 »

Kazetoon

  • *
  • Posts: 556
This works perfectly on my galaxy s3. Great work!
Little Drop - Try it out!
     
iphone/ipad Android
Newgrounds Stencyl Arcade Kongregate
Developer Website