How do I Prepare A Tileset For C2

Get help using Construct 2

Post » Sat Oct 10, 2015 1:05 pm

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 :D

Cheers,

Dave.
B
9
S
3
Posts: 45
Reputation: 770

Post » Sat Oct 10, 2015 2:16 pm

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..
I told my dentist I had trouble with my teeth and asked her to fix it without looking in my mouth..
B
54
S
16
G
8
Posts: 6,160
Reputation: 19,775

Post » Sat Oct 10, 2015 3:22 pm

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.
ImageImageImageImage
B
157
S
66
G
41
Posts: 2,599
Reputation: 34,825

Post » Sat Oct 10, 2015 3:49 pm

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: Image

Tileset + Grid: Image

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

Construct 2: Image

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.
B
9
S
3
Posts: 45
Reputation: 770

Post » Sat Oct 10, 2015 3:57 pm

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.
I told my dentist I had trouble with my teeth and asked her to fix it without looking in my mouth..
B
54
S
16
G
8
Posts: 6,160
Reputation: 19,775

Post » Sat Oct 10, 2015 5:40 pm

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.
Image
B
17
S
6
G
2
Posts: 56
Reputation: 1,795

Post » Sat Oct 10, 2015 8:55 pm

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.
B
9
S
3
Posts: 45
Reputation: 770

Post » Sat Oct 10, 2015 9:14 pm

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: Image

Browser: Image

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.
B
9
S
3
Posts: 45
Reputation: 770

Post » Sat Oct 10, 2015 9:25 pm

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:
Image

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.
Last edited by xxstyxx on Sat Oct 10, 2015 9:35 pm, edited 1 time in total.
B
17
S
6
G
2
Posts: 56
Reputation: 1,795

Post » Sat Oct 10, 2015 9:32 pm

xxstyxx wrote: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 :)
B
9
S
3
Posts: 45
Reputation: 770

Next

Return to How do I....?

Who is online

Users browsing this forum: Lancifer and 57 guests