2025-07-15 TIL

📕오늘의 공부 주제

---

Canvas Group 컴포넌트 ― **UI 하위 트리를 한 번에 제어**하는 스위치 + 페이드 컨트롤러

🤔Why?

---

• 투명도 · 입력 · 레이캐스트를 한 컴포넌트로 통합 관리
• 팝업 · 튜토리얼 · 드래그&드롭 등 “지금은 여기만 / 전부 막기” 같은 상황에 필수
• Image.raycastTarget 등을 개별로 수정할 필요가 없어 코드가 단순

📖오늘의 공부 내용

---

프로퍼티	하는 일	자주 쓰는 이유
Alpha (0 ~ 1)	그룹 안 모든 Graphic(Image, TextMeshPro, RawImage …)의 투명도를 동시에 변경	페이드 인/아웃을 코드 한 줄로 처리 canvasGroup.DOFade(0, 0.3f)
Interactable (bool)	true → 자식 Selectable(Button, Toggle 등)의 입력을 통과 false → 버튼 클릭·키보드 포커스·네비게이션 모두 비활성화	팝업 잠시 비활성화, 로딩 중 버튼 스팸 방지
Blocks Raycasts (bool)	true → 이 그룹(및 자식 Graphic)이 레이캐스트를 가로채서 이벤트 독점 false → 무시하고 투과, 뒷 레이어로 전달	모달 팝업 · 튜토리얼 블로커 · 드래그 드롭존 등 입력 제어
Ignore Parent Groups (bool)	부모 CanvasGroup.blocksRaycasts == false여도 예외로 판단	복잡한 계층에서 특정 슬롯만 클릭 가능하게 할 때

💡 Tip

Canvas Group 하나만 달면 하위 트리 전체가 동일 규칙을 공유 → Graphic.raycastTarget을 매 프레임 바꿀 필요 X

---

🖱️ Event System이 클릭을 처리하는 과정 (간략)

1. 화면에 마우스 위치 투사
2. UI RayCaster가 위에서 아래로 Graphic 탐색
3. 첫 번째로 만난 Graphic.raycastTarget == true && CanvasGroup.blocksRaycasts == true 오브젝트를 Hit!
4. 거기에 걸린 Button, IDropHandler, IPointerClickHandler 등에 이벤트 전달

따라서…

• 그룹 전체 블로킹 → canvasGroup.blocksRaycasts = false
• 상위에 투명 패널 하나 두면 모든 버튼 입력이 잠기는 모달 팝업 완성
• 특정 슬롯만 통과 → Blocker 패널에 HoleRaycastFilter 부착 → IsRaycastLocationValid()에서 슬롯 영역만 false 리턴