How do I Make a Side-View Camera?

From The Endless Mission Wiki
Jump to: navigation, search
This tutorial can be followed with any game that uses the Racer Avatar or Capitan Blackclaw Avatar loaded into the Editor. If building a game from scratch, begin by loading the “Barebones Game” into the Editor.

About Side-View (Sidescrolling) Games[edit | edit source]

A game with a side-view camera, often called a sidescroller, typically follows a character that can only move in two dimensions: along a horizontal and vertical axis. Many 2D platformer games are sidescrollers; the player can move left, right, up, and down across the level, and the camera follows from one "side" of the scene.

This tutorial explains how to limit the movement of the Capitan Blackclaw and Racer Avatars to only move in two dimensions, and how to modify the Third Person Camera Rig to follow the Avatar from one side.

Blackclaw Sidescroller.PNG

Using the Capitan Blackclaw Avatar[edit | edit source]

1. If the Capitan Blackclaw Avatar is not already present in the scene, delete any children in the “Avatar” folder in the Project Hierarchy. Using the Library Panel, click on the Filters tab and select "Avatar". Find the "Capitan Blackclaw" object and drag it into the Project Hierarchy under “Avatar”.
2. Select the “Capitan Blackclaw” object in the Project Hierarchy and view its Components tab. Click the gear icon on the “Capitan Blackclaw” script to view its code.
3. For a sidescrolling game, the Avatar should only move left, right, up, and down in a 2-Dimensional space. To implement this, we need to make sure that Blackclaw can only move along the horizontal and vertical axes, and that left and right movement is controlled by the A and D keys. Scroll down to the HandleInput() method in the “Capitan Blackclaw” script. Replace the last three lines of code in HandleInput() with the following:
float horizontalInput = 0;
float verticalInput = EndlessInput.GetAxis(KeyboardAxis.AD) + EndlessInput.GetAxis(XBoxOneAxis.Left_Joystick_X);
_moveInput = new Vector2(horizontalInput, verticalInput);

Blackclaw Camera Settings1.PNG
4. On the “Capitan Blackclaw”'s Components tab, scroll down to the “MOVEMENT” section and click on the “Orientation Mode” dropdown. Select the “TO_WORLD” option. Under “Constraints”, check the “X” box for “Freeze Position” and the “X” and “Z” boxes for “Freeze Rotation”.
5. Under “Capitan Blackclaw”, locate and delete the “Platformer Camera Rig” child object. In the Library, search “Third Person Camera” and drag the “Third Person Camera Rig” into the Project Hierarchy as a child of the “Capitan Blackclaw”.
6. Select the “Third Person Camera Rig” and view its Components tab. Drag the “Capitan Blackclaw” object from the Project Hierarchy into the “Camera Target” field. Check the box for “Default Camera State Definition”.
7. On the "Third Person Camera Rig", open the "Settings" dropdown. Set the "Offset From Target" values to 85 for X, 2 for Y, and 0 for Z. In the field for "Rotation Smoothing", set the value to 1. In the field for "Position Smoothing", set the value to 0.1. In the field for "Camera FOV", set the value to 10.
8. You may now be able to play test the movement and camera view of the Avatar in-game. However, you may need to adjust the properties of the camera in its Components to get the view you want. For help adjusting camera properties, scroll down to the “Adjusting the Camera” section below.
Racer Sidescroller.PNG

Using the Racer Avatar[edit | edit source]

1. If the Racer Avatar is not already present in the scene, delete any children in the “Avatar” folder in the Project Hierarchy. Using the Library Panel, click on the Filters tab and select "Avatar". Find the "Racer Avatar" object and drag it into the Project Hierarchy under “Avatar”.
2. Select the “Racer Avatar” object in the Project Hierarchy and view its Components tab. Click the gear icon on the “Racer Avatar” script to view its code.
3. For a sidescrolling game, the Avatar should only move left, right, up, and down in a 2-Dimensional space. To implement this, we need to make sure that the Racer can only move along the horizontal and vertical axes, and that left and right movement is controlled by the A and D keys. Scroll down to the RacerControlInput method in the “Racer Avatar” script and replace the first three lines of code with the following:
//steer = Input.GetAxis("XboxOne_Joystick_Left_X") + Input.GetAxis("Horizontal");
throttle = Mathf.Max(0, Input.GetAxis("Vertical")) + Mathf.Max(0, Input.GetAxis("Horizontal")) + (Input.GetButton("XboxOne_Button_A") ? 1 : 0);
brake = (Mathf.Min(0, Input.GetAxis("Vertical")) < 0) || (Mathf.Min(0, Input.GetAxis("Horizontal")) < 0) || Input.GetButton("XboxOne_Button_X") || Input.GetButton("XboxOne_Button_B");

Racer Camera Settings.PNG
4. On the “Racer Avatar”’s Components tab, scroll down to the “Audio Effects” section. Under “Constraints”, check the “X” and “Z” boxes for “Freeze Rotation”.
5. Under “Racer Avatar”, locate and select the “Third Person Camera Rig” child object and view its Components tab. Make sure the box for “Default Camera State Definition” is checked. Open the "Settings" dropdown. Set the "Offset From Target" values to 10 for X, 3 for Y, and 0 for Z.
6. You may now be able to play test the movement and camera view of the Avatar in-game. However, you may need to adjust the properties of the camera in its Components to get the view you want. For help adjusting camera properties, scroll down to the “Adjusting the Camera” section below.

Adjusting the Camera[edit | edit source]

1. Select the “Third Person Camera Rig” in the Project Hierarchy and view its Components.
2. Open the “Settings” section. The “Offset From Target” properties determine the camera’s distance from the Avatar. The “X” field will control how far away the camera is from the Avatar along the horizontal axis; the “Y” field will control its vertical distance.
3. The “Camera FOV” field controls the camera’s field of view, or how much of the scene it can see. A larger number for FOV will give the player a wider view, while a lower number will provide a more limited view of the Avatar’s surroundings.