Cara menggambar garis di sekitar sprite yang efisien

Saya menggunakan XNA untuk memprogram permainan, dan telah bereksperimen dengan berbagai cara untuk mencapai efek 'terpilih' pada sprite saya. Masalah yang saya alami adalah bahwa setiap klik yang ditarik dalam spritebatch diambil menggunakan lebih dari satu sprite tunggal (setiap objek dapat terdiri hingga 6 sprite).

Saya akan menghargai itu jika seseorang bisa memberi tahu saya tentang bagaimana saya bisa mencapai menambahkan garis besar ke sprite X piksel saya (sehingga lebar garis dapat berbagai jumlah seluruh piksel).

Terima kasih sebelumnya,

• Greg.

Sejauh ini cara termudah untuk melakukan ini (jadi mungkin cara terbaik, kecuali jika Anda benar-benar kekurangan kinerja) adalah memiliki dua salinan sprite Anda.

• Versi reguler
• Versi "gemuk", tidak berwarna - pada dasarnya versi putih dari sprite X Anda - lebih banyak piksel "lebih gemuk" dari aslinya.

Gambarkan seluruh objek Anda menggunakan versi "gendut", lalu gambarkan versi reguler di atasnya.

Dengan menjadikan versi "gemuk" putih, Anda dapat menggunakan pewarnaan warna bawaan SpriteBatch untuk mengubah warna pilihan secara dinamis.

Untuk menghasilkan verison "gemuk" Anda, saya sarankan untuk menulis Content Pipeline Extension yang dapat secara otomatis mengambil sprite asli Anda, membaca saluran alfa mereka, membuat saluran alfa baru dengan mengambil sampel saluran alfa maksimum dalam gambar asli X-banyak piksel di sekitar setiap piksel, dan pengaturan RGB = (1,1,1).

Anda harus memastikan semua sprite Anda memiliki batas transparan yang cukup untuk menambahkan garis besar (Anda dapat memeriksa ini di pengolah konten - dan bahkan memberikan ruang jika perlu).

Jika Anda hanya memiliki beberapa sprite, maka Anda bisa menggunakan editor gambar yang baik (GIMP, Photoshop) dan melakukannya dengan tangan: saluran Alpha untuk memilih, memperluas pilihan, memilih ke alpha, mengisi saluran warna putih.

Saya kira Anda perlu menggambar semua bagian yang masing-masing objek menjadi satu sprite terlebih dahulu. Maka saya pikir Anda harus menulis shader untuk mendeteksi tepi sprite menggambar pixel mana pun ia menemukan tepi. Saya berharap harus ada beberapa shader di luar sana untuk melakukan ini, yang bisa Anda gunakan atau port.

Bergantung pada persyaratan, yang mungkin juga efektif hanyalah membuat garis besar sesuai permintaan untuk sprite. Saya berasumsi sprite Anda memiliki transparansi, dan bentuknya tidak beraturan daripada hanya menjadi persegi panjang (sementara ini akan bekerja dengan baik untuk itu, garis besar persegi panjang harus Trivial).

when selected:
   outline = new sprite canvas of appropriate size
   for sprite in object:
      # use larger numbers for thicker outlines
      for x in (-1, 0, 1) and y in (-1, 0, 1):
         render sprite mask into canvas at x,y with desired color

Perhatikan bahwa Anda tidak perlu melakukan ini setiap undian (meskipun saya kira Anda bisa), tetapi cukup buat sprite garis baru saat mengganti sprite.

Pendekatan brute force yang paling sederhana adalah membangun dua salinan dari masing-masing sprite, yang normal dan yang disorot. Kemudian cukup tukar ketika disorot.

Jika Anda punya memori cadangan, tidak perlu menjadi lebih rumit dari itu. Plus seniman memiliki kendali penuh atas tampilan ketika disorot sehingga Anda dapat melakukan garis besar atau apa pun yang Anda inginkan.

Bagaimana dengan untuk setiap sprite, juga memiliki sprite lain yang merupakan garis besar sprite dasar. Saat menggambar objek yang diuraikan, gambar sprite dasar, lalu buat topeng rendering gabungan, lalu gambar sprite garis luar termasuk topeng.

Beberapa solusi berbeda dengan trade off yang berbeda.

Paling mudah: Merender objek menggunakan warna datar beberapa kali dan mengguncang posisi (mengimbangi kiri, atas, bawah, dll, dll), ini akan membuat versi garis besar apa pun yang Anda render di atasnya, tetapi memiliki biaya kinerja dan tidak akan memungkinkan untuk batas lemak tanpa banyak render tambahan. Batas satu atau dua piksel mungkin oke dengan 4x.

Tercepat: Memproses ulang tekstur dan memiliki salinan yang sudah dibatasi, atau hanya perbatasan, atau merupakan topeng 8-bit skala abu-abu datar yang dapat Anda warnai dalam shader. Ini kemungkinan akan cepat dengan biaya memori.

Terbaik: Pendapat saya, tetapi menghasilkan representasi Bidang Jarak Ditandatangani (SDF) objek Anda mungkin akan menjadi solusi terbaik. Tekstur ini bisa jauh lebih kecil dari tekstur sumber dan masih menangkap data yang berguna. Pada dasarnya setiap piksel mengkodekan seberapa jauh jaraknya dari objek yang digunakan untuk menghasilkannya. Dengan data ini di tangan, Anda dapat menulis semua jenis efek dari bersinar hingga garis besar. Perbatasan dapat berubah dalam ukuran dan warna dll, dan masih merupakan shader yang relatif murah dan hanya satu gambar tambahan. Downside adalah tooling, dan preprocessing.

Saya tidak yakin dengan efisiensi, tetapi cara termudah yang dapat saya lihat adalah menggambar versi sprite yang lebih besar dalam warna yang ingin Anda pilih terlebih dahulu. Gambarlah sprite di atasnya. Anda hanya akan melihat tepi sprite pertama, memberikan efek seleksi.

EDIT: Namun, seperti yang Anda lihat dari komentar, ini bukan ide yang baik.

Saya setuju dengan meningkatkan sprite. Sejauh ini rute termudah, dan Anda dapat menerapkannya untuk memilih sprite APAPUN tanpa harus membuat sprite tambahan terutama untuk tujuan ini.

• yaitu spriteOutline.Scale = spriteOriginal.Scale * 0.1f; spriteOutline.Color = Warna baru (255, 0, 0, 255);

Ganti warna sprite asli dengan warna outline (atau warnai jika Anda suka). Jadikan sprite ini diarsir atau diwarnai empat kali dengan offset 1 piksel: pada x, y = (- 1, -1), lalu (+ 1, -1), lalu (-1, + 1) lalu (+1 , +1). Ulangi untuk semua sprite yang membentuk objek.

Setelah itu, render sprite asli dalam urutan yang benar di atas pada (0,0).