베르의 프로그래밍 노트

UI 비법서 (2)

-

하나의 그룹 Canvas Group

작성 기준 버전 :: 2019.1.4f1

UI를 만들 때, 한 UI 창에 텍스트, 이미지, 버튼, 체크박스 등 수많은 구성요소들이 들어간다. 하나의 UI 창을 컨트롤 한다는 것은 이 UI 창 아래에 들어가는 구성요소들을 한꺼번에 통제해야 한다는 것을 의미한다.

위 이미지와 같은 UI 창이 있고, 이 창이 열리거나 닫힐 때, 투명도를 사용해서 투명해지는 연출을 사용한다고 가정했을 때, 일반적으로는 UI에서 이미지나 텍스트를 표현하는 모든 컴포넌트의 색상 값 중에 알파 값을 일일이 수정해주어야 한다. 이 작업은 UI 창의 구성이 복잡해질 수록 더욱 귀찮고 힘든 작업이 되며 이런 작업을 해놓은 다음에 UI의 구성이 바뀌기라도 하면 더 큰 문제가 발생한다.

이러한 문제를 해결해 주는 것이 바로 캔버스 그룹(Canvas Group) 컴포넌트다.

캔버스 그룹(Canvas Group)

캔버스 그룹 컴포넌트를 사용하기 위해서는 하나의 그룹으로 하고자하는 UI의 최상단 게임 오브젝트를 선택하고 인스펙터 창의 [Add Component] 버튼을 눌러 Canvas Group를 검색하여 추가하면 된다.

그렇게 캔버스 그룹을 추가하면 위의 이미지와 같은 캔버스 그룹 컴포넌트가 생성된다. 캔버스 그룹 컴포넌트는 많은 기능을 가지고 있지 않고 간단한 기능 몇 가지만 제공한다. 하지만 이것들만으로도 원래라면 손이 많이 가는 작업들을 크게 줄여준다.

알파 값 조정

캔버스 그룹의 첫 번째 주요 기능은 하위 그룹의 UI들의 알파 값을 한꺼번에 조절할 수 있게 해주는 것이다.

위 이미지를 보면 아까 전의 예시에서는 UI 구성요소들의 알파 값을 일일이 수정해주던 것에서 캔버스 그룹의 알파 값만 수정해주면 되는 것으로 바뀌었다.

캔버스 그룹으로 알파 값을 조정하는 방법의 최대의 장점은 그룹 아래의 UI 구조가 어떤 식으로 바뀌어도 그 밑에 있는 모든 UI에 자동으로 적용이 된다는 것이다.

상호작용가능함(Interactable)

두 번째 옵션은 상호작용에 관한 것이다. UI에는 상호작용이 가능한 종류의 컴포넌트인 버튼(Button), 토글(Toggle), 슬라이더(Slider) 등이 있는데, 이런 컴포넌트들은 기본적으로 상호작용에 대한 옵션을 가진다. 그 옵션이 바로 상호작용가능함(Interactable)이다.

이것들 역시 캔버스 그룹 없이 한꺼번에 제어하고자 한다면, 각각의 컴포넌트에 일일이 접근하여서 값을 수정해주어야 한다.

하지만 캔버스 그룹의 상호작용가능함 옵션을 사용하면 하위에 있는 모든 상호작용가능한 컴포넌트들이 제어되는 것을 확인할 수 있다.

레이캐스트 블록(Blocks Raycasts)

레이캐스트는 일종의 광선을 의미하는데, 일반적으로 마우스를 클릭한 화면 위치에서 게임 속 공간에 레이저를 쏴서 클릭한 위치를 찾아내는 역할을 하는 데에 주로 사용되며, 이를 응용해서 주로 RPG 게임에서 클릭한 위치로 캐릭터를 이동시키는데 사용하게 된다.

UI에서 레이캐스트를 블록, 즉 레이캐스트를 막는다는 것의 의미는 첫 번째로, UI가 입력을 받아들인다는 뜻이다.

위의 gif 이미지를 보면, 입력을 받아들인다는 뜻을 이해할 수 있다. Blocks Raycasts를 켰을 때는 레이캐스트가 UI에 막혀서 입력을 받을 수 있게 되고, 반대로 꺼졌을 때는 입력을 받아들이지 못한다.

그렇다면 여기서 위의 상호작용가능함 옵션과 관련해서 어떤 차이가 있느냐는 질문을 할 수가 있다. 둘 다 똑같이 입력을 못받게 되는데 다른게 없지 않은가? 물론 이 두 개의 옵션은 완전히 다른 옵션이다.

상호작용가능함 옵션의 예시 gif에서는 상호작용가능함 옵션이 꺼지면서 버튼, 토글, 슬라이드가 회색으로 변하고 버튼, 토글, 슬라이드와의 상호작용이 불가능하게 바뀌었지만 레이캐스트, 즉 마우스가 클릭될 때 발사되는 눈에 보이지 않는 광선은 그대로 UI에 충돌하는 상태였다.

하지만 레이캐스트 블록 옵션의 예시 gif에서는 마우스가 클릭될 때 발사되는 광선이 UI를 무시하고 지나간 것이다.

레이캐스트 블록 옵션의 꺼진 상태와 켜진 상태의 차이점과 활용에 대한 예시는 디아블로 3로 들 수 있다. 디아블로 3에서는 탭(tab) 키를 누르면 미니맵이 열리는데 미니맵 UI가 화면 전체에 가득 차서 흐릿하게 보일 것이다. 하지만 이 미니맵은 화면 전체를 덮는 UI임에도 불구하고 클릭한 위치로 캐릭터를 이동할 수 있게 마우스의 클릭에서 발사되는 레이캐스트를 막지 않는다.

하지만 인벤토리 창의 경우에는 인벤토리 찾 어느 위치를 클릭해도 캐릭터가 인벤토리 창 너머로 클릭된 지형의 위치로 이동하지 않는다. 즉, 마우스 클릭에서 발사된 레이캐스트가 인벤토리라는 UI에 막혀서 이동할 위치를 찾지 못한 것이다.

마지막 옵션인 부모 그룹 무시(Ignore Parent Group)은 잘 사용되지 않는 옵션이다.

이렇듯이 캔버스 그룹을 사용하면 원래는 간단하지만 계층이 복잡해지면 어려워지는 작업을 간단하게 처리할 수 있다.

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]

콜리전과 콜리전 이벤트

작성 기준 버전 :: 4.21.1

콜리전(Collision)은 언리얼 엔진에서 물리적인 충돌이나 레이 캐스팅 실시간 처리를 해준다. 이러한 물리 시뮬레이션은 Collision Response(콜리전 반응) 및 Trace Response(트레이스 반응) 설정을 통해서 다른 오브젝트 유형과 어떻게 상호작용할지 정의된다.

블록(Block), 겹침(Overlap), 무시(Ignore)

충돌 작용은 블록(Block), 겹침(Overlap), 무시(Ignore)로 나누어진다.

블록은 충돌하는 두 오브젝트가 모두 블록이어야 두 오브젝트가 충돌했을 때, 겹치지 않고 서로에게 막히게 된다. 콜리전 옵션 중에 Simulation Generates Hit Event 프로퍼티를 true로 설정하면 이러한 충돌이 발생했을 때 Event Hit을 받아서 블루프린트나 디스트럭터블 액터, 트리거 등에 사용할 수 있고 이를 응용해서 총알에 맞아서 깨지는 유리창 등을 구현할 수 있다.

겹침은 다른 오브젝트를 통과시키지만, 만약 Generate Overlap Event가 활성화된 상태라면 Overlap Event를 발생시킨다. 이 겹침 이벤트가 발생하려면 두 오브젝트 모두 겹침 이상으로 설정되어 있어야 한다. 만약 한 쪽은 겹침이고 다른 한 쪽이 무시인 상태라면 겹침 이벤트는 발생하지 않는다.

무시는 모든 오브젝트와 트레이스를 통과시키며 어떠한 이벤트도 발생시키지 않는다.

콜리전 이벤트

콜리전이 발생시키는 이벤트를 다루는 방법에 대해서 배워보자.

히트 이벤트(Hit Event)

히트 이벤트는 블록 상태인 오브젝트들이 서로 충돌했을 때 발생하는 이벤트로 해당 오브젝트에게 통지된다. 히트 이벤트를 발생하게 하기 위해서는 우선 콜리전의 프로퍼티 중에 Simulation Generates Hit Event를 true로 설정해줘야 한다.

우선 히트 이벤트를 받아서 처리하기 위한 클래스를 BlockCollisionActor라는 이름으로 Actor 클래스를 상속받아서 생성하자.

그리고 비주얼 스튜디오로 가서 BlockCollisionActor.h에 다음 멤버 변수와 함수 선언 코드를 추가한다.

protected:
    virtual void NotifyHit(UPrimitiveComponent *MyComp, AActor *Other, UPrimitiveComponent *OtherComp, bool bSelfMoved, FVector HitLocation, FVector HitNormal, FVector NormalImpulse, const FHitResult &Hit) override;

public:   
    UPROPERTY(EditAnywhere)
    class UStaticMeshComponent* BoxMesh;

NotifyHit() 함수는 부모 클래스에서 상속받은 것으로 이것을 덮어씌워 작성함으로써 충돌이 발생했을 때 개발자가 원하는 동작을 처리하도록하는 것이 가능해진다. BoxMesh는 다른 물체와 충돌할 메시를 담을 변수이다.

그 다음엔 BlockCollisionActor.cpp로 가서 스태틱 메시 컴포넌트를 사용하기 위해서 다음 전처리기를 추가한다.

#include "Engine/Classes/Components/StaticMeshComponent.h"

ABlockCollisionActor::ABlockCollisionActor() 생성자 함수에 다음과 같이 BoxMesh 변수를 초기화하는 코드를 추가한다.

ABlockCollisionActor::ABlockCollisionActor()
{
    PrimaryActorTick.bCanEverTick = true;

    BoxMesh = CreateDefaultSubobject<UStaticMeshComponent>(TEXT("BoxMesh"));
    RootComponent = BoxMesh;
}

그리고 아까 선언한 NotifyHit() 함수를 다음과 같이 충돌이 발생했을 때 로그를 출력하도록 구현한다.

void ABlockCollisionActor::NotifyHit(UPrimitiveComponent *MyComp, AActor *Other, UPrimitiveComponent *OtherComp, bool bSelfMoved, FVector HitLocation, FVector HitNormal, FVector NormalImpulse, const FHitResult &Hit)
{
    UE_LOG(LogTemp, Log, TEXT("NotifyHit"));
}

코드 작업이 마무리되었다면 프로젝트를 빌드하고 에디터로 돌아가서 히트 이벤트 테스트를 위한 작업을 진행해보자.

먼저 BlockCollisionActor를 레벨에 배치한다.

BlockCollisionActor의 디테일 패널에서 BoxMesh를 선택하고 비어있는 스태틱 메시 프로퍼티에 모드 패널의 큐브 스태틱 메시를 드래그래서 넣는다.

그 다음 디테일 패널에서 Collision 카테고리를 찾아서 Simulation Generates Hit Event를 체크해준다.

BlockCollisionActor 배치가 끝났다면 BlockCollisionActor와 충돌할 액터를 추가해준다. 모드 패널에서 구체 메시 하나를 BlockCollisionActor 위에 배치한다.

그 다음 배치한 구체의 모빌리티를 무버블로 하고, Physics 카테고리에서 Simulate Physics를 체크해준다.

다음 이미지와 같이 세팅이 모두 끝났다면 플레이 버튼을 눌러보자.

그러면 공이 떨어져서 상자에 맞는 순간 NotifyHit 로그가 출력되는 것을 볼 수 있다.

겹침 이벤트(Overlap Event)

겹침 이벤트는 겹침으로 설정된 오브젝트에 겹침이나 블록으로 설정된 다른 오브젝트가 겹쳐지면 발생하는 이벤트이다. 겹침 이벤트를 발생시키기 위해서는 Collision 카테고리에서 Generate Overlap Event를 true로 설정해줘야 한다.

겹침 이벤트를 처리할 클래스를 OverlapCollisionActor라는 이름으로 Actor 클래스를 상속해서 생성한다.

OverlapCollisionActor.h에 다음 멤버 변수와 함수 선언 코드를 추가한다.

protected:
    virtual void NotifyActorBeginOverlap(AActor *OtherActor) override;
    virtual void NotifyActorEndOverlap(AActor *OtherActor) override;

public:   
    UPROPERTY(EditAnywhere)
        class UStaticMeshComponent* BoxMesh;

NotifyActorBeginOverlap() 함수는 겹침이 시작되었을 때 실행되는 함수이고 NotifyActorEndOverlap() 함수는 겹침이 끝났을 때 실행되는 함수이다. 이 두함수를 통해서 우리는 언제 겹침이 시작되었는지, 언제 겹침이 끝났는지를 알 수 있다.

BoxMesh는 사실 큰 필요는 없지만 구체가 통과해서 지나갔음을 보여주기 위해서 추가한다. 하지만 만약 스태틱 메시를 사용하지 않을 것이라면 BoxComponent나 SphereComponent, CapsuleComponent 같은 콜리전 컴포넌트를 사용해야 한다.

그 다음엔 OverlapCollisionActor.cpp로 가서 스태틱 메시 컴포넌트를 사용하기 위해 다음 전처리기를 추가한다.

#include "Engine/Classes/Components/StaticMeshComponent.h"

AOverlapCollisionActor::AOverlapCollisionActor() 생성자 함수에 BoxMesh를 초기화하는 코드를 추가한다.

AOverlapCollisionActor::AOverlapCollisionActor()
{
    PrimaryActorTick.bCanEverTick = true;

    BoxMesh = CreateDefaultSubobject<UStaticMeshComponent>(TEXT("BoxMesh"));
    RootComponent = BoxMesh;
}

그리고 NotifyActorBeginOverlap() 함수와 NotifyActorEndOverlap() 함수를 구현한다.

void AOverlapCollisionActor::NotifyActorBeginOverlap(AActor * OtherActor)
{
    UE_LOG(LogTemp, Log, TEXT("NotifyActorBeginOverlap"));
}

void AOverlapCollisionActor::NotifyActorEndOverlap(AActor * OtherActor)
{
    UE_LOG(LogTemp, Log, TEXT("NotifyActorEndOverlap"));
}

코드 수정이 끝나면 솔루션 탐색기에서 프로젝트를 빌드하고 에디터로 돌아가서 겹침 이벤트를 테스트하기 위한 작업을 한다.

우선 아까 전에 배치한 BlockCollisionActor보다 높은 공중에 구체가 통과해서 지나갈 수 있게 OverlapCollisionActor를 배치한다.

배치된 OverlapCollisionActor를 선택하고 디테일 패널에서 BoxMesh 컴포넌트를 선택한 다음에 비어있는 스태틱 메시에 모드에서 큐브 메시를 드래그 해서 할당해준다.

그 다음 Collision 카테고리에서 Generate Overlap Event를 체크해주고 Collision Preset을 OverlapAll로 설정한다.

마지막으로 구체를 선택한 다음 디테일 패널의 Collision 카테고리에서 Generate Overlap Event가 체크되어 있지 않다면 체크를 해준다. 겹침 이벤트가 발생하려면 겹치는 양 오브젝트에 모두 Generate Overlap Event가 true여야 한다.

플레이 버튼을 눌러보면 구체가 OverlapCollisionActor를 통과하면서 겹침이 시작되면 NotifyActorBeginOverlap 로그가 출력되고, 겹침이 끝나면 NotifyActorEndOverlap 로그가 출력되는 것을 확인할 수 있다.

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]