[Unity] 카드게임에서 핸드의 카드들 곡선으로 보이게 하기

안녕하세요!

오늘은 카드게임을 개발하면서 맨처음 만들게 된 핸드의 카드들을 둥글게 보이게 해주는 방법을 소개해드리려합니다!

Horizontal layout으로는 이룰 수 없는 부분이고 꽤 삽질을 했어서 공유드리려해요!

 

대부분의 카드게임에서 내 핸드는 이렇게 보인다.

 

위 효과를 내기 위해선 3가지가 필요한데요,

1. x간격을 일정하게 유지하기
2. y위치를 적절하게 조정하기
3. 카드를 위치에 따라 살짝씩 회전시켜주기

x간격을 일정하게 유지하는건 for 문으로 해결할 수 있겠죠?

2번과 3번을 자세히 보겠습니다.

 

먼저 간단한 원리를 설명드릴게요.

기본적인 원리는 저~~ 아래에 한 점을 기준으로 원을 그려서, 그 원의 둘레에 카드들을 배치하는겁니다.

 

 

y좌표 구하는 법

카드를 어떤 점을 중점으로하는 원의 둘레에 놓기 위해선 x와 y좌표, 그리고 반지름 R 중 두 개를 정해야합니다.

그러면 아래 원의 방정식에 대입해 나머지 하나를 찾을 수 있죠.

$$x^2 + y^2 = R^2$$

저희는 카드가 동일한 간격(spacing)으로 배열되면 되기 때문에, x를 구할 수 있습니다.

x는 가운데 점을 기준으로 몇 번째 카드냐에 따라 정해주면 되고, R은.. 정해져 있겠죠?

 

 

저는 이렇게 만들었는데요, normPos는 i번째 카드가 정 가운데 (x=0)을 기준으로 몇 칸 떨어져있는지를 계산한 값입니다.

예를들어 카드가 총 4장이면 2번째 카드는 -0.5가 될 것이고, 총 5장이면 5번째 카드는 +2가 될거에요.

전 이 값을 구해서 x를 구하는데 사용했는데, 여러분은 어떤 방법으로든 x를 일정한 간격을 유지시켜주면 돼요.

중요한건 y를 구하는 쪽인데, 음수를 루트에 넣으면 안 되니 절대값을 사용해주세요!

 

rotation 구하는 법

rotation은 생각보다 간단한데, tan의 역함수인 Mathf.Atan2를 사용합니다. (Mathf.Atan도 상관없어요!)

 

 

Atan2는 y와 x를 넣으면 해당 좌표가 원점과 이루는 각을 구해줍니다.

이 값을 90도에서 빼면 가운데 카드 기준으로 몇도 돌아야할지가 나오겠죠?

하지만 atan2는 항상 양의 각을 반환하기 때문에 x가 음수일 땐 각도 음수로 바꿔주셔야해요.

 

 

이렇게 구한 x, y, rot를 모두 적용시키는 함수 ArrangeCards를 공개합니다~

 

 

결과물

Unity Hierarchy에선 카드들을 하나의 부모 오브젝트에 넣고, _cardList에 카드들을 저장한 후 

부모 오브젝트에서 ArrangeCards를 실행시켜주면 됩니다.

CardSpacing과 HandRotationR을 조절하면서 보기 좋은 형태로 만들어주시면 됩니다!

 

 

카드를 뽑거나 사용할 때마다 ArrangeCards를 실행해주면 알아서 자리를 찾아가겠죠?

이걸 조금 응용하면 구한 position과 rotation을 바로 적용시키는게 아니라 임시로 저장해둔뒤,

일정시간 동안 Lerp 등을 통해 부드럽게 이동시키면 더 보기 좋겠네요!