Today I was asked what my approach to creating tiles is and specifically how I am able to achieve a seemless textures on those. Admittedly it is a well discussed topic with a lot of information already out there, nonetheless I thought I would give my explanation skills a try and share this with all of you.

So when I am creating tiles for 2d games I normally start by defining a size and base color, coming up with a simple square:

Square-BaseColor

The second step would be to simply mess around with brushes and color settings to achieve somewhat of a texture I like. Without thinking about any structural patterns. Here for example I am going for a flat grass ground.

Square-BaseColor

After having reached the desired look I normally go ahead and create a little map (usually nine tiles like in the image below) and have a look at the result, that clearly shows visible lines between each square texture:

Square-BaseColor

The goal for seemless tiles is to create interlocking colors and shapes on each of the opposing sides. Which is not the case here if you look at the ends meeting each other:

Square-BaseColor

The most easy hack for this would be to decide on one horizontal and vertical end (lower or upper half, left or right half of the square) to simply copy, paste and flip it. The mirroring ends would create a seemless transistion and you would only have to focus on editing the inner area of the tile to make it match with the outer frame. However in my oppinion that leads to pretty “fabricated” uninspired results showing the repeating texture.

So what to do if you want to avoid that? Well we will have to go into the “detailview”.

If you want to fix the shapes and colors on your tile ends to merge fluently with each other while still maintaining a variety in structure it is easier to split the tile in subareas by visualizing lines in your head (… or use the grid function provided by your graphic tool of choice). I normally start with the horizontals and verticals:

Square-BaseColor

Have a look at each of the opposing micro patterns on the tile and fix colors and shapes with a mapped area (like the 9 tiles above) in mind. After this have a look at the result by mapping an example again:

Square-BaseColor

You will see that we have achieved an improvement on the visible lines but we are still not finished. The corners of the tiles don’t match so we will have to go back and fix this also. Currently we only focused on horizontal and vertical micro patterns but what about diagonal patterns opposing each other? Let’s visualize again:

Square-BaseColor

Do the same fixing like in the first step and have a good look on each opposing micro pattern again. After this the result should look seemless. Don’t worry if you don’t get it right on your first try, depending on the style of texture you go for it can take fewer or more iterations of fixing, but the process stays the same.

Square-BaseColor

Simply continue to improve and have fun with whatever you do :3

Square-BaseColor

Note: I have been creating tilesets for years now and quite honest I never really thought about what I am doing in a way of clearly followable steps. Nonetheless I thought why not create some tutorials to help others and also look at my work from a meta point of view. It might also help me to improve on efficency. Thanks for reading!