カメラ コンポーネントを使用する

Camera コンポーネントを Character クラスに追加して、レベルで任意のアクタのカメラとして使用する方法。

Choose your operating system:

Windows

macOS

Linux

このチュートリアルでは、Camera コンポーネントCharacter クラスに追加します。カメラはレベルを表示する視点となり、プレイ可能なキャラクター、プレイ不可のアクタなど、レベル内のあらゆるアクタにアタッチできます。

実装方法を選んでください。

Blueprints

C++

Character Blueprint を作成する

  1. まず [New (新規)] > [Games (ゲーム)] > [Blank (空白)] > [Blueprint (ブループリント)] の順に選択して、「CameraComponents」という名前のプロジェクトを作成します。

  2. コンテンツ ブラウザ で、[Add/Import (追加/インポート)] ボタンをクリックして新規ブループリントの Character クラスを「BP_CameraCharacter」という名前で作成します。

    AddCharacterBP.png

  3. コンテンツ ブラウザ で、BP_CameraCharacter をダブルクリックして、[Class Defaults (クラスのデフォルト)] を開きます。

  4. Mesh Skeletal Mesh コンポーネントを選択して、[Components (コンポーネント)] タブの [Add Component (コンポーネントを追加)] をクリックし、ドロップダウン メニューから [Arrow] を選択して、名前を「CameraRShoulderLocation」に変更します。

    AddComponent1.png

    Arrow Component は、向かっている方向を示す線を含むシンプルな矢印をレンダリングする Scene コンポーネント です。 詳細については、「

    [Utility コンポーネント](understanding-the-basics\components\utility-components)
    」のドキュメントを参照してください。

  5. [Details (詳細)] パネルで CameraRShoulderLocation Arrow コンポーネントを選択して、[Transform (トランスフォーム)] カテゴリに移動し、 [Location (位置)]「-30」、「0」、「150」 に、[Rotation (回転)]「0」、「0」、「90」 に設定します。

    CameraRShoulderTransform.png

  6. Mesh Skeletal Mesh コンポーネントを選択して、[Components (コンポーネント)] タブから [Add Component (コンポーネントを追加)] をクリックします。ドロップダウン メニューの [Arrow] を選択して、名前を「CameraOriginLocation」に変更します。

    AddComponent2.png

  7. [Components (コンポーネント)] タブで CameraOriginLocation Arrow コンポーネントを選択して、[Details (詳細)] パネルの [Transform (トランスフォーム)] カテゴリに移動して、 [Location (位置)] を 「0」「-120」「150」 に、 [Rotation (回転)] を 「0」、「0」、「90」 に設定します。

    CameraOriginLocation.png

    CameraOriginLocation および CameraRShoulderLocation は、Skeletal Mesh コンポーネント にアタッチされており、Camera コンポーネントがビューポイントの位置を切り替えたビジュアル表現を提供しま

  8. [Components (コンポーネント)] タブで、Mesh コンポーネントを選択して、[Details (詳細)] パネルに移動します。[Mesh (メッシュ)] カテゴリから [Skeletal Mesh (スケルタル メッシュ)] を選択して、ドロップダウン メニューで「TutorialTPP」を検索して選択します。

    SettingSkeletalMesh.png

    ドロップダウン メニューにオプションが一切表示されない場合は、[View Options (表示オプション)] をクリックして、[Show Engine Content (エンジンのコンテンツを表示)] ボックスをオンにしてください。

    ShowEngineContent.png

  9. [Details (詳細)] パネルから [Transform (トランスフォーム)] カテゴリに移動して、メッシュの [Location (位置)]「0」、「0」、「-90」) に、[Rotation (回転)]「0」、「0」、「-90」) に設定します。

    SkeletalMeshTransform.png

    1. 次に、 [Components (コンポーネント)] タブで、 [Add Component (コンポーネントを追加)] ボタンをクリックして、[Camera (カメラ)] を選択し Camera コンポーネントに追加して、コンポーネントの名前を「CameraComp」に変更します。

    AddComponent3.png

    1. [Details (詳細)] パネルに移動して、カメラの [Location (位置)] の値を (0-120150) に設定します。

    CameraTransform.png

  10. コンパイル して 保存 します。

Character クラスを作成する

  1. まず [New (新規)] > [Games (ゲーム)] > [Blank (空白)] > [C++] の順に選択して、「CameraComponents」という名前のプロジェクトを作成します。

    CreateProject.png

  2. [C++ Class Wizard (C++ クラス ウィザード)] で、新規 Character クラスを「CameraCharacter」という名前で作成してから、CameraCharactor.h ファイルに移動して、次のクラス定義を宣言します。

    protected:
            // Arrow Component for the Camera shoulder viewpoint location
            UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
            class UArrowComponent* CameraRShoulderLocation;
    
            // Arrow Component for the Camera Origin viewpoint location
            UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
            class UArrowComponent* CameraOriginLocation;
    
            UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
            class UCameraComponent* CameraComp; 
  3. CameraCharactor.cpp ファイルに移動して、次のクラス ライブラリを追加します。

    #include "Camera/CameraComponent.h"
    #include "Components/ArrowComponent.h"
  4. Arrow コンポーネントおよび Camera コンポーネントをインスタンス化して、キャラクターのスケルタル メッシュにアタッチするために、 ACameraCharactor::ACameraCharacter コンストラクタ メソッドで次を宣言します。

    // Instantiating your class Components
    CameraRShoulderLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraRShoulderLocation"));
    CameraOriginLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraOriginLocation"));
    CameraComp = CreateDefaultSubobject<UCameraComponent>(TEXT("CameraComp"));
    
    // Attaching your class Components to the default character's Skeletal Mesh Component.
    CameraRShoulderLocation->SetupAttachment(GetMesh());
    CameraOriginLocation->SetupAttachment(GetMesh());
    CameraComp->SetupAttachment(GetMesh());

    プロパティ指定子 は、ブループリントでクラスのコンポーネントやプロパティを編集する機能を提供します。

  5. コードを コンパイル します。

  6. コンテンツ ブラウザ で、「C++ Classes」フォルダに移動します。CameraCharacter クラスを 右クリック して、ドロップダウン メニューから [Create Blueprint class based on CameraCharacter] を選択してブループリントの名前を「BP_CameraCharacter」にします。

    CreateBPCameraCharacter.png

  7. BP_CameraCharacter をダブルクリックして、[Class Defaults (クラスのデフォルト)] を開きます。

    ClassDefaults.png

  8. [Components (コンポーネント)] タブで、Mesh コンポーネントを選択して、[Details (詳細)] パネルに移動します。[Mesh (メッシュ)] カテゴリから [Skeletal Mesh (スケルタル メッシュ)] を選択して、ドロップダウン メニューで「TutorialTPP」を検索して選択します。

    SettingSkeletalMesh.png

    ドロップダウン メニューにオプションが一切表示されない場合は、[View Options (表示オプション)] をクリックして、[Show Engine Content (エンジンのコンテンツを表示)] ボックスをオンにしてください。

    ShowEngineContent.png

  9. [Details (詳細)] パネルから [Transform (トランスフォーム)] カテゴリに移動して、メッシュの [Location (位置)]「0」、「0」、「-90」) に、[Rotation (回転)]「0」、「0」、「-90」) に設定します。

    SkeletalMeshTransform.png

  10. [Details (詳細)] パネルで CameraRShoulderLocation Arrow コンポーネントを選択して、[Transform (トランスフォーム)] カテゴリに移動し、 [Location (位置)]「-30」、「0」、「150」 に、[Rotation (回転)]「0」、「0」、「90」 に設定します。

    CameraRShoulderTransform.png

  11. [Components (コンポーネント)] タブで CameraOriginLocation Arrow コンポーネントを選択して、[Details (詳細)] パネルの [Transform (トランスフォーム)] カテゴリに移動して、 [Location (位置)] を 「0」「-120」「150」 に、 [Rotation (回転)] を 「0」、「0」、「90」 に設定します。

    CameraOriginLocation.png

    CameraOriginLocation および CameraRShoulderLocation は、Skeletal Mesh コンポーネント にアタッチされており、Camera コンポーネントがビューポイントの位置を切り替えたビジュアル表現を提供しま

  12. [Components (コンポーネント)] タブで CameraComp を選択して、[Details (詳細)] パネルの [Transform (トランスフォーム)] カテゴリに移動して、 [Location (位置)] を 「0」「-120」「150」 に、 [Rotation (回転)] を 「0」、「0」、「90」 に設定します。

    CameraTransform.png

  13. コンパイル して 保存 します。

  14. コンポーネントは、次のようにビューポートに表示されます。

    WorkInProgress.png

作成中のブループリント

image alt text

この例では、カメラはキャラクターの Skeletal Mesh コンポーネントにアタッチされており、サードパーソンの視点を提供しています。ただし、Camera コンポーネントを Blueprint Actor クラスに追加して、任意のカメラの視点を選択することができます。

作成中のコード

CameraCharacter.h

// Fill out your copyright notice in the Description page of Project Settings.
#pragma once
#include "CoreMinimal.h"
#include "GameFramework/Character.h"
#include "CameraCharacter.generated.h"

UCLASS()
class CAMERACOMPONENTS_API ACameraCharacter : public ACharacter
{
    GENERATED_BODY()
public:
    // Sets default values for this character's properties
    ACameraCharacter();

    protected:
    // Called when the game starts or when spawned
    virtual void BeginPlay() override;

public: 
    // Called every frame
    virtual void Tick(float DeltaTime) override;

    // Called to bind functionality to input
    virtual void SetupPlayerInputComponent(class UInputComponent* PlayerInputComponent) override;

protected:
    // Arrow Component for the Camera shoulder viewpoint location
    UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
        class UArrowComponent* CameraRShoulderLocation;

    // Arrow Component for the Camera Origin viewpoint location
    UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
        class UArrowComponent* CameraOriginLocation;

    UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
        class UCameraComponent* CameraComp;
};

CameraCharacter.cpp

// Fill out your copyright notice in the Description page of Project Settings.
#include "CameraCharacter.h"
#include "Camera/CameraComponent.h"
#include "Components/ArrowComponent.h"

// Sets default values
ACameraCharacter::ACameraCharacter()
{
    // Set this character to call Tick() every frame.You can turn this off to improve performance if you don't need it.
    PrimaryActorTick.bCanEverTick = true;

    // Instantiating your class Components
    CameraRShoulderLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraRShoulderLocation"));
    CameraOriginLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraOriginLocation"));
    CameraComp = CreateDefaultSubobject<UCameraComponent>(TEXT("CameraComp"));

    // Attaching your class Components to the dDefault Character's Skeletal Mesh Component.
    CameraRShoulderLocation->SetupAttachment(GetMesh());
    CameraOriginLocation->SetupAttachment(GetMesh());
    CameraComp->SetupAttachment(GetMesh());
}

// Called when the game starts or when spawned
void ACameraCharacter::BeginPlay()
{
    Super::BeginPlay(); 
}

// Called every frame
void ACameraCharacter::Tick(float DeltaTime)
{
    Super::Tick(DeltaTime);
}

// Called to bind functionality to input
void ACameraCharacter::SetupPlayerInputComponent(UInputComponent* PlayerInputComponent)
{
    Super::SetupPlayerInputComponent(PlayerInputComponent);
}

Input Key Events を作成してバインディングする

Character Blueprint クラスを作成できたら、Camera コンポーネントの相対位置を 2 つの異なる Arrow コンポーネントの位置間で移行させるために、いくつかのスクリプト ロジックを設定する必要があります。

  1. BP_CameraCharacter の [Class Defaults (クラスのデフォルト)] から [Event Graph (イベント グラフ)] タブをクリックして、グラフ内を 右クリック します。ドロップダウン メニューから、 [Right Mouse Button (マウスの右ボタン)] を選択して、マウスの入力イベントを追加します。

    RightMouseButton.png

    イベント グラフ は、カメラを移動させるスクリプト ロジックを実行する場所です。

  2. [My Blueprint (マイ ブループリント)] パネルに移動してから、変数カテゴリで、 Ctrl キーを押しながらクリック して、[Event Graph (イベント グラフ)] に CameraComp 変数のコピーを押しながらドラッグします。

    CameraCompDragDrop.png

    CameraComp 変数のコピーを作成することで、プロパティを設定したり、クラス メソッドを通じて Camera コンポーネントに影響を及ぼすことができます。

  3. [My Blueprint (マイ ブループリント)] タブに戻り、[Variables (変数)] カテゴリから Ctrl を押しながら CameraOriginLocation および CameraRShoulderLocation Arrow コンポーネントをクリックしてイベント グラフにドラッグします。

    OriginLocationDragDrop.png

  4. イベント グラフで CameraComp 出力ピンをクリックしてドラッグし、ドロップダウン メニューで「SetRelativeLocation」を検索して選択します。

    SetRelativeLocation.png

    SetRelativeLocation 関数は、Camera コンポーネントを任意の場所に移動する機能を提供します。

  5. CameraRShoulderLocation 出力ピンをクリックしてドラッグしてから、GetRelativeLocation を検索して選択します。

    CameraGetRelativeLocation.png

  6. Relative Location ノードの出力ピンを New Location ノードに接続します。その後、 Right Mouse Button イベントの Pressed 実行ピンを Set Relative Location ノードの入力実行ピンに接続します。

    CameraRShoulderLocation.png

    Right Mouse Button (マウスの右ボタン)] が押されると、カメラの相対位置が Arrow コンポーネント CameraRShoulderLocation に設定されます。

  7. Camera Comp ピンをクリックしてドラッグし、ドロップダウン メニューから SetRelativeLocation を選択します。

    CameraCompSetRelative.png

  8. CameraOriginLocation ノードをクリックしてドラッグし、ドロップダウン メニューから Get Relative Location を選択します。

    CameraOriginGetRelativeLocation.png

  9. CameraOriginLocationRelative Location ノードの出力ピンを New Location ピンに接続します。その後、 Right Mouse Button イベント ノードの Released 実行ピンを SetRelativeLocation ノードの入力実行ピンに接続します。

    CameraOriginConnectPins.png

  10. コンパイル して 保存 します。

    イベントグラフは次の画像のようになります。

    EventGraph.png

Input Key Event 関数を作成してバインディングする

Character Blueprint クラスを作成できたら、Camera コンポーネントの相対位置を 2 つの異なる Arrow コンポーネントの位置間で移行させるために、いくつかのスクリプト ロジックを設定する必要があります。

  1. レベル エディタのツールバーから、 [Edit (編集)] > [Project Settings (プロジェクト設定)] に移動して、[Input (インプット)] ページを開きます。次に、 [Bindings (バインディング)] カテゴリから、 [Action Mappings (アクション マッピング)] の隣にある + アイコンをクリックして、新しい入力マッピングを作成します。

    ProjSettingInput.png

  2. アクション マッピングに「SwitchCamera」という名前を付けて、ドロップダウン メニューから [Right Mouse Button] キー値を選択します。

    SwitchCameraButton.png

  3. CameraCharacter.h ファイルにアクセスして、次のクラス定義を宣言します。

    protected:
        // Sets the CameraComp's relative location to CameraRShoulderLocation arrow component.
        void SetCameraShoulderLocation();
    
        // Sets the CameraComp's relative location to the CameraOriginLocation arrow component
        void SetCameraOriginLocation();
  4. CameraCharacter.cpp ファイルで、次のクラス メソッドを実装します。

    void ACameraCharacter::SetCameraShoulderLocation()

    {
        CameraComp->SetRelativeLocation(CameraRShoulderLocation->GetRelativeLocation());
    }
    
    void ACameraCharacter::SetCameraOriginLocation()
    {
        CameraComp->SetRelativeLocation(CameraOriginLocation->GetRelativeLocation());
    }
  5. 次に、 ACameraCharacter::SetupPlayerInputComponent メソッドに移動して、次のコードを実装します。

    Super::SetupPlayerInputComponent(PlayerInputComponent);
    PlayerInputComponent->BindAction("SwitchCamera", IE_Pressed, this, &ACameraCharacter::SetCameraShoulderLocation);
    PlayerInputComponent->BindAction("SwitchCamera", IE_Released, this, &ACameraCharacter::SetCameraOriginLocation);

    プレイヤー コントローラーおよび Pawn アクタの所有の詳細については、「ポーンを所有する」を参照してください。

  6. コードを コンパイル します。

完成したブループリント

FinishedBlueprint.png

完成コード

CameraCharacter.h

// Fill out your copyright notice in the Description page of Project Settings.
#pragma once
#include "CoreMinimal.h"
#include "GameFramework/Character.h"
#include "CameraCharacter.generated.h"

UCLASS()
class CAMERACOMPONENTS_API ACameraCharacter : public ACharacter
{
    GENERATED_BODY()
    public:
        // Sets default values for this character's properties
        ACameraCharacter();

    protected:
        // Called when the game starts or when spawned
        virtual void BeginPlay() override;

    public: 
        // Called every frame
        virtual void Tick(float DeltaTime) override;

        // Called to bind functionality to input
        virtual void SetupPlayerInputComponent(class UInputComponent* PlayerInputComponent) override;

    protected:
        // Arrow Component for the Camera shoulder viewpoint location
        UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
            class UArrowComponent* CameraRShoulderLocation;

        // Arrow Component for the Camera Origin viewpoint location
        UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
            class UArrowComponent* CameraOriginLocation;

        UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
            class UCameraComponent* CameraComp;

    protected:
        // Sets the CameraComp's relative location to CameraRShoulderLocation arrow component.
        void SetCameraShoulderLocation();

        // Sets the CameraComp's relative location to the CameraOriginLocation arrow component
        void SetCameraOriginLocation();
};

CameraCharacter.cpp

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

#include "CameraCharacter.h"
#include "Camera/CameraComponent.h"
#include "Components/ArrowComponent.h"

// Sets default values
ACameraCharacter::ACameraCharacter()
{
    // Set this character to call Tick() every frame.  You can turn this off to improve performance if you don't need it.
    PrimaryActorTick.bCanEverTick = true;

    // Instantiating your class Components
    CameraRShoulderLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraRShoulderLocation"));
    CameraOriginLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraOriginLocation"));
    CameraComp = CreateDefaultSubobject<UCameraComponent>(TEXT("CameraComp"));

    // Attaching your class Components to the dDefault Character's Skeletal Mesh Component.
    CameraRShoulderLocation->SetupAttachment(GetMesh());
    CameraOriginLocation->SetupAttachment(GetMesh());
    CameraComp->SetupAttachment(GetMesh());
}

// Called when the game starts or when spawned
void ACameraCharacter::BeginPlay()
{
    Super::BeginPlay(); 
}

// Called every frame
void ACameraCharacter::Tick(float DeltaTime)
{
    Super::Tick(DeltaTime);
}

//Called to bind functionality to input
void ACameraCharacter::SetupPlayerInputComponent(UInputComponent* PlayerInputComponent)
{
    Super::SetupPlayerInputComponent(PlayerInputComponent);
    PlayerInputComponent->BindAction("SwitchCamera", IE_Pressed, this, &ACameraCharacter::SetCameraShoulderLocation);
    PlayerInputComponent->BindAction("SwitchCamera", IE_Released, this, &ACameraCharacter::SetCameraOriginLocation);
}

void ACameraCharacter::SetCameraShoulderLocation()
{
    CameraComp->SetRelativeLocation(CameraRShoulderLocation->GetRelativeLocation());
}

void ACameraCharacter::SetCameraOriginLocation()
{
    CameraComp->SetRelativeLocation(CameraOriginLocation->GetRelativeLocation());
}

Game Mode を設定する

キャラクターの作成と設定が完了したら、[Play (PIE)] をクリックしたときにキャラクターがスポーンされるように、ゲーム モードを変更する必要があります。

  1. コンテンツ ブラウザ で、[Add/Import (追加/インポート)] ボタンをクリックして新規の Game Mode Base Blueprint クラスを「BP_CameraCompGameMode」という名前で作成します。

    AddGameModeBaseBP.png

  2. BP_CameraCompGameMode をダブルクリックして、 [Class Defaults (クラスのデフォルト)] を開きます。[Details (詳細)] パネルから[Classes (クラス)] カテゴリ に移動して、 [Default Pawn Class (デフォルト ポーン クラス)] ドロップダウン メニューの Bp_CameraCharacter を選択します。

    SettingDefPawnClass.png

    プレイヤー コントローラーおよび Pawn アクタの所有の詳細については、「ポーンを所有する」を参照してください。

  3. コンパイル して 保存 します。

  4. Unreal Engine ツールバーで、 [Edit (編集)] > [Project Settings (プロジェクト設定)] を選択して、[Maps & Modes (マップ&モード)] 設定に移動します。[Default Modes (デフォルト モード)] カテゴリ から新しく作成された BP_CameraCompGameMode クラスを選択します。

    SettingDefaultGameMode.png

  5. レベル エディタで [Play (プレイ)] (PIE) ボタンをクリックすると、変更をプレビューできます。

    PlayButton.png

Game Mode を設定する

キャラクターの作成と設定が完了したら、[Play (PIE)] をクリックしたときにキャラクターがスポーンされるように、ゲーム モードを変更する必要があります。

  1. まず、「C++ Classes」フォルダに移動します。CameraComponentsGameModeBase クラスを右クリックして、ドロップダウン メニューから [Create Blueprint Class based CameraComponentsGameModeBase] を選択してブループリントの名前を「BP_CameraCompGameMode」にします。

    CreateBPCameraGameMode.png

  2. [Details (詳細)] パネルから、 [Classes (クラス)] カテゴリ に移動して、 [Default Pawn Class (デフォルト ポーン クラス)] ドロップダウン メニューの BP_CameraCharacter を選択します。

    SetDefaultPawn.png

    デフォルトのポーン クラスは、コードの GameModeBase DefaultPawnClassDefault Pawn 変数からも設定できます。

  3. コンパイル して 保存 します。

  4. Unreal Engine ツールバーで、 [Edit (編集)] > [Project Settings (プロジェクト設定)] を選択して、[Maps & Modes (マップ&モード)] 設定に移動します。[Default Modes (デフォルト モード)] カテゴリ から新しく作成された BP_CameraCompGameMode クラスを選択します。

    SettingDefaultGameMode.png

  5. レベル エディタで [Play (プレイ)] (PIE) ボタンをクリックすると、変更をプレビューできます。

    PlayButton.png

最終結果

image alt text

これで [Play (プレイ)] (PIE) を選択すると、マウスの右ボタンをクリックして放すと、2 つのカメラの視点を切り替えることができるようになりました。

次のステップ

Camera コンポーネントを操作できるようになったので、「Spring Arm コンポーネント」チュートリアルに進みましょう。このチュートリアルでは、狭い場所に移動するときや、オブジェクトがカメラからプレイヤーへの視界を遮るときに、カメラが遮られないようにする方法を紹介します。