이거 레이어 추가하긴 했거든.



근데 UI 레이어하고 화면상 움직이는 영역의 레이어하고 달라서, 두 개를 구분 지을 수 있게 만들어 놨단 말이지.



문제는 이 충돌처리에서 발생하는데,



마우스의 움직임, 도화지의 움직임, 대상 버튼의 위치까지 다 잡아냈단 말이지.



문제는 뭐냐면,



내가 이거를 일부러 모듈처럼 분리시켜 놔서 각각 독립적으로 쓸 수 있도록 구성해 놨단 말이야. 그래야지 넣었다 뺏따 하면서 마음대로 바꿀 수도 있을 거고,


상황에 따라 커스터마이징도 가능하게 될 테니까.





여기 아래 보면 커스터 마이징 부분이 있잖아.



저걸 사람들이 커스터마이징 할 수 있도록 구성해놔야지 된단 말이지.



https://github.com/search27/RxCanvasInterface




그래서 내가 짜는 것들과 구성들은 전부 '보편성'을 가지고 있어야 돼.




문제는 말이야,



뭐가 문제냐면,



두 가지 정도가 있어.



저 1번 사진에서 Rx스킬트리.js는 독립적으로 트리구조를 만들어내는 소프트웨어란 말이지. 물론 Rx Canvas Interface를 이용해서 만들어내는 거지만, 여기에서의 Interface를 쓰지는 않고, 그 안에 있는 Comonent만 가져다 쓰는 거야.



비유를 하면 이런 거지. HTML에서 Button 태그를 쓰지 않고 DIV를 이용해서 버튼을 만드는 거지. CSS 하고 자바스크립트 쓰면 충분히 가능하잖아?



그런 것처럼 Rx Skill Tree에서도 컨트롤러인 Interface 객체를 사용하지 않고 Button 만 가져와서 별도로 렌더링 돌려서 저 스킬트리가 만들어진 거란 말이지.



여기서 문제가 발생하는데, CanvasMover라는 줌인아웃 무빙이 가능한 도화지와, Back 버튼은 UI 버튼으로 Interface 객체에서 렌더링 시켜주는 거로 각각의 도화지들 마다 Offset 위치를 별도로 구해내는 방식으로 이벤트 객체로 전달하는 방식을 취했지.



그러면 마우스 위치가 어디에 있든 현재 위치에서 각 도화지의 객체에 충돌 이벤트를 처리할 수 있을 테니까.




근데 이거는 Interface를 거쳤을 때 얘기고,



저 Rx Skill Tree는 Rx Canvas Interface 의 Interface 객체를 사용하지 않고 Collision 하나만을 사용하고 있딴 말이쥐. 렌더링은 별도로 돌리고 있어서, 살짝 꼬인 느낌이 드는뎅.



어카지.




커스터마이징이 가능하도록 설계해야 되는데, 그러려면 대개 단순해야 되는데,.




두 번째 문제는,



지금 레이어 하나 추가했을 뿐인데, 연산량이 1.5~1.8배 정도 증가했어.



어케 계산했냐고? 감이지. 나는 내 자체가 디버거랑 똑같아서 감으로 느낄 수 있지.



어쨌뜬 그래서 지금은 컴포넌트가 몇 개 없어서 0.01초 정도되는 미세한 속도 변화는 일반인이라면 감지를 못 하겠지만,



나는 느낀단 말이지.



이게 연상량이 불필요하게 늘어났다는 느낌이 들어서 보다 좋은 방식의 레이어 설계가 필요하다고 느끼고 있따.



아, 쉬발.



존나 바쁜데.