Wie kann ich schnell überprüfen, ob meine Sprite-Kacheln gut sind?

47

Ich versuche, Tilemap-Sprites zu erstellen, die gut zusammenpassen, aber zu prüfen, wie gut sie zusammenpassen, ist wirklich umständlich.

Idealerweise hätte ich gerne einen Bildeditor, der ein Layout wie dieses anzeigt, damit ich sehen kann, ob es ohne manuelle Überprüfung gut kachelt:

     [img]
[img][img][img]
     [img]

Welche Programme können dies tun oder wie kann ich dies auf andere Weise vereinfachen?

sprites tilemap tools workflow user73424
quelle
Ich denke, Sie sprechen über die Überprüfung, ob die Textur-Kacheln nahtlos funktionieren. Und gimp hat zumindest meines wissens eine render-> map oder eine funktion die das macht. aber nicht beim bearbeiten. Ansonsten hat Wally dieses Feature, aber es ist verdammt alt. (Half Life Texture Editor)
v.oddou
1
amnoid.de/ddsview unterstützt die gekachelte Vorschau vieler Bildformate. Und welchen Bildeditor verwenden Sie? Ich bin mir sicher, dass es eine Möglichkeit gibt, ein Bild zu kacheln.
Schlange5
1
Welchen Editor verwenden Sie? Mit Photoshops Smart Objects sollte es möglich sein, etwas zusammen zu hacken
PlasmaHH 16.10.15
4
Stellen Sie ihn als Desktop-Hintergrund ein und wählen Sie die Option "Kacheln".
User14146
"Welche Programme können das?" Krita kann das und es lässt dich sogar hecheln, während du eingewickelt bist (siehe Antwort unten)
darkflame

Antworten:

67

Hier ist ein kurzer Hack, der mit jedem Bildeditor funktioniert.

Wenn Ihr Kachelbild aufgerufen wird tile.png, erstellen Sie Folgendes index.html:

<body style="background:url(tile.png) repeat 0 0"></body>

(Danke @Deryllium für die einfachere Alternative!)

Öffnen Sie das in einem Webbrowser.

Wann immer Sie überprüfen müssen, wie gut die Bildkacheln sind, speichern Sie sie und aktualisieren Sie den Webbrowser.

der Workflow

Die Exportverknüpfung von GIMP lautet Ctrleund die Aktualisierungsverknüpfung von Chromium lautet . Die und befinden sich nebeneinander auf einer QWERTY, daher ist dies ziemlich schnell erledigt.Ctrlrer

Anko
quelle
10
Sehr erfinderisch! Sie können HTML auch einfacher gestalten, indem Sie<body style="background: url(tile.jpg) repeat 0 0;">
driima 16.10.15
15
Sie können auch <header> <meta http-equiv = "Refresh" content = "2"> </ header> direkt vor dem <body> hinzufügen, damit die Seite alle 2 Sekunden automatisch geladen wird.
Shivan Dragon
7
Wenn Sie so geneigt wären, könnten Sie tiefer gehen und ein Tool wie Grunzen oder Schlucken einrichten, um nach Änderungen zu suchen und den Browser live neu zu laden, wenn Sie sie vornehmen.
Seiyria
1
@Kroltan ddsview hat angeblich eine eigene " Kachelansicht ". Das Füllwerkzeug von GIMP kann aus der Zwischenablage lesen, womit man auch schnell testen kann.
Anko
2
@Anko Stimmt, aber mein Punkt war für eine tatsächliche, bearbeitbare und voll funktionsfähige gekachelte Ansicht. Diese Tools machen es schneller, aber kein nahtloser Prozess (unbeabsichtigtes Wortspiel).
Kroltan
18

Mit Photoshop oder GIMP können Sie den Befehl offset verwenden. Wenn Sie beispielsweise für ein 100x100px-Bild arbeiten, können Sie es um 50px in jede Richtung versetzen, und die Naht, in der die Bildkacheln zusammengefügt sind, wird in der Mitte des Bildes angezeigt.

Diese Seite enthält Screenshots, die zeigen, wie dies funktioniert: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

fabspro
quelle
2
Als zusätzlichen Bonus befindet sich die Naht jetzt genau in der Mitte des Bildes, um eine schnelle und einfache Bearbeitung zu ermöglichen!
Cort Ammon
17

Krita verfügt über eine Funktion, mit der Sie Kacheltexturen bearbeiten und die Änderungen live verfolgen können. Durch Drücken der W-Taste wird der Wrap-Around-Modus aktiviert, was dies ermöglicht. Ein YouTube-Video zu dieser Funktion in Aktion finden Sie hier . (Funktion ist um 0:12 aktiviert)

KritaUser00402050
quelle
2
Dies verdient mehr Gegenstimmen. Es ist ein bisschen Software, die genau das tut, was mit einem Tastendruck verlangt wird. Besser noch, es lässt Ihr Bild auch herumlaufen - was mit ziemlicher Sicherheit jedem helfen wird, nahtlose Texturen zu erstellen. Sie sollten auch darauf hinweisen, dass Krita kostenlos ist und heruntergeladen werden kann; krita.org/download/krita-desktop
darkflame
1
+1 Wenn jemand die gleiche Frage hat, ist dies die erste Antwort, die er sehen sollte. "Welche Programme können das?" "Krita".
Jibb Smart
6

Machen Sie aus Ihrer Kachel ein gekacheltes Hintergrundbild auf Ihrem Desktop. Super einfach und ohne Codierung oder fremde Software.

Jam Roll
quelle
2
+1 Das funktioniert unter Linux mit dem Laufen spektakulär gutinotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; done . Speichern Sie einfach das Bild; Das Hintergrundbild ändert sich sofort. Funktioniert auch mit mehreren zusätzlich angegebenen Dateien tile.png. Wenn ich keinen Vollbildmodus brauche, rockt das.
Anko
5

Wenn Sie mehrere Bilder testen möchten, kann es hilfreich sein, eine Mini-Webanwendung zu haben, die auf Ankos Antwort basiert. Auf diese Weise können Sie Bilder auf die Seite ziehen, um sie schnell nacheinander zu testen:

window.addEventListener('load', function() {
  document.body.addEventListener('dragover', function(event) {
    // Accept the drag
    event.preventDefault();
  });

  document.body.addEventListener('drop', function(event) {
    // Prevent page redirect
    event.stopPropagation();
    event.preventDefault();

    var reader = new FileReader();

    reader.onload = function(e) {
      // Set background image
      document.body.style.background = 'url(' + e.target.result + ') repeat 0 0';
      document.body.textContent = ''; // Remove instructions
    };

    // Begin reading file
    reader.readAsDataURL(event.dataTransfer.files[0]);
  });
});
html, body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

html {
  border: 2px dashed black;
}

body {
  padding: 10px;
}
<p>Drag an image here</p>
Erweitern Sie das Snippet

Aebabis
quelle
1
Eine weitere sehr intuitive Antwort. Sie können damit eine Chrome-Erweiterung erstellen oder eine Node.js / Electron-Desktopanwendung erstellen.
Driima
0

In GIMP: Filter -> Karte -> Kacheln. Wenn Sie die Einheit auf "%" ändern und dann 300% x 300% für die Abmessungen eingeben, erhalten Sie eine 3x3-Kachelung Ihres Bildes, mit der Sie alle vier Kanten leicht sehen können. Nachdem Sie dies einmal getan haben, können Sie mit Strg-F (letzten Filter wiederholen) die Kacheln nach den Änderungen wiederholen, sofern Sie natürlich keine anderen Filter verwenden.

hobbs
quelle