0

The problem is how to create hex tiles for a game so that they can be reliably converted into square PNG files and displayed as sprites in Unity. All the tiles are positioned on a hex grid, possibly after rotating N*60 degrees. A path drawn on one tile needs to perfectly align with the path on another next to it.

I'm a dev, not a graphic designer, but I get by. I have used Inkscape to create tiles drawn as spline curves and polygons and manually aligned against an axonometric grid. In Unity the drawing gets sliced on pixel boundaries. The overall effect is kind of OK, but with small glitches at just about every boundary.

I think I'm missing something important, although I'm not sure it's Inkscape-specific.

You can see how it looks here: http://www.polyomino.com/2019/05/24/getting-the-tiles-to-line-up/.

In response:

  • yes, my current method relies on stroke with no fill
  • I have many tiles on a single sheet, because Unity (like many games platforms) makes that easy, with slicing on import
  • the tiles are white on transparent to make it easy to combine and colour paths at runtime.

Based on the accepted answer, what I finally finished up doing was:

Improve this question
6
  • Looks like nothing is lining up because the underlying cut up pieces of pattern are poking outside the polygons. How exactly are you constructing these? Aren't you using clipping paths?
    – Billy Kerr
    May 24, 2019 at 9:03
  • have you tried using the snapping tools? tavmjong.free.fr/INKSCAPE/MANUAL/html/Snapping.html
    – Pinback
    May 24, 2019 at 18:09
  • @BillyKerr: They poke outside because currently I'm scaling up slightly, to improve the appearance. No, I have no idea why I this would be a good place to use clipping paths. They're just simple objects, that are really hard to get to line up.
    – david.pfx
    May 25, 2019 at 5:19
  • @Pinback: Yes, but often that just makes it worse by snapping to the wrong place. The axonometric grid seems to be a bit weird that way.
    – david.pfx
    May 25, 2019 at 5:21
  • Snapping has more to offer than Snap to Grid- in your case try experimenting with Snap to Path or Snap to Guides. This last requires you to draw the guides - inkscapetutorials.wordpress.com/2014/04/25/…
    – Pinback
    May 25, 2019 at 18:33

1 Answer 1

Reset to default
3

Inkscape's strokes make your case problematic. They are half inside and half outside a closed path. In addition the ends of your overlay strokes do not fit the border of the underlying hexagon.

A workaround: Have no strokes, only filled areas. They snap perfectly with no grid, have only snap to cusp nodes = ON.

enter image description here

The overlay curves can be converted to paths (=Stroke to Path), intersected with the underlying hexagons and grouped with the copies of the hexagons. Only make enough duplicates of the overlays. Every intersection needs an own.

Solving this is possible with no problems:

enter image description here

enter image description here

Here a piece of overlay shape in magenta hexagon is selected via the objects panel.

Nothing prevents you to have hexagons with apparent strokes. You can make the visible hexagons - those which are grouped with the sliced curves - by subtracting a smaller hexagon from a bigger one with Path > Difference.

enter image description here

Unfortunately I'm not a game programmer, so this answer skips, what Unity does.

Improve this answer
2
  • Many thanks. That looks like a credible answer, but it's going to take me some time to try it out. See edits.
    – david.pfx
    May 25, 2019 at 5:11
  • This answer was not exactly what I needed, but it gave me enough to solve the problem. Thanks.
    – david.pfx
    May 27, 2019 at 11:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.