개요
카드를 분해 칸에 드래그&드롭하면 카드가 분해돼서 자원을 얻는 기능, 얻은 자원으로 다른 카드들을 사용할 수 있다. 카드 비용이 높을수록 분해 자원도 많이 나온다.
기록
카드 드래그-드롭은 카드 활성화를 개발할 때 이미 완성했다.
원래 분해 칸은 손 오른쪽의 청색 버튼이였으나, 머지 텍틱스라는 게임에서 왼쪽에 쓰래기통이 나오는 것에 영감을 받아 청색 스위치 버튼으로 분해 모드를 ON하고 카드를 선택 분해하는 것보다 드래그하여 튀어나온 쓰래기통에 집어넣는 방법이 나을 것 같다고 생각했다.
또한 영감을 준 게임과의 차별성을 두기 위해 왼쪽이 아닌 오른쪽에 쓰래기통을 두고, 애니메이션도 linear하게 등장 대신 bounce하게 등장하고 back하게 퇴장하도록 개선했다.
애니메이션은 만족스러우나 카드 크기에 비해 쓰래기통이 많이 작다. 좀 더 크게 만들거나 근접하면 스케일을 올리는 방식으로 개선해야겠다.
노트북에 문제가 생긴건지 세이브가 날라갔다. 망할
왼쪽 위는 카드, 오른쪽 아래는 쓰래기통. 2d collider box를 사용하는 대신 수학적 접근으로 비용을 절약할 생각이다. 카드의 오른쪽 아래 끝점은 (카드 x + 카드 width / 2, 카드 y - 카드 hieght / 2)와 같고, 쓰래기통은 그 반대로 (쓰래기통 x - 쓰래기통 width / 2, 쓰래기통 y + 쓰래기통 height / 2)와 같다.
두 오브젝트가 닿거나 겹쳤을 때 쓰래기통 안으로 카드 좌표가 강제로 이동해야 하므로 두 좌표의 차가 0보다 같거나 작을 때 적절히 좌표와 각도를 변경하면 된다.
시행착오
절대값 역할을 하는 Abs 함수때문에 겹치는 경우를 제외하고 정확히 접했을 경우에만 카드가 쓰래기통 안으로 이동하는 것 같아 함수를 제거하고 쓰래기통 x가 카드보다 크니 - 연산자 앞에, 카드 y가 쓰래기통보다 크니 - 연산자 앞에 있어야 한다.
아 젤나가 맙소사 RectTransform#rect.position 대신 RectTransform#rect.rect.position를 사용하는 바람에 y좌표 비교가 이상했었다.
처음에는 단순히 쓰래기통의 width, height를 비교했었는데 이때 난 이 쓰래기통이 회전된 상태 라는걸 까먹고 width와 height를 사용했었다. 위 사진의 점선 사각형 width은 안에 내접한 회전된 정사각형의 대각선이였다.
즉, 원래 모습인 초록색 정사각형과 원하는 점선 정사각형 간의 크기에는 괴리가 있었다. 그래서 점선 width를 구하기 위해 정사각형 (width^2 + height^2)^0.5, 피타고라스 법칙으로 대각선을 구해 사용했다. width랑 height를 그대로 계산에 쓴 다음 2로 나누거나 미리 width와 height를 2로 나누고 쓰는 방법이 있어서 후자를 선택했다.
성공적으로 카드가 쓰래기통 안으로 들어가졌다. 이제 좌표와 각도를 약간 미세조정하여 퀄리티를 높이면 된다. 덤으로 화면이 커질 때도 언제나 손 오른쪽 위에 위치하기 위해 anchor를 아래로 바꾸었다.
이제 카드와 자원간 상호작용만 만들면 된다.
어… 자원 시스템이 생각보다 엄청 잘 구체화되어서 그런지 생각보다 엄청 빨리 자원 소모와 반환이 완성되었다.
분해 구현 끝!