소리꽃 KeyBloom 32

소리꽃 KeyBloom 바로가기 ↗

수면 물방울 같은 새 모션을 넣고, 치는 세기로 파티클이 반응하게 하고, 모래·분수를 다듬고, 개수를 늘린 만큼 렌더를 최적화한 날.

오늘 한 일

파동(Wave) 모션 추가

수면에 물방울이 퍼지듯, 노트를 치면 그 지점에서 위쪽 반원 고리가 퍼지며 옅어진다.

• 반원에 파티클을 균등 각도로 배치해 얇은 고리를 만든다(방사형처럼 랜덤이면 뭉쳐서 고리가 안 됨).
• 항력으로 감속하며 퍼지고, 균일 수명으로 고리가 함께 사라진다.
• 폭 = 가로 반경, 높이 = 세로 반경, 속도 = 퍼지는 빠르기, 세기 = 고리 크기.

세기 반응(velSense) 슬라이더

치는 세기(velocity)로 도달·개수·발광을 한 슬라이더로 조절한다(0이면 세기 무관).

• 모션마다 “도달”을 다르게 해석 — 상승은 높이, 방사형·파동은 반경, 나선은 폭.
• 노트당 배율을 한 번 계산해 적용. 세게 치면 크고 많고 밝게, 약하게 치면 잔잔하게.

모래·분수 다듬기

• 모래: 도달 높이를 정확하게(아래 막힌 부분), 나타날 때 스며나오게(fade-in), 시작이 일자로 나오던 걸 높이 편차로 완화.
• 분수: 좁게 모여 솟았다가 중력으로 꺾여 떨어지는 아치로.

크기·개수·성능

• 파티클 크기를 통일(개체마다 다르던 것·모션별 배율 제거)하고 전체적으로 곱게.
• 개수 최대 30 → 100.
• 개수를 늘린 만큼 렌더를 최적화(아래 막힌 부분).

---

막힌 부분

파동이 납작한 타원으로 나왔다

x는 화면 폭 비율, y는 화면 높이 비율로 저장하는데 화면이 16:9라, 폭·높이 값이 같아도 픽셀로는 가로가 더 길어 고리가 납작해진다.

• 해결: 가로 반경에 화면 비율(9/16)을 곱해 픽셀을 맞췄다. 폭 0.5에서 시각적 정원이 되고, 폭을 0.5에서 벗어나게 하면 타원 정도가 조절된다.

개수를 늘리니 FPS가 떨어졌다

렌더가 파티클마다 아틀라스 시그니처 문자열을 새로 만들고 큐 설정을 조회하고 있었다. 큐는 많아야 6개인데 파티클은 수천 개라 여기가 핫패스의 주 비용이었다.

• 해결: 큐별로 프레임당 한 번만 해석해 캐시하고, 발광이 꺼진 큐는 글로우 패스(두 번째 순회)를 통째로 건너뛰게 했다.
• 교훈: 패스를 조건부로 건너뛸 때 캔버스 상태 원복(globalAlpha)까지 그 조건 안에 두면, 발광이 꺼진 경우 원복이 안 돼 건반이 흐려지고 다음 프레임 화면 지우기가 반투명해져 파티클이 잔상으로 남는다. 상태 원복은 조건 밖에서 항상 한다.

모래 도달 높이가 개체마다 흩어졌다

세로 난류를 상승 드리프트에 더하니(덧셈), 난류가 드리프트보다 커서 어떤 알갱이는 방향이 뒤집히거나 멈췄다. 그래서 개체마다 도달 높이가 크게 흩어져 높이 슬라이더가 실제와 안 맞았다.

// ❌ 덧셈 — 난류가 드리프트를 이겨 방향이 뒤집힘
vy_target = flowVy + wander * strength;
// ✅ 곱셈 — 항상 상승 방향 유지, 평균은 드리프트라 도달 정확
vy_target = flowVy * (1 + wander * 0.4);

• 난류를 드리프트에 곱으로 실으니 방향이 안 뒤집히고 평균 상승 속도가 유지돼 도달 높이가 정확해졌다.

---

다음에 할 일

• 네이티브 실기 확인 → 공연 출력 배경 이미지 버그와 함께 0.1.7 출시
• 크로마키 출력 + 건반 crop(실연주 영상 위에 얹어 위치 맞추기) — 설계 후
• 분수·파동 등 상수 미세튜닝은 실기로 보며

---

Series: 소리꽃 KeyBloom

---

Suggested Posts