[📜일지] TCG 티르 나 노그(가제) 개발 일지 - 14: TCG 구현 방법 1

[다누(arep6p925yyh)]

1. 개요

 개발 일지 쓰면서 구현한 내용 보여주느냐고 설명은 짧았던 거 같아서 이번 일지에는 카드 Prefab에서부터 카드의 배치까지 

어떤 식으로 구현했는지 간단하게 설명해볼까합니다.

요즘 하루에 한 번쯤은 TCG 구현 관련 질문도 올라오는 것 같아서 도움이 되었으면하는? 그런?

 2. 카드 구현 방법

<그림 1. Card Prefab>

 

 카드 게임이니까 게임 시작할 때 플레이어의 덱 만큼 카드가 필요하고, 카드의 수가 게임 규칙에 따라서 늘었다 줄었다 할 수 있으니까, 

언제든지 생성하고 파괴할 수 있게 카드를 Prefab으로 만들어야합니다.

Prefab을 만들기 위해서 우선 Hierarchy에서 빈 오브젝트 생성한 뒤, 우클릭 -> UI -> Image 해서 Image 추가하고 Image 크기를 적당히 카드 크기라 생각하고 설정합니다(위 그림에선 스탠다드 사이즈 비율인 3:4로 설정). 

이렇게 만들어진 오브젝트 이름을 Card로 바꾸고 프로젝트의 Resources 폴더에 끌어다 넣어서 Prefab으로 만들면됩니다.

<그림 2. Card Prefab Component>

 이제 카드의 내용물을 채워줘야하니까 카드의 정보와 관련된 스크립트를 작성해서 카드에 추가해줍니다.

저의 경우에는 Card(원본 카드 정보, CardViz에 할당), CardInstance(현재 카드 정보 및 외부와 상호작용), CardViz(카드 정보의 시각적 부분 출력 관련) 이렇게 3 종류의 스크립트를 사용하고 있습니다.

카드의 정보를 저장하는 기능과 그 정보를 카드에 출력하는 기능 먼저 작성하고 개발 중에 필요한 내용을 조금씩 추가하면 됩니다.

<그림 3. Card Prefab Hierarchy>

 

 스크립트 구현이 되었다면 스크립트에 저장된 카드의 정보를 출력할 수 있게 카드의 각 정보와 관련된 UI를 추가하고 스크립트에 할당하면됩니다.

UI 먼저 추가하고 스크립트 작성해도 상관 없습니다.

이후에는 개발하면서 수정하면됩니다.

3. 게임 판 구현

<그림 4. 게임 판>

 그림 4.에 카드를 놓을 수 있는 초록색 네모랑 하얀색 네모 그리고 손 패 구역이 있는데 이걸 게임 Scene에서 구현하려면

각 칸을 빈 오브젝트 + 이미지로 만들어서 원하는 위치에 배치하고 카드를 그 칸으로 이동시키면됩니다. 

이동은 SetParent() 사용하거나 약간 수정해서 이동시키면 되고, 패나 덱처럼 카드가 한 구역에 여러 장 있는 걸 처리하려면,

그 구역에 Unity에 기본적으로 들어있는 Grid Layout 같은 스크립트를 사용하시면됩니다.

<그림 5. 구역 관리자>

 그리고 각 만들어진 구역은 구역 관리 스크립트를 ScriptableObject  생성해서 구역을 다 저장하고 GameManager에 추가한 다음 

카드 이동시킬 때마다 구역 위치 불러와서 사용하면 됩니다.

4. 카드 플레이

<그림 6. 카드 플레이>

 카드 플레이를 구현하려면 몇 가지 단계를 구현해야합니다. 

1. 패의 카드를 드래그하면 마우스를 따라온다. 

2. 이 상태에서 적절한 구역 위에서 마우스 왼쪽 버튼을 떼면 카드를 내려놓는다.

3. 전장에 내려진 카드는 요구되는 비용을 지불하고 전장에 놓여진다. 비용을 지불할 수 없다면 패로 되돌아온다.

이렇게 3가지 행동으로 구현할 수 있을 것입니다.

각 행동은 다음과 같이 구현할 수 있습니다.

1-1. 패의 카드를 드래그 하는 중일 때 마우스 포인터를 따라오는 스크립트를 가진 Card Prefab인 Mouse Card 추가(기본적으로 비활성화 시켜둠).

1-2. 패의 카드를 드래그 하는 동안 선택된 패의 카드를 비활성화하고 Mouse Card에 드래그 중인 카드의 정보를 불러오고, 활성화.

1-3. 드래그가 중지되면 다시 패의 카드를 활성화하고 Mouse Card 비활성화.

2-1. 패의 카드를 드래그하는 동안 각 구역에 있는 각 구역의 크기와 동일한 크기를 가지고 RaycastTarget = true인 오브젝트를 활성화(그림 5.에서 각 구역에 활성화된 밝은색의 패널).

2-2. 드래그를 멈췄을 때 Raycast로 아래에 있는 구역을 확인, 카드를 놓을 수 있는 구역이라면 해당 구역으로 카드를 이동하도록 Event 함수 구현.

3-1. 카드 플레이 비용을 체크하고 비용 지불 가능하다면 비용 지불 처리, 불가능하다면 다시 패로 이동하는 함수 구현.

<그림 7. 플레이된 카드>

 궁금한 구현 방법을 댓글로 적어두면, 구현되어 있는 내용이면 다음 일지에서 설명하도록하겠습니다.

읽어주셔서 감사합니다.

 

[카퍠인(happys96)]

[다누(arep6p925yyh)]

[핫케익(godotisgod)]

TCG 티르 나 노 드(가제) 인줄

[다누(arep6p925yyh)]

[고닷(m4odn36nekku)]

[다누(arep6p925yyh)]

[익명(7hvc5bphs4sv)]

님 AI로 일러뽑앗다고 했지않음?? 그거 상업적으로 사용가능함?? 나도 그림못그려서 그렇게하고싶은데

[다누(arep6p925yyh)]

다른 사람레후 - dc App

[다누(arep6p925yyh)]

학습 모델이 뭐냐에 따라서 저작권 문제가 발생할 수 있음 - dc App