So erstellen Sie perfekt ausgerichtete Hex-Kacheln

Das Problem besteht darin, Hex-Kacheln für ein Spiel so zu erstellen, dass sie zuverlässig in quadratische PNG-Dateien konvertiert und in Unity als Sprites angezeigt werden können. Alle Kacheln werden auf einem Hex-Gitter positioniert, möglicherweise nach einer Drehung um N*60 Grad. Ein auf einer Kachel gezeichneter Pfad muss perfekt mit dem Pfad auf einer anderen daneben ausgerichtet sein.

Ich bin Entwickler, kein Grafikdesigner, aber ich komme zurecht. Ich habe Inkscape verwendet, um Kacheln zu erstellen, die als Spline-Kurven und Polygone gezeichnet und manuell an einem axonometrischen Gitter ausgerichtet wurden. In Unity wird die Zeichnung an Pixelgrenzen geschnitten. Der Gesamteffekt ist irgendwie in Ordnung, aber mit kleinen Störungen an fast jeder Grenze.

Ich glaube, ich vermisse etwas Wichtiges, obwohl ich nicht sicher bin, ob es Inkscape-spezifisch ist.

Wie das aussieht, können Sie hier sehen: http://www.polyomino.com/2019/05/24/getting-the-tiles-to-line-up/ .

In Beantwortung:

  • Ja, meine aktuelle Methode basiert auf Strichen ohne Füllung
  • Ich habe viele Kacheln auf einem einzigen Blatt, weil Unity (wie viele Spieleplattformen) das mit Slicing beim Import einfach macht
  • Die Kacheln sind weiß auf transparent, um das Kombinieren und Einfärben von Pfaden zur Laufzeit zu vereinfachen.

Basierend auf der akzeptierten Antwort habe ich schließlich Folgendes getan:

  • Richten Sie eine Reihe von Hex-Schablonen in präzisen Abständen ein
  • Bögen als Bezier-Kurven zeichnen, dann Kurve in Pfad umwandeln
  • Richten Sie ein Ende des Bogens mit einer vertikalen Sechskantkante aus, drehen Sie dann und wiederholen Sie den Vorgang. Mehr Details hier: http://www.polyomino.com/2019/05/27/getting-the-tiles-to-line-up-2/ .
Es sieht so aus, als ob nichts aneinandergereiht ist, weil die darunter liegenden zerschnittenen Musterstücke außerhalb der Polygone stoßen. Wie genau baust du diese auf? Verwenden Sie keine Beschneidungspfade?
hast du es mal mit den Fangwerkzeugen versucht? tavmjong.free.fr/INKSCAPE/MANUAL/html/Snapping.html
@BillyKerr: Sie stoßen nach draußen, weil ich derzeit etwas vergrößere, um das Erscheinungsbild zu verbessern. Nein, ich habe keine Ahnung, warum dies ein guter Ort wäre, um Beschneidungspfade zu verwenden. Sie sind nur einfache Objekte, die wirklich schwer auszurichten sind.
@Pinback: Ja, aber oft macht es das nur noch schlimmer, wenn man an der falschen Stelle einrastet. Das axonometrische Gitter scheint auf diese Weise etwas seltsam zu sein.
Snapping hat mehr zu bieten als Snap to Grid - in Ihrem Fall versuchen Sie, mit Snap to Path oder Snap to Guides zu experimentieren. Letzteres erfordert, dass Sie die Anleitungen zeichnen - inkscapetutorials.wordpress.com/2014/04/25/…
@Pinback: Also weiß ich jetzt mehr über das Einrasten als ich (danke!), Aber es ist immer noch nicht die Antwort. Durch Snapping können Sie Dinge nur schneller erledigen, nicht besser.

Antworten (1)

Die Striche von Inkscape machen Ihren Fall problematisch. Sie befinden sich halb innerhalb und halb außerhalb eines geschlossenen Weges. Außerdem passen die Enden Ihrer Überlagerungsstriche nicht zum Rand des darunter liegenden Sechsecks.

Eine Problemumgehung: Haben Sie keine Striche, nur gefüllte Bereiche. Sie rasten perfekt ohne Gitter ein, haben nur Einrasten an Spitzenknoten = EIN.

Geben Sie hier die Bildbeschreibung ein

Die Überlagerungskurven können in Pfade (=Stroke to Path) umgewandelt, mit den darunter liegenden Sechsecken geschnitten und mit den Kopien der Sechsecke gruppiert werden. Machen Sie nur genügend Duplikate der Overlays. Jede Kreuzung braucht eine eigene.

Die Lösung ist ohne Probleme möglich:

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Hier wird ein Stück Overlay-Form im magentafarbenen Sechseck über das Objektfeld ausgewählt.

Nichts hindert Sie daran, Sechsecke mit scheinbaren Strichen zu haben. Sie können die sichtbaren Sechsecke - diejenigen, die mit den geschnittenen Kurven gruppiert sind - erstellen, indem Sie mit Pfad> Differenz ein kleineres Sechseck von einem größeren subtrahieren.

Geben Sie hier die Bildbeschreibung ein

Leider bin ich kein Spieleprogrammierer, daher überspringt diese Antwort, was Unity tut.

Vielen Dank. Das sieht nach einer glaubwürdigen Antwort aus, aber ich werde einige Zeit brauchen, um es auszuprobieren. Siehe Änderungen.
Diese Antwort war nicht genau das, was ich brauchte, aber sie gab mir genug, um das Problem zu lösen. Danke.
So erstellen Sie perfekt ausgerichtete Hex-Kacheln
AntwortenHierDatenschutz-Bestimmungen1y, 0v