Bagaimana cara membuat beberapa sorotan 2D?

12

Saya ingin membuat efek "sorotan" 2D yang memungkinkan sorotan pada banyak entitas. Yaitu, seolah-olah beberapa sprite memegang obor. Untuk entitas tunggal (satu sorotan), saya menggunakan teknik di mana saya overlay gradien sprite dan memiliki titik tengah mengejar entitas itu. Teknik ini berfungsi dengan baik untuk satu sorotan. Berikut screenshot untuk menggambarkan apa yang saya bicarakan:

Spotlight Tunggal - Bekerja

Efek Spotlight dengan satu lampu sorot

Masalah yang saya temui adalah bahwa teknik ini tidak mencakup banyak entitas. Jika saya overlay gambar sorotan lain saya mengalami beberapa masalah. Berikut screenshot yang disimulasikan:

Beberapa Spotlight = Masalah

Efek Spotlight dengan dua lampu sorot

Masalah yang paling jelas adalah sudut-sudut yang terlihat. Ini bisa diselesaikan dengan membuat gambar sorotan menjadi besar untuk menutupi seluruh level, tetapi itu terasa tidak benar. Masalah kedua dan yang lebih sulit adalah bahwa saya secara efektif mengalikan kegelapan dengan teknik ini. Jadi setiap sprite yang ditambahkan memiliki efek menggelapkan yang lainnya. Jelas saya salah mendekati masalah ini.

Ada ide?


Upaya Berkelanjutan

Ada beberapa diskusi tentang opsi campuran di komentar. Inilah pemikiran saya saat ini. Dalam contoh sorotan tunggal saya di atas, saya menggunakan file gambar yang terlihat seperti ini: (Saya telah mengganti transparansi dengan warna hijau untuk membuatnya lebih mudah untuk diilustrasikan)

Pendekatan Transparansi

Seperti dibahas di atas, masalahnya adalah alfa yang memadukan gambar ini dengan gambar lain tidak akan menghasilkan efek yang diinginkan. Alih-alih itu akan menghasilkan ini:

Overlay dua lingkaran transparansi

Itu tidak menurut saya sebagai masalah opsi campuran. Masalahnya, menurut saya, adalah bahwa gambar semacam itu memiliki topeng transparansi dan gambar (kotak hitam), ketika mereka harus dipisahkan.

Jadi, alih-alih gambar hitam dengan transparansi cut-out built-in, saya harus menggunakan topeng transparansi yang digunakan pada waktu berjalan melawan kotak hitam. Ketika melakukan itu, saya masih tidak bisa menggunakan topeng transparansi putih dan hitam tradisional atau itu akan mengalami masalah yang sama. Ini sebuah contoh, kali ini putih dan hitam mewakili putih dan hitam:

Topeng Transparansi

Solusinya, tampaknya, akan menerapkan topeng transparansi yang dengan sendirinya menggunakan transparansi. Sesuatu seperti ini: (hijau = transparan)

Topeng Transparansi dengan Transparansi

Dengan begitu, beberapa topeng transparansi bisa dicampur alfa bersama dan LALU digunakan sebagai topeng transparansi terhadap kotak hitam. Berikut adalah contoh dari dua masker transparansi yang dicampur bersama:

Dua Masker Transparansi dengan Transparansi

Bagaimanapun, itulah pendekatan yang saya coba terapkan. Saya akan memposting hasil jika ini berhasil. Apa yang saya tidak tahu (saat ini) adalah jika saya bisa menggunakan topeng transparansi yang itu sendiri memiliki transparansi.

Cameron Fredman
sumber
Memikirkannya, sepertinya saya harus memindahkan topeng transparansi dan menerapkannya pada tekstur hitam besar. Tidak tahu bagaimana itu akan dilakukan.
Cameron Fredman
7
Tidak yakin bagaimana Anda membuat atau menerapkan gradien Anda, namun ini bisa menjadi masalah blending, di mana jika Anda menggunakan blending yang tepat itu akan berfungsi dengan baik. Kami membutuhkan lebih banyak info tentang tekstur.
dennmat
Saya menggunakan AndEngine sebagai kerangka, dan banyak blending terjadi di belakang layar, meskipun ada "setBlendFunction ()" tersedia.
Cameron Fredman
Melihat apa yang Anda tautkan, saya katakan Anda mungkin ingin solusi kedua terdaftar di bagian bawah atau ketiga jika itu tidak berhasil. Saya tidak jelas tentang andEngine, dan mereka tampaknya tidak memiliki dokumen, mungkin jika Anda tidak dapat menemukan jawaban Anda di utas itu, mereka mungkin dapat membantu lebih lanjut, karena sepertinya mereka sudah bermain-main dengan pencampuran tersebut. Pilihan banyak di belakang layar.
dennmat
Meskipun utas itu tampaknya sedang memperbaiki masalah Anda, apakah Anda memiliki versi termasuk perubahan itu?
dennmat

Jawaban:

3

Secara konseptual, solusi untuk beberapa lampu sorot terdiri dari:

  1. Mulai dengan array yang benar-benar hitam untuk menyimpan nilai pencahayaan untuk setiap piksel dalam adegan.
    • Nol akan mewakili area gambar tanpa cahaya sama sekali.
    • 100% akan mewakili area yang sepenuhnya jenuh dengan siang hari.
    • Jika Anda ingin menjadi mewah, Anda bisa memiliki nilai lebih tinggi dari 100% (katakanlah, 200%) mewakili area gambar yang terlalu jenuh, dan mengaburkan semuanya menjadi gumpalan putih piksel yang menyilaukan. Khawatir tentang ini nanti, dan cukup tutupi nilai antara 0-100% untuk saat ini.
  2. Untuk setiap sumber cahaya baik di dalam layar, atau cukup dekat ke tepi yang halo-nya akan menambah cahaya, tambahkan nilai-nilai cahaya dari sumber cahaya ke array nilai cahaya Anda untuk piksel adegan.
  3. Gunakan array nilai cahaya yang dihasilkan untuk memodifikasi piksel untuk adegan Anda sedemikian rupa sehingga:
    • Piksel yang diterangi oleh cahaya 0% berwarna hitam.
    • Piksel yang diterangi oleh cahaya 100% berada pada warna normal.
    • Pixel lain adalah warna bagian-jalan di antara keduanya.
    • Anda sepertinya sudah tahu bagaimana melakukan langkah ini, menilai dari tangkapan layar Anda.

Kuncinya adalah memahami bahwa alpha-blending dapat melakukan satu atau lebih langkah-langkah ini. Alpha-blending hanya mengacu pada penggunaan peta alfa / gambar untuk memodifikasi piksel suatu gambar atau tekstur dengan cara yang sederhana. Ini juga biasanya berarti bahwa itu akan menjadi seperangkat fungsi cepat, atau diimplementasikan dengan perintah perangkat keras khusus, untuk membuatnya cepat. Anda dapat melakukannya dengan array reguler, dan perintah bahasa normal, tetapi menggunakan fungsi perpustakaan alpha / blending khusus mungkin lebih baik. ... Dan tidak akan memiliki bug. Terkadang ini berarti membuat piksel sebagian transparan, tetapi untuk kasus Anda, ini berarti:

  • Menambahkan nilai alpha ke setiap piksel, untuk membangun array nilai-cahaya dari # 1.
  • Menggunakan array nilai cahaya dari # 1 untuk menyelesaikan warna akhir untuk piksel dari langkah # 3.

Saya akan mulai mencari dokumentasi untuk fungsi alpha-blending Anda untuk melihat fungsionalitas apa yang mereka sediakan untuk menggabungkan berbagai jenis piksel. Saya menduga mereka akan memiliki fungsi untuk setiap langkah yang perlu Anda lakukan, tetapi mereka mungkin menggunakan nama yang tidak jelas.

ET
sumber
Saya menggali jawaban ini dan akan mencobanya. Gagasan lensa-suar / kabur untuk nilai di atas 100% adalah bonus yang bagus dan menginspirasi. Akan memposting pembaruan dengan pelajaran yang dipelajari dalam proses. Terima kasih ET
Cameron Fredman