Masalah bar kesehatan tradisional berbentuk persegi panjang atau berbasis jantung adalah sesuatu yang dipahami dengan baik dan mudah dipecahkan. Tapi apa solusi yang diterima untuk bar kesehatan yang lebih "berbentuk kreatif", seperti maket yang saya buat di bawah ini?
Cara yang jelas untuk melakukan ini adalah memiliki sprite "di antara", sehingga gambar ketiga adalah sprite sendiri, bersama dengan banyak transisi lain untuk berbagai tingkat kesehatan. Tapi itu tampaknya benar-benar tidak tepat dan jumlah perantara yang diperlukan untuk menciptakan transisi yang lancar antara kondisi kesehatan akan menjadi besar.
Satu-satunya ide lain yang dapat saya tanyakan adalah untuk melapisi sprite "kesehatan penuh" di atas sprite "kesehatan kosong" dan kumpulan koordinat piksel pra-panggang untuk mewakili setiap centang kesehatan dan kemudian membuatnya buram atau transparan sebagai kesehatan naik atau turun.
Saya bermaksud pertanyaan ini menjadi agnostik bahasa dan platform tetapi jangan ragu untuk memberikan sampel konkret dalam bahasa / perpustakaan / kerangka kerja apa pun jika itu membantu jawabannya.
Jawaban:
Ada cara yang sangat sederhana untuk mencapai hal ini dengan shader, Anda memerlukan tiga * tekstur: bar kesehatan kosong, tekstur dan masker bar kesehatan dengan gradien distribusi kesehatan dengan satu ekstrem (misalnya nilai alfa paling gelap bukan hitam atau paling transparan) di satu ujung dan lainnya di ujung lainnya. Yang terbaik ditunjukkan pada gambar, saya saat ini tidak dapat melakukan menggambar gradien melengkung hanya satu linier - tapi saya yakin artis Anda tidak akan mengalami masalah:
Sekarang, dalam sampel shader baik tekstur dan ambang batas nilai topeng, membuang semua piksel yang tidak lebih terang dari ambang input (berdasarkan pada kesehatan% input shader).
Kamu bisagunakan rumus matematika untuk menutupi alih-alih tekstur, tetapi jika Anda melakukannya, Anda masih akan sangat terbatas pada bentuk yang Anda dapat (= yang sederhana) untuk membuat dengan rumus kata - dan menemukan satu itu tidak sepele.
* lihat komentar
sumber
Diimplementasikan secara matematis, sebagai pixel shader:
Pada CPU, hitung HealthDirection dan produk titiknya dengan V2
Pada GPU, hitung arah yang dinormalisasi jauh dari titik tengah untuk setiap piksel. Bandingkan setiap produk titik dengan HealthDirections 'untuk memilih apakah akan menaungi "latar belakang", atau berwarna.
Jika Anda "membalikkan" algoritme ini dan bekerja dari arah lain, Anda bisa "membatalkan-slerp" masing-masing arah piksel kembali ke persentase dan membandingkannya masing-masing dengan HealthPercent, sebagai gantinya. Dengan dihitungnya persentase setiap piksel, mengubah fade dari merah ke hijau pada GPU menjadi sepele.
Gambarlah bilah terlebih dahulu menerapkan algoritma ke quad; warna keluaran antara rangeMin dan rangeMax (bisa dipanggang) dan clip () atau output transparan di mana saja. Selanjutnya, gambar sprite (dimodifikasi) di atasnya, menggunakan alpha. Saya menelusuri bilah Anda di CAD, mengisinya dengan banjir, lalu "magic wanded" bentuk warna solid di Paint untuk menghapusnya. Milik saya terlihat seperti sampah karena mencampur AutoCAD dan Paint, dengan tangan; dengan asumsi Anda mencampur tepi bagian dalam menjadi transparan, milik Anda akan terlihat sempurna .
Perbatasan putih adalah batas quad. Ini dan X merah hanya untuk referensi:
"Sprite with hole" tidak perlu dirender bersamaan dengan bilah kesehatan. Mereka harus dipasang dan ditarik sekaligus, setelah semua bar kesehatan selesai. Karena algoritme itu mandiri di dalam shader, Anda juga bisa menambahkan instance ke dalamnya dan kemudian, juga menggambar semua healthbars dengan satu kali draw call yang dipasang. Menggambar setiap bilah alat kesehatan di layar harus menerima 2 panggilan DrawInstanced (...) dan menjadi "gila cepat".
sumber