PDA

View Full Version : Creating and using seamless texture sets



RobA
10-22-2008, 02:13 PM
There has been a fair number of posts on creating seamless textures for use in maps, the largest one here (http://www.cartographersguild.com/showthread.php?t=1373).

Extending on that topic, here is a technique to create seamless texture sets, or multiple tiles that are all seamless with one another. I first read about the technique in the dundjinni forums, as that program supports tile randomization.

The original site is not available: http://www.vsf.cape.com/~jdale/dundjinni/tut_tiles.htm

but there is still a cache in the wayback machine: http://web.archive.org/web/20070108223915/www.vsf.cape.com/~jdale/dundjinni/tut_tiles.htm

As I don't know how long that will be available, I will walk through the process here.

The Tutorial

I am starting with an image from CGTextures (http://www.cgtextures.com/texview.php?id=16049&PHPSESSID=a2e1b9c66805621fbf485353984c6320) that I have scaled down:
7265

I want 200x200 px tiles so I set the rectangular selection to be fixed 200x200:
7266

And copy and paste a selection to a new image:
7267

Which is made seamless using your preferred technique:
7268

This will be the base image that all other tiles will be made from. Duplicate the layer and make a squiggly feathered selection in the middle:
7269

Then...

RobA
10-22-2008, 02:18 PM
...and delete the selection:
7270

Now keep selecting 200x200px areas from different places in the source image, copy and paste them into new layers. Here I have the initial plus five pasted layers, plus the seamless "frame" we had cut the middle from:
7271

Now reveal one layer at a time through the frame and save the image as a separate png. Because the frame is seamless, and tileable, each one of these will also be seamlessly tilable. Here is a zip of the 6 tiles:
7272

...

RobA
10-22-2008, 02:30 PM
...Like I said, some programs (dundjinni, mapx, dungeonforge) support random tiles automatically, but Gimp doesn't...

The base seamless tiles would look like this:
7273

Setting the grid to 200px, and turning on snap to grid, I create a new layer and drag in copies of the other tiles, snapping them to the grid:
7274

So when you look at the whole thing you get less periodicity:
7275

One last thing that can be done is to add a B&W overlay. Here I added a gradient to shade the image a bit. This fools the brain and makes the texture look less periodic:
7276

One last note. I showed the cutting out a feathered frame, and using the same frame for all of the tiles. A better method (that I figured out after doing this) would be to use layer masks to randomly mask the outer edges from each of the dragged in copies to expose the seamless tile below. This would give more control to eliminate small inconsistencies or details that would show up periodically, in a non-destructive manner.

-Rob A>

xv43
10-22-2008, 07:41 PM
Brilliant! I'm definitely going to have some use for this.

StillCypher
10-23-2008, 11:48 AM
Very useful information! Thanks much!

Karro
10-23-2008, 12:27 PM
Stupid question:

What do you do in the early part where you indicate to "make seamless using your preferred technique"? Is there a specific command that turns an image into something tileable? Or a specific set of commands?

Redrobes
10-23-2008, 01:50 PM
Is there a specific command that turns an image into something tileable? Or a specific set of commands?
Oh yes, you use Gimp with the patent pending 'Redrobes' filter :D

Or the link rob gave (http://www.cartographersguild.com/showthread.php?t=1373) goes to a thread with a script implementation of it which does the same thing using ImageMagick which is a free image scripting language thingy.

There are other ones too tho but they arent called anything as good as Robs script... ;)

RobA
10-23-2008, 03:00 PM
Stupid question:

What do you do in the early part where you indicate to "make seamless using your preferred technique"? Is there a specific command that turns an image into something tileable? Or a specific set of commands?

Even stock gimp has a (poor quality) command Map->Make Seamless.

But if you google for "seamless tile tutorial" (http://www.google.ca/search?q=seamless+tile+tutorial) you get tens of thousands of hits.

There are also loads of dedicated programs just for creating seamless textures (http://www.google.ca/search?hl=en&q=seamless+tile+software), but again, YMMV.

-Rob A>

Karro
10-23-2008, 03:08 PM
Even stock gimp has a (poor quality) command Map->Make Seamless.

But if you google for "seamless tile tutorial" (http://www.google.ca/search?q=seamless+tile+tutorial) you get tens of thousands of hits.

There are also loads of dedicated programs just for creating seamless textures (http://www.google.ca/search?hl=en&q=seamless+tile+software), but again, YMMV.

-Rob A>

Thanks, plus I found the one Redrobes referred to in the post above.

Now... maybe a more complex question (or maybe just more stupid):

Firstly, what's the maximum size of an image like this?

Secondly, is it possible to make, say, only the top and bottom tileable, so that you can tile a column, vertically, but it won't tile horizontally...?

RobA
10-23-2008, 06:10 PM
Firstly, what's the maximum size of an image like this?


Any size really. Most time based software uses a predefined size (like Dundjinni's 200x200 px) but if you are using a paint program, then any size.



Secondly, is it possible to make, say, only the top and bottom tileable, so that you can tile a column, vertically, but it won't tile horizontally...?

Now it is my turn to ask what might be considered a stupid question...

Why would you want to NOT tile both ways?

-Rob A>

Ghostman
10-24-2008, 05:10 AM
Why would you want to NOT tile both ways?

The source image may have features near the sides that you don't want to get distorted?

Redrobes
10-24-2008, 05:29 AM
Well, if you look at my script/tut thing there are steps to do that wibbly shape horizontally to blend the top and bottom bits and theres another vertically to blend the sides. So skip either one of those but complete the rest of the sequence.

Karro
10-24-2008, 11:16 AM
Now it is my turn to ask what might be considered a stupid question...

Why would you want to NOT tile both ways?

-Rob A>


The source image may have features near the sides that you don't want to get distorted?

Rightly so....

I'm postulating, for the sake of argument, say, a background image with features on the left and right sides that, as Ghostman suggests, are desireable to be maintained, but that I might want to be able to tile vertically.

I don't have any immediate plans to do anything like this, but I'm just envisioning it's use in a website, for example, where you want a main text column with such a background image to expand downward as text is added to the page, but to maintain a fixed width, and thus maintain certain distinctive edge features.

RobA
10-24-2008, 01:51 PM
OK -

I updated the script in the other thread to allow horizontal, vertical, or both direction tiling.

-Rob A>

Karro
10-24-2008, 03:36 PM
OK -

I updated the script in the other thread to allow horizontal, vertical, or both direction tiling.

-Rob A>

You know you spoil us... I was only curious whether it could be done, I didn't mean for you to go and change your script.

But thanks!

jfrazierjr
10-24-2008, 04:39 PM
You know you spoil us... I was only curious whether it could be done, I didn't mean for you to go and change your script.

But thanks!


Yep... and thats why he has 200+ rep.

Karro
10-24-2008, 04:43 PM
Yep... and thats why he has 200+ rep.

Indeed!

....

delgondahntelius
10-24-2008, 06:41 PM
He hit me with that thing earlier today ..... +8 !!!!! OUCH!!!!! that's a MEGAREPROD of HADES