Sprite döşememin iyi karolandığını nasıl hızlı bir şekilde kontrol edebilirim?


47

Güzel kiremit tilemap sprite yaratmaya çalışıyorum, ama kiremit ne kadar iyi olduğunu kontrol hantal.

İdeal olarak, böyle bir mizanpajı gösteren bir resim editörüne sahip olmak isterdim, bu yüzden manuel bir kontrol olmadan iyi döşenip döşenmediğini görebiliyordum:

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

Hangi programlar bunu yapabilir veya bunu nasıl kolaylaştırabilirim?


Sanırım doku döşemesinin sorunsuz çalışıp çalışmadığını kontrol etmekten bahsediyorsunuz. Ve en azından bildiğim kadarıyla yapış yapış yapmam gereken bir harita ya da böyle bir işlevi var. ama düzenlerken değil. Aksi taktirde, wally bu özelliğe sahiptir, ancak kahrolası eskidir. (yarı ömür doku editörü)
v.oddou 16:15

1
amnoid.de/ddsview , birçok görüntü formatının döşenmiş önizlemesini destekler. Ve hangi resim düzenleyiciyi kullanıyorsunuz? Bir görüntüyü döşemenin bir yolu olduğuna eminim.
yılan5 16:15

1
Hangi editörü kullanıyorsunuz? Photoshops akıllı objelerini kullanarak bir şeyi bir araya getirmek mümkün olmalıdır
PlasmaHH

4
Masaüstü arkaplanınız olarak ayarlayın ve "Döşe" seçeneğini seçin.
user14146 16:15

"Bunu hangi programlar yapabilir?" Krita bunu yapabilir ve
sarılıyken bile nefes almanıza

Yanıtlar:


67

İşte herhangi bir görüntü düzenleyici ile çalışan hızlı bir kesmek.

Döşeme resminiz çağrılıyorsa tile.png, index.htmlşunun gibi bir şey oluşturun :

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

(Daha basit bir alternatif için @Deryllium teşekkürler !)

Bunu bir web tarayıcısında aç.

Görüntünün ne kadar iyi karolandığını kontrol etmeniz gerektiğinde, onu kaydedin ve web tarayıcısını yenileyin.

iş akışı

GIMP 'in ihracat kısayolu Ctrleve Krom ' ın yenileme kısa yoldur Ctrlr. eVe rbu oldukça hızlı yapmaktır böylece, bir QWERTY konusunda bitişiktir.


10
Çok yaratıcı! Ayrıca HTML'yi daha basit hale getirerek<body style="background: url(tile.jpg) repeat 0 0;">
driima 16:15

15
Ayrıca, sayfanın her 2 saniyede bir otomatik yüklenmesini sağlamak için <body> 'den hemen önce <header> <meta http-equiv = "Refresh" content = "2"> </header> ekleyebilirsiniz.
Shivan Dragon

7
Veya, eğer bu kadar eğimli olsaydınız, daha derine inebilir ve grunt veya gulp gibi bir aracı değişiklikler yapabilir ve bunları yaparken tarayıcıyı canlı olarak yeniden yükleyebilirsiniz.
Seiyria,

1
@Kroltan ddsview'in özel bir "döşeme görünümü" olduğu bildirildi. GIMP'in taşma doldurma aracı, aynı zamanda test etmek için hızlı olan panodan okuyabilir.
Anko,

2
@Anko Doğru, ancak amacım gerçek, düzenlenebilir ve tamamen işlevsel bir döşemeli görünüm içindi. Bu araçlar daha hızlı hale getirir, ancak kesintisiz bir işlem yapmaz (kasıtsız yumruklama).
Kroltan

18

Photoshop veya GIMP'yi kullanarak ofset komutunu kullanabilirsiniz. 100x100 piksel boyutunda bir görüntü söylemek için çalışıyorsanız, görüntüyü her yönden 50 piksele kadar dengeleyebilirsiniz ve görüntünün karolarının birlikte görüneceği yerde görüntünün ortasında görüntülenir.

Bu sayfa nasıl çalıştığını gösteren ekran görüntülerine sahiptir: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html


2
Ek bir avantaj olarak, artık hızlı ve kolay düzenleme için dikiş görüntünün tam ortasında!
Cort Ammon

17

Krita, fayans dokularını düzenlemenizi ve değişiklik güncellemelerini canlı olarak görmenizi sağlayan bir özelliğe sahiptir. W tuşuna basarak, etrafını sarmayı sağlar, bu da bunu mümkün kılar. Bu özelliğin bir youtube videosunu burada bulabilirsiniz . (özellik 0: 12'de etkindir)


2
Bu daha fazla yükseltmeleri hak ediyor. Tek bir tuşa basarak tam olarak ne istendiğini yapan bir yazılım. Daha da iyisi, resminizin de dolanmasına izin veriyor - bu da kesinlikle kesinlikle kesintisiz dokular yapan herkese yardımcı olacak. Ayrıca Krita'nın ücretsiz olduğunu ve indirilebilir olduğunu da belirtmelisiniz; krita.org/download/krita-desktop
darkflame

1
Birisi aynı soruyu sahipse 1, bu gördükleri gereken ilk cevaptır. "Hangi programlar bunu yapabilir?" "Krita".
Jibb Smart

6

Döşemenizi masaüstünüzde döşenmiş bir duvar kağıdı yapın. Süper kolay ve kodlama veya yabancı yazılım yok.


2
1 Bu işler olağanüstü iyi olan Linux üzerinde inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; doneçalışan. Sadece resmi kaydedin; duvar kağıdı hemen değişir. Ayrıca ek olarak belirtilen birden fazla dosyayla da çalışır tile.png. Tam ekrana ihtiyacım olmadığında bu kayalar.
Anko

5

Birden fazla görüntüyü test etmek istiyorsanız, Anko'nun cevabını temel alan mini bir web uygulamasına sahip olmak yardımcı olabilir. Bu, görüntüleri art arda test etmenize izin vermek için sayfaya sürüklemenizi sağlar:

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>


1
Başka bir sezgisel cevap. Bunu kullanarak bir krom uzantısı oluşturabilir veya bir Node.js / Electron masaüstü uygulaması oluşturabilirsiniz.
driima

0

GIMP'de: Filtreler -> Harita -> Döşe. Üniteyi "%" olarak değiştirirseniz ve ardından boyutlar için% 300 x 300% girerseniz, görüntünüzün 3x3 boyutuna sahip olursunuz, böylece dört kenarı da kolayca görebilirsiniz. Bir kez yaptıktan sonra, elbette başka filtreler kullanmadığınız sürece, değişiklik yaptıktan sonra döşemeyi yeniden yapmak için Ctrl-F (son filtreyi tekrarla) komutunu kullanabilirsiniz.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.