플레이어가 색상 품질을 잃지 않고 이미지를 “염색”할 수있는 가장 좋은 방법은 무엇입니까? 사용할 수 있다면

2.5D 아이소 메트릭 (2D 이미지) 게임을 만들고 있습니다.

나는 플레이어들이 갑옷, 옷 등을 “염색”할 수 있기를 원합니다. 모든 것을 회색조로 조정하면보다 “자연적인”색소를 잃게됩니다. 예를 들어, 빨강 / 황색 회색조로 용을 만든 다음 오버레이 색상을 적용하면 2 차 색상이 모두 손실 된 순수한 용으로 이어집니다. 한편, 같은 레드 / 옐로우 드래곤 블루를 죽이면 블루 / 화이트가 멋지게 보입니다.

내 게임의 캐릭터에는 다양한 장비가 없습니다. 이 게임은 League of Legends가 캐릭터와 그래픽을 처리하는 방법에 더 가깝습니다. 단일 유형의 캐릭터 (예 : 영웅)가있을 수 있지만 옵션으로 캐릭터에 대한 여러 복장이있을 수 있습니다. 제한된 수의 “outfits”및 캐릭터에서 플레이어가 가능한 한 많은 사용자 정의를 할 수 있기를 바랍니다.

그래서 플레이어가 캐릭터를 선택하고, 여러 무기 중 하나를 고르고, 소수의 의상 선택 (캐릭터에 겹쳐져 있음)을 번갈아 가며 대부분의 모든 것을 염색하십시오 (무기의 특정 금속성 색상을 선택하고 모든 색상을 선택하십시오) 의류에 대한).

채색의 일부를 잃지 않고 그레이 스케일을 사용할 수 있다면 나는 할 것입니다.

다음은 내가 말하는 것에 대한 예입니다.

여기에 이미지 설명을 입력하십시오
여기에 이미지 설명을 입력하십시오
여기에 이미지 설명을 입력하십시오

Photoshop의 “컬러 오버레이”옵션에서 무엇을 사용하든 드래곤을 염색 할 수 없습니다. 분명히, 그레이 스케일을 사용하여 더 잘 채색 할 수 있다면 잘못하고 있습니다. 녹색 또는 노란색 또는 연한 자주색과 같은 색상의 경우에는 정상적으로 작동합니다. 다른 색상의 경우 예술을 파괴합니다.

그러나 그레이 스케일을 적용하지 않으면 원본 (빨간색 / 노란색) 이미지에 “HUE”색상을 적용하기 만하면 훨씬 더 좋아 보입니다.

붉은 색조
여기에 이미지 설명을 입력하십시오

보라색 색조
여기에 이미지 설명을 입력하십시오

이제 플레이어는 Dragon ANY 색상을 염색 할 수 있으며 여전히 멋지게 보입니다! (노란색은 흰색으로, 빨간색은 무지개의 색으로 바뀝니다.)

이것이 WHITE 또는 BLACK이 최상의 2 차 색상임을 의미합니까? 그런 다음 일종의 메서드 또는 셰이더를 사용하여 흰색 (보조) 색상을 다른 것으로 변경 하시겠습니까?

단일 이미지를 촬영하는 복잡한 방법에 대한 기사가 있습니까? 착색에 따라 다른 픽셀을 염색합니까?

드래곤의 경우 화이트 / 블랙 고 대비 드래곤으로 가장 잘 작동합니까? 빨간색 / 노란색이 최고의 색상 세트입니까? 내가 시도한 몇 가지 다른 색상보다 이미지가 훨씬 좋습니다. 그레이 스케일이 여전히 우수합니까?

Photoshop의 “혼합 옵션”에는 비디오 게임의 이미지를 적절하게 “염색”하는 방법이 포함되어 있지 않습니까? 더 나은 성공을 달성 할 수있는 복잡한 셰이더 / 방법이 있습니까?

참고 : GrayScale을 사용하여 이미지의 RAM 소비를 줄이거 나 손실 압축 중 품질 손실을 방지 할 수 있다면 심각하게 고려해야 할 사항입니다.



답변

색조 이동은 색상 세부 사항을 잃지 않고 다양한 색상을 얻을 수있는 가능성 중 하나입니다. 기본 아이디어는 각 픽셀을 RGB에서 HSV 공간으로 변환 한 다음 색조를 사용자 정의 된 양만큼 오프셋 한 다음 다시 RGB로 변환하는 것입니다. 실제로 이것은 RGB 값에 회전 행렬을 적용하여보다 효율적으로 수행 할 수 있습니다. 사용자 정의 색조 각도로 (1, 1, 1) 축을 중심으로 회전하는 행렬을 만듭니다. 그런 다음 픽셀 쉐이더의 각 RGB 값에이 매트릭스를 간단히 적용 할 수 있습니다.

이것은 적황색 용을 황록색, 녹청색, 청록색, 청자 홍색 또는 자홍색 용으로 이동시킬 수 있습니다. 이 방법으로 두 색상을 독립적으로 변경할 수 없으므로 약간 제한적입니다. 원본 이미지에서 작성된대로 상대적인 색조를 유지합니다. 당신이 접근 할 수없는 몇 가지 색상도 있습니다. 그러나 이것은 귀하의 목적에 충분할 수 있습니다.

다른 방법으로, 모델에 2 개 또는 3 개의 “키 색상”(여기서는 빨간색과 노란색)이있는 경우 각 키 색상에 대해 별도의 색상 채널을 사용하여 원본 이미지를 작성할 수 있습니다. 이 경우 빨간색과 노란색 대신 용을 빨강과 녹색으로 작성하고 세 번째 색을 사용하면 파란색으로 작성할 수 있습니다. 그런 다음 사용자가 세 가지 주요 색상을 선택하고 이미지에서 빨강, 녹색 및 파랑 값을 사용자 정의 색상의 양으로 사용하여 혼합 할 수 있습니다. 따라서 픽셀 셰이더는

finalColor = image.r * userColor1 + image.g * userColor2 + image.b * userColor3;

이를 통해 사용자는 흑백 또는 자주색과 금색 등 원하는 색상 조합을 선택할 수 있습니다.


답변

당신이 직면하는 문제는 단순히 전체 이미지를 “색칠”할 수 없다는 것입니다. 보이는 모양은 단순한 기본 색상 이상입니다. 하나는 하나의 재료에서 다른 재료로가는 미세한 그라디언트를 갖지만, 더 중요한 것은 기본 색상의 영향을받지 않는 반사, 하이라이트 및 그림자도 포함한다는 것입니다. (기본적으로 그 위에 추가됩니다.)

따라서 이미지를 구성 요소로 분해해야합니다.

:

해체 된 이미지
착색 된 예

이 경우 3 개의 레이어가 있습니다 :

  • 배경-색이 없어야하는 요소가 포함되어 있습니다.
  • 색칠해야 할 부분-색상에 곱합니다. 흰색 이외의 색상을 지정하면 OpenGL은 기본적으로 곱합니다.
  • 하이라이트-전체 이미지에 추가로 그려집니다. 색조 변화를 모방하는 것은 흰색이 아니라 노란색입니다. 개체는 단순한 색상이 아니라 색조와 함께 색조가 바뀝니다.

답변

개인적으로 마스크 텍스처를 사용하여 원하는 것을 달성하는 것이 좋습니다. 이렇게하면 기본 RGB24 텍스처가 정밀도를 그대로 유지하면서 원래의 색 품질을 유지할 수 있습니다. 또한 주요 텍스처를 컬러 마스크와 혼합 할 수있는 예술적인 자유를 충분히 제공합니다.

각 마스크는 기본 질감의 색상을 사용자 지정 색상으로 선형 보간하는 회색조 질감으로 볼 수 있습니다. 사용자가 두 가지 색상을 사용자 정의 할 수 있다고 가정하면 픽셀 쉐이더는 다음과 같이 보일 것입니다.

입력 : MainTexture (RGB), Mask1Texture (A), Mask2Texture (A), Colour1 (float), Colour2 (float)

출력 : (Mask1Texture + Mask2Texture) -MainTexture + Colour1 * Mask1Texture + Colour2 * Mask2Texture

즉, 마스크가 한 픽셀에 대해 큰 값을 가질수록 주 텍스처가 해당 픽셀의 출력 색상에 영향을 미치지 않습니다. 예를 들어 드래곤 텍스처를 그레이 스케일로 변환하고 날개를 제외한 모든 것을 지워 몸 색깔에 관계없이 날개 색상을 사용자 지정할 수 있습니다.

이 기술을 모바일 게임에 사용했으며 전반적인 성능에는 영향을 미치지 않습니다. 텍스처 당 RAM이 33 % 증가 할 수 있지만 품질에 대한 절충은 그만한 가치가 있습니다.

Ps 하나의 사용자 정의 색상 만 사용하려는 경우 RGBA32 메인 텍스처의 알파 채널을 마스크로 사용하면됩니다.


답변

컬러 팔레트를 사용하여 플레이어가 팔레트를 편집하게 할 수 있습니다. 셰이더를 사용하는 경우 1D 텍스처를 팔레트로 사용하고 원래 회색 값을 인덱스로 사용할 수 있습니다.

트루 컬러 이미지를 255 가지 색상의 이미지로 변환하려면 모든 픽셀 색상 값을 가져 와서 3 차원 색상 공간에서 k- 평균 알고리즘을 사용하여 255 개의 클러스터로 그룹화 할 수 있습니다. 또는 일반적인 이미지 변환 도구를 사용하십시오. 그런 다음 회색 값 텍스처의 보간은 색상 텍스처의 인덱스 보간이 될 것입니다. 이로 인해 원본 이미지의 두 텍셀 사이에 여러 색상이있는 결과가 발생할 수 있습니다. 이것은 보간을 비활성화하거나 (원하는 것은 아니라고 생각합니다) 유용한 방법으로 색상 표를 정렬하여 해결할 수 있습니다.


답변

이미지를 회색 이미지로 변환 할 수는 있지만 여전히 rgba 채널로 저장하십시오. 알파 채널에 가중치를 저장 한 다음 픽셀에 적용 할 염료의 양을 결정하는 데 사용합니다. 이 가중치는 색상이 흰색에 얼마나 가까운 지에 따라 계산할 수 있습니다. 픽셀이 흰색에 가까울수록 염료가 적거나 무게가 낮아야합니다. 이렇게하면 대부분의 하이라이트가 원래의 밝기로 유지되지만 약간의 염료가 적용됩니다. 그런 다음 각 채널 Ro + (Rd * Ao)를 계산하여 최종 픽셀 색상을 찾을 수 있습니다. 여기서 Ro는 원본 빨강, Rd는 염료 색에서 빨강, Ao는 원본의 알파입니다. 모든 흰색 픽셀은 새로운 색을 얻지 못하고 모든 검은 픽셀은 염료 색을 가정합니다.


답변