Image tiling issue

[peterigzParticipant]

Having an issue where the edge of tiles seem to be wrapping round and displaying a slither of the tile adjacent in the sprite atlas. See attached image what I mean and the tile map in question. Is there a texture flag I’m missing to prevent that? The strange thing is I’m loading the sprite atlas and creating a separate image for each tile but it seems to be bleeding the edge of the tile next to it.

Here’s the code I use to load each tile, I’ve checked all the coordinates it uses to grab each frame are correct…

Monkey

Class tlShape Private Field width:Int Field height:Int Field url:String Field frames:Int Field smallindex:Int Field largeindex:Int Field maxradius:Float Field name:String Public Field image:Image[] Property Url:String() Return url Setter (value:String) url = value End Property Name:String() Return name Setter (value:String) name = value End Method GetImage:Image(frame:int) Return image[frame] End Property Width:Int() Return width Setter (value:Int) width = value End Property Height:Int() Return height Setter (value:Int) height = value End Property MaxRadius:Float() Return maxradius Setter (value:Float) maxradius = value End Property LargeIndex:Int() Return largeindex Setter (value:Int) largeindex = value End Property Frames:Int() Return frames Setter (value:Int) frames = value End Function LoadFrames:Image[] (path:String, numFrames:Int, cellWidth:Int, cellHeight:Int, padded:Bool = False) Local material:=Image.Load( path, null ) If Not material Return New Image[0] If cellWidth * cellHeight * numFrames > material.Width * material.Height Return New Image[0] Local frames:= New Image[numFrames] If cellHeight = material.Height Local x:=0 local width:=cellWidth If padded x += 1 width -= 2 End if For Local i:=0 Until numFrames local rect:= New Recti(i * cellWidth + x, 0, i * cellWidth + x + width, cellHeight) frames[i] = New Image(material, rect) Next Else Local x:= 0, width:= cellWidth, y:= 0, height:= cellHeight Local columns:= material.Width / width If padded x += 1 y += 1 width -= 2 height -= 2 End If For Local i:= 0 Until numFrames Local fx:Int = i Mod columns * cellWidth Local fy:Int = Int(i / columns) * cellHeight local rect:= New Recti(fx + x, fy + y, fx + x + width, fy + y + height) frames[i] = New Image(material, rect) Next End If Return frames End End Function LoadShape:tlShape(url:String, width:Int = 0, height:Int = 0, frames:Int = 1, padding:int = false) Local shape:tlShape = New tlShape If frames = 1 shape.image = New Image[1] shape.image[0] = Image.Load(url) Else shape.image = tlShape.LoadFrames(url, frames, width, height, padding) EndIf shape.Width = width shape.Height = height shape.Frames = frames shape.Url = url Return shape End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125

Class tlShape Private   Field width:Int Field height:Int Field url:String Field frames:Int Field smallindex:Int Field largeindex:Int Field maxradius:Float Field name:String Public Field image:Image[] Property Url:String() Return url Setter (value:String) url = value End Property Name:String() Return name Setter (value:String) name = value End Method GetImage:Image(frame:int) Return image[frame] End Property Width:Int() Return width Setter (value:Int) width = value End Property Height:Int() Return height Setter (value:Int) height = value End Property MaxRadius:Float() Return maxradius Setter (value:Float) maxradius = value End Property LargeIndex:Int() Return largeindex Setter (value:Int) largeindex = value End Property Frames:Int() Return frames Setter (value:Int) frames = value End Function LoadFrames:Image[] (path:String, numFrames:Int, cellWidth:Int, cellHeight:Int, padded:Bool = False) Local material:=Image.Load( path, null ) If Not material Return New Image[0] If cellWidth * cellHeight * numFrames > material.Width * material.Height Return New Image[0] Local frames:= New Image[numFrames] If cellHeight = material.Height Local x:=0 local width:=cellWidth If padded x += 1 width -= 2 End if   For Local i:=0 Until numFrames local rect:= New Recti(i * cellWidth + x, 0, i * cellWidth + x + width, cellHeight) frames[i] = New Image(material, rect) Next Else Local x:= 0, width:= cellWidth, y:= 0, height:= cellHeight Local columns:= material.Width / width If padded x += 1 y += 1 width -= 2 height -= 2 End If For Local i:= 0 Until numFrames Local fx:Int = i Mod columns * cellWidth Local fy:Int = Int(i / columns) * cellHeight   local rect:= New Recti(fx + x, fy + y, fx + x + width, fy + y + height) frames[i] = New Image(material, rect) Next End If Return frames End   End   Function LoadShape:tlShape(url:String, width:Int = 0, height:Int = 0, frames:Int = 1, padding:int = false) Local shape:tlShape = New tlShape If frames = 1 shape.image = New Image[1] shape.image[0] = Image.Load(url) Else shape.image = tlShape.LoadFrames(url, frames, width, height, padding) EndIf   shape.Width = width shape.Height = height shape.Frames = frames shape.Url = url Return shape   End

Thanks

Attachments:

1. 

   tilingissue.jpg
   

2. 

   solidblock.png
   

[JesseParticipant]

Using your code, it seems to be working fine here OS X:

Attachments:

1. 

   scr.png
   

[JesseParticipant]

Spoke too soon. It displays fine when displaying to even coordinates but it fails when displaying to odd coordinates:

Attachments:

1. 

   scr2.png
   

[codifiesParticipant]

sadly missing a Main function so couldn’t test on Linux…

[Mark SiblyKeymaster]

If you are using filtering, tiles should generally have a 1 pixel border around them as minor math errors in the GPU can mean incorrect texels are occasionally sampled.

More info here:

http://gamedev.stackexchange.com/questions/61796/sprite-sheet-textures-picking-up-edges-of-adjacent-texture

[peterigzParticipant]

I see thanks. I tried filter nearest and that almost fixes it, but it glitches when y is 0.5. x doesn’t glitch at all. Not sure if that’s correct behaviour? Be nice if nearest was a solution, otherwise I can just try implementing the border technique as outlined in the link.

I’ve attached a working example if anyone wants to test.

Attachments:

1. tiletest.zip

[AdamStrangeParticipant]

If you are using filtering, tiles should generally have a 1 pixel border around them as minor math errors in the GPU can mean incorrect texels are occasionally sampled.

Rubbish! thats just guff to protect you poor texture coordinates Mark, and you know it! In essence the texture coordinates should always compensate a tiny bit. adding a 1 pixels border is using a hammer to do the same.

@peterigz – the app works fine here on macOS Sierra

[peterigzParticipant]

I checked back in my Blitzmax version of this code where it works fine but actually Blitzmax loadanimation created each image separately which basically eliminates the problem. So I adjusted my load animation to create separate images instead (which is what I thought was happening anyway until I ran into this issue) and it works perfectly. Looking around the web it does seem like a common issue people face with various hacks to fix. Incidentally this comes close to fixing where you adjust the UpdateTexCoords in the Texture Class like so:

Monkey

Method UpdateTexCoords() _texCoords.min.x=Float(_rect.min.x+0.5)/_textures[0].Width _texCoords.min.y=Float(_rect.min.y+0.5)/_textures[0].Height _texCoords.max.x=Float(_rect.max.x-0.5)/_textures[0].Width _texCoords.max.y=Float(_rect.max.y-0.5)/_textures[0].Height End

1 2 3 4 5 6

Method UpdateTexCoords() _texCoords.min.x=Float(_rect.min.x+0.5)/_textures[0].Width _texCoords.min.y=Float(_rect.min.y+0.5)/_textures[0].Height _texCoords.max.x=Float(_rect.max.x-0.5)/_textures[0].Width _texCoords.max.y=Float(_rect.max.y-0.5)/_textures[0].Height End

But it wasn’t quite perfect, the tiles just didn’t quite line up perfectly but the bleeding was eliminated. Either way I’m happy with separate images for tiles which i notice is what Playniax does as well.

[Author]

Posts