Unity UI - 투명도와 가리기를 도와주는 CanvasGroup

유니티의 UI 컴포넌트 중 CanvasGroup이라는 컴포넌트가 있습니다.

 

Alpha는 해당 컴포넌트 및 자식 오브젝트들의 투명도를,

Interactable은 해당 컴포넌트 및 자식 오브젝트들의 클릭 이벤트 여부를,

Block Raycasts는 해당 컴포넌트 및 자식 오브젝트들의 마우스 감지 여부를 결정합니다.

 

public class test : MonoBehaviour
{
  [SerializeField] private CanvasGroup Group = null;

  private void Start()
  {
    float _randomalpha = 1.0f;
    Group.alpha = _randomalpha;

    bool _randominteractive=false;
    Group.interactable = _randominteractive;

    bool _randomblock=false;
    Group.blocksRaycasts = _randomblock;
  }
}

위 요소들은 스크립트 내부에서 별 제약 없이 수정이 가능합니다.

 

 

투명도를 낮춘 버튼은 아무런 문제 없이 클릭 이벤트가 발생합니다.

 

Interactive가 막힌 버튼은 사전 설정된 Button 컴포턴트에 따라 'Disabled Sprite'로 전환되어 해당 버튼이 클릭이 불가능함을 시각적으로 알 수 있습니다.

 

그러나 Block Raycast가 막힌 버튼은 Button 컴포넌트가 아무런 행동도 취하지 않았는데요,

엄밀히 말해 '클릭이 불가능'한 상황이 아니라 '마우스를 감지하지 않는' 상황이기 때문입니다.

 

그럼 이번에는 버튼 위에 두 이미지를 가려보았습니다.

 

위의 Image는 BlockRaycast 가 true인(정확히는 CanvasGroup 컴포넌트가 없는)

아래의 Image는 BlockRaycast가 false인, 즉 마우스를 감지하지 않는 Image입니다.

 

위 Image는 버튼의 클릭을 막고,

아래 Image는 버튼의 클릭을 막지 못했습니다.

 

 

만약 유니티를 사용해 제작 도중

'이 오브젝트의 클릭을 막고 싶다'면 Canvasgroup의 Interactive를,

'이 오브젝트가 다른 버튼들을 막지 않도록' 하려면 Canvasgroup의 BlockRaycast를 조작하시면 됩니다.

 

이외에도 해당 오브젝트 자체를 숨겨버리고 싶다 할 때,

SetAcitve(False)로 오브젝트 자체를 비활성화해 그 안의 스크립트들이 비활성화 되는 경우를 방지하고 싶으면

CanvasGroup.Alpha=0.0f;

CanvasGroup.Interactive=false;

CanvasGroup.BlockRaycast=false;

로 아예 불구로 만들어 버리는 활용법도 존재합니다.

 

 

이를 응용하여 UI를 페이드인/페이드아웃시키는 코루틴을 제작할 수도 있습니다.

  public IEnumerator ChangeAlpha(CanvasGroup _group, float _targetalpha, float targettime)
  {
    LayoutRebuilder.ForceRebuildLayoutImmediate(_group.transform as RectTransform);

    float _startalpha = _targetalpha == 1.0f ? 0.0f : 1.0f;	//시작 알파 값
    float _endalpha = _targetalpha == 1.0f ? 1.0f : 0.0f;	//종료 알파 값
    float _time = 0.0f;
    float _targettime = targettime;
    float _alpha = _startalpha;
    
    _group.alpha = _alpha;
    _group.interactable = false;	//페이드인이던 페이드아웃이던 투명도가 변경되고 있는 UI는
    _group.blocksRaycasts = false;	//조작 자체를 막는 것이 좋으므로 둘 다 false로 설정
    while (_time < _targettime)
    {
      _alpha = Mathf.Lerp(_startalpha, _endalpha, _time/_targettime);
      _group.alpha = _alpha;
      _time += Time.deltaTime;
      yield return null;
    }
    _alpha = _endalpha;
    _group.alpha = _alpha;
    if (_targetalpha.Equals(1.0f))	//targetalpha가 1.0인 경우는
    {								//해당 ui를 활성화시키는 것이 목적이니 둘 다 true로 설정
      _group.interactable = true;
      _group.blocksRaycasts = true;
    }
  }

 

 

나름 부드럽게 이어지는 화면 전환