How do you make repeating tiles???

For discussing and sharing all forms of artwork related to the game

Moderator: Staff

User avatar
Roots
Dictator
Posts: 8644
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

How do you make repeating tiles???

Postby Roots » Fri Sep 30, 2005 6:03 am

I don't get it. How do you guys make tiles that can be pasted together on all 4 sides + 4 diagonals and make it look totally perfect? Is there some trick you use when you are making the art so that you don't have to worry about everything aligning correctly when you put multiple copies of a newly created tile together? This has utterly escaped my comprehension for the longest time and I'd like to know how its done. :angel:
Image
User avatar
BigPapaN0z
Artist
Posts: 123
Joined: Sun Jan 16, 2005 7:19 pm
Location: Indiana
Contact:

Postby BigPapaN0z » Fri Sep 30, 2005 9:18 am

There are a few ways to do it.  You can just trial-n-error it death, you can use offset in Photoshop (or if your graphics package has a similar filter/feature) and I know in GIMP there is a filter called "Make Seamless."  That's kinda cheating IMO though, as it actually alters the tile to make it seamless.  Also, you can just be so used to making them, that you can eyeball it.  :)  If you'd like more details, lemmie know.
[img:256:64]http://www.allacrost.org/staff/user/bigpapan0z/bpn_allacrost_sig.png[/img]
User avatar
Jetryl
Artist
Posts: 1485
Joined: Fri Aug 26, 2005 7:35 am
Location: Southern Minnesota, USA

Postby Jetryl » Sat Oct 01, 2005 1:33 am

I've never done this before, which is part of why I'm here - to get practice, try some stuff out, etc.

Anyways, the first thing I would try would be:

Draw the image on what would actually end up being 9 tiles - you draw on the center one, but may occasionally spill over into the other 8.  Because, however, you are using paint tools, not full-opacity pixel tools, you can copy these other 8 tiles and overlay them on the center tile.

A workflow would consist of making some photoshop action (or applescript, or whatever) to do this rather odious task for you, so you could just click a button, essentially, and have all the overlap stuff mixed in.


:cool: The manly alternative is just the brute force + finesse method;  simply remembering all the edge pixels (facilitated by, you know, having a big zoomed-in copy of the other tiles sitting in a window).  General trends/overarching patterns would just have to be visualized in your head.
User avatar
Roots
Dictator
Posts: 8644
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Postby Roots » Sun Oct 02, 2005 5:40 pm

Yeah, I wonder if there is a GIMP plug-in for doing something like this. What I think would be a good way to do it is to create the borders of an image first, make sure they all line up, and then fill in the center to go with the edges.
Image
Sylon
Artist
Posts: 760
Joined: Wed Apr 27, 2005 1:03 pm
Location: Cheyenne, WY

Postby Sylon » Sun Oct 02, 2005 6:21 pm

That's how I do it, Roots.
-[Sylon Shanings]-, A Servant of Allacrost.
I owe my allegiance to Roots and only Roots! Hail to the dictator!

"DAD GUMMIT I NEEDA GET MY TORUS DOWN." - Sylon's art jabber
User avatar
gloomcover
Former Staff
Posts: 71
Joined: Thu Feb 24, 2005 9:00 am

Postby gloomcover » Sun Oct 02, 2005 8:42 pm

You do the fancy way, Sylon? I just force myself to make an element (or more than one if it tiles multiple directions) of the image go over into the next tile and eye-ball it on the other side.  I've tried just drawing one tile and then offsetting it so the middle becomes the edge, but it never seems to turn out as well for me.
User avatar
eleazar
Senior Member
Posts: 110
Joined: Mon Sep 18, 2006 7:56 pm
Location: USA

Postby eleazar » Wed Sep 20, 2006 11:50 pm

here's how i did it for Wesnoth.
Wesnoth uses hexes rather than squares, but the translation shouldn't be to hard.

Eyeballing it is fine, but it's hard to see some kinds of glitches unless the image actually repeats.

Alternatively (as gloomcover mentions) for a simpler approach, simply offset the image 16,16 pixels. Photoshop has an offset command where if you push the image off on the right, the pixels loop around and appear on the left. The point is to get the pixels that used to form the outside edge to form a cross in the middle of the image. Then if it doesn't line up, it's easy to fix. This doesn't provide as good a preview as a bunch of actions would, but it's simpler.
User avatar
jsmith71
Artist
Posts: 130
Joined: Tue Jan 17, 2006 9:57 am

Postby jsmith71 » Thu Sep 21, 2006 12:19 am

eleazar wrote:Alternatively (as gloomcover mentions) for a simpler approach, simply offset the image 16,16 pixels. Photoshop has an offset command where if you push the image off on the right, the pixels loop around and appear on the left. The point is to get the pixels that used to form the outside edge to form a cross in the middle of the image. Then if it doesn't line up, it's easy to fix. This doesn't provide as good a preview as a bunch of actions would, but it's simpler.

That's what I sometimes do, except I don't use photoshop for my pixel art-- The program I use has a similar thing, though. Most of the time I just eyeball it and tweak it a couple times until it lines up when I tile it, but sometimes if it's a more complex tile I offset it to fix the 'grid' effect. I like to use 2-3 different tiles for any given type of ground as well, to break up the monotony.
User avatar
Jetryl
Artist
Posts: 1485
Joined: Fri Aug 26, 2005 7:35 am
Location: Southern Minnesota, USA

Postby Jetryl » Thu Sep 21, 2006 1:48 am

eleazar wrote:Alternatively (as gloomcover mentions) for a simpler approach, simply offset the image 16,16 pixels. Photoshop has an offset command where if you push the image off on the right, the pixels loop around and appear on the left. The point is to get the pixels that used to form the outside edge to form a cross in the middle of the image. Then if it doesn't line up, it's easy to fix. This doesn't provide as good a preview as a bunch of actions would, but it's simpler.


:huh: If you offset it (assuming a single 32x32 image, here) twice, does it go back to normal on the second offset?


Doggone, here I'm thinking I know photochop like the back of my hand, and there are still features I haven't used. :eyespin:
Image
User avatar
eleazar
Senior Member
Posts: 110
Joined: Mon Sep 18, 2006 7:56 pm
Location: USA

Postby eleazar » Thu Sep 21, 2006 2:45 am

Jetryl wrote: :huh: If you offset it (assuming a single 32x32 image, here) twice, does it go back to normal on the second offset?
:approve: exactly

Jetryl wrote:Doggone, here I'm thinking I know photochop like the back of my hand, and there are still features I haven't used. :eyespin:
Photoshop is a deep application. Few have known it's true depths... :)
User avatar
Loodwig
Musician
Posts: 511
Joined: Mon Apr 18, 2005 5:15 am
Location: Chicago, IL
Contact:

Postby Loodwig » Thu Sep 21, 2006 7:24 am

I just use escher as a concept, combined with the offset trick when I make backgrounds for webpages. You can also calculate that any quadrilaterral will tesolate, and create patterns that way. Of course, if you're talking about making something like sand or some sort of chaos pattern, then you are left with only the aforementioned "tweaking".
"We want a simpler and more melodic style for music, a simple, less complicated emotional state, and dissonance again relegated to its proper place as one element of music..."
~Sergei Prokofiev
User avatar
qubodup
Newbie
Posts: 14
Joined: Sat Dec 29, 2007 10:23 pm
Location: Berlin, Germany

Postby qubodup » Mon Dec 31, 2007 12:12 pm

http://www.lordsawar.com/ have made some very unprofessional tutorials for tiles =) They're on the main page, three theora files.

Return to “Artwork”

Who is online

Users browsing this forum: No registered users and 3 guests