How To Make Seamless Tiles

From The Battle for Wesnoth Wiki

I know that everyone doesn't have Photoshop, but I thought it might be helpful to some to see the process I developed. Your mileage with other applications may vary...

For the relevant GIMP plugins, please scroll to the bottom of the page.


1) Download these files (for Photoshop). It includes 3 "actions" for photoshop as well as a template (with guides to assist in aligning tiles).

2) Fig. 2 A blank slate.


3) Fig. 3 Lets say I went mad and wanted to add a Polka-dot terrain to the game. I'd begin like this: (Note: I have a layer that I constrain the drawing to so I don't have to worry about going outside the lines.) Warning if using my actions don't delete the "Master Shape" Layer. Otherwise it won't work.


4) Now I take advantage of the wonders of automation. I run the "Fix Edges" action. It duplicates the tile 3 times, rearranges them all so each duplicate takes up 1/3rd of the center and crops away the excess. See Fig. 4.


5) Yikes! My edges didn't line up. But now that the edges are on the inside of the tile i can fix them up, knowing that the outside edges are seamless with each other. I patch it up as in Fig. 5.


6) Now I repeat steps 4 and 5 until there are no more edge glitches. Eventually i'm happy. Note: Running "Fix Edges" three times in a row will reassemble the tile to its original form.

7) Now the edges are smooth, but I want to see how this terrain looks in a big chunk. I could duplicate it 16 times and arrange each piece, or I could run the "Repeat it!" action and get Fig 6. Note: the tile layer must be selected.


8 ) Now to create the basic transitions, I can chop up the "many tiles" layer and send them off to separate files, confident that they will line up with the main tile. As I'm doing this demo, I find I can't get the third action "Trans chop-up" to work. It's been a while since I last did this.

9) And so after all this hard work you get Fig. 7, a beautiful seamless polka-dot terrain.


Other Graphics Programs

If you use The GIMP in stead of Photoshop, Allefant created a gimp-python plugin which does a similar thing to Eleazar's photoshop actions. Extract this file to your GIMP "plug-ins" directory. After restarting The GIMP, you should have a new entry "Wesnoth" in the Python-Fu menu. The "Hex Wrap" script is the equivalent of the "Fix Edges" action. The "Hex Preview" script is the equivalent of the "Repeat It!" action. Note that these scripts only work on a 72 pixel by 72 pixel image (the size of one terrain tile), so do not use the template from the photoshop file!

This page was last modified on 11 January 2010, at 23:29.