How to Make a Camera System (Like Hollow Knight's) in Unity using Cinemachine | 2D Tutorial
Vložit
- čas přidán 6. 06. 2024
- Show your Support & Get Exclusive Benefits on Patreon (Including Access to this project's Source Files + Code) - / sasquatchbgames
Join our Discord Community! - / discord
In this Unity tutorial, we'll be re-creating Hollow Knight's camera system using Unity and Cinemachine.
We're going to cover:
- how to setup a direction bias
- interpolation based on your player's vertical velocity
- camera bounds (and how to break them,)
- ledge detection (so you can, for example, have the camera pan down to hint to your players that they CAN fall down that ledge.)
- setting up different camera settings for different rooms (Ie. vertically centered, vertically locked, full position locked) and a system to easily swap between them when needed.
I spent a good deal of time analyzing Hollow Knight's camera system and it's complexities, and by the end of this video you'll know how to create them all!
Link to Download the FREE 2D Asset Pack seen in this tutorial:
veilofmaia.com/tutorial-asset...
---
In need of some Unity Assets? Using our affiliate link is a great way to support us. It's free, and we get a small cut that helps keep us up and running: assetstore.unity.com?aid=1100lwgBQ
---
Contents of This Video: ------------------------------------------
00:00 - Analyzing Hollow Knight's Camera
02:54 - Direction Bias
05:37 - Interpolation Based On Vertical Velocity
07:46 - Setting Up Proper Camera Bounds
10:39 - Camera Ledge Detection
14:10 - Setting Up Multiple Cameras and a System to Swap Between Them
Who We Are-------------------------------------
If you're new to our channel, we're Brandon & Nikki from Sasquatch B Studios. We sold our house to start our game studio, and work full time on building our business and making our game, Veil of Maia.
Wishlist our Games:
Wishlist Samurado on Steam! - store.steampowered.com/app/23...
Wishlist Veil of Maia! - store.steampowered.com/app/19...
Don't forget to Subscribe for NEW game dev videos every Monday & Thursday!
Follow us on Twitter for regular updates!
/ sasquatchbgames
#unitytutorial #unity2d #unity3d - Hry
be sure to add #if UNITY_EDITOR before the MyScriptEditor script, and an #endif at the end of it, or this will give you errors when you try to build the game.
i used this but when i try to build game i have " cannot build game while player is compiling and building script" any idea?:(
fount issue....you must put this #If Unity_EDITOR before "[CustomEditor(typeof(CameraControlTrigger))]" not in the middle of this and MyScriptEditor :)
oh god , thx bro i find this comment like sec before i got rage at my code and trow my laptop out the window
Wow! As an spiring Game Designer, I never realized how nuanced the camera system is in Hollow Knight, Devs should certainly implement this system in their games. Thank you Sasquatch B Studios, for another amazing tutorial!
The breakdown of how it works in hollow knight is a life saver man thanks. Was planning on doing that at some point to fine tune my camera system!
Wow, this is an excellent tutorial. I think some of it was over my head but I definitely will be tucking this away for when and if I ever need it in the future. I really love your analysis of the Hollow Knight camera as well. It gave me something to think about and challenged to me to be more analytical with games I play.
Honestly, your tutorials have saved my skin enormously! excellent explanations and actually teaches the functionalities in unity and not just a copy me code.
Great stuff can't wait to bring this kind of camera work into my game
Great video. I never even thought of or noticed any of this while I was playing. If you had asked me, I would have just assumed the camera always kept the knight in the centre of the screen.
It's very interesting because, in my head, I kind of figured "I could make a game like Hollow Knight" (because I can draw cartoons and use Unity) - but this video shows that there's quite a lot of polish and subtlety in a lot of aspects of the game - there's a reason why Hollow Knight was a success while most other 2D cartoon platformers fade in to obscurity.
This is the best ever camera tutorial on YT and helped a lot! Thank you.
Thanks! Glad it helped!
Bravo! I'm starting to delve into creating a Metroidvania and you have really done an amazing job with this topic. I honestly didn't understand 90% of what you said, but i can tell you know what you're doing so I'll just use your techniques and try my best to replicate the settings until i understand everything better. Thanks!
Absolutely incredible tutorial! Thanks so much for sharing this!
I personally don't work in unity but I enjoy watching all of your videos as they are informative. Keep up the good work!
Thanks for this amazing tutorial, i've learned a lot
Amazing camera system, thank u so much!
I love tweening libraries. I personally like DOTween but LeanTwean looks like a fantastic option.
Thanks for the tutorial. It's very helpful.
You're welcome!
It would be really cool to see how to implement the pan for when you push up or down in hollow knight. Also Zooming in and out! in some areas id like my camerato be more zoomed in and others zoomed out. Great video as always!
This is something ive never really thought about, very interesting. I wonder if there are any camera tricks i could use in a 2d top-down game
guess that depends, is there shooting in your game for example? If so, slightly biasing the camera towards the mouse direction is a nice touch (like what Enter the Gungeon does)
Great video!
Beyond great! It's awesome!
Your video is awesomen thank u so much !!!
Really great and I haven't seen many videos on this topic. I did feel the coding was a bit too fast even for an intermediate coder. The custom inspector was really interesting as I'm personally quite new to coding those.i liked how clean it made the component look with variable functionality ✌️✌️✌️
I'm just gonna watch this again and see If I was too tired last time 😂
No his videos are great but they’re so fast. That’s literally the only issue lol I have to rewind many times
hello, i really like your videos, great job! And i have a question if i have more than one locked room do i have to create an additional cinemachineCamera for each of them?
Note that "Oversize Window" is available on Cinemachine +2.7.5 We installed Cinemachine from the package manager and Unity installed version 2.6 which make us a little lost for a while but just update and that'll do the trick. Excellent system as this is not a camera system is THE Camera System... THANKS A LOT!!!!
Great Video! Just one question, is there a way to make it so the camera will pan only after 1 second of standing on the ledge for example and not instantly?
I am saving this video and naming it CameraMan
Are you providing the code you're using here, inside the asset pack? The reason I'm asking is because you're writing code faster than anything described in Space Balls. I suppose it's either that, or a two hour video that no one would watch due to its length, but it's difficult to catch some of it, even when paused. Excellent content, nonetheless ;-)
eventually I will be doing that, once i can find the time to figure out the type of solution i want.
Thanks for the support
Holy moly Bro that is pretty nice stuff! I must admin for me as begginer was hard to follow some scenes you recorded but in the end i made it. I really like yours tutorials. All of them are simply diffrent connectig scripts etc I feel like I am learning Unity since beginning and what i already know is almost nothing;) PS. i cannot find anywhere how to properly ARCHIVE a finished and built game - put it somewhere to flash (outside of hardrive) and store it in a way that you can always easly acces to it and open and modify if needed. Are you able to record somethign liek this?
cheers!
I've followed this step by step, and my camera works really well, except that it ignores the Cinemachine confiner. Is there an issue with the follow script overriding confiner bounds?
Thanks!
Thanks so much for the support!!! ❤️
Any idea why a positive X value in the Virtual Camera's Body -> Tracked Object Offset would offset the camera behind the player? It shows correctly in the editor, but once game starts it flips behind the character. A negative value positions it correctly like in the video. I suspect it's something in the code at runtime, but it looks identical to your code.
Got a long ways to go, but tutorials like yours are a massive help! Thanks! ✌
is there a place to look at the code as a whole I still get error messages after copying it letter for letter
bro I really like your tutorial + i never managed to make my own hollow knight like camera system but one thing is that Team cherry uses perspective camera but your tutorial is based on Y Rotations. which means if we stick to the perspective camera(Not the orthographic camera) then i makes a z axis bounce. If you checked about this then your the best anyway thanks for this lovely video
Have you solved z axis bounce?
To avoid the rotation problem you could have the camera follow object interpolate it's position instead. Something like: distance * playerObject.transform.forward as a target location, so when the player rotates instantly on Y, the follow object then interpolates towards a desired offset location from the player but the z position remains a fixed value.
@@FluoLente thanks for the reply should try this when i get home !
Nice video! Is this project file on gitgub?
There are channels hidden like gems... Like Yours SUBBED
Does it work in the already compiled version? The desktop version that you open from the icon
you can also put the camera on a child object of the player (like a wallcheck) to get the offset without using any code
Great tutorial! The only issue I'm having with the system is that if i go into another room and immediately turn around and go back in, the camera doesnt swap back to the room I'm actually in
nevermind, I had the swapcamera call in OnTriggerEnter. I moved it to Exit and now we're all good XD
@@ArenSpace same happened to us....
This is a great tutorial overall! I have one request though, when I was trying to break this after using it, I noticed that when you rapidly flip your character the camera bounces from left to right multiple times trying to keep up even after the player is done moving. Can you come up with a quick fix for this?
I have the same issue here. I think the problem is that all of the coroutines that were triggered will not stop until flipYRotationTime is run off. All of the coroutines fight for the rotation of the object at the same time, which caused the camera to jitter left and right.
You can fix this issue by stoping the last called coroutine.
public void CallTurn()
{
if (turnCoroutine != null)
{
StopCoroutine(turnCoroutine);
}
turnCoroutine = StartCoroutine(FlipYLerp());
}
Instead of doing anything of the direction bias part just increase the lookahead time it is honestly way easier and you barely notice the difference if you put the value at something like 0.20 and then play with the other values to make it look good. I was trying to make the direction bias work for an hour but couldn't. I believe just changing the lookahead time is better than doing allat showed here 3:30 but correct me if I am wrong. The same goes for the Y bias when.jumping or falling, just adjust the values in cinemachine
Following this tutorial is mentally exhausting.
The explanations are good, but everything on the screen goes by so quickly that you don't have any time to process the information.
Then you have to pause and come back to try to read and understand something, but as a result you soon get lost in the explanation.
In the end, with a lot of effort, you understand, but the mental cost is much higher than necessary, especially for those just starting out.
anyone know which video had the Editor scipt
great..great...
Direction bias section from the video does not work with perspective camera, I get a weird zoom in and zoom out effect when turning, the z position gets changed for some reason on the camera
Any fix for this?
You'll need to take a different approach for a perspective camera:
A) forget about the 'CameraFollowPlayer' object - have the camera follow the player instead.
We can just adjust the 'ScreenX' directly instead with this code:
#region Direction Bias
public void CallCameraFaceDirection()
{
_cameraFaceDirection = StartCoroutine(FacingDirectionBias());
}
private IEnumerator FacingDirectionBias()
{
float startPoint = _framingTransposer.m_ScreenX;
float endPoint = DetermineEndPoint();
float lerpedAmount = 0f;
float elapsedTime = 0f;
while(elapsedTime < _flipScreenTime)
{
elapsedTime += Time.deltaTime;
lerpedAmount = Mathf.Lerp(startPoint, endPoint, (elapsedTime / _flipScreenTime));
_framingTransposer.m_ScreenX = lerpedAmount;
yield return null;
}
}
private float DetermineEndPoint()
{
if (_player.IsFacingRight)
{
return 0.45f;
}
else
{
return 0.55f;
}
}
#endregion
Call CameraFaceDirection once in start, and each time the player turns around.
Don't forget to get rid of any TrackedObjectOffset in the X that's already there.
You'll need a reference to your player in the CameraManager, but that should do the trick
@@sasquatchbgames I'm a beginner and not sure what to do. Is anyone willing to explain this to me? I have a prespective camera but I don't know where to put this code
The direction bias looks weird on my project, i get a whole turn and see the sides of my project, and i am not sure where i went wrong. Does anyone posssibly know a fix for this?
Hello! for some reason as the confiner is not working correctly, I started working with polygon collider but I got tired of it and tried to switch to composite, I'm not getting any errors and I change the order so the cameras get the composite collider first and it should be working, but it's not, for the reason the camera just ignores the boundaries, any ideas what I can do?
I know its been a long while, but the solution is to set the scale of the cameracoliderobj on 1, and then change the sizes of the box colliders 2d to fit the shape(I was struggling with this for weeks)
@@Westerncreek thank you very much, if only I was more observant of the values on the video I wouldn't be having a hard time with the boundaries, too deep in my project to redo all the hitboxes but hopefully this will help someone in the future, have a good one 👍
my project uses the sprite renderer flip system to flip the player. Is it possible to make this camera system work in that way or is it necessary to use Y rotation to turn the player?
A bit of a late response, but I skipped that part and it didn't impact anything else. The camera won't be able to give slight indication of the direction your facing though, it'll just remain locked onto you
I guess you could add two follow objects and change them based on which direction the sprite is flipped. (late response)
can i please get the direction bias script
Is there any Fix to the problem of the cinemachine 2d Confiner and the camera pan on edges? if the Boundary is too tight it will affect the Camera Movement
I haven't found a fix for it :(
@@sasquatchbgames ok thanks for the answer. The video was a gold mine! Big thanks!
is this using the standard 2d or the 2d urp?
Urp. I never use standard
I get so many using directive errors. Does anyone know how to fix it
할나 2D 카메라 시스템 ㅇㄷ
First off thanks for the tutorial, I am having an issue and Im not sure if its a bug on your end or just an incorrect implementation by me. When the player moves quickly between left and right and then goes in one direction the camera finishes the damping and then snaps to catch up but the snapping effect is quite jarring. Its hard to describe what i mean but hopefully you get what I mean.
I have the same issue here. I think the problem is that all of the coroutines that were triggered will not stop until flipYRotationTime is run off. All of the coroutines fight for the rotation of the object at the same time, which caused the camera to jitter left and right.
You can fix this issue by stoping the last called coroutine.
public void CallTurn()
{
if (turnCoroutine != null)
{
StopCoroutine(turnCoroutine);
}
turnCoroutine = StartCoroutine(FlipYLerp());
}
I'm not sure why the y damp doesn't get affected when the fall speed threshold is a negative value, I've tried everything
hi! did you find the solution?
I have the same problem
can you link the code?
Can you pls rewrite all this code using only "If" statements so i can understand it 😞
very good ,but I cant see your code🥺
Is the re anyone willing to give a copy paste of the code? I really need this for my game but I am running low on time. Please. Help
Can we get the full code?
The bounderies do nothing for me. I have BoxCollider2D and CompositeCollider2D but it doesn't work. I can't even see the yellow outline for the bounderies on the Cinemachine Cam. Help
If anyone has this problem, make sure to check the scale of your bounderies... I had expanded the collider using the scale of the gameobject and not the collider itself... Problem solved I guess!
man you just saved my life, i struggled with this issue for days X) so yes for anyone having the same problem with confiner 2d, make sure you scale the box collider with the OFFSET and SIZE of the Box Collider, not the sacle of the game object @@monkeypwners
Btw if you wanna build everything from scratch is like saying I am going mine all the minerals to build my pc . I think it's wrong conception that I must build everything from scratch. Plugins are awesome. It's like using intellisense in visual studio. 🎉
Your tutorials are great, but I think you should do the coding part a little slower. It's hard to keep up
Its telling UserInput does not exist in the current context when trying to do this part 3:36 can somebody pleaseeeeeee help me?
Code:
private void TurnCheck()
{
if (UserInput.instance.moveInput.x > 0 && !IsFacingRight)
{
Turn();
}
else if (UserInput.instance.moveInput.x
Can I implement it in godot?
4:54
Here is a code version of his Framing Transposer Settings:
void InitFramingTransposer()
{
CinemachineFramingTransposer transposer = vCam.GetCinemachineComponent();
transposer.m_TrackedObjectOffset = Vector3.zero;
transposer.m_LookaheadTime = .05f;
transposer.m_LookaheadSmoothing = 1f;
transposer.m_LookaheadIgnoreY = true;
transposer.m_XDamping = .75f;
transposer.m_YDamping = 2f;
transposer.m_ZDamping = 0f;
transposer.m_TargetMovementOnly = true;
transposer.m_ScreenX = .5f;
transposer.m_ScreenY = .5f;
transposer.m_CameraDistance = 10;
transposer.m_DeadZoneWidth = 0;
transposer.m_DeadZoneHeight = 0;
transposer.m_DeadZoneDepth = 0;
transposer.m_UnlimitedSoftZone = false;
transposer.m_SoftZoneWidth = .2f;
transposer.m_SoftZoneHeight = .35f;
transposer.m_BiasX = 0f;
transposer.m_BiasY = 0f;
transposer.m_CenterOnActivate = true;
}
why is this camera system more complex then any game I made
bro why u have so great tutorial but to get the code I have to sign up to your patreon this is so upsetting me i hope you make this code open source bec if not i will be very sad
First
as far as i understood the story of hollow knight, the devs are actual more familiar in creating good arts but less in actual coding. this is why they used PLAYMAKER in unity to use visual scripting more over actual coding the game. so i either they have a huge fucked up visual graph for the camera behaviour or this is way to much overthinking. super complicated. i don't think these 2 devs thought about sth like that and made it in visual scripting. there is probably an easier way and easier explanation.
make smth better then if ur so good
Very thanks for the guide. I love your works.
Just one improvement. If you have problem when you load new scene with the target player follow camera add in the camera manager :
private void Start()
{
for (int i = 0; i < allVirtualCameras.Length; i++)
{
if (allVirtualCameras[i].CompareTag("CameraPlayer"))
{
allVirtualCameras[i].Follow = Player.instance.transform;
}
}
}
and change the camera follow player with a new tag : "CameraPlayer"
hey i have a problem. Camera swap is working proberly when the player pass through left to right, but it doesnt work when the player pass through right to left.
Here is the code:
public void SwapCamera(CinemachineVirtualCamera cameraFromLeft, CinemachineVirtualCamera cameraFromRight,Vector2 triggerExitDirection)
{
if(_currentCamera == cameraFromLeft && triggerExitDirection.x > 0f)
{
Debug.Log("Değişti1");
cameraFromRight.enabled = true;
cameraFromLeft.enabled = false;
_currentCamera = cameraFromRight;
_framingTransposer = _currentCamera.GetCinemachineComponent();
}
else if(_currentCamera == cameraFromRight && triggerExitDirection.x < 0f)
{
Debug.Log("Değişti2");
cameraFromLeft.enabled = true;
cameraFromRight.enabled = false;
_currentCamera = cameraFromRight;
_framingTransposer = _currentCamera.GetCinemachineComponent();
}
}
At 5:25 I had to change the tweening logic as it was incredibly buggy when the player was constantly changing direction. Here's my code:
if (LeanTween.isTweening(gameObject))
{
LeanTween.cancel(gameObject);
}
LeanTween.rotateY(gameObject, DetemineEndRotation(), _flipYRotationTime).setEaseOutSine();
For some reason it says that this code. Is not set to an instance of an object. How do I fix it. I already did everything in the tutorial. Pleaseeeee help
CameraManager.instance.PanCameraOnContact(customInspectorObjects.panDistance, customInspectorObjects.panTime, customInspectorObjects.panDirection, false);