Card 만들기부터: 프로토타입 다음 단계

카드 구현 화면

프로토타입을 찍어봤으니 이제 진짜로 개발을 시작했다. 가장 작은 단위부터 가자. 게임 전체 중 최소 단위인 Card를 먼저 만든다. 그럼 카드 하나에서 무슨 일이 일어나는지부터 정리.

카드는 앞면과 뒷면이 있다.

앞면은 1~10 숫자. 숫자마다 그림이 2종.

카드는 선택과 호버가 된다.

카드는 이동할 수 있다.

이렇게 정의하고 Godot에서 Node2D를 하나 만들었다. 루트는 CardView라는 Node2D. 자식으로 FrontSprite, BackSprite, BorderSprite를 붙였다. 클릭 처리를 위해 Area2D를 추가하고 그 아래에 CollisionShape2D를 달았다. 이 조합으로 CardView의 기본 골격 완성.

스크립트와 데이터 구조

CardView에 스크립트를 붙였다. 먼저 카드의 데이터부터.

number: 1~10

card_type: normal | special

예) 1광은 special, 일반 1은 normal

is_face_up: 앞/뒷면 상태

상태값(state)도 분리했다.

is_clickable, is_moving, is_hovered, is_selected

is_clickable이 true면 호버/클릭 이벤트를 바인딩한다. 시그널은 세 개를 만들었다. card_clicked, card_hovered, card_unhovered. 각 이벤트가 발생할 때 해당 시그널을 쏘게 했다.

자식 노드 레퍼런스도 스크립트에서 들고 간다.

front_sprite, back_sprite, border_sprite

click_area, collision_shape

테두리와 셰이더 시도

테두리 색은 선택/호버 상태에 따라 바뀌게 했다. 동적으로 텍스처를 만들어 border_sprite에 넣는 방식으로 처리. 원래는 셰이더로 깔끔하게 하고 싶었는데 실패. 다음에 더 파보고 적용해볼 예정.

애니메이션: 뒤집기와 이동

flip, move_to 두 함수를 만들었다. tween으로 애니메이션을 구현했고, 재생 중에는 방해받지 않도록 is_moving으로 가드했다. 애니메이션이 끝나기 전에는 다른 입력이 들어오지 않게 하는 느낌.

입력 이벤트 바인딩

마우스 이벤트는 click_area에 연결했다.

mouse_entered.connect(…)

mouse_exited.connect(…)

input_event.connect(…)

이렇게 카드에서 일어나는 행동을 다 정의하고, 테스트 씬을 하나 만들어 확인했다. 작은 단위로 나눠 테스트하니 기능이 한눈에 들어오고, 이후 관리도 편해 보인다. 물론 프로젝트가 커지면 구조를 갈아엎을 수도 있다. 그건 커지면서 판단.

테스트 영상 메모

카드 동작 테스트 영상

첫 번째 카드는 clickable 아님. 호버도 선택도 불가.

두 번째 카드는 선택 가능.

호버 시 호버 테두리 표시.

선택하면 노란 테두리가 고정. 이때는 호버 효과는 꺼진다.

세 번째는 flip 동작 연결.

네 번째는 move 동작 연결.

모든 애니메이션은 시간, easeType, transitionType을 상수로 빼놨다. 필요하면 값만 바꿔서 바로 튜닝 가능.