불규칙한 모양의 건강 막대를 절차 적으로 렌더링하려면 어떻게해야합니까?

전통적인 직사각형 또는 심장 기반 건강 바의 문제는 잘 이해되고 쉽게 해결됩니다. 그러나 아래에서 만든 모형과 같이보다 "창의적인 모양의"건강 막대에 허용되는 솔루션은 무엇입니까?

이 작업을 수행하는 확실한 방법은 "중간"스프라이트를 갖는 것이므로 세 번째 이미지는 다른 스프라이트 레벨과 함께 다른 스프라이트가 될 수 있습니다. 그러나 그것은 정말로 우아하지 않은 것으로 보이며 건강 상태 사이를 부드럽게 전환하는 데 필요한 중간 수는 많을 것입니다.

내가 얻을 수있는 유일한 다른 아이디어는 "빈 건강"스프라이트 위에 "풀 건강"스프라이트를 오버레이하고 각 건강 진드기를 나타내는 픽셀 좌표 사전 베이킹 세트를 건강 상태로 불투명하거나 투명하게 만드는 것입니다. 위 또는 아래로 이동합니다.

나는이 질문을 언어와 플랫폼에 구애받지 않으려 고하지만 대답에 도움이된다면 모든 언어 / 라이브러리 / 프레임 워크에서 구체적인 샘플을 자유롭게 제공하십시오.

2d graphics

— msd7734
소스

"N̶a̶n̶o̶m̶a̶c̶h̶i̶n̶e̶s̶ Shaders, son"

— Mukesh Ingham

전이를 수학적으로 정의 할 수 있다고 생각합니다. 여기에서 컴퓨터에서 픽셀 좌표를 계산하여 미리 베이킹하지 않고 표시 / 숨길 수 있습니다.

— Richard Tingle

하트 모양의 건강 바는 어떻게 "쉽게 해결"됩니까?

— MooseBoys

@MooseBoys 나는 심장 모양이 아닌 심장 기반 건강에 대해 이야기했습니다. 젤다의 전설 게임을 생각해보십시오. 더 명확하지 않아서 죄송합니다.

— msd7734

@RichardTingle, 좋은 생각 :)

— Jon

답변:

셰이더로 이것을 달성하는 매우 간단한 방법이 있습니다. 빈 헬스 바, 헬스 바 텍스처 및 한쪽 끝에 하나의 극단 (예 : 가장 어둡지 않은 검은 색 또는 가장 투명한 알파 값)으로 건강 분포의 그라디언트가있는 3 가지 텍스처가 필요합니다. 다른 쪽 끝에 다른. 이미지에 가장 잘 표시됩니다. 현재 곡선 그라디언트 만 선형으로 그릴 수는 없지만 아티스트는 아무런 문제가 없을 것이라고 확신합니다. 이제 쉐이더 샘플에서 텍스처와 마스크 값을 임계 값으로 지정하여 마스크가 아닌 모든 픽셀을 버립니다. 입력 임계 값보다 밝음 (상태 % 셰이더 입력 기준)
넌 할 수있어텍스처 대신 마스킹에 수학 공식을 사용하십시오. 그러나 그렇게하면 여전히 공식으로 만들 수있는 모양에 매우 제한적입니다 (= 간단한 것). 하나를 찾는 것이 사소한 것이 아닙니다.
* 의견보기

— 원 드라
소스

색상에 대해 별도의 질감을 사용하는 많은 경우 (OP의 예 포함)는 과잉입니다. 대부분의 경우 그레이 스케일 마스크 그라디언트를 셰이더에 균일하게 지정된 색상으로 다시 매핑하는 동시에 특정 임계 값 미만의 마스크 값은 계속 버릴 수 있습니다.

— bcrist

실제로 검은 색이 아닌 가장 어두운 것이 필요하지 않습니다. 알파 채널을 사용하여 원하지 않는 픽셀을 차단할 수 있습니다.

— Jack Aidley

@JackAidley는 가능할 것이라고 확신하지만 가능한 한 유연하게 솔루션을 원했습니다. 대부분의 AAA 타이틀에서는 hp가 "빨간색"이 아니지만 질감이 있습니다.

— wondra

@ bcrist 좋은 점은 최적화로 제안하는 것을 고려했습니다. 그러나 나는 그것을 올바르게 그릴 수 없었기 때문에 가능한 한 간단하게 유지하고 구현을 위해 최적화를 유지하기로 결정했습니다.

— wondra

@wondra OP의 예제 룩을 포함하여 많은 경우 텍스처 대신 절차 그라디언트 또는 1 차원 컬러 룩업 (마스크 레벨을 입력으로 사용)을 사용할 수 있습니다.

— Random832

픽셀 쉐이더로 수학적으로 구현되었습니다.

CPU에서 V2를 사용하여 HealthDirection 및 해당 도트 제품을 계산하십시오.

GPU에서 각 픽셀의 중심점으로부터 떨어진 정규화 된 방향을 계산합니다. 각 도트 제품을 HealthDirections와 비교하여 "백그라운드"또는 컬러로 음영을 선택합니다.

이 알고리즘을 "반전"하고 다른 방향에서 작업 한 경우 각 픽셀의 방향을 다시 백분율로 "잠재 해제"하고 대신 HealthPercent와 비교할 수 있습니다. 각 픽셀의 백분율이 계산되면 GPU에서 페이드를 빨강에서 녹색으로 만드는 것이 쉽지 않습니다.

알고리즘을 쿼드에 먼저 적용하여 막대를 그립니다. rangeMin과 rangeMax (구울 수 있음) 및 clip () 사이의 출력 색상 또는 다른 곳에서는 투명하게 출력합니다. 다음으로 알파를 사용하여 (수정 된) 스프라이트를 그립니다. CAD에서 막대를 추적하고 플러드로 채운 다음 그림판에서 단색 모양을 "마법 wanded"하여 삭제했습니다. AutoCAD와 Paint를 수동으로 혼합하여 광산은 쓰레기처럼 보입니다. 안쪽 가장자리를 투명하게 혼합하면 완벽 하게 보입니다 .

흰색 테두리는 쿼드의 한계입니다. 그것과 빨간색 X는 참조 용입니다.

"구멍이있는 스프라이트"는 상태 표시 줄과 동시에 렌더링 될 필요가 없습니다. 모든 건강 막대가 완료된 후 한 번에 인스턴스화하고 그려야합니다. 알고리즘은 셰이더에 자체적으로 포함되어 있으므로 인스턴스에 인스턴스를 추가 한 다음 인스턴스 된 드로우 콜을 사용하여 모든 상태 표시 줄을 그릴 수도 있습니다. 화면에 모든 헬스 바를 그리려면 2 개의 DrawInstanced (...) 호출이 필요하고 "미친 빠른"상태 여야합니다.

— 존
소스

이와 같은 원형 방식으로 마스크를 벗기려면 원형 페이드에 대해 그리는 삼각형을 변경하여 더 효율적으로 구현할 수 있습니다.

— Jack Aidley

@JackAidley,이 마스킹을 고려하지 않기 때문에 좀 더 구체적으로 설명하십시오. 진행률 표시 줄은 첫 번째 패스 후 샘플링없이 두 개의 삼각형에만 완전히 렌더링됩니다. 스프라이트는 그 안에 구멍이 생겨서 모든 것을 끝까지 "예쁘게"합니다. (이것은 일종의 마스크이지만 알고리즘의 필수적인 부분은 아닙니까?) 감사합니다

— Jon

당신이하고있는 일은 이미 회색이있는 배경 스프라이트 위에 컬러 바의 마스크 버전을 그리는 것과 같습니다. 메서드에는 사용자 지정 셰이더가 필요하고 모든 픽셀에 쓰므로 원하는 모양 부분 만 그리는 것보다 느린 방법으로 끝납니다.

— Jack Aidley

@ JackAidley,하지만 배경 스프라이트가 없습니까? 무지개는 네 개의 float3 세계 위치 만 사용하여 그려집니다. UV가없고 "배경 스프라이트"도 없습니다. 또한 픽셀 쉐이더가 작은 쿼드에서 작동하지 않을까 걱정하고 있습니까? 또한 RangeMin 및 RangeMax clip () 대부분의 해당 조각을 즉시.

— Jon

원본 이미지에 표시된대로 테두리를 얻으려면 배경 스프라이트가 필요합니다. 이것을 생략하면 예, 방법이 다릅니다.

— Jack Aidley