Sunday, May 5, 2013

Making tile-able textures with inkscape

I made the tiled textures on the environment pieces in froggy.
 Mike modelled and uv-ed them, I made some changes to his Uvs before texturing them.

Here's what we have so far:
 There are two types of textures in the game:
-walls - need to seamlessly tile both on X and y
-platforms - need to seamlessly tile on X

One thing that I had to figure out for myself was how does one do tiling textures in vectors?
Well, there is some software out there. Some lets you do it in real time, other (such as adobe illustrator) does it automatically after you make your texture. I was interested only in the first type, as the second didn't give good results and was harder to control ,as it is trying to guess.

Seamless studio (shareware - ??$) is designed to do the job, however it has no transparency,gradients, blurs or any other fancy vector features. All it can do is import the path data and apply a colour to it. I decided it's way too limited to even consider buying!

Pattern studio (shareware - 68$) is a very nice piece of software that specialises in tiled textures- both by using vector and bitmap tools. It has many of the effects one would wish to have from the vector world and some of the ones from the bitmap world. While I did like it, I decided that the interface is a bit slow in terms of workflow and would also take a while to learn.

After all this research, I ended up using
 inkscape (open source - 0$) again. It's fairly easy to setup  your vector file in a way that allows to make a seamless tiling.

Mini tutorial:

0. set the Document properties to be 512x512. 

1. Create a base colour square - 512x512 in size, set its xy position to 0. select the square and ctr+g to put it in a group. It's important that the size of that group is the same as the one in document properties.

2. Set up your grid, so it breaks the canvas 10x10 - just the way it is in Maya's uv editor by default. This is useful when used with snapping and for reference. To do it in inkscape, divide the document size by 10 (in this case 51,2 x 51,2).

3. After that is done, clone your square group 8 times. Move the clones to another layer above the one where the original is and place them around the original. This is where the snapping to grid feature comes in handy- you need to snap them precisely. If thats not enough you can make one or two more circles of clones around that you have and use clipping to hide the most outer circle. Lock the layer with all the clones.

Now in order to edit your texture, all you need to do is enter the original's group and start adding new shapes inside it. You will notice that when you draw out of it's document boundaries, the clones above it will emulate the effect of tiling by drawing whats outside on top of the other side of the texture- giving you an easy way of making it tile.

If you want to improve your visibility, you can set the clones layer to multiply and/or reduce its transparency. Dont forget to set that back to normal before you export.

Exporting different texture sizes:
When you export you can get different sizes by multiplying or dividing the default dpi (90) by a factor of 2.
1024x1024=90dpi*2 = 180 dpi
 256x256= 90 dpi / 2 = 45 dpi

No comments:

Post a Comment