Tile art? Sources and tutorials?

[eddie]

Hey all.

I'm a programmer by trade, and I've got a basic 2D Tile game (think Master of Magic) on the go.

(yes, for those of you keeping track, this is one of several projects I've got underway. I'm a project whore. ;))

Anyhow, I seem to remember a topic a whiles ago (which I can't find now) about Tile art. Someone (Onikhaosifix, I think?) introduced himself there and pointed to a link with tile art for download/purchase. I'm not really interested in purchasing, I will admit, but I wouldn't mind snooping around and seeing how it's done. I'm interested in teaching myself how to make this type of art (shoddy programmer versions, that is), until I get the final look I'm really going for.

Does anyone know of resources such as this (tutorials/samples/etc)? I'm not really looking for 'help' in the project, as it's mostly for my own learning, but I'd love tips/advice/etc.

Thanks!

[bignobody]

(yes, for those of you keeping track, this is one of several projects I've got underway. I'm a project whore. ;))


Now eddie, no-one likes a whore that doesn't finish the job! :lol:

On a serious note, the easiest way I have found for creating tileable graphics is to use image editing software that has an image offset feature ( like the Gimp ). So you create your basic texture (grass, rocks, whatever). Then you offset it by x/2, y/2, and you'll see the lovely seams. Clean up the seams, then set the offset back and voila! Seamless tile.

Regards,

[SmokingRope]

I think there are any number of graphics packages which can do seamless tiling automatically. I've used JASC Paint Shop Pro for some semaless tiles i use in projects. Implementation wise i think it does some form of averaging or something ...

Anyway, its all automated and makes programmer graphics a snap.

[eddie]

Actually, I think it's not the problems of making something tileable, it's more like not having art that sucks. ;)

What I normally do is take the render clouds thing in Photoshop, and tint it green for forest and blue for water. ;)

Looks like pants. ;)

Basically what I'm looking for is a good way of making semi-believable art. Or some place that doesn't mind me using their stuff as placeholder. ;)

[moe]

If you have a digi-cam just take some pictures (stone, grass, water or walls...) and make them tilable in any gfx-editor.

[bignobody]

If you have a digi-cam just take some pictures (stone, grass, water or walls...) and make them tilable in any gfx-editor.

Excellent idea. And if the result is "too realistic" for your project you can always run it through a filter (posterize or the like).


I've used JASC Paint Shop Pro for some semaless tiles i use in projects.

Personally I've found PSP to be a pain in the ass when creating seamless graphics - if you don't have a large enough border for the image it won't do it. I've also found I'm not usually pleased with the job it does. I still see seams, they're just blurry... At least with Version 5 anyway, I'm not sure if it's gotten better in later versions...


Regards,

[Wernaeh]

Hey there :)

Well, if you have got photoshop, there is a simple trick for passable textures:
You need the cloud filter, high- and lowpass, and the lighting filter (if you want to do on-texture lighting). You also should have a basic understanding of how layers work.

Now, the procedure is quite simple:

Fill new layer with clouds in desired colors.

Goto Quickmask mode (one of the buttons in the toolbar)
Apply clouds to the quick mask (this actually gives you a random selection)
Apply difference clouds to the quick mask a few times (makes the selection more "fuzzy")
Now, use the high pass filter to remove any largefrquent detail from the quickmask (settings around 5 - 50 or so seem appropriate, removes those ugly repeting "large" patterns within the clouds)
Use the contrast filter to make the borders of the selection more sharp.
Now, end quick mask mode.
Delete everything inside your selection. A part of your layer will become translucent now.

Repeat these steps a few times. Each of these steps creates (when playing around a bit with parameters) a layer that on the one hand has a unique structure, on the other hand blends well with lower layers. Since everything is a bit on the random side, no artistic talent is required.

If you need lighting on your texture (makes it look 10x better), create an alpha layer, and fill it with clouds. Now, use the lighting filter with one or two parallel (important, otherwise: no tiling) lights. If desired, this can be coupled with the quickmask technique above to achieve different structures in different areas.

Only thing that remains to be done is to use the stamp tool to correct any tiling on the edges.

Hope this helps,
I might write a tutorial about this sometime soon,
Cheers,
- Wernaeh

[monjardin]

@Wernaeh: Some step-by-step images of that process would be most instructive. :yes:

[eddie]

Wow, thanks for the quick tutorial Wernaeh.

I'm not in a position to try those things just yet (the photo bit sounded good too Moe. I really have to learn me some Photoshoppin'), but I'll post back when I learn some of this.

Tile-based games are fun to develop. ;)

[SmokingRope]

Personally I've found PSP to be a pain in the ass when creating seamless graphics.


I think i'm using version 8 and it's still far from perfect. I've found it to be far better than just drawing digital camera pics straight to the screen though.

[Ed Mack]

Look into the Gimp's texturize filter. It intellegently makes a perfect seamless image out of arbitrary data, without just doubling the ends up and cross-fading them. http://www.manucornet.net/Informatique/Gimp_Texturize.php