Turning Square Tiles into Hex - Revision history

Egallager: wikify

2023-05-08T04:59:17Z

wikify

← Older revision		Revision as of 04:59, 8 May 2023
Line 1:		Line 1:
	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.		In Wesnoth the [[TerrainGraphicsWML\|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. There are two methods to do it, the one that is better depending on the circumstances.		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. There are two methods to do it, the one that is better depending on the circumstances.

Max2008: /* Method 2: Rotation */

2014-03-25T07:09:40Z

Method 2: Rotation

← Older revision		Revision as of 07:09, 25 March 2014
Line 34:		Line 34:
	If the original tile is not square, scale it horizontally or vertically so that it is. Double the size of the canvas in both directions and fill the space with copies of the tile, creating a 2x2 pattern. Below is our example, a ceramic tile pattern:		If the original tile is not square, scale it horizontally or vertically so that it is. Double the size of the canvas in both directions and fill the space with copies of the tile, creating a 2x2 pattern. Below is our example, a ceramic tile pattern:

	http://~~koti~~.~~welho.com~~/~~thonkasa~~/~~Roinaa~~/hextile21.png		http://wesnoth.org/wiki-images/tiles-to-hex/hextile21.png

	Next rotate the image 45 degrees and scale it so that the height becomes 144 and width 216 pixels:		Next rotate the image 45 degrees and scale it so that the height becomes 144 and width 216 pixels:

	http://~~koti~~.~~welho.com~~/~~thonkasa~~/~~Roinaa~~/hextile22.png		http://wesnoth.org/wiki-images/tiles-to-hex/hextile22.png

	Then cut the hex shape out anywhere you like (don't include any transparent pixels), and that's it (notice that the pattern appears only once in the hex):		Then cut the hex shape out anywhere you like (don't include any transparent pixels), and that's it (notice that the pattern appears only once in the hex):

	http://~~koti~~.~~welho.com~~/~~thonkasa~~/~~Roinaa~~/hextile23.png		http://wesnoth.org/wiki-images/tiles-to-hex/hextile23.png

	If you doubt that it can be this simple, let's see how it tiles:		If you doubt that it can be this simple, let's see how it tiles:

	http://~~koti~~.~~welho.com~~/~~thonkasa~~/~~Roinaa~~/hextile24.png		http://wesnoth.org/wiki-images/tiles-to-hex/hextile24.png

	Which method to use depends on your requirements. If you need to preserve the original orientation, use method 1. If you need the rotation, or must have the pattern repeated only once per hex, use method 2 (simultaneously preserving orientation and having 1 repeat/hex is not possible with these methods). If the orientation and repeat number don't matter, the appropriate method depends on the desired size of the pattern: method 2 reproduces the pattern twice as big as method 1.		Which method to use depends on your requirements. If you need to preserve the original orientation, use method 1. If you need the rotation, or must have the pattern repeated only once per hex, use method 2 (simultaneously preserving orientation and having 1 repeat/hex is not possible with these methods). If the orientation and repeat number don't matter, the appropriate method depends on the desired size of the pattern: method 2 reproduces the pattern twice as big as method 1.

	[[Category: Art Tutorials]]		[[Category: Art Tutorials]]

Max2008: /* Method 1: Keeping the Orientation */

2014-03-25T07:09:00Z

Method 1: Keeping the Orientation

← Older revision		Revision as of 07:09, 25 March 2014
Line 7:		Line 7:
	Let's start with a dry mud texture from the standard GIMP library:		Let's start with a dry mud texture from the standard GIMP library:

	http://~~koti~~.~~welho.com~~/~~thonkasa~~/~~Roinaa~~/hextile1.png		http://wesnoth.org/wiki-images/tiles-to-hex/hextile1.png

	First it must be scaled to 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:		First it must be scaled to 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:

	http://~~koti~~.~~welho.com~~/~~thonkasa~~/~~Roinaa~~/hextile2.png		http://wesnoth.org/wiki-images/tiles-to-hex/hextile2.png

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

	http://~~koti~~.~~welho.com~~/~~thonkasa~~/~~Roinaa~~/hextile3.png		http://wesnoth.org/wiki-images/tiles-to-hex/hextile3.png

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

	http://~~koti~~.~~welho.com~~/~~thonkasa~~/~~Roinaa~~/hextile4.png		http://wesnoth.org/wiki-images/tiles-to-hex/hextile4.png

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

Jamiescott: /* Method 2: Rotation */

2013-04-13T17:16:59Z

Method 2: Rotation

← Older revision		Revision as of 17:16, 13 April 2013
Line 40:		Line 40:
	http://koti.welho.com/thonkasa/Roinaa/hextile22.png		http://koti.welho.com/thonkasa/Roinaa/hextile22.png

	Then cut the hex shape out anywhere ~~it doesn~~'t include transparent pixels, and that's it (notice that the pattern appears only once in the hex):		Then cut the hex shape out anywhere you like (don't include any transparent pixels), and that's it (notice that the pattern appears only once in the hex):

	http://koti.welho.com/thonkasa/Roinaa/hextile23.png		http://koti.welho.com/thonkasa/Roinaa/hextile23.png

Jamiescott: /* Method 2: Rotation */

2013-04-13T17:14:47Z

Method 2: Rotation

← Older revision		Revision as of 17:14, 13 April 2013
Line 30:		Line 30:
	==Method 2: Rotation==		==Method 2: Rotation==

	In the second method the original tile must be square, for it will be rotated 45 degrees. The rotation may prove useful in cases where the pattern ~~have~~ straight forms, like stripes or checkers. In that case the end result will generally look better if the lines go from SE to NW and SW to NE rather than from south to north and west to east. So if your pattern has ~~these~~ lines vertically ~~and~~ horizontally, you should use this method.		In the second method the original tile must be square, for it will be rotated 45 degrees. The rotation may prove useful in cases where the pattern has straight forms, like stripes or checkers. In that case the end result will generally look better if the lines go from SE to NW and SW to NE rather than from south to north and west to east. So if your pattern has strong lines vertically or horizontally, you should use this method.

	If the original tile is not square, scale it horizontally or vertically so that it is. Double the size of the canvas in both directions and fill the space with copies of the tile, creating a 2x2 pattern. Below is our example, a ceramic tile pattern:		If the original tile is not square, scale it horizontally or vertically so that it is. Double the size of the canvas in both directions and fill the space with copies of the tile, creating a 2x2 pattern. Below is our example, a ceramic tile pattern:
Line 40:		Line 40:
	http://koti.welho.com/thonkasa/Roinaa/hextile22.png		http://koti.welho.com/thonkasa/Roinaa/hextile22.png

	Then cut the hex shape out (anywhere ~~where~~ it doesn't include transparent pixels), and that's it (notice that the pattern appears only once in the hex):		Then cut the hex shape out anywhere it doesn't include transparent pixels, and that's it (notice that the pattern appears only once in the hex):

	http://koti.welho.com/thonkasa/Roinaa/hextile23.png		http://koti.welho.com/thonkasa/Roinaa/hextile23.png
Line 48:		Line 48:
	http://koti.welho.com/thonkasa/Roinaa/hextile24.png		http://koti.welho.com/thonkasa/Roinaa/hextile24.png

	Which method to use depends on your requirements. If you need to preserve the original orientation, use method 1. If you need the rotation, or must have the pattern repeated only once per hex, use method 2 (~~both~~ preserving orientation and having 1 repeat/hex is not possible with these methods). If the orientation and repeat number don't matter, the appropriate method depends on the desired size of the pattern: method 2 reproduces the pattern twice as big as method 1.		Which method to use depends on your requirements. If you need to preserve the original orientation, use method 1. If you need the rotation, or must have the pattern repeated only once per hex, use method 2 (simultaneously preserving orientation and having 1 repeat/hex is not possible with these methods). If the orientation and repeat number don't matter, the appropriate method depends on the desired size of the pattern: method 2 reproduces the pattern twice as big as method 1.

	[[Category: Art Tutorials]]		[[Category: Art Tutorials]]

Jamiescott: /* Method 1: Keeping the Orientation */

2013-04-13T17:09:50Z

Method 1: Keeping the Orientation

← Older revision		Revision as of 17:09, 13 April 2013
Line 9:		Line 9:
	http://koti.welho.com/thonkasa/Roinaa/hextile1.png		http://koti.welho.com/thonkasa/Roinaa/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:		First it must be scaled to 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:

	http://koti.welho.com/thonkasa/Roinaa/hextile2.png		http://koti.welho.com/thonkasa/Roinaa/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:		Now crop the image to 72x72 pixels (the exact placement of the cropping does not matter) and trim the corners so that it matches the standard hex:

	http://koti.welho.com/thonkasa/Roinaa/hextile3.png		http://koti.welho.com/thonkasa/Roinaa/hextile3.png
Line 25:		Line 25:
	There are two important things to notice:		There are two important things to notice:

	# The size and aspect ratio of the original texture are not preserved (unless it is already 54x36 pixels), 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).		# The size and aspect ratio of the original texture are not preserved (unless it is already 54x36 pixels), but this can be a good thing. If you start with a square tile where the pattern is seen as if looking down from above, when it gets scaled down vertically, it creates an impression of perspective (in Wesnoth, the terrain is seen from an angle, not directly above).
	# 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).		# 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 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).

	==Method 2: Rotation==		==Method 2: Rotation==

Sgt. Groovy at 19:36, 21 February 2008

2008-02-21T19:36:05Z

← Older revision		Revision as of 19:36, 21 February 2008
Line 49:		Line 49:

	Which method to use depends on your requirements. If you need to preserve the original orientation, use method 1. If you need the rotation, or must have the pattern repeated only once per hex, use method 2 (both preserving orientation and having 1 repeat/hex is not possible with these methods). If the orientation and repeat number don't matter, the appropriate method depends on the desired size of the pattern: method 2 reproduces the pattern twice as big as method 1.		Which method to use depends on your requirements. If you need to preserve the original orientation, use method 1. If you need the rotation, or must have the pattern repeated only once per hex, use method 2 (both preserving orientation and having 1 repeat/hex is not possible with these methods). If the orientation and repeat number don't matter, the appropriate method depends on the desired size of the pattern: method 2 reproduces the pattern twice as big as method 1.

			[[Category: Art Tutorials]]

Sgt. Groovy at 20:11, 2 October 2007

2007-10-02T20:11:46Z

← Older revision		Revision as of 20:11, 2 October 2007
Line 44:		Line 44:
	http://koti.welho.com/thonkasa/Roinaa/hextile23.png		http://koti.welho.com/thonkasa/Roinaa/hextile23.png

	If you doubt that it can be this simple, ~~lets~~ see how it tiles:		If you doubt that it can be this simple, let's see how it tiles:

	http://koti.welho.com/thonkasa/Roinaa/hextile24.png		http://koti.welho.com/thonkasa/Roinaa/hextile24.png

	Which method to use depends on your requirements. If you need to preserve the original orientation, use method 1. If you need the rotation, or must have the pattern repeated only once per hex, use method 2 (both preserving orientation and having 1 repeat/hex is not possible with these methods). If the orientation and repeat number don't matter, the appropriate method depends on the desired size of the pattern: method 2 reproduces the pattern twice as big as method 1.		Which method to use depends on your requirements. If you need to preserve the original orientation, use method 1. If you need the rotation, or must have the pattern repeated only once per hex, use method 2 (both preserving orientation and having 1 repeat/hex is not possible with these methods). If the orientation and repeat number don't matter, the appropriate method depends on the desired size of the pattern: method 2 reproduces the pattern twice as big as method 1.

Sgt. Groovy: /* Method 2: Rotation */

2007-10-02T19:19:18Z

Method 2: Rotation

← Older revision		Revision as of 19:19, 2 October 2007
Line 40:		Line 40:
	http://koti.welho.com/thonkasa/Roinaa/hextile22.png		http://koti.welho.com/thonkasa/Roinaa/hextile22.png

	Then cut the hex shape out ~~in the middle~~, and that's it (notice that the pattern appears only once in the hex):		Then cut the hex shape out (anywhere where it doesn't include transparent pixels), and that's it (notice that the pattern appears only once in the hex):

	http://koti.welho.com/thonkasa/Roinaa/hextile23.png		http://koti.welho.com/thonkasa/Roinaa/hextile23.png

Sgt. Groovy: Another method added

2007-10-02T19:12:17Z

Another method added

@@ Line 1: / Line 1: @@
 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:
+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. There are two methods to do it, the one that is better depending on the circumstances.
 http://koti.welho.com/thonkasa/Roinaa/hextile1.png
@@ Line 23: / Line 27: @@
 # The size and aspect ratio of the original texture are not preserved (unless it is already 54x36 pixels), 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).
 # 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).