How do I Prepare A Tileset For C2

Hi Guys,

So I have bought some art from Game Art Partners. Its a simple 'Platformer Bundle' just to get me started in C2 so I can jump straight into the gameplay side of things rather than messing around with art.

I am very new to 2D and C2 and the concept of tilemaps and sprites (2D in general I guess xD). I use Adobe Illustrator and have put all my tiles in my tileset to 32 x 32 but I get horrible seams when I lay out the tiles in C2, you can see the tiles aren't touching and revealing the area's where the background is showing. Getting them to be the correct size when working with the tilemap options is a bit of a pain as well.

I am interested to hear if you guys work with standard sizes at all when dealing with tilemaps, do you have a certain workflow and measurements you stick to for the scale/size of your tiles and tilemaps. I would love to hear as I am still learning

Cheers,

Dave.

Although I have had no difficulties working with the tilemap myself:

If your tiles are 32x32 adding those settings to the tilemap-object properties should get the tiles to be the correct size..

Having the background show might be because of your tiles having (semi)transparent edges..

In illustrator check if your export options are set correctly and if your tiles are pixel precise - you should be working with pixels not standard units, else you might get what you describes.

Hey Guys,

I am working with pixels in Illustrator here is a screenshot of my artboard with all the tiles separated. They are all 128 x 128 so I can still resize them and not lose quality.

Tileset:

Tileset + Grid:

They are pixel perfect and precisely 128 x 128. But I still get this when I start building in C2.

Construct 2:

You can see even though they are pixel perfect there is still a gap between each tile exposing the background. I was expecting it to be completely seamless haha.

Not sure, but have you tried turning off Seamless mode, since your tiles aren't connected in your tilemap, this might cause the issue..

Construct2 seems to prefer tilemaps in which the tiles are against eachother, starting from the top-left.

the tile offset and tile spacing are for compatibility with existing tilemaps, but if possible I would avoid them.

Did you test it?

Sometimes if you zoom in or out, tiles look like they have a gap between them but if you test the project they look fine.

Just a quick update guys,

The 'Seamless Mode' didn't really make a difference, I tried with it off and back on again. I also put all the tiles together in the .ai file so there is no gaps between the tiles like in my original tileset (see above).

The gaps still seem to be there and I can't really get rid of them, the only way to get rid of them is if I overlap the tiles which I don't really want to do as this causes issues with tiling patterns and stuff looks a complete mess lol.

I did test the project as well hoping that it might just be an editor thing but the gaps are there when I run my project as well.

Ok here is another update and I have to thank LittleStain as I think the first time I tried this I didn't really do it properly.

I remade my tileset but rather than putting all the tiles together I laid them out in a pretty logical order and that seems to have resolved the issue.

Construct 2:

Browser:

I think for future artwork and tilesets I will need to keep in mind that the layout of the tileset needs to be a logical order rather than the first way I tried haha

I noticed that there is a small amount of 'padding' on each tile when you split them rather than having the tiles placed together. I think that 1 px of padding on each tile should stop the issue of having gaps between your tiles. If you want to have your tiles laid out separately like I tried on my first post then you have to keep in mind that you need at least 1 px of padding on every tile to cover the seams.

Okay...i think i know whats going on. But its kind of difficult to explain.

I think Construct "blurs" the edges of the Tiles a little bit, so if your Tile is surrounded of white, the Tile will show a white line around it. If you put your Tile next to a Tile that looks similar, it "blurs" into this tile but you cant see it because of the similarities.

I saw stuff like this years ago in the Textures for 3D models.

Edit:

Its basically this:

One way around this is coloring the Background (of the Tilemap) in a similar Color like the Tiles on top of it.

So even if the Tile "bleeds" into the color around, its a similar color, so not as much visible.

Okay...i think i know whats going on. But its kind of difficult to explain.

I think Construct "blurs" the edges of the Tiles a little bit, so if your Tile is surrounded of white, the Tile will show a white line around it. If you put your Tile next to a Tile that looks similar, it "blurs" into this tile but you cant see it because of the similarities.

I saw stuff like this years ago in the Textures for 3D models.

Yep that's the padding. I think C2 adds padding to each tile to allow it to blend with its surrounding tiles giving the seamless look. I think LittleStain said above about turning off 'Seamless Mode' I haven't yet tested but if this is off I am guessing that it doesn't put any padding around the tiles which should stop the problem of the tiles bleeding into one another.

I will keep fiddling around and if I get some sort of solid workflow I will definitely share, most users probably don't have this problem but it would be nice to see some tutorials dedicated to answering these kind of questions so there is a consistent process for this kind of thing making it easier for people who want to make their own art rather than buying ready made stuff

Thanks xxstyxx so I did some tests and turning off Seamless Mode stops the blur or padding around each tile. I also found this in the help section:

[quote:847c32al]Seamless mode:

Use a rendering mode that prevents seams appearing between tiles, but also disables some tilemap optimisations which could reduce performance. Turning Seamless mode off can improve performance, but may show seams if the following project properties are not as follows: Letterbox integer scale fullscreen mode, Point sampling, and Pixel rounding on. NOTE: you cannot use different Seamless mode settings on different instances of the same Tilemap object, even across layouts. For correct display, all tilemap instances of the same object type should use the same Seamless mode.

I have changed my project properties and turned off Seamless Mode and that looks like it has solved the problem.

In Construct 2 you may see seams between the tiles but as mentioned above when you preview this the seams are gone.