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

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:

[dropcap style=”dark”]1[/dropcap]Take the texture you want to use for the tile. This texture need not be seamless.

[dropcap style=”dark”]2[/dropcap]Apply a hex mask such as the following to the texture:

mask mask2

This will give you tiles that look like this:

grass_hex sand_hex water_hex

[dropcap style=”dark”]3[/dropcap]In your game, let the tiles overlap slightly.

That’s it!

Here is how this looks for the three tiles above:

grass

sand

water

In the images above, I rotated the tiles randomly so that repetitive patterns are less obvious.

You can color your tiles procedurally to add a bit of depth:

sand_colored

The tiles can also be used in the same image:

all

You can combine the two effects as well:

full

full_zoomed_out

The problem with adjusting tile colors or using different tiles is that the resulting shapes are irregular, but not irregular enough that you can get away with it.

One way to get around this problem is to make your mask have jagged edges, so that the the overall shapes are irregular enough not to be displeasing.

blend_smooth2

screen_10

This technique works well when there are regions of identical tiles. If we adjust the colours as before, this technique is not so effective.

screen_11

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 that can be rotated?  In this post, I describe one way of making a...
  2. How do I make a seamless hex tile?  In this post I give two methods for making hexagonal...
  3. How do I make a seamless parallelogram tile?  This post explains how you could make a seamless tile...
  4. Designing tiles for a triangular maze  We are updating some of our examples with better art....
  • Permalink
  • Posted: 19 October 2013
  • Tags: art tutorial, hexagonal tile, seamless tile, tiles
  • Comments: 1
  • Author: Herman Tulleken

Comments (1)

  1. Pingback: Tiles | Pearltrees

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