UI 자동 정렬 : GridLayoutGroup

이번에 만든 프로젝트에서 GridLayoutGroup 컴포넌트를 사용하여 위와 같이 카드를 배치하는 애니메이션을 제작해 보았다. 그래서, 오늘은 GridLayoutGroup 컴포넌트에 대해서 자세히 다루어 볼 예정이다.

GridLayoutGroup 컴포넌트

GridLayoutGroup의 컴포넌트는 위와 같이 구성되어 있다.

• Padding : 상위 오브젝트의 모서리를 기준으로 상하좌우에 여백을 넣는다.
• Cell Size : 하위 오브젝트의 크기를 지정한다.
• Spacing : 하위 오브젝트 사이 간 간격을 정한다.

• Start Corner : 첫번째 하위 오브젝트의 시작 위치를 나타낸다.
• Start Axis : 가로로 먼저 증가할 것인지, 세로로 먼저 증가할 것인지를 나타낸다.
• Child Alignment : 상위 오브젝트의 어디에 맞추어 정렬을 할 건지를 정한다.

• Constraint : 행 또는 열의 수를 지정한다.
  • Flexible : 행 또는 열의 수를 지정하지 않고 유동적으로 배치한다.
  • Fixed Column Count : 정해진 수의 열(세로)로 배치한다.
  • Fixed Row Count : 정해진 수의 행(가로)로 배치한다.

애니메이션의 경우, 그림과 같이 Spacing을 초기에는 (-200, -200)으로 맞추어 카드를 하나로 겹친 것처럼 보여준 뒤에 이를 (20, 20)으로 늘려주는 애니메이션을 만들어서 적용하면 된다.

하위 오브젝트 비활성화 시 자동 정렬

이 컴포넌트를 사용하면 하위 오브젝트를 삭제하거나 비활성화할 경우 자동으로 그에 맞춰서 정렬이 된다.

이 기능때문에 이번 카드 맞추기 게임 프로젝트에서 카드를 삭제하거나 비활성화할 수 없어서 골머리를 앓았다...

그래서, 처음에는 배경색과 똑같은 게임 오브젝트로 대체하였다가, 나중에는 버튼 UI의 투명도를 바꿀 수 있어서 이를 활용하였다.

Color color = img.color;
color.a = 0f;
img.color = color;

여기서 투명도(알파값)은 위와 같은 방식으로 저장해야 한다. 그 이유는 Color는 구조체이기 때문에 알파값을 따로 읽는 것은 가능하지만 따로 수정할 수는 없기 때문이다.

버튼의 경우, 투명도와 더불어서 버튼의 interatable 옵션과 버튼에 달린 Text도 비활성화 해주면 마치 사라진 것과 같은 효과를 만들 수 있다.

이처럼 오늘은 GridLayoutGroup 컴포넌트의 기능과 사용 시 발생한 문제점에 대해 알아보았다. 독자 여러분도 비활성화 자동 정렬 기능에 골머리를 앓는다면 나와 같이 해결해 보기 바란다.😁