Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

The best way to add border/gap/margin to existing spritesheet
Started by bitinn Jun 30 2016 10:42 AM

- - - - -
28 replies to this topic

[TOPIC CONTROLS]
Page 1 of 2 1 2
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

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.



[TOPIC: post.html]
#2

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,588 posts
  • Corona SDK

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.



[TOPIC: post.html]
#3

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,588 posts
  • Corona SDK

@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...



[TOPIC: post.html]
#4

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

@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...



[TOPIC: post.html]
#5

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

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".



[TOPIC: post.html]
#6

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

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?



[TOPIC: post.html]
#7

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

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).



[TOPIC: post.html]
#8

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,588 posts
  • Corona SDK

 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?



[TOPIC: post.html]
#9

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,588 posts
  • Corona SDK

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


[TOPIC: post.html]
#10

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

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



[TOPIC: post.html]
#11

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,588 posts
  • Corona SDK

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.



[TOPIC: post.html]
#12

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

> 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...



[TOPIC: post.html]
#13

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,588 posts
  • Corona SDK

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


[TOPIC: post.html]
#14

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,588 posts
  • Corona SDK

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.



[TOPIC: post.html]
#15

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

 

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

 

 

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...



[TOPIC: post.html]
#16

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

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...



[TOPIC: post.html]
#17

Arteficio

[GLOBAL: userInfoPane.html]
Arteficio
  • Enthusiast

  • 81 posts
  • Corona SDK

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

[TOPIC: post.html]
#18

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

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).



[TOPIC: post.html]
#19

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

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...



[TOPIC: post.html]
#20

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

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...



[TOPIC: post.html]
#21

Arteficio

[GLOBAL: userInfoPane.html]
Arteficio
  • Enthusiast

  • 81 posts
  • Corona SDK

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

 

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

 

 

I was remembering this thread about visual artifacts on iPhone 6/6+ and iOS compatibility mode so I thought it might be worth to try to add the launchImages and see if it solves...

 

https://forums.coronalabs.com/topic/61654-tableview-line-width/?hl=%2Bdefault+%2B6%2B#entry331493



[TOPIC: post.html]
#22

roaminggamer

[GLOBAL: userInfoPane.html]
roaminggamer
  • Corona Geek

  • 7,588 posts
  • Corona SDK

Are you sprite sheets JPG or PNG?  I'd go with PNG.  

 

Is your 'tween' color black or transparent?  I'd make it transparent.

 

Just some ideas, but I'm mostly shooting in the dark.

 

I do agree, you need to create a minimal test case that reproduces the issue, then when you resolve that, try it in your game.  Solving in situ is a strong temptation, but often a bad idea.



[TOPIC: post.html]
#23

rakoonic

[GLOBAL: userInfoPane.html]
rakoonic
  • Contributor

  • 112 posts
  • Corona SDK

One little known option is this:

 

 

display.setDefault( "isImageSheetSampledInsideFrame", true )

 

This offsets UVs by half a pixel within the sprite sheets.



[TOPIC: post.html]
#24

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

I think this is going to the be something rather difficult to reproduce, but I am seeing something interesting:

 

- when I change the layer opacity of my floor tiles, which affects the display group's alpha value for that layer, the black edge issues goes away on iOS, seriously, nothing else is touched.

 

So I am going to reproduce the issue in that direction...

 

But I still need to figure out the offset error on my roof layer, where the problem is not black edge, but off-by-1px sprite selection from image sheet, it's also an interesting case: because it's loaded the same way as every other layers, and only some of tiles are affected.

 

Basically, fun time with Corona ;-)

 

PS: I should change the post title at this point, but not sure how to do this...



[TOPIC: post.html]
#25

bitinn

[GLOBAL: userInfoPane.html]
bitinn
  • Enthusiast

  • 71 posts
  • Corona SDK

I was remembering this thread about visual artifacts on iPhone 6/6+ and iOS compatibility mode so I thought it might be worth to try to add the launchImages and see if it solves...

 

https://forums.coronalabs.com/topic/61654-tableview-line-width/?hl=%2Bdefault+%2B6%2B#entry331493

 

I can see how that might affect my layer rendering, even though I think compatibility mode is explicitly UI related. But I will add that back in just in case. Is there any way to add launch images to a directory/sub-folder, or do we have to have every image at the root?

 

EDIT: added but it didn't resolve my off-by-1px issues unfortunately.




[topic_controls]
Page 1 of 2 1 2
 
[/topic_controls]