[모더용] "useAdvancedColoring"을 이용한 인벤토리 아이템 이미지 색상 변환

# 이 글은 모더 전용입니다.

# 인벤토리에서 보여지는 아이템의 이미지에 색상을 입히는 방법입니다.

# 작업하면서 참고했던 해외 유튜버 영상에 있던 내용인데 정리해서 올립니다.

   (알콜성 치매가 살짝 걱정이라...)

Diablo II: Resurrected · Modding Reference

Color Controls

"useAdvancedColoring"을 이용한 인벤토리 아이템 이미지 색상 변환

주석 포함 JSON

ImageWidget · charm_large3 → 빨간색 변환 예시

                    {
                      "type"  : "ImageWidget",
                      "name"  : "GammaCalibration",
                      "fields": {
                        "rect"               : {"x": 94, "y": 70},
                        "filename"           : "items/misc/charm/charm_large3",
                        "useAdvancedColoring": true,
                        "recolorRange"       : {
                          "hue"       : [0.05,  0.06 ],
                          "saturation": [0.5,   0.501],
                          "value"     : [0.585, 0.415]
                        },
                        "hsvTransform"       : [0.0, 0.25, 0.55, 0.0],
                        "tintTransform": [1.0, 0.0,  0.0,  0.5]
                      }
                    }

"rect" : {"x": 94, "y": 70},  // 패널 내 이미지 위치 (픽셀 좌표)    

"filename": "items/misc/charm/charm_large3",

        // 렌더링할 스프라이트 경로 (.sprite 확장자 생략) 

       // 기준 경로: data/hd/global/ui/    

"useAdvancedColoring": true,

        // true 시 아래의 recolorRange + hsvTransform 시스템 활성화 

       // false(기본값)이면 원본 스프라이트 색상 그대로 렌더링

    "recolorRange": {

        // ① 변환 대상 픽셀 선택 필터 (HSV 범위로 지정)

        //    이 범위에 속하는 픽셀만 변환이 적용됨 

       //    모든 값은 0.0 ~ 1.0 범위 사용

      "hue"       : [0.05, 0.06],

              // 색상(Hue) 범위: 0.05~0.06 ≒ 주황~갈색 계열 

             // Photoshop H(0~360) 기준으로는 18°~21.6°

      "saturation": [0.5,  0.501],

              // 채도(Saturation) 범위: 0.5 고정 (매우 좁은 범위) 

             // 범위가 좁을수록 특정 채도의 픽셀만 선택

      "value"     : [0.585, 0.415]

              // 명도(Value) 범위: 0.415~0.585 

             // ※ 순서 무관 - 두 값 사이의 범위로 인식    },

    "hsvTransform": [0.0, 0.25, 0.55, 0.0],

        // ② 선택된 픽셀에 적용할 HSV 변환값 (델타값)

        //    형식: [H이동, S이동, V이동, A이동]

        //    globaldatahd.json의 "lred"(ITRANSFORM_LIGHTRED)와 동일한 값

        // 

       //    [0]  H: 0.0   → 색조 이동 없음 (빨강은 H=0이므로 이동 불필요)

        //    [1]  S: +0.25  → 채도를 0.25만큼 증가 

       //    [2]  V: +0.55  → 명도를 0.55만큼 증가 (밝게) 

       //    [3]  A: 0.0   → 알파 변환 없음

    "tintTransform": [1.0, 0.0, 0.0, 0.5]

        // ③ HSV 변환 위에 추가로 얹는 RGB 색조 오버레이

        //    형식: [R, G, B, 강도(alpha)]

        // 

       //    [0]  R: 1.0  → 빨강 채널 100%

        //    [1]  G: 0.0  → 초록 채널 0%

        //    [2]  B: 0.0  → 파랑 채널 0%

        //    [3]  강도: 0.5 → 원본과 50% 블렌딩 (1.0에 가까울수록 진한 틴트)

색상 처리 파이프라인

Step 0

원본 스프라이트

charm_large3.sprite 로드
각 픽셀의 RGB → HSV 변환

↓

Step 1 · recolorRange

픽셀 선택 필터

hue / saturation / value 범위를 벗어난 픽셀은 변환 제외
→ 배경, 윤곽선 등 다른 색상은 보존됨

↓

Step 2 · hsvTransform

HSV 델타 변환

선택된 픽셀의 H·S·V 각 채널에 값을 더함
새 H = 원본 H + transform[0]
새 S = 원본 S + transform[1]
새 V = 원본 V + transform[2]

↓

Step 3 · tintTransform

RGB 틴트 오버레이

HSV 변환 결과 위에 RGB 색상을 alpha 강도로 블렌딩
최종 색 = lerp(변환 픽셀, tint RGB, 강도)

↓

Output

최종 렌더링

변환된 픽셀 + 필터에서 제외된 원본 픽셀 합성 → 화면 출력

파라미터 상세

recolorRange · hue

색조 범위

0.0 ~ 1.0 범위 사용
0.0 = 빨강, 0.33 = 초록,
0.67 = 파랑, 1.0 = 빨강

Photoshop H(0~360) → ÷360 변환

recolorRange · saturation

채도 범위

범위가 좁을수록 정밀 선택
[0.5, 0.501] → 거의 고정값
[0.0, 1.0] → 채도 무관 전체 선택

recolorRange · value

명도 범위

두 값의 순서는 무관
[0.585, 0.415]은 내부에서
0.415 ~ 0.585로 처리됨

hsvTransform [0]

H · 색조 이동

원본 H에 더하는 값
0.0 = 변화 없음
+0.5 = 보색으로 이동
-0.47 = 파랑 방향 이동

hsvTransform [1]

S · 채도 이동

원본 S에 더하는 값
+값 = 채도 증가 (선명)
-값 = 채도 감소 (회색)
-0.5 = 거의 무채색

hsvTransform [2]

V · 명도 이동

원본 V에 더하는 값
+값 = 밝아짐
-값 = 어두워짐
-0.65 = 거의 검정

tintTransform [R, G, B]

틴트 RGB

덧씌울 색상의 RGB 비율
빨강: [1.0, 0.0, 0.0, ...]
파랑: [0.0, 0.0, 1.0, ...]
보라: [0.6, 0.0, 1.0, ...]

tintTransform [3]

틴트 강도

0.0 = 틴트 없음 (hsvTransform만 적용)
0.5 = 50% 블렌딩
1.0 = 완전히 틴트 색상으로 덮임

globaldatahd.json 색상 프리셋

SpriteColoringHelper → colorTransform에 정의된 표준 변환 프리셋. colorTransformOverride에서 특정 스프라이트에만 다른 값을 오버라이드할 수 있음.

코드	이름	H	S	V	tint 색상 / 강도
whit	Light White	0.0	-0.50	+0.50	없음
lgry	Light Grey	0.0	-0.55	-0.35	없음
dgry	Dark Grey	0.0	-0.60	-0.50	없음
blac	Black	0.0	-0.65	-0.65	없음
lblu	Light Blue	-0.47	+0.20	+0.60	파랑 / 0.40
dblu	Dark Blue	-0.46	+0.25	+0.20	파랑 / 0.60
cblu	Crystal Blue	+0.58	+0.20	+0.50	파랑 / 0.50
lred	Light Red	0.0	+0.25	+0.55	빨강 / 0.50
dred	Dark Red	0.0	+0.75	-0.35	빨강 / 0.50
cred	Crystal Red	0.0	+1.00	+0.50	빨강 / 0.70
lgrn	Light Green	+0.25	+0.25	-0.10	초록 / 0.30
dgrn	Dark Green	+0.25	0.0	-0.30	초록 / 0.30
cgrn	Crystal Green	+0.25	+1.00	+0.30	초록 / 0.30
lyel	Light Yellow	+0.065	+0.40	+0.40	노랑 / 0.80
lgld	Light Gold	+0.04	0.0	+0.50	골드 / 0.60
lpur	Light Purple	-0.33	+0.80	+0.40	보라 / 0.30
dpur	Dark Purple	-0.16	+0.35	-0.25	보라 / 0.75

커스텀 색상 만들기 (globaldatahd.json)

색상별 hsvTransform + tintTransform 예시

// ── 아이스 블루 (차갑고 맑은 파랑) ──────────────────────────

"hsvTransform" : [-0.47, 0.2,  0.6,  0.0],

"tintTransform": [0.6,  0.96, 0.98, 0.40]

// ── 다크 레드 (어둡고 진한 빨강) ───────────────────────────

"hsvTransform" : [0.0,  0.75, -0.35, 0.0],

"tintTransform": [1.0,  0.0,  0.0,  0.5]

// ── 크리스탈 그린 (선명한 초록) ───────────────────────────

"hsvTransform" : [0.25, 1.0,  0.3,  0.0],

"tintTransform": [0.0,  1.0,  0.0,  0.3]

// ── 라이트 퍼플 (연한 보라) ─────────────────────────────

"hsvTransform" : [-0.33, 0.80, 0.4,  0.0],

"tintTransform": [0.55,  0.14, 0.51, 0.3]

// ── 골드 (유니크 아이템 색감) ────────────────────────────

"hsvTransform" : [0.04, 0.0,  0.5,  0.0],

"tintTransform": [0.88, 0.81, 0.71, 0.6]

// ── 회색 (에테리얼 느낌) ──────────────────────────────

"hsvTransform" : [0.0,  -0.55, -0.35, 0.0],

"tintTransform": [0.0,  0.0,   0.0,  0.0]