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

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

このチュートリアルでは、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 コンポーネント です。 詳細については、「コンポーネント」のドキュメントを参照してください。

  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

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

    AddComponent3.png

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

    CameraTransform.png

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

Character クラスを作成する

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

    CreateProject.png

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

    protected:
            // カメラ ショルダー ビューポイント位置用の Arrow コンポーネント
            UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
            class UArrowComponent* CameraRShoulderLocation;
    
            // カメラ原点ビューポイント位置用の Arrow コンポーネント
            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 コンストラクタ メソッドで次を宣言します。

    // クラス コンポーネントをインスタンス化する
    CameraRShoulderLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraRShoulderLocation"));
    CameraOriginLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraOriginLocation"));
    CameraComp = CreateDefaultSubobject<UCameraComponent>(TEXT("CameraComp"));
    
    // デフォルト キャラクターのスケルタルメッシュ コンポーネントにクラス コンポーネントをアタッチする
    CameraRShoulderLocation->SetupAttachment(GetMesh());
    CameraOriginLocation->SetupAttachment(GetMesh());
    CameraComp->SetupAttachment(GetMesh());

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

  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 は、スケルタルメッシュ コンポーネント にアタッチされており、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

// プロジェクト設定の説明ページの著作権表示を入力します。
#pragma once
#include "CoreMinimal.h"
#include "GameFramework/Character.h"
#include "CameraCharacter.generated.h"

UCLASS()
class CAMERACOMPONENTS_API ACameraCharacter : public ACharacter
{
    GENERATED_BODY()
public:
    // このキャラクターのプロパティのデフォルト値を設定します。
    ACameraCharacter();

protected:
    // ゲームの開始時またはスポーン時に呼び出します。
    virtual void BeginPlay() override;

public:
    // フレームごとに呼び出します。
    virtual void Tick(float DeltaTime) override;

    // Input に機能をバインドする際に呼び出します。
    virtual void SetupPlayerInputComponent(class UInputComponent* PlayerInputComponent) override;

protected:
    // カメラ ショルダーのビューポイント位置用の Arrow コンポーネント。
    UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
        class UArrowComponent* CameraRShoulderLocation;

    // カメラ原点ビューポイント位置用の Arrow コンポーネント。
    UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
        class UArrowComponent* CameraOriginLocation;

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

CameraCharacter.cpp

// プロジェクト設定の説明ページの著作権表示を入力します。
#include "CameraCharacter.h"
#include "Camera/CameraComponent.h"
#include "Components/ArrowComponent.h"

// デフォルト値を設定します。
ACameraCharacter::ACameraCharacter()
{
    // このキャラクターがフレームごとに Tick() を呼び出すように設定します。必要ない場合は、パフォーマンス向上のためにこれをオフにすることができます。
    PrimaryActorTick.bCanEverTick = true;

    // クラス コンポーネントをインスタンス化する
    CameraRShoulderLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraRShoulderLocation"));
    CameraOriginLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraOriginLocation"));
    CameraComp = CreateDefaultSubobject<UCameraComponent>(TEXT("CameraComp"));

    // クラス コンポーネントを dDefault キャラクターのスケルタルメッシュ コンポーネントにアタッチする
    CameraRShoulderLocation->SetupAttachment(GetMesh());
    CameraOriginLocation->SetupAttachment(GetMesh());
    CameraComp->SetupAttachment(GetMesh());
}

// ゲームの開始時またはスポーン時に呼び出します。
void ACameraCharacter::BeginPlay()
{
    Super::BeginPlay();
}

// フレームごとに呼び出します。
void ACameraCharacter::Tick(float DeltaTime)
{
    Super::Tick(DeltaTime);
}

// 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:
        // CameraComp の相対位置を CameraRShoulderLocation Arrow コンポーネントに設定します。
        void SetCameraShoulderLocation();
    
        // CameraComp の相対位置を CameraOriginLocation Arrow コンポーネントに設定します。
        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

// プロジェクト設定の説明ページの著作権表示を入力します。
#pragma once
#include "CoreMinimal.h"
#include "GameFramework/Character.h"
#include "CameraCharacter.generated.h"

UCLASS()
class CAMERACOMPONENTS_API ACameraCharacter : public ACharacter
{
    GENERATED_BODY()
    public:
        // このキャラクターのプロパティのデフォルト値を設定します。
        ACameraCharacter();

    protected:
        // ゲームの開始時またはスポーン時に呼び出します。
        virtual void BeginPlay() override;

    public:
        // フレームごとに呼び出します。
        virtual void Tick(float DeltaTime) override;

        // Input に機能をバインドする際に呼び出します。
        virtual void SetupPlayerInputComponent(class UInputComponent* PlayerInputComponent) override;

    protected:
        // カメラ ショルダーのビューポイント位置用の Arrow コンポーネント。
        UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
            class UArrowComponent* CameraRShoulderLocation;

        // カメラ原点ビューポイント位置用の Arrow コンポーネント。
        UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
            class UArrowComponent* CameraOriginLocation;

        UPROPERTY(EditDefaultsOnly, BlueprintReadWrite)
            class UCameraComponent* CameraComp;

    protected:
        // CameraComp の相対位置を CameraRShoulderLocation Arrow コンポーネントに設定します。
        void SetCameraShoulderLocation();

        // CameraComp の相対位置を CameraOriginLocation Arrow コンポーネントに設定します。
        void SetCameraOriginLocation();
};

CameraCharacter.cpp

// プロジェクト設定の説明ページの著作権表示を入力します。

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

// デフォルト値を設定します。
ACameraCharacter::ACameraCharacter()
{
    // このキャラクターがフレームごとに Tick() を呼び出すように設定します。必要ない場合は、パフォーマンス向上のためにこれをオフにすることができます。
    PrimaryActorTick.bCanEverTick = true;

    // クラス コンポーネントをインスタンス化する
    CameraRShoulderLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraRShoulderLocation"));
    CameraOriginLocation = CreateDefaultSubobject<UArrowComponent>(TEXT("CameraOriginLocation"));
    CameraComp = CreateDefaultSubobject<UCameraComponent>(TEXT("CameraComp"));

    // クラス コンポーネントを dDefault キャラクターのスケルタルメッシュ コンポーネントにアタッチする
    CameraRShoulderLocation->SetupAttachment(GetMesh());
    CameraOriginLocation->SetupAttachment(GetMesh());
    CameraComp->SetupAttachment(GetMesh());
}

// ゲームの開始時またはスポーン時に呼び出します。
void ACameraCharacter::BeginPlay()
{
    Super::BeginPlay();
}

// フレームごとに呼び出します。
void ACameraCharacter::Tick(float DeltaTime)
{
    Super::Tick(DeltaTime);
}

//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 コンポーネント」チュートリアルに進みましょう。このチュートリアルでは、狭い場所に移動するときや、オブジェクトがカメラからプレイヤーへの視界を遮るときに、カメラが遮られないようにする方法を紹介します。

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