Lines between my tiles?

Starting in 860, we are now posting api docs with each daily build (http://developer.coronalabs.com/downloads/daily-builds). There is information on the ‘border’ property in the newImageSheet API page.

It’s not a power of 2 issue. I described the issue previously on this thread.

Ensuring the borders are duplicated is something game level designers are taught to do in school. This isn’t some exotic idea that we made up.

You can either to this manually in photoshop for each tile you create, or rely on tools to do this for you. TexturePacker does offer this. I don’t know about others. [import]uid: 26 topic_id: 10803 reply_id: 116623[/import]

*takes a deep breath*

I’m not exactly sure what you took offence to; hopefully this post better explains what I was talking about. I’ll admit one of your comments ticked me off pretty well as well, but I’ll just assume it’s another misunderstanding and get to the explanation:

  1. “border” did not exist in the API doc as of my original post last week. (“EDIT: Oh, it’s not”) was not a smarmy reply, it was a matter or fact reply after I spent some time searching through coronalabs.com to see if I was mistaken. Clearly it’s fixed now, so we’re all the better for it, the end.

  2. I simply suggested a guide/tutorial similar to the excellent one already there for masks, since both have similar, non-intuitive solutions. It doesn’t sound like Corona Labs is particularly interested in blog volunteers but I’d write it myself if asked.

  3. Explaining the power of 2 guess; clearly I was reaching for words to describe what was happening, but now I have a better idea what was going on:

Original file: 192x96, 8 tiles (so, 4x2, each tile is 48x48)
Modified file according to rakoonic’s solution: 200x100 (50x50 tiles to account for a 1px border)
Modified file with power-of-2 canvas: 256x128 (still 50x50 tiles but with some junk space)

I proceeded to add the border value to Lime-tileset.lua (manually; Lime isn’t really built to accept borders yet) and got this:

Incorrect number of frames (w,h) = (48,48) with border (1) in texture (w,h) = (256,128). Failed after frame 9 out of 10.

Yes, that is an obvious assert message that Corona is using simple image sheet mode and obviously can’t read in an invisible tile that is not even 48x48 large. It confused me at a glance because I mistakenly assumed Tiled and/or Lime would only deal with the tiles specifically being used as opposed to simply reading in the strip.

But let’s say we use the 200x100 tile set instead. In Tiled, we set the spacing between tiles to 2px. What happens?

TIled: Looks fine!
Corona? Loads fine, no error messages.
Lime? Not so much. The map is there, but it looks like a chessboard at any resolution.

After trying a dozen different combos (a long and tedious process since you can’t preview anything or do a 1-for-1 tile set replacement) the correct Tiled Tileset settings are:

Tilesize: The original tile size before making the bleed/extrude modifications. (i.e.: 48x48)
Margin: 1px
Spacing: 2px
Offset: 0/0px

(just make sure you add this to options to look like this on lime-tileSet.lua or it won’t look right no matter what you do…)

sheetContentHeight = self.height, -- need the comma here border=1, -- border size per tile

  1. We’re both right on Texturepacker. It does work, as you say, to quickly extrude tiles. But unless I’m missing some feature, TP cannot distinguish between tiles within the same file; they all have to be separated into separate .png’s first. That’s fine if you only have a few, but, as I said, untenable at 50-100+. Instead a google search suggests imagemagick:
ImageMagick: convert -crop 48x48 myoriginal.png mytiles\_%d.png

…might do the trick? [import]uid: 41884 topic_id: 10803 reply_id: 116634[/import]

In case people come across this thread, I’ve uploaded an image showing 3 different variants of tile images that can show the various effects of tiles set up correctly or incorrectly.
Click on the image to see it fullsize and get a better idea of what is going on.
Note the pole at the right for probably the clearest visuals of what is going on.

http://imgur.com/a/wcBMk#17
[import]uid: 46639 topic_id: 10803 reply_id: 126458[/import]

richard9,

Thanks for the useful information!

To test your solution I created a 200x100 image with 8 48x48 tiles within it, each with a 1px border. I then added the tileset to Tiled using the settings you provided. And finally, I made the changes to lime-tileSet.lua.

However, when I test this in the simulator I get the following error:

lime-tileSet.lua:198: Incorrect number of frames (w,h) = (48,48) with border (1) in texture (w,h) = (200,100). Failed after frame 9 out of 9.

Am I doing something wrong? [import]uid: 12217 topic_id: 10803 reply_id: 126465[/import]

In case people come across this thread, I’ve uploaded an image showing 3 different variants of tile images that can show the various effects of tiles set up correctly or incorrectly.
Click on the image to see it fullsize and get a better idea of what is going on.
Note the pole at the right for probably the clearest visuals of what is going on.

http://imgur.com/a/wcBMk#17
[import]uid: 46639 topic_id: 10803 reply_id: 126458[/import]

richard9,

Thanks for the useful information!

To test your solution I created a 200x100 image with 8 48x48 tiles within it, each with a 1px border. I then added the tileset to Tiled using the settings you provided. And finally, I made the changes to lime-tileSet.lua.

However, when I test this in the simulator I get the following error:

lime-tileSet.lua:198: Incorrect number of frames (w,h) = (48,48) with border (1) in texture (w,h) = (200,100). Failed after frame 9 out of 9.

Am I doing something wrong? [import]uid: 12217 topic_id: 10803 reply_id: 126465[/import]

Hey Simon,

Believe it or not, the most common reason for that specific error is that you only updated the original tileset and didn’t also edit the @2x tileset (or vice versa). I’m pretty sure that would fail the sim unless it is running specifically the 3GS skin. (In one troubleshooting moment I just dropped all @2x tilesets from my project until I figured it out…)

Beyond that there are lots of possible problems. Hard to say exactly what to look at but step one should always be close the files, check their dimensions, and see if it loads up alright in Tiled. [import]uid: 41884 topic_id: 10803 reply_id: 126741[/import]

Thanks for the additional information, richard.

I double-checked the dimensions and everything is correct, and it appears great in Tiled.

I didn’t have an @2x tileset in my project folder, but I tried adding that as well but it didn’t help.

Would you be able to have a quick look at the files? Maybe I’m missing something. Here they are: https://www.dropbox.com/s/0twcikt5rykpzks/tileLines.zip

For obvious reasons I didn’t include the Lime files! :stuck_out_tongue: [import]uid: 12217 topic_id: 10803 reply_id: 126762[/import]

  1. You didn’t modify the tileset image; as rakoonic et al explained when you take your tileset from 48x48 to 50x50 like that, you have to duplicate the edge of each tile into the new lines.

1-1: Load vomit.png in Photoshop
1-2: Your example tiles are easier to fix; just add a 1px ring of the tile color around each tile.
1-3: When done, save a copy out double sized to make the new @2x file.

  1. Using that package I have no error message at all (once I add in Lime 3.5beta, of course) That being said, there is obviously something really odd with the tile display going on; it’s as if the tiles are squished together a bit. So…

2-1: I ripped out my lime directory and re-added vanilla Lime 3.5beta, just in case.
2-2: On lime-tileSet.lua:194 I added a comma at the end, and then hit enter
2-3: On the new line :195 I added border = 1,
2-4: CTRL+S to save :wink:

Now it runs fine. No error message (apart from that stupid “no ui.lua found” warning), which can be removed elsewhere. The map looks exactly the same on 3GS and 4 as it does on Tiled.

So either:
a) you have a problem somewhere else in your code (or maybe your Lime modifications)
b) it’s a side effect of not expanding the tile by 1px

For reference, here’s what the options table in lime-tileSet.lua should look like, exactly:

local options = { width = self.tilewidth, height = self.tileheight, numFrames = self.tileCount, sheetContentWidth = self.width, sheetContentHeight = self.height, border = 1, } [import]uid: 41884 topic_id: 10803 reply_id: 126845[/import]

Hey Simon,

Believe it or not, the most common reason for that specific error is that you only updated the original tileset and didn’t also edit the @2x tileset (or vice versa). I’m pretty sure that would fail the sim unless it is running specifically the 3GS skin. (In one troubleshooting moment I just dropped all @2x tilesets from my project until I figured it out…)

Beyond that there are lots of possible problems. Hard to say exactly what to look at but step one should always be close the files, check their dimensions, and see if it loads up alright in Tiled. [import]uid: 41884 topic_id: 10803 reply_id: 126741[/import]

Thanks for the additional information, richard.

I double-checked the dimensions and everything is correct, and it appears great in Tiled.

I didn’t have an @2x tileset in my project folder, but I tried adding that as well but it didn’t help.

Would you be able to have a quick look at the files? Maybe I’m missing something. Here they are: https://www.dropbox.com/s/0twcikt5rykpzks/tileLines.zip

For obvious reasons I didn’t include the Lime files! :stuck_out_tongue: [import]uid: 12217 topic_id: 10803 reply_id: 126762[/import]

I believe this is the issue:

The way Lime calculates self.tileCount, it doesn’t take the border into account. If your tile set doesn’t have a ton of frames or the tiles are large, it may not be able to add an extra tile out of all of the borders. I had 25 30x30 tiles with a border, so in the sprite sheet each tile was actually 32x32. Lime ended up thinking like this: a 256x128 image with 30x30 tiles… Hmm… (256 / 30) * (128 / 30) = ~36 tiles. As a result, that failure error occurs. I haven’t actually had the time to go to where self.tileCount is calculated and adjust it, but when I figure out a solution I’ll get back to you guys. Or someone else can work on the fix and tell us how to do it as well. :stuck_out_tongue: [import]uid: 103624 topic_id: 10803 reply_id: 126952[/import]

I still don’t understand why this doesn’t work, I followed your instructions to a tee :frowning:

Here’s what I did:

1) Loaded the tileset image into Photoshop and added the 1px ring around the tiles, as suggested in 1-1 and 1-2.
2) Saved out an @2x version of the modified tileset image, as suggested in 1-3.
3) According to the steps that you took, it should be working right now, but it isn’t. Damn!
4) Recreated my level, just to be sure. I also made sure to get the margin (1px), spacing (2px), and offset (0/0px) settings correct when importing the tileset. Everything looks great in Tiled.
5) Re-downloaded the Lime 3.5 beta and added the fresh files to my project folder.
6) Opened the brand new ‘lime-tileSet.lua’ file and copied your options table into the correct location.
7) Does it work? Nope nope nope! Still getting the exact same error. D:

Is there somewhere that I can email you a copy of the project which includes the Lime files? It will be interesting to see if my complete project does / doesn’t run on your end. I’m pretty sure there’s absolutely nothing I’m doing wrong.

Thanks for the continued help! [import]uid: 12217 topic_id: 10803 reply_id: 126975[/import]

See my explanation two posts above as to why that error is occurring. I’m pretty sure that’s why it’s happening.

In reality, your sprite sheet has 8 tiles. But since (200 / 48) * (100 / 48) = 8.68 = ~9. That’s where the 9 is coming from. Lime doesn’t realize that the borders don’t count towards a tile. I bet the simple fix would be to go where self.tileCount is calculated, and add 2 to the tile size so that it reads [200 / (48 + 2)] * [100 / (48 + 2)] = 8. Corona should know how to worry about the border after that, and the problem should be fixed. :smiley: [import]uid: 103624 topic_id: 10803 reply_id: 126991[/import]

I disagree; while your math is sound, I don’t believe Lime is actually using filesize to determine the number of tiles (based on what I can tell, it’s actually pulling that information from the Tiled file during the import phase). But I’ll take a closer look later today.

Regardless, I didn’t run into his problem despite using his own source files and assets so I’m inclined to believe it’s something else.

Simon which version of Corona are you running?

(namenonumbers) -at- moogle dot net [import]uid: 41884 topic_id: 10803 reply_id: 126995[/import]

Thanks for the help.

I tried your solution, lKinx, and the error is gone! :slight_smile: Which is really confusing, because richard9 didn’t run into this problem at all, even when using my assets.

I made a slight change to line 186 in the ‘lime-tileSet.lua’ file.

Original line 186:
[lua]self.tileCount = ( self.width / self.tilewidth ) * ( self.height / self.tileheight )[/lua]

Modified line 186:
[lua]self.tileCount = ( self.width / (self.tilewidth+2) ) * ( self.height / (self.tileheight+2) )[/lua]

richard9:

At the time of my first post I was using a week old daily build, but I tried downgrading to the latest public release and now I’m using the latest daily build. No version has had an effect on the error.

Emailed you my project files.
[import]uid: 12217 topic_id: 10803 reply_id: 126997[/import]

  1. You didn’t modify the tileset image; as rakoonic et al explained when you take your tileset from 48x48 to 50x50 like that, you have to duplicate the edge of each tile into the new lines.

1-1: Load vomit.png in Photoshop
1-2: Your example tiles are easier to fix; just add a 1px ring of the tile color around each tile.
1-3: When done, save a copy out double sized to make the new @2x file.

  1. Using that package I have no error message at all (once I add in Lime 3.5beta, of course) That being said, there is obviously something really odd with the tile display going on; it’s as if the tiles are squished together a bit. So…

2-1: I ripped out my lime directory and re-added vanilla Lime 3.5beta, just in case.
2-2: On lime-tileSet.lua:194 I added a comma at the end, and then hit enter
2-3: On the new line :195 I added border = 1,
2-4: CTRL+S to save :wink:

Now it runs fine. No error message (apart from that stupid “no ui.lua found” warning), which can be removed elsewhere. The map looks exactly the same on 3GS and 4 as it does on Tiled.

So either:
a) you have a problem somewhere else in your code (or maybe your Lime modifications)
b) it’s a side effect of not expanding the tile by 1px

For reference, here’s what the options table in lime-tileSet.lua should look like, exactly:

local options = { width = self.tilewidth, height = self.tileheight, numFrames = self.tileCount, sheetContentWidth = self.width, sheetContentHeight = self.height, border = 1, } [import]uid: 41884 topic_id: 10803 reply_id: 126845[/import]

Simon, I tried your project; literally just opened the zip and it works; I’m still running 883 but I haven’t heard of any change Corona side to the border stuff since then.

I’d look into it more but it seems Corona Labs completely changed how builds work and now it’s incompatible with SublimeText2…so I need to figure out a workaround there first.

EDIT: Well damn, they really made a mess of this, I understand this is probably related to the terminal changes but now it needs an install guide so I know how to use Corona at all on OSX.

Anyway I tried to manually run your program from the zip directory and it runs fine, no error message on the terminal apart from the usual ui.lua nonsense [import]uid: 41884 topic_id: 10803 reply_id: 127061[/import]

Odd! Hopefully we can figure out at some point why the error is occurring. Maybe its a difference between the Windows / OSX versions of the simulator?

For now lKinx’s solution works great. [import]uid: 12217 topic_id: 10803 reply_id: 127067[/import]

I believe this is the issue:

The way Lime calculates self.tileCount, it doesn’t take the border into account. If your tile set doesn’t have a ton of frames or the tiles are large, it may not be able to add an extra tile out of all of the borders. I had 25 30x30 tiles with a border, so in the sprite sheet each tile was actually 32x32. Lime ended up thinking like this: a 256x128 image with 30x30 tiles… Hmm… (256 / 30) * (128 / 30) = ~36 tiles. As a result, that failure error occurs. I haven’t actually had the time to go to where self.tileCount is calculated and adjust it, but when I figure out a solution I’ll get back to you guys. Or someone else can work on the fix and tell us how to do it as well. :stuck_out_tongue: [import]uid: 103624 topic_id: 10803 reply_id: 126952[/import]