Choose your operating system:
Windows
macOS
Linux
実装方法を選んでください。
Blueprints
C++
このドキュメントでは、接触時にカラーが変化し、ゆっくりと消えていく Light アクタの設定方法について説明します。
この設定は、オーバーラップ トリガーとして機能する Box コンポーネントと Point Light アクタを操作する Timeline コンポーネントを含む Point Light コンポーネント を使用して行います。
Fading Light アクタを作成する
まずは [New (新規)] > [Games (ゲーム)] > [Blank (空白)] > [Blueprint (ブループリント)] と移動し、「FadingLights」 という名前のプロジェクトを作成します。
[Add/Import (追加 / インポート)] ボタンをクリックして新規ブループリントの Actor クラスを 「BP_LightActor」 という名前で作成します。
コンテンツ ブラウザで BP_LightActor をダブルクリックしてブループリント エディタで開き、[Class Defaults (クラスのデフォルト)] を開きます。
[Add Component (コンポーネントを追加)] をクリックしてドロップダウン メニューの [Box Collision (ボックス コリジョン)] を選択し、名前を 「OverlapCollision」 に変更します。
[Components (コンポーネント)] タブでオーバーラップ コリジョンを選択して [DefaultSceneRoot] にドラッグし、OverlapCollision を新規ルート コンポーネントにします。
[Add Component (コンポーネントを追加)] をクリックし、「Point Light」 を検索して選択します。
イベント グラフ を開いてグラフを右クリックし、ブループリントのコンテキスト メニュー から [Add Timeline (タイムラインを追加する)] を選択します。タイムラインの名前を 「PointLightTimeline」 にします。
[My Blueprint (マイ ブループリント)] タブに移動し、[Variables (変数)] カテゴリの [+ Variable] ボタンをクリックして新しい Float 型の変数を追加します。この変数の名前を 「BrightnessMultiplier」 にしてコンパイルし、[Default Value (デフォルト値)] を 「20.0」 に設定します。
コンパイル して 保存 します。
Brightness トラックを設定する
プレイヤーが Light アクタの Box コンポーネントの境界に重なる場合、Timeline コンポーネントでは Point Light コンポーネントの輝度の値を操作するための Float カーブが必要になります。
明るさの初期値は「5,000」で、5 秒間で「0」まで減少します。
PointLightTimeline ノード をダブルクリックしてタイムライン エディタを開き、Float カーブ トラックを追加します。
Float カーブ トラックに 「LightBrightnessFloatTrack」 という名前を付け、Shift ボタンを押しながらクリックして 2 つのキーをトラックに追加します。1 つのキーに時間の値「(0,5000)」を、もう 1 つ のキーに時間の値「(5,0)」を割り当てます。
出来上がった LightBrightnessFloat トラックが次のように表示されます。
Color トラックを設定する
プレイヤーが Light アクタの Box コンポーネントの境界に重なる場合、PointLight タイムラインでは Point Light コンポーネントのカラー プロパティを操作するための線形カラー カーブ トラックが必要になります。
タイムライン エディタ からカラー カーブ トラックを追加します。
新しいカラー トラックに 「LightLinearColorTrack」 という名前を付けます。
最初のカラー キーをダブルクリックして時間を 0 に、RGB の値を (R :1、G: 0.665、B :0.015) に変更します。
次のカラー キーの時間を 5 に、RGB の値を(R :0、G :0、B :0) に変更します。
ブループリントを コンパイル して、保存 します。
出来上がったカラー トラックが次のように表示されます。
作成中のブループリント
コリジョン オーバーラップ イベントと更新ロジックを作成する
Box コンポーネントには、アクタがコリジョンの境界を入力する時に TimelineComponent をトリガーする機能が必要です。
また、PointLightTimeline ではその明るさとカラーを変更するための更新ロジックが必要です。
BP_LightActor のブループリント エディタにある [Components (コンポーネント)] タブに移動して OverlapCollision Box コンポーネントを選択します。[Details (詳細)] パネルで [Events (イベント)] カテゴリまでスクロールして、On Component Begin Overlap イベントの隣にある [+] アイコンをクリックします。
On Component Begin Overlap(OverlapCollision) ノードをドラッグして PointTimelineComponent ノードの Play ピンに接続します。
[Components (コンポーネント)] タブで PointLight コンポーネントを選択して イベント グラフ にドラッグします。
PointLight のピンをドラッグし、アクションのメニュー検索から Set Intensity を選択します。
PointLightTimeline ノードの Light Brightness Float Track ピンをドラッグし、アクションのメニュー検索から float * float を選択します。
[My Blueprint (マイ ブループリント)] タブから BrightnessMultiplier の Float 型変数をイベント グラフにドラッグします。次に Get Brightness Multiplier を選択したら、float * float ノードに接続します。
Update Execution ピンを Set Intensity ノードに接続し、次に float * float ノードの結果を New Intensity の入力ピンに接続します。
PointLight ノードをドラッグし、アクションのメニュー検索から Set Light Color を選択します。
PointLightTimeline ノードの Light Linear Color Track ピンをドラッグして、Set Light Color ノードの New Light Color ピンに接続します。次に、 Set Intensity ノードの 実行ピン を Set Light Color ノードに接続します。
コンパイル して 保存 します。
完成したブループリント
レベル設定
作成したコードの機能を最善の状態で実行するには、レベルからすべての光源を削除する必要があります。
まず、レベルに BP_LightActor のインスタンスを配置します。
アウトライナー に移動して Atmospheric Fog アクタを選択します。[Details] パネルから [Sun] カテゴリに移動し、[Default Brightness] の値を 「0」** に設定します。
ワールド アウトライナーから Sky Sphere アクタを削除します。
また、ワールド アウトライナーの Light Source アクタ も削除します。
ツールバー に移動し、[Build (ビルド)] を選択してレベルのライティングを再ビルドします。
ライティングのビルドが完了すると、レベルは次の画像のようになります。
最終結果
これで、Light アクタとレベルを設定できました。[PIE] をクリックすると観戦者のポーンの所有権が自動的に得られます。
観戦者のポーンを制御し、Light アクタの Box コンポーネントの境界に移動することができます。
Timeline コンポーネントの Play 関数がトリガーされると、ライトのカラーおよび明るさは 5 秒間で変化していきます。
このドキュメントでは、接触時にカラーが変化し、ゆっくりと消えていく Light アクタの設定方法について説明します。
この設定は、オーバーラップ トリガーとして機能する Box コンポーネントと Point Light アクタを操作する Timeline コンポーネントを含む Point Light コンポーネント を使用して行います。
Fading Light アクタを作成する
まずは [New (新規)] > [Games (ゲーム)] > [Blank (空白)] > [C++] と移動し、「FadingLights」 という名前のプロジェクトを作成します。
C++ Class Wizard で LightActor という名前の Actor クラスを新規作成します。
LightActor.h
ファイルに移動して次のように宣言します。#include "Components/TimelineComponent.h"
次に、
LightActor
クラスの定義に次のコードを追加します。public: UPROPERTY(EditAnywhere) UCurveFloat* PointLightFloatCurve; UPROPERTY(EditAnywhere) UCurveLinearColor* PointLightColorCurve; protected: //TimelineComponent to animate the point light component. UPROPERTY(VisibleAnywhere, BlueprintReadWrite) UTimelineComponent* LightTimelineComp; //BoxComponent which will be used as our proximity overlap volume. UPROPERTY(EditAnywhere, BlueprintReadWrite) class UBoxComponent* LightOverlapVolume; UPROPERTY(EditAnywhere,BlueprintReadWrite) class UPointLightComponent* PointLightComp; //Track used for Pointlight brightness FOnTimelineFloat UpdateBrightnessTrack; //Track used for Pointlight color FOnTimelineLinearColor UpdateColorTrack; //Function to Update Light's brightness relative to UpdateBrightnessTrack UFUNCTION() void UpdateLightBrightness(float BrightnessOutput); //Function to Update Light's color relative to UpdateColorTrack UFUNCTION() void UpdateLightColor(FLinearColor ColorOutput); UPROPERTY(EditDefaultsOnly) float BrightnessMultiplier;
LightActor.cpp
に移動し、次のクラス ライブラリを追加します。#include "Components/BoxComponent.h" #include "Components/PointLightComponent.h"
ALightActor::ALightActor のコンストラクタで、次のように宣言します。
//Create our Default Components PointLightComp = CreateDefaultSubobject<UPointLightComponent>(TEXT("PointLightComp")); LightTimelineComp = CreateDefaultSubobject<UTimelineComponent>(TEXT("LightTimelineComp")); LightOverlapVolume = CreateDefaultSubobject<UBoxComponent>(TEXT("LightOverlapVolume")); //Setup our Attachments RootComponent = LightOverlapVolume; PointLightComp->AttachToComponent(LightOverlapVolume,FAttachmentTransformRules::KeepRelativeTransform); //Initialize Brightness Multiplier BrightnessMultiplier = 20.0f;
次に、Point Light コンポーネントの UFunction メソッドを実装します。
void ALightActor::UpdateLightBrightness(float BrightnessOutput) { PointLightComp->SetLightBrightness(BrightnessOutput * 20.0f); } void ALightActor::UpdateLightColor(FLinearColor ColorOutput) { PointLightComp->SetLightColor(ColorOutput); }
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) { LightTimelineComp->AddInterpFloat(PointLightFloatCurve, UpdateBrightnessTrack); } //If we have a linear color curve, bind it's graph to our update function if (PointLightColorCurve) { LightTimelineComp->AddInterpLinearColor(PointLightColorCurve, UpdateColorTrack); }
コードをコンパイルします。
コンテンツ ブラウザで 「C++ Classes」フォルダ に移動します。
LightActor クラスを右クリックして [Create Blueprint Class based on LightActor (LightActor に基づいてブループリント クラスを作成する)] を選択し、Blueprint アクタの名前を 「BP_LightActor」 にします。
BP_LightActor のクラスのデフォルトが、次のように表示されます。
Work-In-Progress Code
LightActor.h
//Copyright 1998-2021 Epic Games, Inc.All Rights Reserved.
#pragma once
#include "CoreMinimal.h"
#include "GameFramework/Actor.h"
#include "Components/TimelineComponent.h"
#include "LightActor.generated.h"
UCLASS()
class FADINGLIGHTS_API ALightActor : public AActor
{
GENERATED_BODY()
public:
// Sets default values for this actor's properties
ALightActor();
UPROPERTY(EditAnywhere)
UCurveFloat* PointLightFloatCurve;
UPROPERTY(EditAnywhere)
UCurveLinearColor* PointLightColorCurve;
protected:
// Called when the game starts or when spawned
virtual void BeginPlay() override;
//TimelineComponent to animate the point light component.
UPROPERTY(VisibleAnywhere, BlueprintReadWrite)
UTimelineComponent* LightTimelineComp;
//BoxComponent which will be used as our proximity overlap volume.
UPROPERTY(EditAnywhere, BlueprintReadWrite)
class UBoxComponent* LightOverlapVolume;
UPROPERTY(EditAnywhere,BlueprintReadWrite)
class UPointLightComponent* PointLightComp;
//Track used for Pointlight brightness
FOnTimelineFloat UpdateBrightnessTrack;
//Track used for Pointlight color
FOnTimelineLinearColor UpdateColorTrack;
//Function to Update Light's brightness relative to UpdateBrightnessTrack
UFUNCTION()
void UpdateLightBrightness(float BrightnessOutput);
//Function to Update Light's color relative to UpdateColorTrack
UFUNCTION()
void UpdateLightColor(FLinearColor ColorOutput);
UPROPERTY(EditDefaultsOnly)
float BrightnessMultiplier;
public:
// Called every frame
virtual void Tick(float DeltaTime) override;
}
LightActor.cpp
//Copyright 1998-2021 Epic Games, Inc.All Rights Reserved.
#include "LightActor.h"
#include "Components/PointLightComponent.h"
#include "Components/BoxComponent.h"
// Sets default values
ALightActor::ALightActor()
{
// Set this actor to call Tick() every frame.必要のない場合はオフにできます。パフォーマンスが改善します。
PrimaryActorTick.bCanEverTick = true;
//Create our Default Components
PointLightComp = CreateDefaultSubobject<UPointLightComponent>(TEXT("PointLightComp"));
LightTimelineComp = CreateDefaultSubobject<UTimelineComponent>(TEXT("LightTimelineComp"));
LightOverlapVolume= CreateDefaultSubobject<UBoxComponent>(TEXT("LightOverlapVolume"));
//Setup our Attachments
RootComponent = LightOverlapVolume;
PointLightComp->AttachToComponent(LightOverlapVolume,FAttachmentTransformRules::KeepRelativeTransform);}
// Called when the game starts or when spawned
void ALightActor::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)
{
LightTimelineComp->AddInterpFloat(PointLightFloatCurve, UpdateBrightnessTrack);
}
//If we have a linear color curve, bind it's graph to our update function
if (PointLightColorCurve)
{
LightTimelineComp->AddInterpLinearColor(PointLightColorCurve, UpdateColorTrack);
}
}
void ALightActor::UpdateLightBrightness(float BrightnessOutput)
{
PointLightComp->SetLightBrightness(BrightnessOutput * 20.0f);
}
void ALightActor::UpdateLightColor(FLinearColor ColorOutput)
{
PointLightComp->SetLightColor(ColorOutput);
}
// Called every frame
void ALightActor::Tick(float DeltaTime)
{
Super::Tick(DeltaTime);
}
コリジョン オーバーラップ イベントを作成してバインディングする
Box コンポーネントには、アクタがコリジョンの境界を入力する時に TimelineComponent をトリガーする機能が必要です。
LightActor.h
ファイルのクラス定義に移動し、BrightnessMultiplier
の下で次のように宣言します。UFUNCTION() void OnOverlapBegin(class UPrimitiveComponent* OverlappedComp, class AActor* OtherActor, class UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult);
次に、
LightActor.cpp
ファイルに移動してOnOverlapBegin
関数を実装します。void ALightActor::OnOverlapBegin(class UPrimitiveComponent* OverlappedComp, class AActor* OtherActor, class UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult) { LightTimelineComp->Play(); }
BeginPlay メソッドで Overlap 関数をバインドします。
//Binding our Box Component to our Light Actor's Overlap Function LightProxVolume->OnComponentBeginOverlap.AddDynamic(this, &ALightActor::OnOverlapBegin);
コードをコンパイルします。
完成コード
LightActor.h
// Fill out your copyright notice in the Description page of Project Settings.
#pragma once
#include "CoreMinimal.h"
#include "GameFramework/Actor.h"
#include "Components/TimelineComponent.h"
#include "LightActor.generated.h"
UCLASS()
class FADINGLIGHTS_API ALightActor : public AActor
{
GENERATED_BODY()
public:
// Sets default values for this actor's properties
ALightActor();
protected:
// Called when the game starts or when spawned
virtual void BeginPlay() override;
public:
UPROPERTY(EditAnywhere)
UCurveFloat* PointLightFloatCurve;
UPROPERTY(EditAnywhere)
UCurveLinearColor* PointLightColorCurve;
protected:
//TimelineComponent to animate the point light component.
UPROPERTY(VisibleAnywhere, BlueprintReadWrite)
UTimelineComponent* LightTimelineComp;
//BoxComponent which will be used as our proximity overlap volume.
UPROPERTY(EditAnywhere, BlueprintReadWrite)
class UBoxComponent* LightOverlapVolume;
UPROPERTY(EditAnywhere, BlueprintReadWrite)
class UPointLightComponent* PointLightComp;
//Track used for Pointlight brightness
FOnTimelineFloat UpdateBrightnessTrack;
//Track used for Pointlight color
FOnTimelineLinearColor UpdateColorTrack;
//Function to Update Light's brightness relative to UpdateBrightnessTrack
UFUNCTION()
void UpdateLightBrightness(float BrightnessOutput);
//Function to Update Light's color relative to UpdateColorTrack
UFUNCTION()
void UpdateLightColor(FLinearColor ColorOutput);
UPROPERTY(EditDefaultsOnly)
float BrightnessMultiplier;
UFUNCTION()
void OnOverlapBegin(class UPrimitiveComponent* OverlappedComp, class AActor* OtherActor, class UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult);
public:
// Called every frame
virtual void Tick(float DeltaTime) override;
};
LightActor.cpp
// 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()
{
// Set this actor to call Tick() every frame.必要のない場合はオフにできます。パフォーマンスが改善します。
PrimaryActorTick.bCanEverTick = true;
//Create our Default Components
PointLightComp = CreateDefaultSubobject<UPointLightComponent>(TEXT("PointLightComp"));
LightTimelineComp = CreateDefaultSubobject<UTimelineComponent>(TEXT("LightTimelineComp"));
LightOverlapVolume = CreateDefaultSubobject<UBoxComponent>(TEXT("LightOverlapVolume"));
//Setup our Attachments
RootComponent = LightOverlapVolume;
PointLightComp->AttachToComponent(LightOverlapVolume, FAttachmentTransformRules::KeepRelativeTransform);
//Initialize Brightness Multiplier
BrightnessMultiplier = 20.0f;
}
void ALightActor::UpdateLightBrightness(float BrightnessOutput)
{
PointLightComp->SetLightBrightness(BrightnessOutput * 20.0f);
}
void ALightActor::UpdateLightColor(FLinearColor ColorOutput)
{
PointLightComp->SetLightColor(ColorOutput);
}
void ALightActor::OnOverlapBegin(class UPrimitiveComponent* OverlappedComp, class AActor* OtherActor, class UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult)
{
LightTimelineComp->Play();
}
// Called when the game starts or when spawned
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)
{
LightTimelineComp->AddInterpFloat(PointLightFloatCurve, UpdateBrightnessTrack);
}
//If we have a linear color curve, bind it's graph to our update function
if (PointLightColorCurve)
{
LightTimelineComp->AddInterpLinearColor(PointLightColorCurve, UpdateColorTrack);
}
//Binding our Box Component to our Light Actor's Overlap Function
LightOverlapVolume->OnComponentBeginOverlap.AddDynamic(this, &ALightActor::OnOverlapBegin);
}
// Called every frame
void ALightActor::Tick(float DeltaTime)
{
Super::Tick(DeltaTime);
}
Brightness トラックを設定する
プレイヤーが Light アクタの Box コンポーネントの境界に重なる場合、Timeline コンポーネントでは Point Light コンポーネントの輝度の値を操作するための Float カーブが必要になります。
明るさの初期値は「5,000」で、5 秒間で「0」まで減少します。
コンテンツ ブラウザ から、[Add/Import]> [Miscellaneous] > [Curve] の順に選択します。
[CurveFloat] を選択してアセットの名前を 「BrightnessCurveFloat」 にします。
[BrightnessCurveFloat] をダブルクリックして タイムライン エディタ を開きます。
2 つのキーを Float カーブに追加し、1 つのキーに時間の値「(0,5000)」を、もう 1 つ のキーに時間の値「(5,0)」を割り当てます。
BrightnessCurveFloat を保存してから コンテンツ ブラウザ に戻り、[BP_LightActor] をダブルクリックして [Class Defaults (クラスのデフォルト)] を開きます。
[Details (詳細)] パネルに移動し、[Point Light Float Curve (ポイント ライトの Float カーブ)] のドロップダウン メニューから [Brightness Curve Float (輝度のカーブの Float)] を選択します。
コンパイル して 保存 します。
Color トラックを設定する
プレイヤーが Light アクタの Box コンポーネントの境界に重なる場合、PointLight タイムラインでは Point Light コンポーネントのカラー プロパティを操作するための線形カラー カーブ トラックが必要になります。
コンテンツ ブラウザ から、[Add/Import]> [Miscellaneous] > [Curve] の順に選択します。
[CurveLinearColor] を選択してアセットの名前を 「LinearColorCurve」 にします。
[LinearColorCurve] をダブルクリックして タイムライン エディタ を開きます。
最初のカラー キーの時間の値を「0」に、RGB の値を「(R:1,G:0.665,B:0.015)」に変更します。また、2 つ目のカラー キーの時間を「5」に、RGB の値を「(R:0,G:0,B:0)」に変更します。
[LinearColorCurve] を保存してからコンテンツ ブラウザに戻り、 BP_LightActor をダブルクリックして [Class Defaults] を開きます。
[Details] パネルに移動し、[Point Light Float Curve] のドロップダウン メニューから [Brightness Curve Float] を選択します。
コンパイル して 保存 します。
レベル設定
作成したコードの機能を最善の状態で実行するには、レベルからすべての光源を削除する必要があります。
まず、レベルに BP_LightActor のインスタンスを配置します。
アウトライナー に移動して Atmospheric Fog アクタを選択します。[Details] パネルから [Sun] カテゴリに移動し、[Default Brightness] の値を 0** に設定します。
ワールド アウトライナーから Sky Sphere アクタを削除します。
また、ワールド アウトライナーの Light Source アクタ も削除します。
ツールバー に移動し、[Build (ビルド)] を選択してレベルのライティングを再ビルドします。
ライティングのビルドが完了すると、レベルは次の画像のようになります。
最終結果
これで、Light アクタとレベルを設定できました。[PIE] をクリックすると観戦者のポーンの所有権が自動的に得られます。
観戦者のポーンを制御し、Light アクタの Box コンポーネントの境界に移動することができます。
Timeline コンポーネントの Play 関数がトリガーされると、ライトのカラーおよび明るさは 5 秒間で変化していきます。