TANKS! Unity Tutorial - Phase 3 of 8 - Camera Control

Phase 3 - Camera.

So in this phase, what we're doing is

we're going to control, A, where the camera moves,

and B, how the camera zooms in

order to fit in the two tanks.

So you'll notice in this footage as the tanks are driving around,

just watch the camera frustum up in the scene view here,

notice that that shape is expanding and

contracting as the tanks move

further apart in order to fit them both

in to the view.

And that's controlling that size value

that I mentioned earlier about zooming,

and we're going to talk all about that now.

So currently we have a main camera

in our game.

We need to create what we call a camera rig.

It's nothing special, it's just a way to use

another separate empty game object

to hold our camera.

So there' a few different ways to create game

objects in Unity, and when I say

create game objects I'm usually talking about

either empty objects to store things

or I'm talking about primitive objects

for prototyping or something like that.

You've got the GameObject menu at the top,

which you can go to Create Empty or you can

go to any of these other things.

And then you've also got a Create menu on the hierarchy.

So from here you can choose basically

exactly the same thing, so this menu is

the same as this menu up here.

It doesn't matter what you use.

So I prefer to use the hierarchy

and right clicking because

that also allows you to do the same things.

But we want to create a new

empty game object in the root that's going to be

our camera rig, so I want you to click on the Create

button on the hierarchy and choose Create Empty.

We're going to rename this CameraRig.

And then we're going to position this

making sure that it's first off at 0.

So there's a shortcut to that, if you want,

so if you're offset at the wrong position

you can always reset position by clicking on

the gear icon to the right of any component.

Choosing Reset Position there will put

in zeros for you, just slightly quicker.

The rotation of that, we want to set it to (50, 60, 0).

So you'll notice that we're using the same rotation

as we did for the camera originally,

and you'll see why shortly.

So very quickly, we reset the position to 0,

and the rotation of the camera rig

should be (40, 60, 0), (X, Y, X).

Okay, then we're going to actually

put the rig together so we need to

place our camera on to the camera rig

as a child object.

So all I'm going to do is just grab my

Main Camera, drag and then drop it on to

the CameraRig like that.

One more time, grab the Main Camera,

drop it on to the CameraRig,

and what you'll see is that Main Camera becomes

indented, it's name is slightly over to the right,

underneath CameraRig.

And what we're going to do is tweak the position

and rotation of that main camera,

so just have a look over to the right

at the transform component.

And the position will be just slightly off.

So just slightly imprecise so just reset them to

(0, 0, -65).

And the rotation should already be (0, 0, 0),

so I'm just going to put that where it's easier to read.

The position of the Main Camera, (0, 0, -65).

And the rotation should still be 0 because remember

we have made this a child object

and it's inherited the same rotation

so as a result it's rotation is 0.

So just to run through those things again.

The CameraRig's rotation should be (40, 60, 0).

And the camera itself should be all zeros.

Just a quick mention,

the position that you see in the inspector

is the local position of that game object

so because our Main Camera is

a child of the CameraRig it's position is

local to the CameraRig

so it doesn't have any variation in

the X and Y coordinates but it is further back.

It's 60 units back,

but no variation in X and y.

Yeah, so note that our CameraRig

remember we said reset the position,

is on the ground, so I'm just going to set that

to global so you can see it.

So you see these axis handles in my scene view?

That's where that CameraRig is,

whereas the camera is all the way up here.

-65 back in the local Z axis,

so Z being blue there.

Now we're going to talk briefly about

how this camera works before we dive in to

any kind of scripting and functionality.

The first thing you need to know about is a frustum,

the hilariously named shape of

the camera's view.

So the frustum, in a standard perspective camera

looks like this.

So you have these two planes,

plane being just a flat rectangle,

a near clip plane and a far clip plane,

and between those two points is everything that you can see.

The difference between what we're doing with our

game and what you'd expect with a perspective camera

is with a perspective camera,

say you've got something up close near

the near clip plane.

When you then move that further away

it looks smaller compared to

everything that it's surrounded with.

Things, like in the real world, get smaller as they're further away.

With an orthographic camera the near

and far clip planes are the same size

so as a result you don't get

any change in scale over distance.

So what does this look like?

So between those two cameras you can see on the

left perspective and on the right orthographic,

and you can see that things get smaller,

you can see our rocks look smaller than our buildings

whereas really they're probably the same height.

Whereas in the orthographic view things remain the same.

So obviously this is used in a lot of

strategy games, if you've ever played things like

Command And Conquer, Red Alert, those kind of

old school RTS games then

that's the kind of view that you were looking at.

So the orthographic camera's size

is how we zoom, so keep that in mind

as we go through this theoretical part.

And we zoom by changing that size.

So just a quick reminder of what we were

looking at earlier.

As I change my size value for the Main Camera component

it zooms in and out.

So during the game we need to be adjusting that

value to zoom and then we need to be moving

the position of the CameraRig in order to

follow stuff around.

Slightly counter intuitive to think of it

but as you increase the size of the camera

the frustum gets bigger so more stuff

fits in so it looks smaller.

So increasing the size will zoom out.

Whereas decreasing the size will zoom in.

The other thing to know about is the camera's aspect

to if you're familiar with YouTube

or video or TV in any way then you'll know

what 1080p is, so 1080p just represents a screen size

of 1920 by 1080 pixels.

We think of this as an aspect ratio

of 16 to 9.

So 16:9 is our aspect based on

those particular sizes, so to find the aspect of that

being 16:9 we divide 16 by 9 and get 1.778

So the aspect,

not the aspect ratio, the aspect of this particular

example is 1.778.

So what should our camera do?

So those two things were just a couple of things to remember

for this next part, okay, so what should our camera do?

Well we need to follow the tanks.

Track wherever they're moving and

we need to resize, I.E. zoom

to fit the tanks on the screen.

So this is the general kind of behaviour that we're getting

from the camera as those tanks move apart

in this beautiful ballet that we see

the camera is zooming out.

The other brief thing to mentions is you notice

the tanks never quite get to the edge.

We have what we think of as a padding.

It's a screen edge buffer.

An edge buffer for the edge of the screen.

That's what it says.

And that stops the tanks ever

jumping off the screen.

So that's the behaviour that we're going for.

Okay, so the next thing that we're going to do is to

jump in to actually starting the

script and then we'll go a bit back to the theory

and then we'll carry on a bit at a time.

So what I want you to do is

look in the Scripts folder

and then you'll find a folder called Camera.

And there's one called CameraControl.

Drag and drop CameraControl on to

the CameraRig, not the Camera, the CameraRig.

I can't say that enough.

CameraRig has the CameraControl script on it.

Then we're going to launch that script and have a little look.

So double click on the name to open it up in Monodevelop

or Visual Studio.

So this time we're not going to ask you to

write any of the script, this one has already

been completed for you but we're going to

run through it and explain how it works.

We'll start off at the top again with

the public variables.

So the first one that you can see is

the DampTime and we've set that to 0.2.

So what the DampTime is is the approximate time

that we want to take for the camera to move

to the position that it's required to be in.

So rather than it moving instantly we're going to

damp that movement a little bit

and that's how long we want it to take roughly.

Then the next one we've got is that ScreenEdgeBuffer

that we were talking about, and all that is

is a number that we add to the sides to make

sure that the cameras aren't at the edge of the screen,

they're all the way on the screen.

The tanks.

Sorry, the tanks.

You're welcome.

I had to get one in!

Okay, so the next one is the Minimum Size.

So we don't want the camera to get

really, really, really zoomed in, it'll look silly,

so we set a minimum size of 6.5.

So next we've got a little bit of a complication thing here.

We've got HideInInspector commented out.

So the reason that that is there is later

we're going to come back to this script and

remove those comment, so this variable

is hidden in the inspector.

Currently what we want to do is set

our tank to be followed by the camera, so we want

it to be one of the targets.

However later the game manager is

going to set the targets so we don't

want to be able to set it in the inspector so we're going to hide it.

We still want it to be public because we want other

scripts to be able to talk to this script and say

'hey, okay I'm going to set those targets for you.

We've spawned 2 tanks, I'm the game manager

I've put the tanks in and I'm going to

tell the camera what to do'.

And so we want to keep it public but we'll

HideInInspector, so that's what that's going to do.

Currently it's commented out so when we test it

before we've set up the game manager we can still use it.

Okay, so it is an array of

transforms, that's what those square

parenthesis, square brackets?

What do you guys call those?

Square brackets.

Square brackets, of course, we'll call them that.

Why can't we say round brackets?

You guys! You're killing me.

Alright, so that is an array of transforms,

it's all of the tanks,

which we've called Targets.

Next we've got our private variables,

of course we need a reference to the camera so we can

access it's size variable and change it.

Then these next two variables,

you don't need to worry too much about them.

basically to damp the zooming and to damp

the movement we're using a function which

requires a reference to how fast that's happening.

And all we're going to do is store those

you don't need to worry about them, they will be used

by the function, and that's it.

The last one we've got is the DesiredPosition.

So that is the position that the camera is trying to reach,

for us that's going to be the average position

of the tanks.

We just want it to be in the middle of all the tanks

that we have in our game, currently we only have

2 tanks, so it's just going to be the centre of those 2.

Yeah, and we've got a quick slide just to show that.

So we find an average of the tank's position

and we're going to set that CameraRig,

remember the CameraRig is on the floor

and we're going to set it to a point between those by

just taking an average of their current two positions.

And you'll see that in the script in a little while.

We're also going to use that DesiredPosition

as the position that we want

to zoom based on.

So I'll try and explain what I mean by that.

If we zoom based on where the

camera currently is then

it's going to zoom to the wrong size because the

tanks aren't there anymore, they're moving around.

However if we zoom based on where the tanks are,

which is the average position, that DesiredPosition

that we want to move to then the camera

is going to zoom to the correct size.

So next we've got our awake function,

which we're going to use to setup the reference

that we need, and remember that this is

on the CameraRig and we're

trying to find a component, the camera component

on a child, so we're using GetComponentInChildred.

So ordinarily, one quick note about that,

if you make use of this it's going to find, just like the

audio source I mentioned earlier, it's going to find

the first one, we only have

one camera and one child object,

so it's totally fine to use this in this instance.

But be aware that if you're trying to find

specific things you might want to use another method.

Okay, so the next function that we have is

FixedUpdate and we're using FixedUpdate to

move the camera because our tanks are moving

with FixedUpdate and we want to move along with them.

Yeah, so we've got physics objects moving around

so we use the same physics function to

move the camera as well.

The camera doesn't need physics because it's,

you know, it's just a camera,

it's not going to bump in to anything,

but it's keeping things in sync.

So that's the important part to remember that.

So that FixedUpdate is calling our Move

and Zoom functions.

For now we're just going to go through moving

and then we'll try and address

how the zooming is going to work and then we'll

come back to the script and go through that then.

So the first thing that happens in Move

is it calls this function FindAveragePosition.

And then once it's found that average position

it's going to set the DesiredPosition to that.

And then what we're going to do

is use the SmoothDamp function

to smoothly move the

camera between it's current position

and the DesiredPosition.

So then we've got this ref m_MoveVelocity

that was the variable that we talked about

that we don't really need to know about.

Ref means that it's going to write

back to that variable.

So it's taking in how fast it's currently moving,

it's going to do some more movement and then

reset that variable to how fast it's now moving.

The last parameter is the DampTime.

So that's how long it's going to take, approximately.

So let's look at the FindAveragePosition function.

So for that what we're going to do is

create a vector3 which is blank to start off with.

So that's what that new Vector3 thing is

doing there, it's just saying 'create a new one',

but leave it blank.

Them we've got an integer for the number

of targets that we're averaging over,

and by default we're not averaging over any

targets so we'll set that to 0 as well.

So next what we're doing is

we're using a for loop.

So this for loop is creating an integer called i

which is known as an iterator.

i is less than that target's length.

And for each loop that it does it's going to add 1 to i.

So basically remember that the

Targets is our list of tanks,

so if this game was extended for more than

2 players it would have that many

in it's list of targets.

So if you think of m_Targets as just

a list and we just say 'okay, we'll loop through every single

tank that we find in that array of targets

and then we'll do somethings

which are inside that for loop'.

So this is a very standard

way of using for loops.

You have your iterator,

starting off at 0, going through an array

until it's as large as it's length.

Okay, so in that loop the first thing that

we want to do is check if the

Target's game object is active.

So when a tank dies, what we're going to do is deactivate it.

So we don't want to be trying to

zoom in on a deactivated tank so

we're only doing these things if the tank is active.

So what this line is saying is

if the tank is not active

so that's that ! there,

then continue, and continue in this case

is continue on to the next iteration of the loop.

So we'll go back to here and do the next thing.

The important part here is that you'll notice

that we've got m_Targets[i],

so it's basically taking that entry in the list.

So i will start off at 0 and then

every array that you do in

programming will start at 0 as well,

and you can iterate one at a time,

so the second time it goes through this will be 1,

the third time it will be 2, and 3, and so on.

So it's basically saying 'this particular entry in the list,

is the game object it's attached to active?

Or is it not?'

We're specifically looking for it not to be

and then we continue to look for the next

entry in the list.

But if it is then we carry on

and we carry out these other instructions.

Because we need the camera to be populated

with how many tanks it can find right now

and the actual upshot of this is that the

end of the round, when you've got one tank that's

been disabled and one left is the camera will

zoom in on the tank that won the round.

So it's kind of doing both functions for us.

Okay so assuming that we're on a

tank that is active, what we're going to do is

add that tank's position

to the average position, so that's that +=.

So what that's doing is saying 'take the average position,

add the average position to this new position

and assign it to the average position again'.

That's the +=.

And then we need to increment how many tanks

that we know there are, so number of targets

that we've currently got.

Okay so we've added all of the

active tanks to this average position,

we've counted how many active tanks that there are.

Now we're outside of the loop we can say

if there are some active targets,

if the number of targets is greater than 0,

then divide that average position by how many there is.

You know, in an ordinary instance with our game

there is 2 players, all it's going to do is say

'okay, I've found one tank, I've taken it's position,

added it to the average and incremented how many

tanks are found, we've found two

so we've got those two together

and we've just divided it by 2 and therefore

we've got the position that's between those two points'.

And then the last thing that we do before we

actually set it is just to say

'okay, well we don't want to change the Y position'

so we say the Y component of the average

set that equal to transform.position.y

so remember that this is attached to the rig

so it's going to inherit that 0 and keep the

position definitely at the ground for

where ever that rig is moving.

So you should note that that is just a little

safety check just to make sure it doesn't go

off the ground because the tanks have all got

their Y position frozen, if you remember we

had the constraints on the rigidbody

so they shouldn't be moving up and down.

Just in case something goes wrong,

somebody puts in a piece of code that moves the tank

up and down or something we want to make sure

that the camera does not move up and down.

So it'll probably never happen,

but that's what that's there for.

And then finally we're setting the DesiredPosition

to that average position.

Okay, so let's talk about zooming.

Following the tanks is easy, it's just taking

the average of two positions

and you've got one in the centre.

So what about zooming?

This is our typical kind of camera view,

it's what the camera looks like at the

start and what we've designed so far.

So what do we know? Well we know that the height

from the centre is the size, and we know that

the size is what we use to zoom.

And we know that the distance from the centre

to the right hand edge is that size value

multiplied by the aspect, so we gave you an

example of aspect earlier, which was that 16:9.

But this being our CameraRig

we need to make sure that that tank is

within the size, so we know that

we can see it on the screen if that's true.

So this access handle that you can see

is our CameraRig pointing down in to the world.

That's the CameraRig's local axis.

So in an example where our tank is at the top there,

we can say that this distance in the Y axis

is also the same as the size, so we know

distance in Y axis is the same as the size.

So we know that if that tank gets further

than the amount of our size we

probably need to zoom out.

And the same goes for if it's going

off the side of the screen

We know that this distance here is the distance in

the X axis for our camera,

and that's also the size times the aspect.

So those are the two important factors that we know

to keep it on screen.

So what we want to do is say

'well we know where the tanks are,

relative to the camera, we can work that out.

So we can calculate a size based on it

in the Y axis, we can calculate a size based on the X axis,

we can go through all the tanks, find out all the sizes it could be,

pick the largest one, then the tanks are

all definitely going to be on the screen'.

So you'll notice in this sum we're saying distance is

distance is the same as size times aspect.

But we know that on the camera we can just

tweak the size to zoom, so we just need to

reverse that equation so it's just

distance divided by aspect gives us our size.

Okay, so let's go back to the script and talk about

how this zooming works in code terms.

Okay, so you'll notice this looks

pretty similar to the Move function.

First off we're finding the required size and then we're

smoothly damping towards that size.

Yeah, so orthographicSize is size,

so that's just the API for that

value that you saw in the inspector where you saw I was

changing size and it was zooming,

orthographicSize is that number.

So we've got the function that's finding that

size and it's returning it,

we're storing it in the float called RequiredSize.

We're using the MathF.SmoothDamp function

to go between the camera's current

orthographic size and the required size.

And like we did before with moving we need a

reference to the ZoomSpeed,

like we had with the reference to the MoveSpeed, MoveVelocity,

and that's going to happen over the same period

of time so we're giving it the same DampTime.

So the camera is going to move and

zoom over the same period of time.

If you don't have the same it's going

to look really funky.

So now the dreaded FindRequiredSize function.

First off, remember we want to

find it from the DesiredPosition of the camera

not from the current position of the camera.

So what we're doing is we're finding the

DesiredPosition of the camera in the

CameraRig's local space.

So do you remember that we had that slide where you

had the Y axis and the X axis shown?

What we're doing is we're finding the DesiredPosition

of the camera in that space,

so it might be up a little bit and right a little bit.

Something like that.

Then what we're doing is we're

creating a size variable, which we're

starting off at 0.

And as we go through all the tanks

we're going to find all the sizes that it could be

and at the end pick the largest size.

So you basically want to say that

'we've got 2 tanks and which ever one is furthest away

we want to zoom to accommodate that one

and therefore we'll capture all of them'.

Okay, so like we did before we're

looping through all the targets.

So going through all the tanks

from 0 to just before the length.

And again if that target is not active

continue on to the next target.

So we go back to the loop, keep looking until we find

a tank that is active and do something about it.

Next what we're doing is finding that target

in the local position of the camera rig.

So you'll remember in that local space we

want to find it up and across,

but the world space doesn't look like that,

that's just the CameraRig's local space.

So what we're doing is we're saying

'okay, so the tank that was at the top of the

screen in the CameraRig's local space

is just going to be some value in Y,

if it's on the right of the screen it's going to be some value in X'.

So the next bit, we've found the DesiredPosition of the CameraRig

in the CameraRig's local space

and we found the tank in the CameraRig's local space

but remember we want to do this from the

DesiredPosition of the camera.

But this is quite tricky to get your head around,

but imagine those slides that we saw with the tank

on screen

imagine instead of that being the CameraRig,

that's the CameraRig's desired position, that's all that's happening here.

So now we've found that vector, from the CameraRig's

DesiredPosition to the tank

and we're going to calculate the size.

So we're saying the size is the maximum of

it's current value

or this new value that we're calculating.

Absolute value of the Y axis of that vector.

So the reason again it's the absolute value is that

if the tank was at the bottom of the screen you don't want

a negative value for size, you still want a positive value,

we're only interested in the distance,

not whether it's positive or negative.

And again for the X axis,

we want to choose whether it's the size that'

the largest or this Mathf.Abs

of the X value of that vector, the X component

divided by the aspect, because remember from

left to right it's size

multiplied by aspect, so to find size it's distance divided by aspect.

So one key point to mention here is we've got two

things that look like they're doing the same thing to this size variable.

They're not, they're basically deciding which is bigger.

So we're saying 'is the size currently

bigger than this Y distance'

and then it'll return whatever that is

so then size the second time around

is currently set to the biggest value of those two,

then we're then comparing whether it's

currently bigger than the Y value.

So we're just finding that distance away and saying

'okay, well X or Y, are they bigger, okay well that one is',

and then size is naturally returning that because

Max just picks which ever one is bigger

and saves it back to that variable.

So by this time size is currently the furthest value.

Then we just add on the ScreenEdgeBuffer,

just to give it a bit of extra distance so that the

tanks will definitely fit in to the zoom.

And then finally.

Finally what we'll want to do is make sure

that we're not too zoomed in

so we want to apply that minimum size.

So we're choosing the maximum

of the current size that we calculated

or the minimum size.

So if size is still 0 because it's so zoomed in

then we'll choose 0 or 6.5, we'll choose 6.5.

Yeah, so minimum size remember was 6.5,

we don't want it to zoom in too much,

because you would just not be able to see anything properly.

So we find an absolute minimum that it can be

and make sure that that's the case.

And finally we have a return at the bottom,

so this function will actually return something,

so it's returning that value, so where ever we see

the FindRequiredSize used, so that's here in the Zoom function,

then it's getting that value returned out of it.

And the last part of this wonderful script is

SetStartPositionAndSize.

Okay, so a quick thing to note is this is a public function.

So it can be called from outside of the script.

What we're going to use this function for is

when we've got a game manager we're resetting

the scene at every round

but we don't want the camera to smoothly move to that

new position, we just want it to

find the right size, find the right position and set straight to those.

So that's what we're doing here, we're finding the average

position, setting the Transform.Position straight to that.

And then with the Camera.OthrographicSize

finding the RequiredSize setting and straight to no SmoothDamp.

Okay, if you understood all that

you're awesome.

So we appreciate that this is a difficult and

confusing concept, like we said before

there's a commented version of this script

in the Completed folder, so do have a look at that afterwards.

And so let's go back to our slides.

So the CameraRig is what we need

to actually assign these targets to, so currently

we've got one target, one tank.

Okay?

So what we're going to do is go back to Unity.

What you'll have noticed is that we've got a

Targets array because of the

square brackets that we had in the script.

So that gives us an expandable arrow,

so if I expand that I can see Size 0.

So that array currently doesn't have any

items that we can put in to it.

What we could do is we could give it a size of 1 and assign it,

but a quick way to assign things

is to drag on the thing you want,

so I'm going to drag Tank, and you see when I hover

over the word Targets it gives me a little

green + icon, I can let go

and it will populate that with a 1 and assign the tank

to the first element in that list.

Okay, so one more time.

Here's selecting the CameraRig,

You can see Targets is here, it doesn't need to be

expanded, it doesn't matter if you do or not.

But we're going to just drag the tank,

which is our target for the camera to look at.

Drop it on to the word Targets, let go, and you should see

you've got a size of 1 and Tank is listed in there.

Just to remind you, in the brackets there,

in the parenthesis next to Tank I should say,

we have Transform, that's the type that it's looking for.

So with the tank, the position is stored in the transform component

so we just look up that position

via that and so that tank is the reference it's got.

Later when we have a game manager

we will hide this Targets variable

in the inspector, we'll uncomment that line

that says HideInInspector and that will

disappear from the inspector totally.

The game manager will then populate that list for us.

Cool. Save your scene.

Okay, so we should now be able to play our scene.

And drive around, it should look like this.

We can now explore our wonderful world.

of the desert.