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


41

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


5
이것은 합법적으로 흥미 롭습니다. 나는 이것을 투표하고 좀 더 관심을 갖기를 바랍니다. 색 이론은 훌륭한 주제입니다.
Evan

색조 회전은 2D이지만 가능하지만 3D로 작동하는지는 모르겠습니다.
ashes999

에반 감사합니다. 또한 이것이 매우 흥미롭고, 내가 조사한 최고의 주제 중 하나라는 것에 동의합니다. 이 유형의 작업은 아티스트가 아니라 컬러 이론, 비디오 게임 쉐이더 또는 아티스트 코더를 다루는 아티스트가 필요하기 때문에 거의 수행되지 않는다고 생각합니다. 나는 예술과 프로그래밍 모두에서 뛰어난 사람을 찾는 것이 드물다는 것을 상상할 수 있습니다. 구글 에서이 주제에 대한 찾을 수있는 연구는 없습니다. 특히 연구의 핵심 용어를 모르는 사람에게 적합합니다. 나는 확실히 예술가가 아니다.
Carter81

답변:


19

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

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

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

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

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


1
좋은 답변 일뿐만 아니라 희귀 한 주제에 대한 답변 (색상 이론)에 +1합니다. 나는 왜 내가 전에 그것을 생각하지 않았는지 전혀 모른다. RGB. 빨강 녹색 파랑. DUH! 사용하기에 가장 좋은 색상은 개별 채널을 조작 할 수있는 능력 때문에 정확한 3 가지 색상 일 것입니다.
Carter81

1
대부분의 이미지 정보는 밝기로 전달되며 간단한 색조 이동은 밝기를 유지하지 않기 때문에 색상 이동은 매우 어려운 주제입니다. 색조가 다르면 고유 한 밝기 값이 다릅니다. 더 정교한 알고리즘이 필요합니다.
API-Beast

10

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

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

:

해체 된 이미지 착색 된 예

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

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

+1. 그러나 "전체 이미지를 단순히"색칠 "수는 없습니다. 그것은 그의 게임에 대한 OP 선택에 달려 있습니다. 예를 들어 디아블로 II가 그랬습니다. 그래서 나는 "당신이 할 수없는 것 / 필요하지 않은"부분들로 엄격하지 않을 것입니다. 이것은 옵션 중 하나 일뿐 아니라 더보기 좋지만 RAM을 많이 사용합니다.
크롬 스터, 모니카

1
@ KromStern Point는 항상 그렇게하면 끔찍해 보입니다.
API-Beast

좋은 대답입니다. 자동화를 통해 가능합니까? 하나의 캐릭터에 대해 수천 개의 애니메이션 이미지가있는 경우 각 레이어를 수동으로 선택하거나 이미지를 한 번에 하나씩 분해 할 수 없습니다. 여전히 마스킹을 사용하여 3D에서 렌더링하는 경우 자동화하는 데 도움이되는 몇 가지 해결 방법을 볼 수 있지만 여전히 큰 대답입니다.
Carter81

지배적 인 색상을 찾아서 추출하여 (역의 "알파에서 알파로"알고리즘을 사용하여) 색상을 자동화 할 수 있습니다. 하지만 그런 식으로 구현 한 것은 아닙니다.
API-Beast

하이라이트를 추출하려면 이전에 추출한 마스크를 가져 와서 필터링하면 가장 밝은 구성 요소 만 남게됩니다.
API-Beast

3

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

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

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

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

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

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

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


2

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

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


이것은 기본적으로 내가 생각한 것입니다. 좀 더 완전한 것으로 답을 확장하고 싶을 수도 있습니다. 기본적으로 사용자가 두 가지 색상 (또는 더 많거나 적은 수를 선택하지만 인수를 위해 2)을 선택하여 두 가지 색상에서 사라지는 1D 텍스처를 만들 수 있습니다. 1D 텍스처에서 참조 역할을하는 지오메트리에 회색조 텍스처를 사용하십시오. 사용자가 여전히 못생긴 색상을 설정할 수는 있지만 최소한 대비가 좋은 색상을 선택할 수있는 옵션이 있습니다.
wrosecrans

예, 더 적은 수의 사용자 색상에서 전체 255 색상 팔레트를 파생시킬 수도 있지만 여기서는 시도해 보는 것이 좋습니다. 나는 많은 오래된 게임이 색상 팔레트의 변화를 사용하여 몬스터를 변형 시켰다는 것을 알고 있습니다. 디아블로가 그렇게했다고 생각합니다.
Arne

1

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

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.