Bagaimana saya bisa mendesain ubin kontinu (mulus) yang bagus?

33

Saya kesulitan merancang ubin sehingga ketika dipasang, mereka tidak terlihat seperti ubin, tetapi terlihat seperti hal yang homogen. Sebagai contoh, lihat gambar di bawah ini:

masukkan deskripsi gambar di sini

Meskipun bagian utama dari rumput hanya satu ubin, Anda tidak "melihat" grid; Anda tahu di mana itu jika Anda terlihat sedikit hati-hati, tetapi tidak jelas. Sedangkan ketika saya mendesain ubin, Anda hanya dapat melihat "oh, ya ampun, 64 kali ubin yang sama," seperti pada gambar ini:

masukkan deskripsi gambar di sini (Saya mengambil ini dari pertanyaan GDSE lain, maaf; tidak kritis terhadap permainan, tapi itu membuktikan maksud saya. Dan sebenarnya memiliki desain ubin yang lebih baik daripada yang saya kelola.)

Saya pikir masalah utama adalah bahwa saya mendesain mereka sehingga mereka independen, tidak ada persimpangan antara dua ubin jika ditutup satu sama lain. Saya pikir memiliki ubin yang lebih "terus menerus" akan memiliki efek yang lebih halus, tetapi tidak bisa melakukannya, sepertinya terlalu rumit bagi saya.

Saya pikir ini mungkin lebih sederhana daripada yang saya pikir begitu Anda tahu bagaimana melakukannya, tetapi tidak dapat menemukan tutorial tentang hal itu. Apakah ada metode yang dikenal untuk merancang ubin kontinu / homogen? (Terminologi saya mungkin benar-benar salah, jangan ragu untuk mengoreksi saya.)

Cristol.GdM
sumber
Perlu dicatat: pada tangkapan layar yang Anda tautkan mungkin ada 2 atau lebih ubin rumput yang muncul dalam pola kotak-kotak. Pemicu Chrono memiliki beragam ubin rumput .
doppelgreener
1
Saya juga menyarankan melakukan pencarian cepat untuk tilesets RPG Maker . Mereka bukan ubin top-of-the-line tetapi Anda dapat melihat beberapa contoh ubin transisi.
Mike Cluck
Satu hal yang dapat membantu Anda, selain dari jawaban yang disebutkan di atas, adalah menggunakan editor seni pixel yang memungkinkan Anda melihat pratinjau ubin saat menggambar. Saya merekomendasikan Pickle: pickleeditor.com
Pengguna tidak ditemukan
2
ada artikel bagus lain tentang subjek ini di sini: gas13.ru/v3/tutorials/sywtbapa_obliterating_grid.php
Tesserex
1
Terima kasih, terutama untuk tutorial terakhir ini, ia menjawab banyak pertanyaan lain yang saya miliki: p
Cristol.GdM

Jawaban:

20

Penafian: Saya bukan seniman jadi ini hanya pengetahuan seni programmer.

Anda memiliki efek grid pada contoh Anda sebagian besar karena sepetak rumput yang lebih ringan di tepi bawah ubin:

masukkan deskripsi gambar di sini

Detail seperti itu yang mudah dikenali langsung memberikannya sehingga Anda hanya mengulangi ubin yang sama.

Periksa artikel ini yang memiliki banyak tips bermanfaat tentang masalah ini. Secara khusus, menggunakan Photoshop:

  • Gunakan Alat Patch untuk menyingkirkan detail mencolok.
  • Gunakan alat Doge atau Burn untuk mendapatkan luminositas seragam di mana-mana.
  • Buat pinggirannya mulus dengan mengimbangi gambar dan kemudian menggunakan Patch Tool untuk menyatukan ujung-ujungnya. Saya juga melihat orang menggandakan dan mencerminkan gambar empat kali sebelumnya untuk tujuan ini.

Juga pada gambar yang Anda tautkan tampaknya ada masalah implementasi juga karena ketika memperbesar gambar Anda dapat melihat beberapa celah di antara ubin:

masukkan deskripsi gambar di sini

David Gouveia
sumber
3
Duplikat dan mirror +1 tampaknya bekerja dengan baik untuk saya, ada juga alat yang membantu dengan ini: inilah salah satu dari banyak tutorial - photoshoptextures.com/texture-tutorials/seamless-textures.htm - kata kunci pada dasarnya "tekstur mulus".
Oskar Duveborn
Ok, saya mencoba (baik tutorial jawaban dan tutorial komentar) dan hasilnya hanya BANYAK lebih baik, dan mengetahui istilah "tekstur mulus" akan membantu di masa depan, jadi terima kasih!
Cristol.GdM
@OskarDuveborn Tautan yang bagus, gambar akhir dengan jelas menunjukkan seberapa besar perbedaan yang terjadi!
David Gouveia
15

Saya bukan ahli, tetapi mulai dari memiliki lebih dari satu jenis ubin rumput (tidak sepenuhnya berbeda sehingga orang menyadari, tetapi cukup berbeda), satu trik bisa jadi memiliki "ubin transisi" antara 2 jenis ubin yang berbeda. Menggunakan contoh gambar yang Anda perlihatkan, memiliki ubin setengah-hijau, setengah-abu-abu di antara ubin yang sepenuhnya abu-abu dan sepenuhnya hijau dapat membantu memperlancar transisi. Juga, jika Anda membuat transisi itu bulat dan tampak lebih alami (satu tekstur memudar menjadi yang berikutnya), itu dapat membantu efeknya.

Perhatikan dalam gambar dari Chrono Trigger, di bagian tengah bawah, bagaimana ia memiliki setengah coklat (kotoran), setengah hijau (rumput), dengan bercak rumput yang lebih gelap. Ini juga menggunakan rumput dan batu yang lebih ringan untuk menambahkan variasi alami (ubin transparan dengan batu atau rumput ringan di atas ubin rumput, mungkin?)

Versec
sumber
5
+1 Ubin transisi sangat penting! Aturan emas: Lakukan transisi ubin berdasarkan kebutuhan-untuk-memiliki. Apakah Anda sudah meletakkan salju di samping rumput? Tidak? Maka Anda seharusnya tidak memiliki satu set transisi rumput ke salju. Apakah Anda baru saja meletakkan lava di samping tanah untuk pertama kalinya? Hebat, waktu untuk membuat satu set ubin transisi untuk itu.
doppelgreener
11

Anda harus membuat transisi, untuk setiap komposisi yang mungkin dari berbagai jenis ubin Anda harus menggambar ubin yang menyelesaikan perubahan. Anda mungkin ingin memutuskan bahwa banyak kombinasi tidak dapat dilakukan dalam gim Anda karena jumlah transisi yang harus Anda buat akan dengan mudah tumbuh menjadi jumlah yang sangat besar.

Biasanya ini berarti memadukan kualitas jenis permukaan dalam beberapa cara, transisi rumput sederhana ke tanah misalnya biasanya akan memiliki tambalan kecil rumput yang tumbuh semakin langka semakin Anda masuk ke ubin tanah. Tetapi untuk perbaikan cepat, Anda dapat dengan mudah memudar satu tekstur sementara memudar di yang lain, atau membuat dithering di mana Anda secara acak memilih piksel dari salah satu dari dua tekstur menggunakan peluang tertimbang yang bergeser dari menyukai satu tekstur ke yang lain.

Juga, saya sarankan Anda beralih dari melihat ubin ke pola sub-ubin, pertimbangkan gambar dua ubin ini, jika Anda daripada membuat ubin penuh membuat bentuk yang sesuai dengan gambar merah Anda tidak akan pernah membutuhkan lebih dari dua permukaan berbeda di ubin yang sama, sehingga sangat membatasi jumlah ubin transisi yang harus Anda buat, Anda kemudian dapat melanjutkan untuk menghasilkan ubin persegi dari ubin berlian ini untuk digunakan dalam permainan, atau Anda dapat menggunakan ubin berlian secara langsung, komputer tidak sangat pilih-pilih tentang hal-hal ini lagi.

Sub ubin ditandai dengan warna merah

aaaaaaaaaaaa
sumber
6

Mulailah dengan membuat ubin biasa. Kemudian bagi ubin secara horizontal dan vertikal, menjadi 4 bagian yang sama, meninggalkan Anda dengan 4 "ubin".

Ubin sekarang akan terlihat seperti ini:

1 2
3 4

Letakkan potongan 2 di sisi kiri potongan 1. Lakukan hal yang sama dengan 3 dan 4. Ubin sekarang akan terlihat seperti ini:

2 1
4 3

Sekarang pindahkan kedua bagian bawah ke atas bagian atas. Anda dibiarkan dengan ini:

4 3
2 1

Dengan asumsi ubin Anda adalah 32x32, masing-masing bagian berukuran 16x16. Sekarang Anda menghapus tengah, katakanlah 22x22 piksel (terserah Anda), meninggalkan bingkai ubin Anda. Bingkai ini sekarang akan ubin sempurna dengan dirinya sendiri dan Anda akan mengisi celah di tengah dengan keunikan seperti kerikil, batu, rumput yang lebih tinggi atau apa pun.

Anda mungkin harus sedikit bergoyang piksel tetapi ketika Anda memiliki bingkai Anda, Anda akan dapat menghasilkan banyak ubin unik tapi ubin sempurna.

juragan
sumber
0

Cara saya mendesain ubin saya adalah seperti ini:

  1. Buat ubin konsep Anda
  2. salin ubin Anda ke gambar yang 3X lebih besar di arah X dan Y
  3. salin ubin Anda sehingga harus ada 9 salinan ubin Anda di gambar
  4. Anda harus dapat melihat di mana setiap ubin dimulai dan berakhir, apa yang perlu Anda lakukan adalah mengambil alat blur (saya menggunakan GIMP untuk ini) dan mengaburkan tepi sehingga terlihat seperti satu ubin besar.
  5. Kemudian salin ubin tengah dari gambar dan kemudian Anda memiliki ubin terakhir Anda

Hasilnya akan terlihat cukup bagus ketika Anda meletakkan beberapa ubin di samping satu sama lain. Anda selalu dapat mengulangi proses ini untuk memperbaiki ubin Anda.

John
sumber
1
-1 Pada langkah 4, pengaburan tidak berlaku untuk kedua sisi (misalnya pengaburan di bagian bawah ubin tengah tidak cocok dengan pengaburan di bagian bawah ubin atas) sehingga hasil Anda tidak mulus. Offset adalah alat yang jauh lebih baik untuk memastikan kelancaran.
doppelgreener
jika Anda melakukannya dengan benar itu akan terlihat mulus, jika Anda melakukannya secara merata pada semua jahitan maka ternyata baik, jika Anda mengurangi tekanan pada alat blur Anda dapat mengatur tepi dengan baik sehingga terlihat bahkan di semua sisi.
John