Connected Textures?

Game Mechanics
#1

I have a 2D int array of tile ids, for example: 0: water, 1: land, 2: desert, etc. Tiles are rendered by returning a certain sprite from a given id. What would be the best way to connect the textures together so they match, instead of each individual tile rendering a specific sprite of grass or water, it would render a blend of the two.

Here are a few examples if you’re unsure what I mean.

Would I have to hardcode each possible texture connection or offset the sprite used based off what surrounds the tile?

#2

Here is a great tutorial (also the one I use): http://www.saltgames.com/2010/a-bitwise-method-for-applying-tilemaps/

Here is another great one that Ray said is similar to the one he uses in RPC: http://www.codeproject.com/Articles/106884/Implementing-Auto-tiling-Functionality-in-a-Tile-M

Another thread on this: http://www.java-gaming.org/topics/auto-tiling-on-2d-map/30429/msg/280897/view.html#msg280897

#3

Thanks for that! I followed the saltgames article and came up with this.

It works pretty well, only the inwards corners seem to be solid grass tiles. These are the tiles with their ids.

Using this tile sheet.

Any ideas how to fix those inner corners?

#4

Hi,

That’s pretty good work right there considering you had no idea a few hours ago.

Basically you need more tiles to fix the inside corners. I see the saltgames tutorial used something like this:


x 1 x
8 x 2
x 4 x

What you need to do is increase the tile ids to include this:


128  1  2
64   x  4
32  16  8

And create new textures for the 4 corners.

#5

Here’s another tutorial for tiling:
http://www.angryfishstudios.com/2011/04/adventures-in-bitmasking/

There’s also an example for the 8-bit case :wink:

#6

Thanks for those, I’m currently trying to wrap my brain around not having all 256 possible outcomes with unique tile graphics; so some outcomes will have the same tile id. I managed to figure up, down, left, right connecting textures through trial and error (mostly error), so figuring this out is proving to be tricky.

I also found the source code for Notch’s small game, Minicraft. This is is how he handles connected textures: https://github.com/Miserlou/Minicraft/blob/master/src/com/mojang/ld22/level/tile/WaterTile.java

#7

Right, I’ve created a tile sheet with all possible tile combinations. http://i.imgur.com/NZtn1b7.png

Tiles are correctly given a unique id by adding on 1, 2, 4, 8, 16, 32, 64, 128, depending on what tiles are adjacent. This results in tile ids in the range of 0-255. What would be the best way to correctly map each tile to its corresponding sprite without a HUGE chained if statement?

#8

Isn’t the whole idea to make it a table index?
[icode]
tex = textures[tileID];
[/icode]

#9

sometimes it can help to split things up further and use a second bitmask for the corners, so instead of having 256 different combination tiles, you have 16 variants for left right up down joining, and another set of 16 variants for corner pieces.

#10

It also makes it easier for simple combinations, if you arrange your tiles in a more logical way:


first tile #0 no neighbours so +0
second tile #1 has a top neighbour so +1
third tile #2 has a right neighbour so +2
fourth tile #3 had top neighbour so +1 and right neighbour so + 2
fifth tile #4 has bottom neighbour so +4
last tile #15 has all combinations so +1 +2 +4 +8 = 15

So when working out which tile to use, for each tile just go round in a circle checking connections:


start with bits = 0
if it has a top neighbour bits += 1
if it has a right neighbour bits += 2
if it has a bottom neighbour bits += 4
if it has a left neighbour bits += 8

Now you have an index as to which tile variant to use. This doesnt work so well when you have complex variety of joins, but it works well for joining a specific tile type to other tiles of the same type.