Gamelogic
  • Home
  • Blog
  • Tools
    • Grids 2 (for Unity)
      • Features
      • Documentation
    • Grids 1 (Legacy, for Unity)
      • 30 games in 30 days
      • Features
      • Tutorials, Documentation, and FAQ
      • Games made with Grids for Unity
      • Examples
      • What is new?
      • Grid Prototypes and Previews
      • Buy
    • Extensions
    • Colors
      • Features
      • Documentation and tutorials
      • Buy
    • Words
      • Features
      • Documentation
      • Buy
    • Abstract Strategy
      • Features
      • Documentation and tutorials
      • Examples
      • Buy
    • Match
      • Features
    • Grids (for GameMaker)
      • 30 games in 30 days
      • Features
      • Documentation
      • Buy
  • Buy
  • Articles
  • Support
    • Knowledge Base
    • Email Support
  • About
    • Meet our team

Blog

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:

bricks_diamond

2Duplicate the layer until you have six. Rotate the layers as follows:

6 (Top) 300
5 240
4 180
3 120
2 60
1 (Bottom) 0

bricks_star

(I usually duplicate the top layer, turn it by 60 degrees, and repeat until I have 6 layers).

3Set the layer opacities as follows:

6 (Top) 16.6%
5 20%
4 25%
3 33.3%
2 50%
1 (Bottom) 100%

This will make all 6 layers equally visible.

bricks_star_transparent

4Flatten the layers.

5Crop the hexagon from the center of the image. If you used Method 2 for creating the seamless hex tile, your hex will have half the height of the diamond you started with.

bricks_seamless

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. For example, if you use addition, you need not set the opacities. (You would probably make the layers much darker, to prevent oversaturation). Here is an informal guide to blending layers for this purpose:

  • Normal, Dissolve: Opacities from bottom to top: 100%, 50%, 33.3%, 25%, 20%, 16.6%.
  • Addition, Lighten, Screen: All opacities 100%; make images darker.
  • Multiplication, Darken: All opacities100%; make images lighter.
  • Difference, Exclusion: All opacities 100%. (The result does not resemble the original at all).
addition ligten darken
Addition Lighten Darken

Putting in a central feature

Apply a circular gradient mask to the original texture, and overlay it over the seamless tile.

mask feature feature_alpha
Mask Feature Feature combined with seamless tile.

 

You can also use this with tiles made with a different blending scheme:

feature_addition feature_lighten feature_darken
Feature combined with seamless addition tile. Feature combined with seamless lighten tile. Feature combined with seamless darken tile.

 

Here is how this looks tiled:

tiled

Share this:

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Pinterest (Opens in new window)

Related

  1. How do I make a seamless hex tile?  In this post I give two methods for making hexagonal...
  2. How do I make a seamless parallelogram tile?  This post explains how you could make a seamless tile...
  3. A cheat for seamless hex tiles  Making a seamless hex tile is a lot of work,...
  4. Layered Grids  We have used grids in 3D space in a variety...
  • Permalink
  • Posted: 12 October 2013
  • Tags: art tutorial, hex tile, hexagonal tile, seamless tile
  • Comments: 2
  • Author: Herman Tulleken

Comments (2)

  1. Pingback: Tiles | Pearltrees

  2. Pingback: A cheat for seamless hex tiles | Gamelogic

Comments are closed.

Recent Posts
  • Tool Documentation Overhaul
  • What is new in Grids Pro 2.3.5
  • What is new in Grids Pro 2.3.2
  • What is new in Abstract Strategy 2.1.1
  • What is new in Words 2.0.2
Categories
  • 30 Games in 30 Days
  • AbstractStrategy
  • Aside
  • Colors
  • Example
  • Extensions
  • General
  • Grids
  • Grids 2
  • Previews
  • Programming
  • Social Media
  • Uncategorized
  • Words
Follow us on Twitter
My Tweets
Meta
  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
  • Home
  • Features
  • Blog
  • About
  • 14 Eglin Road, Sunninghill, Johannesburg, South Africa
  • support@gamelogic.co.za
Stay Connected
  • Facebook
  • Google
  • Linkedin
  • Rss
  • Twitter
  • Gamelogic © 2013