Working with Camera Components

Choose your OS:

In this How-to we take a look at adding a Camera Component to a Blueprint which can be used to create third person perspectives for playable or non-playable characters in your levels. By the end of this tutorial you will have gone through the process of adding a Camera Component to a Character Blueprint and set up the ability to toggle between two different perspectives for a character.

For this example, we are using the Blueprint Third Person Template project with Starter Content included.

  1. With your project open, select the character in the level and press Delete to remove it.

    Camera1.png

    This is the default Character Blueprint that comes with this template. Notice that it has a Camera component attached to it already and you can see a preview window of the perspective that will be used when playing as this character. We are going to recreate this setup from scratch on a new type of playable character.

  2. In the Content Browser, click the Add New button then select Blueprint Class from the menu.

    Camera2.png

  3. In the Pick Parent Class window, select Character then name the Blueprint MyCharacter.

    Camera3.png

    After you choose a save location and a name for the new Blueprint, the Blueprint Editor Interface will open automatically.

  4. In the Components window select the CapsuleComponent then in the Details panel, change the Capsule Half Height to 64.

    Camera4.png

    The Capsule Component is used to provide Collision Detection for the character.

  5. In the Components window, click the Add Component button and search for and add a Static Mesh component.

    Camera5.png

  6. In the Details panel for the Static Mesh, set its Z location to -60 and assign the Shape_NarrowCapsule as the Static Mesh.

    Camera6.png

    By adjusting the Z value for the capsule location, you will see that the Static Mesh drops down inside of our CapsuleComponent.

  7. In the Components window, click the Add Component button and search for and add a Camera component.

    Camera7.png

    This is the camera that will be tied to this character providing us with a third person perspective. While this example has us focusing on a playable character, you can add a Camera component to any Blueprint, for instance you could create a security camera that produces a view for a player to look through.

  8. In the Details panel for the Camera, set its location for X to -120 and it�s Z to 20.

    Camera8.png

    We've used these values to position the camera behind the capsule, however you can adjust the position as you see fit.

  9. Click the Add Component button again and search for and add an Arrow component.

    Camera9.png

    Not only are we going to allow this character to use a third person perspective, but we are going to allow the player press a button and move the camera to an over-the-shoulder type view. We will use this Arrow component to tell the camera where to move when the button is pressed or released.

  10. In the Details panel for the Arrow component, set its location the same as Step 8.

    Camera10.png

    This is a reference to the default camera location that we will want to return to once the button is released.

  11. Click the Add Component button and add another Arrow component, set its Location as shown below.

    Camera11.png

    We've set the X to -40 and the Y to 40 to produce the example below.

    Camera11b.png

    You can adjust the position of the Arrow components as you would like.

  12. Click the Event Graph tab, then Right-click in the graph and search for and add a Right Mouse Button Event.

    Camera12.png

    The Event Graph is where will provide the scripted functionality to move the camera.

  13. In the My Blueprint window, hold Ctrl and Left-click and drag the Camera component into the graph.

    Camera13.png

    This will allow us to set properties or affect the camera component as we are getting a reference to it above.

  14. In the My Blueprint window, Ctrl-Left-click and drag in both Arrow components.

  15. In the graph, Left-click and drag off the out pin of the Camera node and search for and add a SetRelativeLocation node.

    Camera14.png

    This will allow us to move the camera to the desired location.

  16. Drag off Arrow 2 and search for and add the Get Relative Location node, then connect the nodes as shown below.

    Camera15.png

    When the Right Mouse Button is pressed, we Set Relative Location of the camera to the Relative Location of the Arrow 2 component (which is our over-the-shoulder camera position). Next we need to set the camera back to its default location (which is the position of Arrow 1) when the Right Mouse Button is released.

  17. Copy/Paste the SetRelativeLocation and repeat the previous step for Arrow 1 as shown below.

    Camera16.png

    Our script is complete and we can now toggle between the two camera locations when the Right Mouse Button is pressed/released.

  18. Click Compile from the toolbar, Save and close the Blueprint.

    Camera17.png

    Our character is setup, however we still need to tell our project that the character we created should be the default character to use when playing the game. We can do that from the Level World Settings by changing the settings in the Game Mode that is being used with this template.

  19. From the main Level Editor window, click the Settings button from the toolbar and select World Settings.

    Camera18.png

  20. In the World Settings window, under Selected GameMode, click the Default Pawn Class and change it to MyCharacter.

    Camera19.png

  21. From the main toolbar, click the Play button to play in the editor.

End Result

When you play in the editor, you can now toggle between two different camera positions by moving the Camera component that we assigned. Our character in the video above also includes the ability to move around which we have taken the script from the ThirdPersonCharacter Blueprint (located under the Content/ThirdPersonBP/Blueprints folder) and copied it into our MyCharacter Blueprint.

If you would like to add movement functionality, copy the following script from ThirdPersonCharacter into your MyCharacter Blueprint.

Click image for a larger view.

The script above is used to move the character around, jump and manipulate the viewing angle of the camera.

After adding a Camera component, typically you will also want to include a Spring Arm component to attach the camera to. This will help prevent the camera from being obstructed when moving into tight spaces or when an object moves between the character and the camera.