Creating tileable patterns for seamless ground tiles

Inkscape tutorial

It’s been a while and I still haven’t managed to make a video of it but here’s the step-by-step for the grass tile to get things started again.

The workflow is based on the video tutorial I posted earlier on Creating tileable patterns for seamless background.

2Dgameartguru inkscape toolbar
2dgameartguru - seamless ground tiles

Starting with a triangle via the line tool. The triangle is curved to form an elongated drop shape.

Set the colour to a green transparent gradient with full transparency at the based of the shape. The transparency helps create a layered effect and makes it leaves at the bottom look like they are in front of the higher ones.

Scale two duplicates vertically to create variations.

To make it faster to fill the tile square with a lot of grass leave, create a bunch of duplicates and group them.

The shape of the group is of no importance.

2dgameartguru - seamless ground tiles
2dgameartguru - seamless ground tiles

Create a square and set the size (width and height in the navigation bar at the top) to identical values (e.g. 100px).

Open the preferences [Shift+Ctrl+P]. In the Behavior section set the arrow key steps to the same value (in this case 100px).

Place the group of grass leaves in the top corner of the square. In order to be seamless the same group needs to appear in the other 3 corners as well.

By duplicating the group and moving it via the cursor keys, the copy will be place perfectly on the edges of the square.

2dgameartguru - seamless ground tiles
2Dgameartguru inkscape toolbar
2dgameartguru - seamless ground tiles

Each group of grass that goes beyond the tile square [mareked in yellow and blue] needs to have duplicate on the opposite edge of the square .

Grass that stays completely inside the square [red] does not need a corresponding duplicate.

Filling the space

Place more groups until the square is more or less evenly filled with the grass.

Smaller gaps can be easily covered with single leaves.

The same principle of duplicates on the other side of our base square applies to the single leaves as well in order to ensure that the tile will be seamless.

2dgameartguru - seamless ground tiles
2dgameartguru - seamless ground tiles

Once you filled the area without big and noticeable holes – which will make the pattern look recognizably tiled, it’s time to combine it all and bring it into shape with the clip tool.

In order to do that, duplicate the square [it will bring it to the front], select all and put everything in to the clip via [Object/ Clip/ Set].

The result should look somewhat like this.

2dgameartguru - seamless ground tiles
Note:
It’s a good idea to make a copy of the design before creating the clip as there might be a problem with access images when releasing the clip later on to edit the design.
2Dgameartguru inkscape toolbar

Adding variations

2dgameartguru - seamless ground tiles

Duplicating this new ‘clipped’ object and moving the copied version with the arrow keys should create the seamless grass texture that we are after.

2dgameartguru - seamless ground tiles

Note:
Play around with the shapes of the leaves and the group of leaves.

For this sample I arranged the leaves in a more diamond shape group and mirrored some of them for a less even look.

2dgameartguru - seamless ground tiles

Note:
When exporting the tiles from inkscape to bitmap, set the size to 2x or 3x the size of your ingame assets. Scale the art assets down in tools like gimp or Krita. A good practice to avoid antialiasing on the edges is to export to e.g. 514×514 pixels and then reduce the canvas [not scale but crop] to 512×512 pixels to cut the 1 pixel around the tile. The loss should not be visible in the ingame art work with tiles of 128×128 pixels or smaller.

I hope you enjoyed the tutorial as much as I did finally getting back into writing it. 🙂

2Dgameartguru inkscape toolbar
2dgameartguru - seamless ground tiles

You can also add several different groups of leaves, add flowers or stones.

This sample uses two different groups.

2dgameartguru - seamless ground tiles2dgameartguru - seamless ground tiles

By changing the inner elements of the tile while keeping the outer [connecting] parts intact you can create variations that will still seamlessly connect.

Here I opened up some of the groups, rearranged the leaves and added some stones.
The tile with the stones will connect perfectly with the standard grass tile as they share the same leaves on the tiles borders.

2dgameartguru - seamless ground tiles
2dgameartguru - seamless patterns - quick link
2dgameartguru - seamless ground tiles - quick link
2dgameartguru - seamless ground tiles - quick link
2dgameartguru - seamless ground tiles transitions - quick link
2dgameartguru - seamless ground tiles export - quick link
2dgameartguru - seamless ground tiles export - quick link