페이딩 라이트

이 문서는 색이 변하고 접촉 시 천천히 흐려지는 라이트 액터를 설정하는 방법을 설명합니다.

이는 오버랩 트리거로 작동하는 박스 컴포넌트와 포인트 라이트 액터를 조작하는 타임라인 컴포넌트를 포함한 포인트 라이트 컴포넌트를 통해 이뤄집니다.

페이딩 라이트 액터 생성하기

1. 기본 템플릿을 기반으로 새 C++ 프로젝트를 생성하고 이름을 FadingLights로 지정합니다.

   

2. 콘텐츠 브라우저로 이동하여 C++ 클래스(C++ Classes) 폴더를 클릭한 다음 + 추가(+ Add) 버튼을 클릭하고 새 C++ 클래스(New C++ Class)를 선택합니다.

   

3. 액터(Actor)를 부모 클래스(Parent Class)로 선택합니다.

   

4. 생성된 액터의 이름을 LightActor로 지정합니다.

   

5. 새 액터가 생성되면 Visual Studio가 자동으로 LightActor.h 및 LightActor.cpp 파일을 엽니다. LightActor.h 파일로 이동한 뒤 다음을 선언합니다.

   LightActor.h

   C++

   #include "Components/TimelineComponent.h"

   Copy full snippet(1 line long)

6. LightActor 클래스 정의에 다음 코드를 추가합니다.

   LightActor.h

   C++

   public:
   
                UPROPERTY(EditAnywhere)
                UCurveFloat* PointLightFloatCurve;
   
                UPROPERTY(EditAnywhere)
                UCurveLinearColor* PointLightColorCurve;
   
        protected:
   
   
   Expand code Copy full snippet(37 lines long)

7. LightActor.cpp로 이동하여 다음 클래스 라이브러리를 추가합니다.

   LightActor.cpp

   C++

   #include "Components/BoxComponent.h"
        #include "Components/PointLightComponent.h"

   Copy full snippet(2 lines long)

8. ALightActor::ALightActor의 생성자에서 다음을 선언합니다.

   LightActor.cpp

   C++

   ALightActor::ALightActor()
        {
            // Set this actor to call Tick() every frame.  You can turn this off to improve performance if you don't need it.
            PrimaryActorTick.bCanEverTick = true;
   
            //Create our Default Components
            PointLightComp = CreateDefaultSubobject<UPointLightComponent>(TEXT("PointLightComp"));
            LightTimelineComp = CreateDefaultSubobject<UTimelineComponent>(TEXT("LightTimelineComp"));
            LightOverlapVolume = CreateDefaultSubobject<UBoxComponent>(TEXT("LightOverlapVolume"));
   
   
   Expand code Copy full snippet(17 lines long)

9. 그런 다음, 포인트 라이트 컴포넌트의 UFunction 메서드를 구현합니다.

   LightActor.cpp

   C++

   void ALightActor::UpdateLightBrightness(float BrightnessOutput)
        {
            PointLightComp->SetLightBrightness(BrightnessOutput * 20.0f);
        }
   
        void ALightActor::UpdateLightColor(FLinearColor ColorOutput)
        {
            PointLightComp->SetLightColor(ColorOutput);
        }

   Copy full snippet(9 lines long)

10. BeginPlay 메서드에 다음 코드를 추가합니다.

    LightActor.cpp

    C++

    void ALightActor::BeginPlay()
         {
             Super::BeginPlay();
    
             //Binding our float and color track to their respective functions
             UpdateBrightnessTrack.BindDynamic(this, &ALightActor::UpdateLightBrightness);
             UpdateColorTrack.BindDynamic(this, &ALightActor::UpdateLightColor);
    
             //If we have a float curve, bind it's graph to our update function
             if (PointLightFloatCurve)
    
    Expand code Copy full snippet(20 lines long)

11. 코드를 컴파일합니다.

12. 콘텐츠 브라우저에서 C++ 클래스(C++ Classes) 폴더로 이동합니다.

13. LightActor를 우클릭한 다음 LightActor를 바탕으로 블루프린트 클래스 생성(Create Blueprint Class based on LightActor)을 선택하고 블루프린트 액터의 이름을 BP_LightActor로 설정합니다.

    

BP_LightActor의 클래스 디폴트가 아래와 같은 모습으로 나타납니다.

작업 중인 코드

LightActor.h

//Copyright 1998-2022 Epic Games, Inc. All Rights Reserved.

	#pragma once
	#include "Components/TimelineComponent.h"
	#include "CoreMinimal.h"
	#include "GameFramework/Actor.h"
	#include "LightActor.generated.h"

	UCLASS()
	class FADINGLIGHTS_API ALightActor : public AActor

LightActor.cpp

//Copyright 1998-2022 Epic Games, Inc. All Rights Reserved.

	#include "LightActor.h"
	#include "Components/BoxComponent.h"
	#include "Components/PointLightComponent.h"

	// Sets default values
	ALightActor::ALightActor()
	{
		// Set this actor to call Tick() every frame.  You can turn this off to improve performance if you don't need it.

콜리전 오버랩 이벤트 생성 및 바인딩하기

박스 컴포넌트에는 액터가 콜리전 바운드에 들어갈 때 TimelineComponent를 트리거하는 기능이 필요합니다.

1. LightActor.h 파일의 클래스 정의로 이동한 뒤 BrightnessMultiplier 아래에 다음을 선언합니다.

   LightActor.h

   C++

   protected:
   
            UFUNCTION()
            void OnOverlapBegin(class UPrimitiveComponent* OverlappedComp, class AActor* OtherActor, class UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult);

   Copy full snippet(4 lines long)

2. LightActor.cpp 파일로 이동한 뒤 OnOverlapBegin 함수를 구현합니다.

   LightActor.cpp

   C++

   void ALightActor::OnOverlapBegin(class UPrimitiveComponent* OverlappedComp, class AActor* OtherActor, class UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult)
        {
            LightTimelineComp->Play();
        }

   Copy full snippet(4 lines long)

3. 다음과 같이 오버랩 함수를 BeginPlay 메서드에 바인딩합니다.

   LightActor.cpp

   C++

   //Binding our Box Component to our Light Actor's Overlap Function
        LightOverlapVolume->OnComponentBeginOverlap.AddDynamic(this, &ALightActor::OnOverlapBegin);

   Copy full snippet(2 lines long)

4. 코드를 컴파일합니다.

완성된 코드

LightActor.h

//Copyright 1998-2022 Epic Games, Inc. All Rights Reserved.

	#pragma once
	#include "Components/TimelineComponent.h"
	#include "CoreMinimal.h"
	#include "GameFramework/Actor.h"
	#include "LightActor.generated.h"

	UCLASS()
	class FADINGLIGHTS_API ALightActor : public AActor

LightActor.cpp

//Copyright 1998-2022 Epic Games, Inc. All Rights Reserved.

	// Fill out your copyright notice in the Description page of Project Settings.

	#include "LightActor.h"
	#include "Components/BoxComponent.h"
	#include "Components/PointLightComponent.h"

	// Sets default values
	ALightActor::ALightActor()

밝기 트랙 설정하기

플레이어가 라이트 액터의 박스 컴포넌트 바운드에 오버랩되는 경우, 타임라인 컴포넌트에는 포인트 라이트 컴포넌트의 밝기 값을 조작할 플로트 커브가 필요합니다.

밝기의 초기 값은 5000이며, 5초에 걸쳐 0으로 감소합니다.

1. 콘텐츠 브라우저로 이동하여 + 추가(+ Add) > 기타(Miscellaneous) > 커브(Curve)를 선택합니다.

   

2. CurveFloat를 선택하고 에셋의 이름을 BrightnessCurveFloat로 지정합니다.

   

3. BrightnessCurveFloat를 더블클릭해 타임라인 에디터(Timeline Editor)를 엽니다.

4. 그래프를 우클릭하여 플로트 커브(Float Curve)에 두 개의 키를 추가한 다음 키 추가(Add Key)를 선택합니다. 첫 번째 키의 시간 값을 (0, 5000)으로 조정합니다. 두 번째 키의 시간 값을 (5, 0)으로 조정합니다. BrightnessCurveFloat가 아래와 같은 모습일 것입니다.

   

5. BrightnessCurveFloat를 저장한 후 콘텐츠 브라우저로 돌아와 BP_LightActor를 더블클릭해 클래스 디폴트(Class Defaults)를 엽니다.

6. 디테일 패널로 이동해 포인트 라이트 플로트 커브(Point Light Float Curve) 드롭다운 메뉴에서 밝기 커브 플로트(Brightness Curve Float)를 선택합니다.

   

7. 컴파일(Compile)과 저장(Save) 버튼을 클릭합니다.

   

컬러 트랙 설정하기

플레이어가 라이트 액터의 박스 컴포넌트 바운드에 오버랩되는 경우, PointLight Timeline에는 포인트 라이트 컴포넌트의 컬러 프로퍼티를 조작할 선형 컬러 커브 트랙이 필요합니다.

1. 콘텐츠 브라우저로 이동하여 + 추가(+ Add) > 기타(Miscellaneous) > 커브(Curve)를 선택합니다.

   

2. CurveLinearColor를 선택하고 에셋의 이름을 LinearColorCurve로 지정합니다.

   

3. LinearColorCurve를 더블클릭해 타임라인 에디터(Timeline Editor)를 엽니다.

4. 첫 번째 컬러 키를 더블클릭해 RGB 값을 R: 1, G: 0.665, B: 0.015로 수정합니다.

   

5. 두 번째 컬러 키를 더블 클릭해 RGB 값을 R: 0, G: 0, B: 0으로 수정합니다.

   

6. 그래프(Graph)를 클릭하여 두 번째 포인트(Point)를 선택하고 시간을 5초로 설정합니다.

   

7. LinearColorCurve가 아래와 같은 모습일 것입니다.

   

8. LinearColorCurve를 저장한 후 콘텐츠 브라우저로 돌아와 BP_LightActor를 더블클릭해 클래스 디폴트를 엽니다.

9. 디테일 패널로 이동해 포인트 라이트 플로트 커브(Point Light Float Curve) 드롭다운 메뉴에서 밝기 커브 플로트(Brightness Curve Float)를 선택합니다.

   

10. 컴파일(Compile)과 저장(Save) 버튼을 클릭합니다.

    

레벨 구성

작성한 코드의 기능을 가장 잘 보여주려면 레벨에서 모든 라이트 소스 액터를 제거해야 합니다.

1. 콘텐츠 브라우저에서 BP_LightActor 에셋으로 이동하여 선택하고 레벨에 드래그합니다.

   

2. 월드 아웃라이너(World Outliner)에서 BP_LightActor를 선택하고 디테일(Details) 패널로 이동하여 위치(Location) 세팅을 (0, 0, 300)으로, 스케일(Scale) 세팅을 (10, 10, 10)으로 설정합니다.

   

3. 월드 아웃라이너에서 DirectionalLight 액터를 삭제합니다.

   

4. 레벨이 다음과 같이 보일 것입니다.

   

최종 결과

이제 라이트 액터와 레벨이 설정되었으므로, 플레이(Play) (PIE)를 클릭해 관전자 폰에 자동으로 빙의합니다.

관전자 폰을 제어하고 라이트 액터의 박스 컴포넌트 바운드를 탐색할 수 있습니다.

타임라인 컴포넌트의 플레이 함수가 트리거되면 라이트의 컬러 및 밝기가 5초에 걸쳐 변하기 시작합니다.