Camera system,

and third person camera controller

A third person camera controller with tomb raider as reference, and a camera system capable of doing animated "cinematic" camera events.

To me, camera is key when it comes to making a good third person game, it affects and defines so many parts of gameplay.

A good camera is one of those things i want to be able to do perfectly, that's why im making my specialization about cameras!

Intro, Result

I thought I would make a gameplay feature but i ended up making a camera tool. But that doesnt matter, im happy with the result, and the tool is such fun to work with!

This is the tool, at first i wanted to have keyframes, like unity of adobe flash, but i ended up using sequences. As you can see, you can also adjust the length of the camera path, you can set how many frames per second the path should travel, a basic play pause button, and reset for playing back the path. The sequences dont just control the position, but also rotation! Making new types of sequences like fov, zoom, look-at-target are also quite easy to implement!

You can also set the camera to FreeCam with the flag at the top of the editor, so the camera is not locked to the path. With free cam you can fly around and add points to the sequence you have selected, this makes making camera paths super fast, and really easy!

Here are som epic items from my planning that i failed to complete within the deadline, but i started working on.

  • saving / loading the camera path to / from file - 80%

  • queueing paths when the player moves on trigger boxes - 0%

  • more sequences like fov, zoom, lookat - 40%

Setting up the scene, basic camera

In our engine, we set up our scenes in unity, then export them to json. Using unitys editor, i can super quickly make a scene.

This is that same scene but inside our engine.

Empty interface, first lines of code, and moving the camera

My system needs a pointer to the registry, to get to all entities in the world. Later, my timeline will also be a member of the camera manager.

Our engine's camera follows a "MainCameraTarget", it uses both it's position and rotation (that's why im creating a camera target in my init method). I will be able to change this camera target, to essentialy have multiple cameras.

Now that the basic framework is finished, i can move on to editors. But just changing position is not that impressive, i want to do more complex movement.

Before the third person game project at school, i made this funciton as preparation. It's called orbit, kinda self explanatory, but it orbits a target, and as in arguments it takes the distance, angle, height and the position it's orbiting (focus), and returns where the camera in this case should be.

I created a struct with some orbit values in the camera manager, and used them in a editor with the target pos. the result is what you see above. However, there's an issue...

You can see that when i change the height, it does not actually orbit around the player, it just goes up through the y axis.

A few problems with the third person camera...

The height of the orbit affects the camera like so. this is wrong. Gameplay wise this looks janky and weird

This is the behavior i am looking for!

My first iteration is quite crude, and i did not test it in the actual engine. This iteration of the orbit method gives me a better orbit, with the behavior in ex 2.

The height and angle arguments for the orbit method, can be replaced with mouse input. And so, a pretty basic third person camera has been made!

Right now however, the camera lerps to the orbit point, which i do not like. In our project our team wants the camera to lerp, so i want the lerp to look better!

The biggest problem with the lerp is the path the camera actually takes, you might expect it to follow the threshhold values, but it does not. It sort of swings closer to the player when you fly by. This issue is easy to fix luckily!

Instead of lerping to the actual point, im lerping the angle and height, which gives me the expected path shown in the example.

Let's make a camera path!

I want to make an editor for cinematic events, and im imagining the timeline from adobe flash. I want to be able to add keyframes, that contain information of that current event in time, and be able to playback, pause and scroll through the entire timeline as the camera does it's path.

In the init function i can set the settings of my current path, and also push test keyframes. I want to be able to push these keyframes through an editor, but that will come later

This sort of works! It's mostly a test however, and the code is just between the 2 points. I want to be able to keep adding an infinite amount of points! But before we do that, i need better ui. If i want to be able to add keyframes, see the animation frame by frame, i will need something better than just a slider and two buttons

Something like this would be super nice! You add a keyframe, and then edit values inside the keyframe

I found a Imgui library called ImGuizmo, and they had a sequenzer! A sequenzer isint actually what im looking for though, it works quite diffrently from the timeline in adobe flash

This is an image from my music program, and the imgui sequenzer works more like this. Rather than working specificaly with keyframes, the diffrent layers or in this case "tracks" interpolate's the data as the timeline passes, and then you edit it with a curve editor to do the inbetweens. A workflow like this wasnt what i first had in mind, but im more used to it, and i think it will work quite well with the camera.

I managed to get it working like fl studio, before i added points through code, but now i can do it via the timeline. Also on a certain sequence, you can add multiple points to make a spline. And with having the position and rotation as sequenses, you can have diffrent camera positions, so it feels like multiple cameras!

this is the full path of the timeline i showed above. While i did this, i also made it possible to change the framerate of the path.

Adding points then editing them is annoying though, i have to eyball the spline curve, and that's no way to actually work. That's why i added "Add Current CameraPos". If i can add a freecam, i can fly around the level and add points as i go.

I made the camera manager listen to input. The action CameraMove sends a Vector3 with keyboard input. This code looks kind of ugly but it works to move the camera. I can always fix it later, most important is that it works!

I did the same for the camera rotation, this takes mouse position input when you press left click.

Check the freecam box and you can fly around with the camera, and add points for the timeline!

Here is the point adding both in engine and in code