The best way to add border/gap/margin to existing spritesheet

Solar2D General Questions/Discussion
#1

I am running into a 1px dark gap problem where following code doesn’t really solve it.

display.setDefault('minTextureFilter', 'nearest') display.setDefault('magTextureFilter', 'nearest') display.setDefault('isImageSheetSampledInsideFrame', true)

As far as I know, the only safe way is to add gap/border between sprites, but since my assets are already packed into spritesheets (I don’t have individual sprites, they are designed for other game engine where this isn’t an issue), I need to somehow add borders to them.

Is there a good tool that will automate such thing quickly? I do have around 100 spritesheets unfortunately, good news is: they are mostly sets of 32px by 32px tiles.

#2

While I have not had to do this, you might consider using a spritesheet unpacker followed by re-packing with a tool like texture packer.  This will involve a bit of labor, but should get the job done.

@all - If anyone out there has other suggestions, please bring them as this is an interesting (and more common than one would think) problem.  i.e. The need to extract, optionally tweak, and re-pack sprite assets.

#3

@bitinn,

are you a windows or os x user?  I ask because people may want to suggest tools, but knowing that you can use them would be helpful.  For example, there is a Windows tool called ‘Alferd Sprite Unpacker’ you may find useful, but if you’re and OS X user…

#4

@roaminggamer I am on OS X unfortunately.

My tilesets are simple enough (rectangle layout, all 32px square tiles, no border or margin), most online spritesheet splitter SHOULD work, but DOESN’T due to size of my tileset (contains up to 200 tiles per tileset)

I would also prefer to repack them in the order them were packed, because it would save me a lot of time on fixing my Tiled map…

#5

Anyway I am writing my node.js command line tool at this point, most texture packers I could find are primarily concerned with “memory usage reduction”, while for me, the primary concern is “maintaining the order of tiles and adding simple margins”.

#6

Huh, I re-did my tileset with border, yet the same issue persists…

I am not able to reproduce it on simulator, only on iOS…

Does anyone has any idea on why else would it has a 1px black gap between tiles, only on iOS device?

#7

To add:

  • I am using adaptive content scaling in my config.lua

  • The issue can be observed (though happens on different tiles) if I try to view as iPhone 6+ in Corona SDK simulator

  • But not with iPhone 6 simulator

  • But with my iPhone 6 (actual device), it does render with black gaps (or double pixel at the tile edge).

#8

 I wonder if you’re seeing a gap between the tiles.  i.e. Sub-pixel alignment issues.

Is it possible for you to draw colored rectangles instead and then to see if the gaps exist still?

#9

Is this a game or a business/other app?  

It is pretty rare to use adaptive scaling for games.  Can I suggest you try this just for an experiment:

http://spiralcodestudio.com/corona-sdk-pro-tip-of-the-day-36/

If you try it, remember to set this line to match your ‘target resolution’ (#1 device resolution you want to target)

contentW, contentH = 320, 480
#10

> Is it possible for you to draw colored rectangles instead and then to see if the gaps exist still?

Did that, can’t see the black gap on actual device anymore.

> Is this a game or a business/other app?

A game

> It is pretty rare to use adaptive scaling for games

I didn’t know that, I use it mostly to make the unit (virtual pixel) easier to reason about, and it takes the pain out of supporting different resolution, since I already make my UI sort of responsive (as in responsive web design).

> If you try it, remember to set this line to match your ‘target resolution’

Did this too, seems promising on simulator, but 1px black gap still show up in actual device.

The problem looks like this on device (not all tiles are affected…)

BCKkw3V.png

#11

Do the gaps always show or only when the level is moved.  That is, do they pop in and out as the ‘camera’ moves.

PS - re: Adaptive.  Don’t let me stop you. Do what works for you as that is the only valid choice at the end of the day.

#12

> That is, do they pop in and out as the ‘camera’ moves.

Yes they do pop in and out as I pan.

My code looks something like this:

function Map:touch (event) if event.phase == 'began' then -- enter panning state self.camera\_panning = true self.ox = self.view.x self.oy = self.view.y elseif event.phase == 'moved' and self.camera\_panning == true then -- distance of movement from initial position self.view.x = math.floor(self.ox + event.x - event.xStart) self.view.y = math.floor(self.oy + event.y - event.yStart) elseif event.phase == 'ended' or event.phase == 'cancalled' then -- exit panning state self.camera\_panning = false end end

As you can see I tried to normalize the movement into full pixel…

#13

Would you try this:

http://github.com/roaminggamer/RG_FreeStuff/raw/master/AskEd/2016/07/gaps.zip

Try test1 and test2 (starts on test2).

Do you get gaps?  If not, I included the texture packer source file, but I used these settings if you have trouble loading tiles.tps:

  • extrude 1
  • border padding 1
  • shape padding 1
#14

Please note: I failed to use adaptive scaling in the above code.  I’m so used to using letterbox, so you may want to change that and re-test.  i.e. set my code to use adaptive and see if you’re good to go.

In any case, if the problem re-occurs, this should give you a simple test case to work and experiment with.

#15

I do see “white flashing” on edge of tiles while the map pans, for both test1 and test2 (tried a few simulator devices with 100% zoom)… I am hoping this is not another bug…

#16

I manage to produce a case where black edge doesn’t appear, I will dig deeper on why… This is taking more time than I expect for sure…

#17

Are you including the LaunchImages for iphone 6 6+ in the project?

#18

> Are you including the LaunchImages for iphone 6 6+ in the project? 

No, I didn’t, but why does it matter?

To All,

I would think my problem is either (1) my tile being positioned slightly off the designated position, (2) image sheet select the frame slightly off the designated coordinate; so the background black color show through the gap (hence the 1px black gap).

If my tileset comes with gap between tiles I would assume I need extruding, but they didn’t; I have added gaps to tileset but problem persists.

The question is, why does it only happen on certain layer? I checked my map layer data and their properties are no different from others (besides opacity, but I have other tile layer with same opacity not being affected).

#19

I tried extruding (up to 4px for each tile) as well, the black gap still show up on iOS Device, what the hell is wrong with my code? how come it doesn’t show up in the SDK simulator? I need a reduced test case…

#20

Also I am working with pixel art, so even if isImageSheetSampledInsideFrame works, it really isn’t a good option for me, as it can cut the edge pixel in half and render things weird if you are not careful…