A cheat for seamless hex tiles. Making a seamless hex tile is a lot of work, especially if you want to rotate your tiles.
In some cases you can get away with letting the engine do some of the work. Here is the strategy: 1Take the texture you want to use for the tile. This texture need not be seamless. 2Apply a hex mask such as the following to the texture: This will give you tiles that look like this: 3In your game, let the tiles overlap slightly. That’s it! How do I make a seamless hex tile that can be rotated? In this post, I describe one way of making a hex tile that can be tiled seamlessly, even when the tiles are rotated by (different) multiples of 60 degrees.
This is a quick-and-dirty method, and works well only for certain types of tiles. 1Make a seamless hex tile as explained in How do I make a seamless hex-tile? But do not perform the final crop. If you used the second method, you will have a diamond-shaped image, like this: 2Duplicate the layer until you have six. (I usually duplicate the top layer, turn it by 60 degrees, and repeat until I have 6 layers). 3Set the layer opacities as follows: This will make all 6 layers equally visible. 4Flatten the layers.5Crop the hexagon from the center of the image. Enhancements Other transparency modes You can use other transparency modes, but you have to make sure that each layer has equal weight in the final composite. Putting in a central feature. Turning Square Tiles into Hex - Wesnoth. 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. There are two methods to do it, the one that is better depending on the circumstances. Getting More out of Seamless Tiles. We have used tiles to decorate our living spaces for more than 4000 years . Tiles have several properties that make them attractive for use: they can be mass-produced; they are easy to build with (because of their geometric properties); and combinations of tiles lead to a huge number of decorative options. Early game makers recognised that these advantages of tiles also apply to tiles in computer graphics, and using tiles was (and still is) a popular way to make game graphics.
In computer terms, here are the advantages of a tile system: it is efficient, it is easy to program, and a few tiles give you a huge number of possible game maps. The last point is really the one that makes tiles shine, and it really comes to its full with procedural content generation. But tiled games can also suffer from some defects: the geometric regularity of tiles might be less appealing than organic design; and the repetition can be jarring. How do I make a seamless hex tile? In this post I give two methods for making hexagonal tiles that will tile seamlessly.
The methods use any method that can be used to make rectangular tiles that will tile seamlessly, such as the standard filters that come with Photoshop or Gimp. I adapted the methods below from Turning Square Tiles into Hex. With the original methods, the textures are stretched or rotated in the final result. Here, I added steps to correct this. The original methods was also given for hex tiles that fit in a square; the methods below are for regular hex tiles. I give two examples for each method. Tips When you use one of these methods for the first time, use an image like the second one (and use the size 1024×1024) to go through all the steps. Method 1 Take an image you want to use as base. Let’s assume you want to make a flat hex tile with height S, and that your texture is S × S. 1Scale the image to size S × √3S, in other words, scale the width by 173%. 2Crop a S x S square anywhere from the image. How do I make a seamless parallelogram tile? This post explains how you could make a seamless tile in the shape of any parallelogram.
You can use this method for creating seamless isometric or diamond tiles, and even triangular tiles (just cut the parallelogram along a diagonal). Start with a base image larger than the parallelogram shape you want to create. In the steps below I indicated which programs I use to do the step, but of course you can use any program that can do the desired operations. I chose the second image so that it is easier to see what is happening with the texture. 1(Inkscape) Crop the parallelogram shape from your image.2(Inkscape) Shear the parallelogram into a rectangle.