Download

Metroidvania Camera TUTORIAL

Before I get started, I should say there are better ways to do this but this is how I am currently implementing this camera style. If you know some tricks I could be doing with my BP, please share. Here we go:

  1. In your character blueprint, create SIX custom events (two of them can be optional) and name them: LockZAxis, UnlockZAxis, LockYAxis, UnlockYAxis, LockBothAxis, UnlockBothAxis
  2. From the event tick, drag out a sequence node and add two pins for a total of THREE pins.
  3. Create two float variables called: Camera Height, Camera Pan (X and Y respectfully)
  4. From each sequence pin, create a gate node and set Start Closed to true

Now you have the structure going, time to lock the specific axis. Lets start with the Z axis:

  1. Connect “LockZAxis” event to the open pin on the gate of your choice.
  2. Get your character’s Spring Arm and drag out “Set Target Offset”. Then connect UnlockZAxis to “Set Target Offset” and then to close on the gate. This will reset the character’s camera position back to “default”.
  3. Copy the Spring Arm and Set Target Offset, paste it and connect the Exit of the gate to it.
  4. Get the character’s Capsule Component get get world location. Then drag out a break vector
  5. Get the custom variable “Camera Height” and subtract the z axis (of the break vector node) from it. Connect the out pin of the subtraction node to the Z axis of a make vector node.
  6. Connect the make vector to the Set Target Offset

e6a7060e4b6669a398e7d9f4816a5b11755afd0f.png

That’s it for that. When you open the gate, the camera will lock its Z axis. When you close the gate, it will allow the camera to flow freely. This happens because we are saving the location (this will happen in the next few steps) to the variable “Camera Height” and subtracting the character’s Z-position from it.

For the Y axis, do the same thing except replace Camera Height with Camera Pan and connect Y axis instead of Zs.

Let’s move on to the trigger box:

  1. Create a new blueprint and call it something like CameraZLock
  2. Add a Scene component and make it the root
  3. Add a box collision component
  4. Add a billboard component. We will be using this for our camera positioning.
  5. Create a BeginOverLap Event and a EndOverLap Event and cast to your Character from the other actor pin on each event
  6. On the overlap logic, drag out LockZAxis fomr the Character pin
  7. Drag out Set Camera Height from the character pin
  8. Get the billboard’s worl location and add 100 to the z axis. Then connect to the camera height node

05d83e0d866aa88db856c2b3b83a245ae9033d0d.png
f4ffb5215bb40f595e1e21463c0bbb1423455c4f.png

We have now just set the Z location for our camera to stay at. I’m adding 100 because my camera is offset by 100. And the reason you would do this is because the billboard is at 0,0,0. You could potentially change the billboard’s location but it would get a bit harry having to then add whatever new location there would be in your levels. It was simpler to just add 100 in here, then to calculate things later on every time I placed this trigger box. Also, when you scale the BP, the position of the Billboard changes if you have anything other than 0,0,0 as the location. Yeah. Fun times. Now to reset the camera:

  1. From the character pin (from the End overlap event) drag out allow z axis

So many steps there. That’s it. Again, to do the Y axis just replace the correct variables and custom events and so on. You do NOT need to add 100 to the Y axis.

I had some issues with the trigger boxes not behaving correctly when overlapping one another (Y-lock overlapping a Z-lock). So that’s why I made the “Both” events mentioned above and a separate trigger box BP for when I want both axis locked. It’s pretty simple to get working, but I’ll just let the pictures do that for me. Hope this has been helpful.

2a522c40b9bacbc85cb093358e55a8440d555988.png
e4884e67b295e119a78a24921938c6a057668f5f.png

The camera lag is to make the transition smooth. Otherwise it would just snap. My character has a lag speed of 4 and then when entering the box it is 2. It’s not perfect and could use some tweaking, but it’s pretty decent I think. Thanks.

Hello there!

Do you mind if I move this thread into Community Content/Tutorials sectionso more people looking for such stuff could see it?

Thanks for the tutorial!

Please do. Thanks