Jak mogę szybko sprawdzić, czy moje duszki dobrze się układają?

47

Staram się tworzyć sprite'y tilemap, które ładnie układają kafelki, ale sprawdzanie, jak dobrze kafelki są naprawdę kłopotliwe.

Idealnie chciałbym mieć edytor obrazów, który pokazuje taki układ, więc mógłbym sprawdzić, czy układa się dobrze bez kafelków:

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

Jakie programy mogą to zrobić lub w jaki sposób mogę to ułatwić?

sprites tilemap tools workflow użytkownik73424
źródło
Myślę, że mówisz o sprawdzeniu, czy kafelki tekstur działają płynnie. I gimp przynajmniej o mojej wiedzy ma render-> map lub coś, co to robi. ale nie podczas edycji. W przeciwnym razie wally ma tę funkcję, ale jest cholernie stara. (edytor tekstur okresu półtrwania)
.oddou
1
amnoid.de/ddsview obsługuje podgląd wielu formatów obrazów w kafelkach. A którego edytora obrazów używasz? Jestem pewien, że ma jakiś sposób na kafelkowanie obrazu.
snake5
1
Z jakiego edytora korzystasz? Powinno być możliwe
zhakowanie
4
Ustaw go jako tło pulpitu i wybierz opcję „Kafelek”.
user14146,
„Jakie programy mogą to zrobić” Krita może to zrobić, a nawet pozwala ci dyszeć podczas pakowania (patrz odpowiedź poniżej)
darkflame

Odpowiedzi:

67

Oto szybki hack, który działa z dowolnym edytorem obrazów.

Jeśli twój obraz kafelka jest nazywany tile.png, utwórz index.htmlpodobny:

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

(Dzięki @Deryllium za prostszą alternatywę!)

Otwórz to w przeglądarce internetowej.

Ilekroć musisz sprawdzić, jak dobrze kafelki obrazu, zapisz go i odśwież przeglądarkę internetową.

przepływ pracy

GIMP jest eksport skrót jest Ctrlei Chrom 's odświeżania skrót jest Ctrlr. eI rsąsiadują na QWERTY, więc jest to dość szybko zrobić.

Anko
źródło
10
Bardzo pomysłowy! Możesz także uprościć HTML, używając<body style="background: url(tile.jpg) repeat 0 0;">
driima,
15
Możesz także dodać <header> <meta http-equiv = "Refresh" content = "2"> </header> tuż przed <body>, aby strona ładowała się automatycznie co 2 sekundy.
Shivan Dragon,
7
Lub, jeśli jesteś tak skłonny, możesz pójść głębiej i skonfigurować narzędzie, takie jak chrząknięcie lub przełknięcie, aby obserwować zmiany i ponownie ładować przeglądarkę na żywo po ich wprowadzeniu.
Seiyria
1
@Kroltan ddsview podobno ma dedykowany „widok kafelków”. Narzędzie wypełniania zalewania GIMPa może czytać ze schowka, który można również szybko przetestować za pomocą.
Anko
2
@Anko Prawda, ale miałem na myśli rzeczywisty, edytowalny iw pełni funkcjonalny widok kafelkowy. Narzędzia te przyspieszają, ale nie są procesem bezproblemowym (niezamierzone kalambur).
Kroltan
18

Korzystając z Photoshopa lub GIMP, możesz użyć polecenia offset. Jeśli pracujesz na przykład dla obrazu o wymiarach 100 x 100 pikseli, możesz go przesunąć o 50 pikseli w każdym kierunku, a szew, w którym kafelki obrazu będą razem wyświetlane na środku obrazu.

Ta strona zawiera zrzuty ekranu pokazujące, jak to działa: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

fabspro
źródło
2
Jako dodatkowy bonus, teraz szew znajduje się dokładnie na środku obrazu, dla szybkiej i łatwej edycji!
Cort Ammon,
17

Krita ma funkcję, która umożliwia edycję tekstur kafelków i sprawdzanie zmian na żywo. Naciśnięcie klawisza W włącza tryb owijania, co umożliwia. Film z YouTube o tej funkcji w akcji jest dostępny tutaj . (funkcja jest włączona o 0:12)

KritaUser00402050
źródło
2
To zasługuje na więcej pochwał. To trochę oprogramowania, które robi dokładnie to, o co prosi się po naciśnięciu jednego przycisku. Co więcej, pozwala również na zawijanie obrazu - co prawie na pewno pomoże każdemu, kto tworzy jednolite tekstury. Należy również zauważyć, że Krita jest bezpłatny i można go pobrać; krita.org/download/krita-desktop
darkflame
1
+1 Jeśli ktoś ma takie samo pytanie, to jest pierwsza odpowiedź powinna widzą. „Jakie programy mogą to zrobić?” „Krita”.
Jibb Smart,
6

Ułóż kafelkową tapetę kafelkową na pulpicie. Super łatwe i bez kodowania lub obce oprogramowanie.

Jam Roll
źródło
2
+1 Działa to spektakularnie dobrze w systemie Linux z inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; doneuruchomionym systemem. Po prostu zapisz obraz; tapeta zmienia się natychmiast. Działa również z wieloma plikami określonymi dodatkowo tile.png. Kiedy nie potrzebuję pełnego ekranu, to się kołysze.
Anko
5

Jeśli chcesz przetestować wiele obrazów, może pomóc mieć mini-aplikacja internetowa oparta na odpowiedzi Anko. Umożliwi to przeciąganie obrazów na stronę i ich szybkie testowanie:

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>
Rozwiń fragment kodu

aebabis
źródło
1
Kolejna bardzo intuicyjna odpowiedź. Za pomocą tego możesz utworzyć rozszerzenie chrome lub utworzyć aplikację komputerową Node.js / Electron.
driima
0

W GIMP: Filtry -> Mapa -> Płytka. Jeśli zmienisz jednostkę na „%”, a następnie wprowadzisz wymiary 300% x 300%, otrzymasz obraz 3 x 3, który pozwala łatwo zobaczyć wszystkie cztery krawędzie. Po zrobieniu tego raz możesz użyć Ctrl-F (powtórz ostatni filtr), aby ponownie wykonać kafelkowanie po dokonaniu modyfikacji, o ile oczywiście nie używasz żadnych innych filtrów.

Hobbs
źródło