Bagaimana saya bisa dengan cepat memeriksa apakah ubin sprite saya baik?

47

Saya mencoba membuat sprite tilemap ubin itu dengan baik, tetapi memeriksa seberapa baik ubin itu benar-benar rumit.

Idealnya, saya ingin memiliki editor gambar yang menunjukkan tata letak seperti ini, jadi saya bisa melihat apakah itu baik tanpa pemeriksaan manual:

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

Program apa yang bisa melakukan ini, atau bagaimana saya bisa membuatnya lebih mudah?

sprites tilemap tools workflow pengguna73424
sumber
Saya pikir Anda sedang berbicara tentang memeriksa apakah tekstur ubin berfungsi dengan baik. Dan gimp setidaknya setahu saya memiliki render-> peta atau fungsi sesuatu yang melakukan itu. tetapi tidak saat mengedit. Kalau tidak, wally memiliki fitur ini, tetapi sangat tua. (editor tekstur setengah hidup)
v.oddou
1
amnoid.de/ddsview mendukung pratinjau ubin dari banyak format gambar. Dan editor gambar mana yang Anda gunakan? Saya yakin ini memiliki beberapa cara untuk memasang gambar.
snake5
1
Editor mana yang Anda gunakan? Seharusnya dimungkinkan untuk meretas sesuatu bersama-sama menggunakan benda pintar Photoshops
PlasmaHH
4
Jadikan itu sebagai latar belakang desktop Anda, dan pilih opsi "Tile".
user14146
"Program apa yang bisa melakukan ini" Krita dapat melakukan ini dan itu bahkan membuat Anda terengah-engah saat dibungkus (lihat jawaban di bawah)
darkflame

Jawaban:

67

Inilah peretasan cepat yang berfungsi dengan editor gambar apa pun.

Jika gambar ubin Anda dipanggil tile.png, buat yang index.htmlseperti ini:

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

(Terima kasih @Deryllium untuk alternatif yang lebih sederhana!)

Buka itu di browser web.

Setiap kali Anda perlu memeriksa seberapa baik ubin gambar, simpan, dan segarkan peramban web.

alur kerja

GIMP 's ekspor shortcut adalah Ctrledan Chromium ' s penyegaran shortcut adalah Ctrlr. The edan rberdekatan pada QWERTY, jadi ini cukup cepat untuk dilakukan.

Anko
sumber
10
Sangat inventif! Anda juga dapat membuat HTML lebih sederhana dengan menggunakan<body style="background: url(tile.jpg) repeat 0 0;">
driima
15
Anda juga dapat menambahkan <header> <meta http-equiv = "Refresh" content = "2"> </header> tepat sebelum <body> untuk membuat halaman memuat secara otomatis setiap 2 detik.
Shivan Dragon
7
Atau, jika Anda cenderung, Anda bisa masuk lebih dalam dan mengatur alat seperti mendengus atau menelan untuk melihat perubahan dan langsung memuat ulang browser saat Anda membuatnya.
Seiyria
1
@Kroltan ddsview dilaporkan memiliki "tampilan ubin" khusus. Alat mengisi banjir GIMP dapat membaca dari clipboard, yang juga cepat untuk diuji dengannya.
Anko
2
@Anko Benar, tetapi poin saya adalah untuk tampilan ubin yang sebenarnya, dapat diedit, dan berfungsi penuh. Alat-alat ini membuatnya lebih cepat, tetapi bukan proses yang mulus (permainan kata-kata yang tidak disengaja).
Kroltan
18

Menggunakan photoshop atau GIMP, Anda dapat menggunakan perintah offset. Jika Anda bekerja untuk mengatakan gambar 100x100px, Anda dapat mengimbanginya 50px di setiap arah, dan jahitan tempat ubin gambar bersama akan ditampilkan di tengah gambar.

Halaman ini memiliki tangkapan layar yang menunjukkan cara kerjanya: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

fabspro
sumber
2
Sebagai bonus tambahan, sekarang jahitannya tepat di tengah-tengah gambar, untuk mengedit cepat dan mudah!
Cort Ammon
17

Krita memiliki fitur yang memungkinkan Anda untuk mengedit tekstur ubin dan melihat perubahan pembaruan secara langsung. Dengan menekan tombol W, ini memungkinkan membungkus mode, yang memungkinkan ini terjadi. Video youtube dari fitur ini dalam aksi tersedia di sini . (fitur diaktifkan pada 0:12)

KritaUser00402050
sumber
2
Ini layak mendapatkan lebih banyak upvotes. Ini sedikit perangkat lunak yang melakukan persis apa yang diminta dalam satu tombol, tekan. Lebih baik lagi, ini juga memungkinkan lukisan Anda melilit juga - yang hampir pasti akan membantu siapa pun membuat tekstur yang mulus. Anda juga harus menunjukkan bahwa Krita gratis dan dapat diunduh; krita.org/download/krita-desktop
darkflame
1
+1 Jika seseorang memiliki pertanyaan yang sama, ini adalah jawaban pertama yang harus mereka lihat. "Program apa yang bisa melakukan ini?" "Krita".
Jibb Smart
6

Jadikan ubin Anda sebagai wallpaper ubin pada desktop Anda. Sangat mudah dan tidak ada pengkodean atau perangkat lunak asing.

Jam Roll
sumber
2
+1 Ini bekerja dengan sangat baik di Linux dengan inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; donemenjalankan. Simpan saja gambarnya; wallpaper segera berubah. Juga berfungsi dengan beberapa file yang ditentukan selain tile.png. Ketika saya tidak perlu layar penuh, ini batu.
Anko
5

Jika Anda ingin menguji beberapa gambar, mungkin ada baiknya menggunakan webapp mini berdasarkan jawaban Anko. Ini akan membuat Anda menarik gambar ke halaman untuk mengujinya secara berurutan:

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>
Luaskan cuplikan

aebabis
sumber
1
Jawaban lain yang sangat intuitif. Anda dapat membuat ekstensi chrome atau membuat aplikasi desktop Node.js / Electron menggunakan ini.
driima
0

Di GIMP: Filter -> Map -> Tile. Jika Anda mengubah unit menjadi "%" dan kemudian memasukkan 300% x 300% untuk dimensi, Anda akan mendapatkan ubin 3x3 gambar Anda, yang memungkinkan Anda melihat keempat tepi dengan mudah. Setelah melakukannya sekali Anda dapat menggunakan Ctrl-F (ulangi filter terakhir) untuk melakukan kembali pemasangan setelah melakukan modifikasi, selama Anda tidak menggunakan filter lain tentu saja.

hobbs
sumber