# 이 글은 모더 전용입니다.
# 인게임에서 보여지는 .sprite 이미지에 색상을 입히는 방법입니다.
# 싱글 모드에서 새로운 아이템을 제작할 때 유용합니다.
# 응용 방법에 따라 하나의 sprite 파일을 가지고 색상만 입히는 것이 아닌 다른 형상으로 보이게 하는 것도 가능합니다.
# 작업하면서 참고했던 해외 유튜버 영상에 있던 내용의 일부분을 정리해서 올립니다.
(알콜성 치매가 살짝 걱정이라...)
# 참고 영상 :
Diablo II: Resurrected · Modding Reference · Color Controls
ImageWidget · charm_large3 → 빨간색 변환 예시
주석 포함 .json
{
"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]
공개거부
