Map rendering wrongly in the screen using Dusk

[carlos.rafael]

Hello, 

I am facing a strange result displaying some tiles on my map. What happens is that I save a map in Tiled, and when I open it in corona some of the tiles are not displayed properly. It is like if they were being changed for other tiles right before being rendered. (I am uploading an image of the situation)

I am not receiving any message or warning in my terminal.

I saw in some of the topics that we have to set the map’s propety as XML or CSV, so I did it.

I haven’t seen anyone facing this problem yet. Anyone could help me?

Here is the link for the image

https://www.dropbox.com/s/r5kta58urzb4161/image%20game%20map.png?dl=0

[bendikr5]

I had the same issue, the solution was to change the tile size (when loading the tileset in Tiled), from 128 to 127 and put a 1px spacing on it.

[Caleb_P]

Hm. I’ll look into this.

Can you give me some information about your map? What’s your tile size? What’s your map size? What’s your tileset margin and spacing?

• Caleb

[bendikr5]

For me:

Map size: Width:50, height: 5

tile size: 128

marging and spacing: 0

When I changed tilesize to 127 (no changes made to the image file, just in tiled) and put a 1px spacing it worked fine.

EDIT: When I import the tileset again with 128 size and 0 spacing the error is back. Wrong tile is beeing shown in the simulator.

• Ben 

[carlos.rafael]

@Caleb\_P

Hm. I’ll look into this.

Can you give me some information about your map? What’s your tile size? What’s your map size? What’s your tileset margin and spacing?

• Caleb

Hello @Caleb

I am having this issue since I started to study Dusk, but at his point I need to have my map displaying properly in order to finish my game before my deadline.

I am almost sure it is some small detail wich is causing this wrong display. 

I searched for some tutorial or reference about tile references with dusk but I didn’t find it. Is there any available?

If not, could you clarify me some points?

1-Is there a specific format to save and export the map?

2-When I import a tile, can I set the transparent color option?

3- When I create the map, I set the tiles size equal to 32x32. This mean all the tiles I import must have this size?

4-Is there any limitation related to special characters when naming the imported tiles?

5- When I create a map, the tiles work fine, but when I edit it and save it again, I guess they are getting deconfigured.

6- Is there any other information I should know in order to create the map?

I do not know if what I am doing is right, I am not importing entire tilesets, my map is 60 tiles x 20 tiles, width=32, height=32. I am importing one image per time. So if, the image is 128x128, I import the image with 32x32(as configured in the beginning), with no spacing. 

I am using Tiled 0.14.2 for Windows.

Thank you in advance.

[Caleb_P]

@bendikr5:

Can you submit a bug to the GitHub repo for this with screenshots? This sounds like a reproduceable, “normal” issue.

@carlos.rafael:

1- Nope. Dusk currently supports JSON and Lua exporting. JSON support is probably more robust, but Lua is fine too.

2- No. Corona doesn’t currently support replacing a color with transparency, so Dusk can’t. Maybe I can write a shader sometime, but for now, it’s not supported. I recommend using ImageMagick to replace a color beforehand as outlined in this StackExchange answer.

3- That means that each tile in your tileset is 32x32 pixels. Your tileset can be as wide or as tall as you want, but Tiled will cut it according to 32x32 tile sizes. Even though Tiled supports differently-sized tileset tiles, Dusk doesn’t currently.

4- Not that I know of.

5- So when you first export your map, it works, but after that it doesn’t?

6- Not that I can think of right now.

I didn’t quite how you’re doing it from your explanation, so I’ll just say that the generally accepted way to use tilesets is to crunch all the tiles together (with margin and spacing as required) and load it up in Tiled all at once. See the examples in the Dusk repository to see what I mean. Sorry if that sounds obvious, but it sounds like you’re doing something different than that, and I’d recommend you try that and see if it works for you.

• Caleb

[carlos.rafael]

@Caleb\_P

@bendikr5:

Can you submit a bug to the GitHub repo for this with screenshots? This sounds like a reproduceable, “normal” issue.

@carlos.rafael:

1- Nope. Dusk currently supports JSON and Lua exporting. JSON support is probably more robust, but Lua is fine too.

2- No. Corona doesn’t currently support replacing a color with transparency, so Dusk can’t. Maybe I can write a shader sometime, but for now, it’s not supported. I recommend using ImageMagick to replace a color beforehand as outlined in this StackExchange answer.

3- That means that each tile in your tileset is 32x32 pixels. Your tileset can be as wide or as tall as you want, but Tiled will cut it according to 32x32 tile sizes. Even though Tiled supports differently-sized tileset tiles, Dusk doesn’t currently.

4- Not that I know of.

5- So when you first export your map, it works, but after that it doesn’t?

6- Not that I can think of right now.

I didn’t quite how you’re doing it from your explanation, so I’ll just say that the generally accepted way to use tilesets is to crunch all the tiles together (with margin and spacing as required) and load it up in Tiled all at once. See the examples in the Dusk repository to see what I mean. Sorry if that sounds obvious, but it sounds like you’re doing something different than that, and I’d recommend you try that and see if it works for you.

• Caleb

Hello @Caleb, I found out that the problem has something to do with having multiple tilesets. When I try to create one tileset with a lot of tiles inside, the map is created properly, but when I add a second tileset or a second tile separately, when I export the map in json and open it in Corona simulator the map is not displayed as it was in Tiled.

I was wondering if the transparency could be the problem but then I took a tile with some transparent parts, painted it and when when I displayed it in the simulator it was also not being correctly displayed. (in Tiled all the map is displayed correctly)

Also, do you know any way to create the tilesets in a easier way, because I am creating the tiles and letting no difference between then when creating my tileset, so the margin and spacing when loading it in Tiled are set to 0, right?

But some lines are created between the tiles. So I was wondering if there was any automatic way to join the tiles really close so when I create the map we are not able to see they are pieces of a big map.

Also, I know it is not directly a dusk subject, but do you know any tutorial about creating tilesets or how can I findout what are margin and spacing of the tiles in a tileset?

Thank you in advance!

[Caleb_P]

When I try to create one tileset with a lot of tiles inside, the map is created properly, but when I add a second tileset or a second tile separately, when I export the map in json and open it in Corona simulator the map is not displayed as it was in Tiled.

Hm… I can’t reproduce this on my end. Can you zip up a map that demonstrates this and send it to me (PM if you want)?

Unfortunately, there isn’t an automatic way to get rid of flickering tile lines. You can set the texture filter:

display.setDefault("minTextureFilter", "nearest") display.setDefault("magTextureFilter", "nearest")

And you can make Dusk round the camera position:

dusk.setPreference("enableCameraRounding", true)

But other than that, all you can do is extrude your tileset.

I do have a command-line tool to do that for you, but it hasn’t been updated in a while and I’m not sure if it still works (man, that sounded professional!). Check out “TOAD” in the Dusk repository and see if it works for you.

I don’t know of any tileset tutorials, but a quick Google search of “how to make a tileset” shows some that look good. Margin and spacing are simple - margin is the amount of space around the tileset, and spacing is the amount of space between each tile. If you extrude your tiles by 2px, then space them so they have 2px of transparency between, your margin and spacing will both be 4px. If you remove the transparency on the outer rim of the image so that the outside tiles are touching the edge of the image, your margin and spacing will be 2px and 4px, respectively.

• Caleb

[jmp909]

just to add my findings on this (at least in the simulator it makes a difference)

you need to set the texturefilter before building the map

this shows graphical corruption

local map = dusk.buildMap("map/32-reduced-pegs3.json") display.setDefault("minTextureFilter", "nearest") display.setDefault("magTextureFilter", "nearest")

this shows correctly

display.setDefault("minTextureFilter", "nearest") display.setDefault("magTextureFilter", "nearest") local map = dusk.buildMap("map/32-reduced-pegs3.json")

[bendikr5]

I totally forgot about this! But I tried to reproduce the issue and I could not, so I guess it was because texturefilter 

[nagarajrjoshi]

Hi,

I just want to know how should i constraint camera or the player to the map/ a specific area in that map.

Thank you.

[Caleb_P]

@nagarajrjoshi:

Please open a new topic for your question.

• Caleb

[bendikr5]

I had the same issue, the solution was to change the tile size (when loading the tileset in Tiled), from 128 to 127 and put a 1px spacing on it.

[bendikr5]

I managed to reproduce the issue. But it was because one of my tilesets had a width that returned a remainder when divided with my tilewidth… :rolleyes:

[Caleb_P]

Hm. I’ll look into this.

Can you give me some information about your map? What’s your tile size? What’s your map size? What’s your tileset margin and spacing?

• Caleb

[Caleb_P]

Ok, that makes sense. I’ll see about getting a fix for this in the next version of Dusk (hint: it’ll be the candidate for 1.0!).

• Caleb

[bendikr5]

For me:

Map size: Width:50, height: 5

tile size: 128

marging and spacing: 0

When I changed tilesize to 127 (no changes made to the image file, just in tiled) and put a 1px spacing it worked fine.

EDIT: When I import the tileset again with 128 size and 0 spacing the error is back. Wrong tile is beeing shown in the simulator.

• Ben 

[carlos.rafael]

@Caleb\_P

Hm. I’ll look into this.

Can you give me some information about your map? What’s your tile size? What’s your map size? What’s your tileset margin and spacing?

• Caleb

Hello @Caleb

I am having this issue since I started to study Dusk, but at his point I need to have my map displaying properly in order to finish my game before my deadline.

I am almost sure it is some small detail wich is causing this wrong display. 

I searched for some tutorial or reference about tile references with dusk but I didn’t find it. Is there any available?

If not, could you clarify me some points?

1-Is there a specific format to save and export the map?

2-When I import a tile, can I set the transparent color option?

3- When I create the map, I set the tiles size equal to 32x32. This mean all the tiles I import must have this size?

4-Is there any limitation related to special characters when naming the imported tiles?

5- When I create a map, the tiles work fine, but when I edit it and save it again, I guess they are getting deconfigured.

6- Is there any other information I should know in order to create the map?

I do not know if what I am doing is right, I am not importing entire tilesets, my map is 60 tiles x 20 tiles, width=32, height=32. I am importing one image per time. So if, the image is 128x128, I import the image with 32x32(as configured in the beginning), with no spacing. 

I am using Tiled 0.14.2 for Windows.

Thank you in advance.

[Caleb_P]

@bendikr5:

Can you submit a bug to the GitHub repo for this with screenshots? This sounds like a reproduceable, “normal” issue.

@carlos.rafael:

1- Nope. Dusk currently supports JSON and Lua exporting. JSON support is probably more robust, but Lua is fine too.

2- No. Corona doesn’t currently support replacing a color with transparency, so Dusk can’t. Maybe I can write a shader sometime, but for now, it’s not supported. I recommend using ImageMagick to replace a color beforehand as outlined in this StackExchange answer.

3- That means that each tile in your tileset is 32x32 pixels. Your tileset can be as wide or as tall as you want, but Tiled will cut it according to 32x32 tile sizes. Even though Tiled supports differently-sized tileset tiles, Dusk doesn’t currently.

4- Not that I know of.

5- So when you first export your map, it works, but after that it doesn’t?

6- Not that I can think of right now.

I didn’t quite how you’re doing it from your explanation, so I’ll just say that the generally accepted way to use tilesets is to crunch all the tiles together (with margin and spacing as required) and load it up in Tiled all at once. See the examples in the Dusk repository to see what I mean. Sorry if that sounds obvious, but it sounds like you’re doing something different than that, and I’d recommend you try that and see if it works for you.

• Caleb

[carlos.rafael]

@Caleb\_P

@bendikr5:

Can you submit a bug to the GitHub repo for this with screenshots? This sounds like a reproduceable, “normal” issue.

@carlos.rafael:

1- Nope. Dusk currently supports JSON and Lua exporting. JSON support is probably more robust, but Lua is fine too.

2- No. Corona doesn’t currently support replacing a color with transparency, so Dusk can’t. Maybe I can write a shader sometime, but for now, it’s not supported. I recommend using ImageMagick to replace a color beforehand as outlined in this StackExchange answer.

3- That means that each tile in your tileset is 32x32 pixels. Your tileset can be as wide or as tall as you want, but Tiled will cut it according to 32x32 tile sizes. Even though Tiled supports differently-sized tileset tiles, Dusk doesn’t currently.

4- Not that I know of.

5- So when you first export your map, it works, but after that it doesn’t?

6- Not that I can think of right now.

I didn’t quite how you’re doing it from your explanation, so I’ll just say that the generally accepted way to use tilesets is to crunch all the tiles together (with margin and spacing as required) and load it up in Tiled all at once. See the examples in the Dusk repository to see what I mean. Sorry if that sounds obvious, but it sounds like you’re doing something different than that, and I’d recommend you try that and see if it works for you.

• Caleb

Hello @Caleb, I found out that the problem has something to do with having multiple tilesets. When I try to create one tileset with a lot of tiles inside, the map is created properly, but when I add a second tileset or a second tile separately, when I export the map in json and open it in Corona simulator the map is not displayed as it was in Tiled.

I was wondering if the transparency could be the problem but then I took a tile with some transparent parts, painted it and when when I displayed it in the simulator it was also not being correctly displayed. (in Tiled all the map is displayed correctly)

Also, do you know any way to create the tilesets in a easier way, because I am creating the tiles and letting no difference between then when creating my tileset, so the margin and spacing when loading it in Tiled are set to 0, right?

But some lines are created between the tiles. So I was wondering if there was any automatic way to join the tiles really close so when I create the map we are not able to see they are pieces of a big map.

Also, I know it is not directly a dusk subject, but do you know any tutorial about creating tilesets or how can I findout what are margin and spacing of the tiles in a tileset?

Thank you in advance!