Turning Square Tiles into Hex

From The Battle for Wesnoth Wiki
Revision as of 13:53, 30 September 2007 by Sgt. Groovy (talk | contribs) (New tutorial)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

In Wesnoth the Terrain graphics are made with seamlessly tiling hexagonal pixmaps. These are more difficult to make than square tiles, for which ready made scripts exist in most image manipulation programs, and which can also be found in multitude of libraries, free to use.

If you cut a square tile into a hexagon, it's only going to be seamless in north and south edges. To make it seamless in all edges takes a bit of trickery, but it's relatively simple. Let's start with a dry mud texture from the standard GIMP library:

hextile1.png

First it must be scaled into 54x36 pixel size (this applies to the standard 72x72 pixel Wesnoth hexes, for other hexes the figures are width*0.75 and height/2). Then resize the canvas by 2 in both directions and fill the empty space with copies of the tile:

hextile2.png

Now crop the image into 72x72 size (the exact placement of the cropping does not matter) and trim the corners so that it matches the standard hex:

hextile3.png

Now comes the moment of truth: what happens when we tile this hex? Let's see:

hextile4.png

Almost makes you believe in magic, doesn't it?

There are two important things to notice:

  1. The size and aspect ratio of the original texture are not preserved, but this can be a good thing. If you start with a square tile where the pattern is seen as from above, then it gets scaled down vertically, creating an impression of perspective (in Wesnoth, the terrain is seen from an angle, not directly above).
  2. The hex will contain the original pattern twice, that is, every unique feature in the original tile will appear in the hex tile two times. This may make the pattern to appear too densely repeating, but once you have the hex made, you can change something about one copy of each feature to counteract this effect (as long as you don't touch the edge pixels, the tile will stay seamless).