top of page

Camera Overview

    The camera in this project is for the most part inspired by Real-Time Strategy games. The main difference is that I have included the addition to rotate the camera. The player may rotate their view to see certain animations or events take place and for easier click selecting targets.

Pan

    The camera panning is divided into two separate functions: keyboard controls and mouse controls. The mouse controls are used by placing the cursor near the edges of the screen. The keyboard movement is initiated through presses of the WASD keys and overrides the mouse movement.

Keyboard

    This snippet shows the basic functionality of the keyboard movement. The forward and back are encapsulated in a single event call with a positive and negative input (W and S for forward and back respectively.) The forward and back movement is obtained by taking the Camera rotation, zeroing the pitch value, and then getting the forward vector. This constrains the movement to an XY plane while still moving based on the camera’s view, no matter what angle. The axis value from the input (+1 or -1) is multiplied by this vector to get both forward and back movement.

    This movement script does not take into account any collisions, resulting in a camera with free movement through objects. For the sake of the prototype, this decision was made to save time. I have not decided whether to leave this as is moving forward or not, because it would allow for the players to have full control over their view without having to fight with terrain and buildings getting in the way despite the weirdness of a camera clipping through objects.

Mouse

    The Mouse Controls are much more complicated. They consist mainly of an imaginary border of pixels that are a certain percentage of the screen size. I originally decided to handle this system with math involving the screen size and the mouse position. In hindsight, this system could probably been handled better with UMG mouse hover events. For the sake of the prototype, the system remains to be number based; however, moving forward with a full title I would replace this with UMG hover events for efficiency.

    This system uses a 3 step process. First, try to avoid the calculation. Second, check to see if the mouse is within the threshold. Lastly, execute the camera movement.

Step 1 - Avoid the Calculation

    We try to avoid this calculation because it ends up being fairly complex and is done every frame otherwise. We avoid this as much as we can with this system by having the keyboard controls override the mouse controls. Also we skip the operation if the mouse is outside the window. Technically, if the mouse is perfectly in the top right corner the operation is skipped as well, but that is a side effect of the fact that when the mouse leaves the window, UE4 treats the mouse position as (0,0)

Step 2 - Check the Threshold

    Here, we check to see if the mouse is inside the top and bottom border thresholds. We take a percentage of the screen size, and if the mouse position Y is less than that value it is near the top of the screen (Remember: 0,0 is the top left). If it’s not within that threshold, we check the bottom by taking the (Screen Size Y) - (Screen percentage size) and if the mouse position Y is greater than that, it is near the bottom of the screen. Left/Right works almost identically. With this system there is also the caveat that the border size is not uniform, because I am not handling the math for the aspect ratio of the screen. For the sake of the prototype, this system was sufficient.

Step 3 - Move

The resulting movement is identical to the keyboard movement controls, only the axis value is obtained through the above calculations in Step 2.

Rotate

    The camera rotation is a two step process. The first step projects the center of the camera’s view onto an infinite plane at the height of the character controlled. The second step rotates the camera around that point. The rotation is controlled by holding middle mouse button and dragging.

Step 1 - Get Rotate Anchor

    This function finds the intersection between the camera’s forward vector (the center of the camera’s view) and an XY plane at the height of the current character.

Step 2 - Rotation Function

    The actual rotation is sort of a two step process as well. The camera is both rotated and translated to give the effect of orbiting around the viewpoint. As long as the middle mouse button is held, the function will tick each frame. The camera is also locked so that it won’t pan away from our anchor point during the rotation. The camera is first translated by rotating around an arbitrary up axis at the anchor point based on the mouse X axis input value. Then, the camera rotates to look at the anchor point again.

Zoom

    The zoom function is very simple. It gets the camera’s forward vector and moves the camera directly forward and back based on the axis value of the mouse wheel.

bottom of page