또 디자인 이야기다
처음 롱노트는 이랬다
좀 각지고 투박한 느낌이었다
그러다보니, 단노트만 있을땐 괜찮은데
롱노트가 나올땐 투박해보인다는 피드백을 받았다.
원인을 크게 두가지로 규명했는데
1. 노트 텍스쳐 자체가 별로다
2. 곡선이 완전하지 않아서 안예쁘다
그래서 두가지에 대해 폴리싱을 하기로 했다
1. 노트 텍스쳐 자체가 별로다
처음엔 이런형태라 머리랑 아예 구분이 안됐다
그래서 위에 티저영상처럼 윤곽을 주긴했지만 그래도 투박했다
그래서 여러가지 시안들을 만들었다
애매하단 생각이 들떄
회의중에 아트 한분이 시안을 던져주셨다
그래서 이걸 기준으로 해보기로 했다
결정된건 이렇다
선을 양옆 한개로 줄이고, 꼬리는 v자인 반회색 도안
근데 이거론 부족하단 느낌이어서 결국...
2. 곡선이 완전하지 않아서 안예쁘다
롱노트에 곡선을 도입하기로 했다.
처음엔 캣멀롬 스플라인을 생각했다. 추가 정보 없이 곡선을 구성할수 있으니까.
근데 웹에서 조금 만져보니까 모양이 쮸글해지고 이상해지더라
괜히 베지어가 나온게 아니었다
그래서 결국 베지어 곡선으로 하기로 했다.
그걸위한 제어점 기능도 에디터에 추가했다.
지금은 다 끝나서 말 쉽게하고있지만 노트 표시 방식이나 이것저것 베이스를 많이 고쳐야해서 꽤 까다로웠다...
사실 여기에서 온갖버그를 많이 고치긴 했는데
그중 유별난 버그 하나를 소개한다
진짜로 희한한 현상이 일어났다.
제어점이 노트의 두 점의 정 중앙인 경우, 이미지와 같은 바들바들거리는 현상이 발생했다.
심지어 모든 위치에서 발생하는 것도 아니라 곡의 어느구간이냐에 따라 또 발생하기도 했고 안하기도 했다.
어처구니가 없어서 처음엔 이유를 종잡을수가 없었다.
일단 x좌표를 구하는 과정에서 문제가 생긴거 같으니 그 부분을 주의깊게 봤다.
y값이 주어졌을때, 베지어 곡선의 x값을 구하는 함수.
만약 이 함수가 없으면 베지어곡선은 매개변수를 통해 그리기 때문에 y축에 대해 균일하게 움직이지 않는다.
떄문에 베지어 곡선의 매개변수 표현을 풀어서, 다시 f(y) = x의 함수꼴로 나타내야 했다.
이 과정에서 2차방정식을 풀어야했는데...
이 식의 잠재적 문제점을 알겠는가?
바로 beta=0이고, alpha가 충분히 작은 경우,
disc값이 매우 작아진다. 그 다음, 다시 sqrt를 하면서 커진다.
즉슨 이 과정에서 floating point의 언더플로우가 발생한다는 것이다....
때문에 해상도가 떨어지게 되면서 계단이 발생하게 된것이다.
개발하면서 이런식으로 부동소수점 정확도 문제를 겪어볼줄은 몰랐다.
가만, 근데 이건 beta가 0일 때 얘기 아닌가?
그렇다. a,b를 이등분하는 지점에 제어점 c가 있는 경우, beta는 0이 된다.
원인은 이놈이었다.
(주석이 친절한 이유는 chatgpt 짰기 때문이다.)
여튼 이 문제는 0에 가까우면 linear로 근사하는 방법으로 해결할 수 있다.
문제는 이 "가깝다"의 기준인 eps값을 좀 작게 잡았기 때문에 계단 현상이 발생했던 것이다.
따라서 이 값을 10배 해줬더니 문제가 해결됐다.
경사났네 경사났어
그렇게 행복하게 곡선형 노트를 구현하고 결과물
꽤 예뻐졌다!
Glisynth is a rhythm game that uses two types of notes. The Q row on the keyboard is used for yellow notes, while the A row is used for white notes.
store.steampowered.com
댓글 2