Bagaimana saya bisa membuat latar belakang ruang besar yang berulang, dengan cara yang tidak terlalu mencolok

14

Bagaimana saya bisa membuat latar belakang ruang besar yang berulang untuk game rts. Saya ingin memiliki nebula dan bidang debu yang kompleks juga, tetapi karena unit akan memiliki banyak ruang untuk dijelajahi, saya tidak dapat memiliki 120000px x 1200000px jpeg, jadi saya ingin pengulangan gambar, tetapi tidak memiliki garis perubahan antar segmen.

Saya menggunakan ini dengan kerangka kerja Babylon oleh Microsoft untuk web GL canvas

SuperUberDuper
sumber
8
Apakah Anda mempertimbangkan hanya menggunakan shader prosedural alih-alih gambar apa pun? Pencarian web sederhana memunculkan ini, yang terlihat sangat mengesankan: casual-effects.blogspot.com.au/2013/08/starfield-shader.html
LeFauve
@LeFauve Sebenarnya saya suka ide ini banyak. Apakah gim ini mengingat hal-hal yang dihasilkan di masa lalu saat Anda melakukan perjalanan kembali? Bagaimana saya bisa mengatur ini di memori browser?
SuperUberDuper
@SuperUberDuper: Tidak perlu untuk "mengingat" apa pun selama itu dibuat dengan cara deterministik dan lokal. Cukup buat ulang data kapan pun dibutuhkan.
R .. GitHub BERHENTI MEMBANTU ICE
@LeFauve: Itu seharusnya benar-benar jawaban. Ini jauh lebih baik daripada jawaban yang diberikan.
R .. GitHub BERHENTI MEMBANTU ICE
@R .. Saya setuju, akan lebih baik jika memiliki beberapa kode untuk itu di webGL;)
SuperUberDuper

Jawaban:

19
  1. Gunakan bergulir paralaks. Memiliki beberapa lapisan latar belakang yang menggulir dengan fraksi yang berbeda dari kecepatan sudut pandang utama. Semakin rendah layer, semakin lambat bergulir. Ini bukan hanya cara yang bagus untuk memberikan ilusi kedalaman, tetapi juga membuat latar belakang terlihat kurang berulang karena objek pada lapisan yang berbeda akan muncul dalam komposisi yang berbeda karena lapisan tidak disinkronkan.

  2. buat latar belakang Anda secara prosedural. Alih-alih satu grafik latar belakang yang besar, miliki beberapa elemen kecil yang berbeda dan letakkan semuanya beberapa kali secara acak di seluruh dunia game.

Dan omong-omong: Jangan gunakan JPEG ketika Anda bisa menghindarinya. Ini adalah format lossy yang kehilangan lebih banyak kualitas setiap kali Anda memodifikasi dan menyimpannya, ini sangat dioptimalkan untuk fotografi dan tidak mendukung transparansi. Gunakan format lossless dengan saluran alpha seperti PNG. Satu-satunya alasan yang bagus adalah ketika gambar sumber Anda hanya tersedia dalam format JPEG (NASA menerbitkan banyak gambar astronomi bagus yang semuanya ada dalam domain publik) dan Anda tidak ingin melakukan modifikasi apa pun pada gambar tersebut.

Philipp
sumber
7

Cara untuk membangun latar belakang tanpa batas untuk gim 2D adalah sebagai berikut:

  1. Menggunakan perangkat lunak editor grafis (seperti iDraw untuk Mac) buat gambar A yang mewakili sebagian latar belakang Anda. Gambar ini harus memiliki ukuran terbatas.
  2. Gandakan A dan mirror pada sumbu Y, ini adalah B
  3. Sekarang tempel (secara horizontal) togheter A dan B, ini AB .
  4. Terakhir, impor gambar AB dalam gim Anda dan ulangi secara horizontal melalui kode sebanyak yang Anda inginkan.

Semoga ini membantu.

Luca Angeletti
sumber
2
Ukuran terbatas, tetapi tidak terlalu terbatas. Semakin kecil ubinnya, semakin jelas pengulangannya.
cao
1
Atau, alih-alih mirroring, gunakan filter Offset di Photoshop dan klon cap di perbatasan, atau cukup gunakan filter "Make Seamless" GIMP (Filter → Peta → Make Seamless).
wchargin
5

Lapisan bekerja dengan baik.

Ini beberapa matematika:

Misalkan Anda memiliki jalur kereta api yang dibuat dengan buruk sehingga seperti __ __melihat adanya kesenjangan di antara mereka. Ketika roda berguling di atasnya, itu membuat takikan kecil (takik kecil).

Jika panjang lintasan adalah ldan roda memiliki jari-jari rmaka 2pi rlingkar roda,ration=l/(2pi r) jika rasio mengatakan 10,25 maka roda akan mendapatkan takik di setiap kuartal karena naik panjang.

Ini adalah cara termudah yang bisa saya pikirkan untuk menjelaskan ruang penutup.

Jadi misalkan Anda memiliki dua gambar, jika seseorang memiliki rasio kuartal ini Anda akan mendapatkan pola 4 fase, itu akan diulang setelah 4 ubin. Misalkan Anda memiliki 1 latar belakang utama dan 2 overlay, dengan fase m dan n. Kemudian polanya akan berulang setelah ubin m * n.

Sementara itu tidak masalah banyak polanya akan terlihat paling baik jika jumlahnya co-prime, itu adalah pembagi umum terbesar adalah 1. Sebagai contoh misalkan kita memiliki sesuatu fase 6 dan sesuatu fase 4, setiap fase lain ini akan "berbaris "dalam arti tertentu.

Anda dapat menggunakan teknik ini (terutama dengan partikel dan barang) untuk membuat banyak hal "unik" dengan sedikit usaha.

Kembali ke roda kereta, jika rasionya tidak rasional, maka takik akan menutupi roda! Tapi ini tidak terlalu penting.

Alec Teal
sumber
5

Ini adalah ide lain yang sepertinya tidak ada:

Dalam hal latar belakang jarak jauh, seperti kotak langit, lapisan Parallax tidak benar-benar terasa enak. Pikirkan bintang-bintang misalnya, ketika berjalan di bumi, atau bahkan lebih baik sepanjang malam, semua bintang bergerak bersama, meskipun kita tahu bintang-bintang itu berjarak ratusan atau beberapa tahun cahaya jauhnya satu sama lain. Masalahnya mereka terlalu jauh untuk kita perhatikan jarak mereka. Semua yang mengatakan kami masih ingin tekstur yang sangat besar (katakanlah 120k * 120k), harus ditarik dengan kekuatan komputasi kami yang terbatas (yang dapat menangani paling banyak 8k * 8k). Seperti menggunakan beberapa lapisan paralaks, Anda harus membuat tekstur yang berbeda, masing-masing dengan berbagai jenis detail. Sebagai contoh satu mewakili galaksi, yang lain adalah sekelompok bintang, dll. Tapi kali ini alih-alih menggerakkan mereka dengan kecepatan yang berbeda, mereka harus berbeda dalam ukurannya. Berikut ini sebuah contoh: Pertimbangkan menggunakan 3 tekstur, satu adalah 2048 * 2048, yang lain adalah 729 * 729 dan yang ketiga adalah 625 * 625. Karena angka-angka ini saling bertentangan satu sama lain, Ketika menggabungkan 3 tekstur ini dalam 3 lapisan, seseorang harus memindahkan lcm (2048.729.625) = 764M piksel dari asal untuk melihat hal yang sama digambar, yang terasa seperti tak terhingga. Bahkan Anda dapat menambahkan lapisan lain atau mengubah ukuran setiap tekstur dan Anda akan selalu berakhir dengan hasil sebesarkelipatan terkecil dari ukuran tekstur.

Ali1S232
sumber
2
Jawaban ini dan @ AlecTeal menjelaskan teknik yang disebut Prinsip Jangkrik . Ini cara mudah untuk membuat latar belakang yang tidak acak, sangat besar dan tidak berulang dengan sumber daya yang sangat sedikit.
Lie Ryan
4

Ini tampaknya menjadi pekerjaan untuk shader piksel prosedural.

Keuntungan menggunakan gambar adalah:

  • Anda tidak perlu memberikan bitmap besar
  • Ini bersifat prosedural, jadi tidak harus mengulangi gambar yang diperbaiki (ini dapat bervariasi tanpa batas)
  • Jika Anda menginginkan efek paralax, Anda dapat mensimulasikan ribuan pesawat, yang tidak praktis menggunakan gambar
  • Anda dapat melakukan efek yang sangat canggih, seperti pencahayaan yang dinamis
  • Sebagian besar pemrosesan dilakukan oleh GPU Anda, membiarkan CPU gratis untuk bagian lain dari gim Anda

Pencarian web sederhana membawa shader ini ke http://casual-effects.blogspot.com.au/2013/08/starfield-shader.html yang terlihat seperti apa yang Anda cari.

Saya bukan ahli di WebGL, tetapi menurut halaman ini , sepertinya ia menggunakan bahasa GLSL biasa (ini adalah bahasa C-Like yang digunakan oleh kartu grafis untuk program shaders). Ini berarti Anda mungkin memiliki sedikit atau tidak ada perubahan yang harus dilakukan untuk membuatnya berfungsi.

Namun Anda dapat mencoba memulai dengan shader yang lebih mendasar untuk memahami cara kerjanya.

Halaman blog ini mencantumkan semua langkah untuk menerapkan shader di WebGL. Itu sepertinya tempat yang bagus untuk memulai.

Tempat bagus lain untuk menemukan contoh shader yang luar biasa adalah https://www.shadertoy.com/

LeFauve
sumber
Bagus terima kasih !!! Saya sekarang kesulitan memilih jawaban!
SuperUberDuper
2
Nah, jika Anda memiliki kesempatan untuk mencoba shader, itu pasti sesuatu yang akan berguna dalam jangka panjang jika Anda ingin melakukan permainan yang terlihat bagus. Langkah pertama agak tinggi (saya butuh 2 minggu untuk membuat shader pertama saya melihat seperti yang saya inginkan) tetapi itu layak untuk jangka panjang.
LeFauve
2

Anda dapat memotong jpeg besar Anda dalam segmen kecil dan menempatkannya (bagian yang terlihat), Anda bahkan tidak perlu menyimpannya dalam memori setiap saat.

Dan seperti permainan lama beberapa 'ubin' dapat diulang. Itu adalah solusi umum untuk konsol NES, itu bahkan didukung oleh perangkat keras.

Alexsey Shestacov
sumber
1
Sangat sulit, jika bukan tidak mungkin, untuk memotong JPEG menjadi JPEG yang lebih kecil yang akan menjahit tanpa gangguan visual karena kompresi yang hilang. Jika Anda memilih ubin, Anda harus menggunakan format file kompresi lossless, seperti PNG.
LeFauve
1
Saya setuju bahwa PNG mungkin lebih baik, di sisi lain, tekstur JPEG yang umum di grafis 3d, dan yang lebih penting penggunaan JPEG 16x16 blok untuk coding en.wikipedia.org/wiki/Macroblock cut kanan dapat tidak melihat jika tidak jangan coding di terendah menilai.
Alexsey Shestacov