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

カメラ コンポーネントにキャラクター クラスを追加し、それをレベル内のアクタのカメラとして使用する方法を説明します。

Choose your operating system:

Windows

macOS

Linux

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

Blueprints

C++

このチュートリアルでは、 Camera コンポーネント CharacterBlueprint クラスに追加します。

カメラはレベルを表示する視点となり、ノンプレイアブル キャラクター、ノンプレイアブル アクタなど、レベル内のあらゆるアクタにアタッチできます。

このチュートリアルでは、Camera コンポーネントを Character Blueprint クラスに追加する方法と、キャラクターの 2 つのカメラの視点の切り替えを設定する方法について説明します。

Character Blueprint を作成する

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

    image alt text

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

    image alt text

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

    image alt text

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

    image alt text

    Arrow Component は、向かっている方向を示す線を含むシンプルな矢印をレンダリングする Scene コンポーネント です。 詳細については、「 Utility コンポーネント 」のドキュメントを参照してください。

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

    image alt text

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

    image alt text

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

    image alt text

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

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

    image alt text

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

    image alt text

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

    image alt text

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

    image alt text

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

    image alt text

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

作成中のブループリント

image alt text

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

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

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

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

    image alt text

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

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

    image alt text

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

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

    image alt text

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

    image alt text

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

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

    image alt text

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

    image alt text

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

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

    image alt text

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

    image alt text

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

    image alt text

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

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

    image alt text

完成したブループリント

image alt text

Game Mode を設定する

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

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

    image alt text

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

    image alt text

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

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

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

    image alt text

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

    image alt text

最終結果

image alt text

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

次のステップ

Camera コンポーネントを操作できるようになったので、「 Spring Arm コンポーネント 」チュートリアルに進みましょう。

このチュートリアルでは、狭い場所に移動するときや、オブジェクトがカメラからプレイヤーへの視界を遮るときに、カメラが遮られないようにする方法を紹介します。

このチュートリアルでは、 Camera コンポーネント Character Blueprint クラスに追加します。

カメラはレベルを表示する視点となり、ノンプレイアブル キャラクター、ノンプレイアブル アクタなど、レベル内のあらゆるアクタにアタッチできます。

このチュートリアルでは、Camera コンポーネントを Character Blueprint クラスに追加する方法と、キャラクターの 2 つのカメラの視点の切り替えを設定する方法について説明します。

Character クラスを作成する

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

    image alt text

  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 」にします。

    image alt text

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

    image alt text

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

    image alt text

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

    image alt text

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

    image alt text

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

    image alt text

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

    image alt text

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

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

    image alt text

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

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

image alt text

作成中のコード

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 Event 関数を作成してバインディングする

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

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

    image alt text

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

    image alt text

  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. コードを コンパイル します。

完成コード

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

    image alt text

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

    image alt text

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

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

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

    image alt text

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

    image alt text

最終結果

image alt text

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

次のステップ

Camera コンポーネントを操作できるようになったので、「 Spring Arm コンポーネント 」チュートリアルに進みましょう。

このチュートリアルでは、狭い場所に移動するときや、オブジェクトがカメラからプレイヤーへの視界を遮るときに、カメラが遮られないようにする方法を紹介します。

Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル