소리꽃 KeyBloom TIL 29
노트를 치면 수면에 물방울처럼 고리가 퍼지는 모션을 새로 넣고, 파티클 개수 상한을 세 배로 올리면서 나온 것들.
여럿을 한 모양으로 보이게 하기
대형을 만드는 건 개체가 아니라 규칙이다
고리를 만들려고 파티클을 사방으로 쏘았는데 고리가 안 되고 뭉친 덩어리가 됐다. 방향을 무작위로 뽑았기 때문이다. 무작위는 고르게 흩어지는 게 아니라 몰리는 데가 생긴다.
방향을 개수에 맞춰 균등하게 나눠 주니 그제야 얇은 고리가 됐다. 항력(속도에 비례해 감속시키는 저항)도 수명도 모두 같게 두니 함께 퍼지다 함께 옅어진다.
앞서 모래 모션에서는 정확히 반대를 했다(앞선 TIL 21). 거기서는 공유 규칙을 걸 때마다 고리와 벽이 생겨서, 개체마다 다른 리듬을 줘야 자연스러워졌다.
두 경우가 모순이 아니다. 모래는 무리로 보이되 개별로 움직여야 했고, 파동은 하나의 대형으로 보여야 했다. 무엇을 공유하고 무엇을 흩을지는 “이게 여럿으로 보여야 하나, 하나로 보여야 하나”가 정한다. 대형을 원하면 공유하고, 자연스러움을 원하면 흩는다.
가로와 세로를 다른 단위로 재면 원이 찌그러진다
고리를 정확히 원으로 만들었는데 화면에는 납작한 타원으로 나왔다. 파티클 위치를 가로는 화면 폭의 비율로, 세로는 화면 높이의 비율로 들고 있어서다. 화면이 가로로 긴 만큼 같은 값이 가로에서 더 긴 거리가 된다.
가로 반경에 화면 종횡비(가로와 세로의 비, 16:9면 9÷16)를 곱해 픽셀 길이를 맞추니 원이 됐다.
값을 비율로 저장하면 해상도가 바뀌어도 안 깨져서 좋은데, 가로와 세로가 서로 다른 기준을 쓴다는 게 딸려 온다. 평소에는 문제가 안 되다가 “정사각형”, “정원”, “45도”처럼 두 축을 같이 쓰는 순간 드러난다.
흔들림을 얹는 방향
더하면 방향이 뒤집히고 곱하면 안 뒤집힌다
모래 유영에서 높이 슬라이더가 실제와 안 맞았다. 3을 줬는데 어떤 알갱이는 한참 못 올라가고 어떤 알갱이는 넘어갔다.
원인은 위로 흘려보내는 속도(드리프트 — 무리 전체를 한 방향으로 밀어 주는 흐름)에 자연스러운 흔들림(난류)을 더한 것이었다. 흔들림이 흘려보내는 속도보다 클 때가 있어서, 그 순간 알갱이가 멈추거나 아래로 내려갔다. 개체마다 도달 높이가 크게 갈릴 수밖에 없다.
흔들림을 더하는 대신 곱하니 해결됐다. 곱하면 빨라지고 느려질 뿐 방향이 안 뒤집히고, 평균이 원래 속도로 유지돼 도달 높이가 설정과 맞는다.
기본 흐름에 변화를 얹을 때 더할지 곱할지는 취향이 아니다. 더하기는 기본값을 뒤집을 수 있고 곱하기는 못 한다. 방향이나 부호가 의미를 갖는 값이면 곱하는 쪽이 안전하다.
개수가 늘어날 때
개체마다 하던 일을 그룹으로 올린다
파티클 상한을 세 배로 올렸더니 프레임이 떨어졌다.
들여다보니 그리는 코드가 파티클 하나하나마다 “이 파티클은 어떤 큐(곡 중간에 갈아탈 수 있는 연출 묶음)에 속하나”를 시그니처 문자열로 조합해 찾고 있었다. 큐는 많아야 예닐곱 개인데 파티클은 수천 개다. 이렇게 매 프레임 수천 번 도는 구간을 핫패스라고 한다. 같은 답을 수천 번 다시 구하고 있었던 것이다.
큐별로 한 프레임에 한 번만 구해 두고 파티클은 그걸 갖다 쓰게 바꿨다. 개수를 크게 늘려도 부담이 안 늘어난다.
개수를 늘리기로 했으면 “개체마다 하는 일” 목록을 한 번 훑어야 한다. 그중에 개체 수보다 훨씬 적은 무언가에만 달린 일이 있으면, 그건 개체가 아니라 그쪽에 붙어야 한다. 이런 건 개수가 적을 때는 아무 티도 안 나서 늘리기 전에는 안 보인다.
상태를 바꿨으면 조건과 무관하게 되돌린다
같은 최적화에서, 발광(글로우)이 꺼진 큐는 글로우를 그리는 순회를 통째로 건너뛰게 했다. 그랬더니 건반이 흐릿해지고 파티클이 사라지지 않고 잔상으로 남았다.
건너뛴 순회 안에 알파(투명도)를 원래대로 되돌리는 한 줄이 들어 있었다. 파티클마다 낮춰 둔 알파가 그대로 남아, 이후에 그리는 건반도 흐려지고 다음 화면을 지우는 것까지 반투명해진 것이다.
되돌리는 줄을 조건 밖으로 뺐다.
무언가를 잠깐 바꿨다가 되돌리는 코드는 바꾸는 쪽과 되돌리는 쪽이 같은 조건에 묶이면 안 된다. 나중에 누가 그 구간을 건너뛰게 만들면 되돌리기까지 같이 건너뛴다. 그리고 이런 버그는 엉뚱한 데서 증상이 나타나서 원인을 찾기 어렵다 — 여기서도 처음 보인 건 빛이 아니라 건반이었다.
하나로 여러 곳을 움직이기
세기를 배율 하나로 만들어 여러 속성에 나눠 곱한다
건반을 세게 칠수록 화려해지게 만들고 싶었다. 크기도, 개수도, 밝기도 같이 움직여야 한다.
각각에 따로 계산을 붙이면 셋이 제각각 놀고, 나중에 “세기 반응을 끄고 싶다”가 오면 세 곳을 다 손봐야 한다. 그래서 노트마다 배율을 하나 만들어 두고 그걸 여러 속성에 나눠 곱했다. 사용자가 반응 정도를 0으로 두면 배율이 1이 돼 세기와 무관해진다.
여러 곳이 한 입력에 함께 반응해야 할 때는 그 입력을 숫자 하나로 정리하고 각자 곱하게 하는 게 낫다. 끄는 것도 그 숫자 하나를 중립값으로 만들면 끝난다.
같은 배율이라도 모션마다 곱하는 대상은 다르게 잡았다. 위로 솟는 모션에서 “크게”는 높이이고, 사방으로 퍼지는 모션에서는 반경이고, 나선에서는 폭이다. 하나의 조절값이 여러 대상에 걸릴 때 통일해야 하는 건 계산이 아니라 사용자가 받는 인상이다.
요약
- 대형을 원하면 규칙을 공유하고, 자연스러움을 원하면 흩는다 — 무엇을 원하는지가 먼저다
- 가로와 세로를 다른 기준으로 저장하면 두 축을 같이 쓰는 순간 찌그러진다
- 기본 흐름에 변화를 얹을 땐 더하기가 아니라 곱하기 — 더하기는 방향을 뒤집는다
- 개수를 늘리기로 했으면 “개체마다 하는 일” 중 그룹에 붙어야 할 게 있는지 훑는다
- 바꾸는 코드와 되돌리는 코드를 같은 조건에 묶지 않는다
- 한 입력에 여러 곳이 반응해야 하면 배율 하나로 만들어 나눠 곱한다