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 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.

grass color0
1(Inkscape) Crop the parallelogram shape from your image.

grass1 color1
2(Inkscape) Shear the parallelogram into a rectangle. Be careful not to stretch the image: only shear. Do not worry if you are not 100% exact; this will be undetectable in the final result. This step distorts your texture; following steps will correct this.

grass2 color2
3(Gimp) Make the image rect-tileable using any standard method. Make sure that the size of the resulting rectangle is the same as it was before this step. If your filter or algorithm reduces the image size, make sure it does so in the same width-to-height ratio as the original rectangle. That way, you can scale it back up to the correct size without distortion.

grass3 color3
4(Inkscape) Shear the rectangular image back to the desired parallelogram. I usually just zoom in and do it by eye. In Inkscape, I align the centers of the rectangle and the parallelogram shape. Then as I shear the rectangle, the bounding box aligns with the corners of the parallelogram when the shearing is the right amount.

grass4 color4

And now you have a seamlessly tileable image:

grass_res
color_res

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 hex tile that can be rotated?  In this post, I describe one way of making a...
  3. A cheat for seamless hex tiles  Making a seamless hex tile is a lot of work,...
  4. A simple path-finding example  This example shows how to use the path-finding algorithm that...
  • Permalink
  • Posted: 11 August 2013
  • Tags: art tutorial, parallelogram tile, seamless tile, tri tile, triangular tile
  • 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