[2D Art] Reducing Tileset's Seams

[Wareditor]

What are seams?

Seams are graphical artifacts that appear at the junction of two texture. Tiles' seams in Warcraft III

Tileset's seams in Warcraft III

The Warcraft III engine can't display tiles without seams. Even with a perfect texture, seams will appear between tiles because of how the engine works. "The default terrain wrap in the game is just not aligned properly [...], it is about a pixel or two stretched into the tile." - Talavaj. This issue is even more apparent when trying to make connections between different tiles of the same tileset.

Reducing the seams effect by changing the texture

Knowing that Warcraft III engine wrap into the tile by 1 pixel, one can improve a tileset by simply reducing the size of each tile by 1 pixel for each side and filling the missing space by a border. Here are the exact actions to execute in your image software for each tiles (even for the overlay tiles): 1) Copy layer 2) Resize to 62x62 (or 124x124 if working with 128x128 tiles) 3) Merge down

Before and After Comparison

Here are the in editor comparison of the tileset before and after the change. It's nothing major but it helps a bit. Spoiler Before After First Texture Modified Texture

---

Special thanks to Talavaj who basically found the way to mitigate the seams effect.

 

[Wareditor]

Here is a comparison side by side in the editor:

On the left is the unmodified texture and on the right the one obtained using the technique described in the tutorial.

 

[Dr Super Good]

The Warcraft III engine can't display tiles without seams. Even with a perfect texture, seams will appear between tiles because of how the engine works.

Incorrect. As long as you use 2 pixel wrapped frames for a 64x64 tile they will be seamless.

"The default terrain wrap in the game is just not aligned properly [...], it is about a pixel or two stretched into the tile." - Talavaj.

Also incorrect.

The wrap is aligned exactly in the middle of the boarder pixels of a 32x32 tile. Hence if one made a 1 pixel wrapped frame on a 32x32 tile it will be seamless. However tile resolution was bumped up to 64x64 some stage during development after the wrap was hard coded. Hence the wrapping is exactly in the middle of the 2 edge pixels. Hence one needs a 2 pixel wide wrapping frame for the textures to be seamless.

One does not need to worry about bleed over from neighbouring tiles as mipmaps are not used. This also puts a maximum practical resolution for tiles since too high resolution causing aliasing artefacts (what mipmaps prevent).

This issue is even more apparent when trying to make connections between different tiles of the same tileset.

I admit I did not test this. I would imagine the blending allows as good as all such discontinuities to be masked however, as long as the area that is mismatched is fully transparent. Blend tiles need their own blend tile wrapping frames which need to be wrap compatible with the full tile wrapping frames.

Knowing that Warcraft III engine wrap into the tile by 1 pixel, one can improve a tileset by simply reducing the size of each tile by 1 pixel for each side and filling the missing space by a border.

One needs a 2 pixel wide wrapping frame for 64x64 tiles otherwise there will be a discontinuity due to linear interpolation.

Here are the exact actions to execute in your image software for each tiles (even for the overlay tiles):
1) Copy layer
2) Resize to 62x62 (or 124x124 if working with 128x128 tiles)
3) Merge down

One needs to create a 2 pixel wide wrapping frame for the centre tiles. One also needs 2 pixel wide wrapping frame for blend tiles. The problem is creating these to look good is extremely hard and requires good art skill. Since Blizzard did not make their tile textures with this in mind as they have placed unique features that span into the 2 pixel wrapping frame area so I do not think there is a good automated way to do this, at least without some AI to help.

And here is my proof.

Left is semi automated seamless, using a 2 pixel wrapping frame made from from one of the tiles. Right is original texture with seams. Note this is proving that tile seams can be completely invisible, not that the terrain looks completely continuous since my art skills suck and this was a rushed job so the wrapping frame is not that good.

A wrapping frame is a frame designed such that the corners of the frame can be translated to directly overlap each other. In other words the left outer edge of the frame is the same as the right inner edge, and the opposite and same for top and bottom edges. The content inside the frame does not matter, but should be feature continuous with the frame for best results.

It is worth noting that with 128x128 tiles the wrapping frame starts to behave differently. There is a 1 pixel disused frame (content never visible) followed by a 2 pixel wrapping frame and then a 122x122 internal panel.

It is also worth noting that 96x96 tiles are also seamless compatible. There is a 1 pixel disused frame followed by a 1 pixel wrapping frame then a 92x92 pixel internal panel.

Also worth mentioning that JPEG compression might introduce artefacts inconsistently into the wrap frames for each tile. Hence create subtle discontinuities. A compression quality higher than 90% might be recommended to minimize this, or using other formats such as palleted BLP (without dither) or true colour TGA which do not suffer from lossy compression artefacts.

 

[Wareditor]

@Dr Super Good
Thank you for the information. I will update the tutorial when I get the time.
Can you explain a bit more the concept of the wrapping frame?
I am not sure I got it quite yet from your explanation and I haven't found anything about it online.

 

[Dr Super Good]

I am not sure I got it quite yet from your explanation and I haven't found anything about it online.

I am probably describing it with the incorrect terminology. This is because it is a concept I probably reinvented to solve the problem rather than learned about from an academic source.

The basic idea is to surround all tiles with a frame such that linear interpolation sampling performed on one edge produces the same results when performed on the opposite edge. This can be expanded to the corners such that sampling at all 4 corners of the wrap will produce exactly the same sample. As samples deviate from the edges/corners of the wrap they will be subject to linear interpolation and hence change gradually, without create a discontinuity or seam.

As described above, the tile wrap alignment is in the middle of the edge pixels for a 32x32 tile. Applying this logic to a 32x32 tile means that the corner pixels have to all be identical, with the top and bottom edge pixel rows being the same and the left and right edge pixel columns also being the same.

If one expands this to 64x64 the wrap edges are in the middle of 2 pixels. So that the same interpolation results are produced at the edges this means that the two pixels have to be the same at the opposite edge. Hence a 2 pixel wide frame is needed. Since the requirement is that the 2 pixels are the same on the opposite edge and not that they are the same colour, one can create a 2 pixel wide feature rather than a solid colour if desired.

Things are slightly more complex with the blend tiles. Many of these have 1 edge that connects to a solid tile and hence has to share the same frame at that edge. They also might have edges that connect to other blend tiles and hence require their own frame for those edges. They also usually have 1 edge which represents complete transition to the underlying tile type and hence that edge should be fully transparent.

So what does such a "wrapping frame" look like? I have created a demo frame below for a 64x64 tile. Colours with high contrast are used to emphasize where frame wrap overlaps with itself. Simply placing this frame over all internal tiles of a 64x64 sized tile type will remove all visible seams between internal tiles. Do note that the frame itself would produce a feature discontinuity, even if the colours blend together without seam.

 

[PurgeandFire]

interesting strategy, but there is still a pretty noticeable seam. I'm curious about DSG's strat if you'd like to give that a try.

There is also a nice trick mentioned in this tutorial:
Creating Seamless Textures - from tiled textures to complex UV's - Wc3C.net

I've never tried it but it looks pretty good judging from the screenshot. Might be worth giving a shot to see if you can fully eliminate the seam!

Apart from that, the tutorial looks solid. But I think it'd be really helpful to have a before/after of the unwrapped texture itself.

 

[Dr Super Good]

There is also a nice trick mentioned in this tutorial:

Does not apply to terrain tile textures directly. It is specifically targeting model meshes with out of bounds UV coordinates with a repeating wrap mode set.

Terrain textures operate very differently as they use inbound UV coordinates and the extend edge wrap mode.

 

[PurgeandFire]

ah, you're right--didn't know tiles had such unique behavior. I think I understand the issue a little better now.

p.s. @Wareditor for the tutorial, I think I'd try to import the same tile and show them both in the same screenshot so people can see them side-by-side much easier. Like in DSG's screenshot. For the bottom screenshots they have to scroll up to switch to "after" so it makes it a little difficult to compare.