Làm thế nào tôi có thể làm thủ tục làm cho các thanh sức khỏe có hình dạng bất thường?

Vấn đề của thanh sức khỏe hình chữ nhật hoặc trái tim truyền thống là một cái gì đó được hiểu rõ và dễ dàng giải quyết. Nhưng đâu là giải pháp được chấp nhận cho các thanh sức khỏe "có hình dạng sáng tạo" hơn, như mockup tôi đã thực hiện dưới đây?

Cách rõ ràng để làm điều này là có các họa tiết "ở giữa", vì vậy hình ảnh thứ ba sẽ là hình ảnh của chính nó, cùng với nhiều chuyển tiếp khác cho các mức độ sức khỏe khác nhau. Nhưng điều đó dường như thực sự không phù hợp và số lượng người đi đường cần thiết để tạo ra sự chuyển đổi suôn sẻ giữa các trạng thái sức khỏe sẽ rất lớn.

Ý tưởng khác duy nhất tôi có thể đưa ra là phủ lớp sprite "toàn bộ sức khỏe" lên trên các bộ tọa độ pixel "sức khỏe trống rỗng" và các tọa độ pixel trước khi nướng để thể hiện từng dấu tích của sức khỏe và sau đó làm cho chúng mờ đục hoặc trong suốt như sức khỏe đi lên hoặc xuống

Tôi dự định câu hỏi này là bất khả tri về ngôn ngữ và nền tảng nhưng hãy thoải mái cung cấp một mẫu cụ thể trong bất kỳ ngôn ngữ / thư viện / khung nào nếu nó giúp câu trả lời.

Có một cách rất đơn giản để đạt được điều này với các shader, bạn cần ba * kết cấu: thanh sức khỏe trống, kết cấu thanh sức khỏe và mặt nạ với độ dốc phân phối sức khỏe với một cực trị (ví dụ: giá trị alpha tối nhất không đen hoặc trong suốt nhất) ở một đầu và khác ở đầu kia. Nó được hiển thị tốt nhất trên hình ảnh, hiện tại tôi không thể vẽ gradient cong chỉ tuyến tính - nhưng tôi chắc chắn các nghệ sĩ của bạn sẽ không gặp rắc rối nào: Bây giờ, trong mẫu shader cả họa tiết và ngưỡng giá trị mặt nạ, loại bỏ tất cả các pixel không phải là sáng hơn ngưỡng đầu vào (dựa trên đầu vào% shader sức khỏe).
Bạn có thểsử dụng công thức toán học để tạo mặt nạ thay vì kết cấu, nhưng nếu bạn đã làm điều đó, bạn sẽ vẫn rất hạn chế đối với các hình dạng mà bạn có thể (= đơn giản) để tạo với các công thức đã nói - và việc tìm kiếm không phải là chuyện nhỏ.
* xem bình luận

Được thực hiện một cách toán học, như một pixel shader:

Trên CPU, tính toán HealthDirection và sản phẩm chấm của nó với V2

Trên GPU, tính toán hướng chuẩn hóa cách xa điểm trung tâm cho mỗi pixel. So sánh từng sản phẩm chấm với HealthDirections 'để chọn màu "nền" hoặc màu.

Nếu bạn "đảo ngược" thuật toán này và làm việc từ hướng khác, thay vào đó, bạn có thể "bỏ trượt" từng hướng của pixel thành tỷ lệ phần trăm và so sánh chúng với HealthPercent. Với tỷ lệ phần trăm của mỗi pixel được tính toán, việc làm mờ dần dần từ màu đỏ sang màu xanh lục trên GPU trở nên tầm thường.

Vẽ thanh đầu tiên áp dụng thuật toán cho một quad; màu sắc đầu ra giữa RangeMin và RangeMax (có thể được nướng) và clip () hoặc đầu ra trong suốt ở mọi nơi khác. Tiếp theo, vẽ sprite (đã sửa đổi) trên nó, sử dụng alpha. Tôi truy tìm thanh của bạn bằng CAD, lấp đầy nó, rồi "ma thuật lang thang" hình dạng màu rắn trong Paint để xóa nó. Của tôi trông giống như tào lao do trộn AutoCAD và Paint, bằng tay; giả sử bạn pha trộn các cạnh bên trong để trong suốt, bạn sẽ trông thật hoàn hảo .

Đường viền màu trắng là giới hạn của quad. Nó và X màu đỏ chỉ mang tính tham khảo:

"Sprite có lỗ" không cần phải được hiển thị cùng lúc với thanh sức khỏe. Họ nên nhận được bản năng và rút ra tất cả cùng một lúc, sau khi tất cả các thanh sức khỏe đã hoàn thành. Vì thuật toán được bao gồm trong trình đổ bóng, bạn cũng có thể thêm phần khởi động vào nó và sau đó, rút ​​ra tất cả các thanh sức khỏe bằng một lệnh gọi rút gọn. Vẽ mọi thanh sức khỏe trên màn hình sẽ thực hiện 2 cuộc gọi DrawInstified (...) và "điên nhanh".