Godot Tutorial -- Using Viewports and Cameras Video Lecture | Godot Game: Learn and Master - Game Development

hello this is Micah game scratching
welcome back
ongoing Godot game engine tutorial
series today we're gonna be looking at
something we looked at a little bit in
the past and that's viewports and
cameras more specifically what we're
going to be looking at is how you deal
with the multiple device resolutions the
nice thing about Godot engine is in 2d
it works entirely in pixel coordinates
that makes life very easy for the
developer now the downside is in the
world at large all of our devices all of
our different monitors and phones and
tablets etcetera all have different
resolutions and aspect ratios so while
it's nice to work completely in pixel
units when you deploy your game you're
going to have to deal with that somehow
and the nice thing is through the use of
viewports and to a lesser degree cameras
Godot makes this easy for you
now as I said earlier we'd actually
covered this a little bit in a previous
tutorial but not in the detail we're
gonna go into today and we've actually
been dealing with this since the very
very beginning because you see the very
root level node the top parent level
node in every single scene in the Godot
game is actually already a viewport and
I'll show you exactly what I mean here
here is a blank new scene that we're
working with and I've got one node in it
called node so I'm just gonna come in
here I'm gonna create a script for it
we're just gonna quickly say what is the
root node and we're gonna print it out
so print and then get underscore node
and then we'll path it to root you could
also do this as git tree get root
functionally the same thing so this is
just gonna print out what type of node
our root node is so our root node is not
this guy it's its parent and let's see
what the result is boom viewport so
that's a very key concept to understand
at the very top of all hierarchies
ultimately the parent top-level node of
all scenes is already a viewport now you
can create sub viewports underneath that
we'll see that shortly but it's an
important concept to understand that the
the root node in any scene tree inside
of Godot is ultimately a viewport now
we're gonna cover a lot of topics here
about resolutions and aspect ratio so
it's gonna be a little scattered on this
particular tutorial we're going through
and once again this is always available
in text format on game from scratch comp
so just head over to game from scratch
this is technically
r-13 it's called viewports and cameras
so if I lose you here up check the text
version or if you just want a reference
go to the text version but we're gonna
be covering it's just sort of different
topics on dealing with resolution across
the board so some of these will be
applicable to mobile devices some of
these won't be applicable to a desktop
device and the orders gonna be a little
bit random but when you get to the end
should all it make sense at least if
I've done my job right it'll all make
sense at the end so the first thing I'm
gonna cover it's going into full-screen
mode
now what full-screen mode means on a
device is can change from device to
device most recent versions of Android
iOS now support a full-screen mode which
is nice
whereas the only one that's going to
allow you to actually technically change
the device resolution is still going to
be the PC being the Mac Linux or Windows
targets so let's look right away at
going fullscreen from a code perspective
and to do this we're gonna do this and
we're going to create a singleton like a
startup code and autoload so going to
the resources and we shall create a new
script what did you get called you
didn't yet alright
so let's say if this as our up Gd hey
let's shoot up down here start up Gd so
we got our new script
it's extends from node come on back here
come on focus okay extends node and in
our ready call we're simply going to
think about this for one second we're
gonna go fullscreen but we're also going
to handle on fullscreen change to print
out what the new resolution is and we're
also going to since we are now going to
be fullscreen it's gonna be a little bit
harder to exit our applications or when
you quickly put in a keyboard event
handler just so we can check for the
Escape key and if it is exit or
applications we're gonna do a couple of
things beyond what we need to do because
the actual code to set into fullscreen
is quite simple I'll show you that on
its own but we're gonna do a couple of
other things to it more realistic stuff
that you would do if you were dealing
with a full screen application so oops
so first we want whoops
okay sorry with that I made a mistake
minimize the wrong thing
first we want to get our root node again
or I'll show you the other way to
underscore tree so same effect and root
dot connect so we're going to connect
the event listener up here and we're
going to connect on size changed like so
ourself and we will call the function
resize so that's an event handler is
going to be come on and there we go that
was annoying so that's the event that's
going to be fired when the size actually
changes and now this is the code to
actually set full screen so it's using
the OS object window full screen and yes
tooltips of being very annoying today
and set process input is true for our
input handler and dot so next up let's
do our resize function and this is going
to be called when the resolution changed
because of this event Connect right here
and root equals get underscore node so
as I said two ways to go about doing
this functionally identical and let's
get the resolution you can do that using
route get rekt like so and finally just
print out that resolution like so now
finally let's on the escape we'll kick
here at the application so func input
event and all we do is check to see if
it's a key press is press forgot my
colon
and then if event that scan code equals
key escape so and then exit our
application get tree dot quit that's it
we've already wired this up to run
automatically and so let's go ahead and
run this run and why are you not working
oh my bad sorry auto run doesn't
automatically run unless you to Lobos
and ad all right let's try that again
now I don't have an excuse
once I get ah let's try this again
downside of a not compiled language I
pose yeah so now we're full screen if I
alt tab over you shall see there is the
resolution reported as we switched
resolutions because of this resize call
now I flip back to my running
application hit escape and exit so that
is all that's involved in going
fullscreen in code and realistically
this was all that was involved this OS
dot set window full screen equals true
changes a resolution to full screen so
it can be done quite quite simply on the
other side of the equation we can also
go back so let me just shut this auto
load off again
now we're not running that script you
could do and accomplish the exact same
thing we just did in code here and if
you look down here you'll see there's
this variable here called full screen
and check here now this is a little
confusing I actually heard this up the
first time I did this so now this just
said we're going to use this variable
however you also need to toggle the
value so come on over here and say yes
it's on so this is saying fullscreen is
on now keep in mind
we're not loading this script
automatically anymore so just done by
project settings and there you see we're
now fullscreen no unfortunately since
we're not loading that anymore I can't
hit escape to exit so I had to do an alt
f4 shut our window down so there you go
so there's going fullscreen very much
quite simple thing to do so now we got
to deal with the challenge of dealing
with multiple resolutions in order to do
that I'm gonna bring in a handy little
graphic that's 1920 by 1080 P in size
which shows the different resolution and
that will be in port 2d texture if you
go to the game from scratch comm written
version of this there's a link to where
I get any of these graphic files from
none of them I created so consider that
the attribute attribute attribute ation
on the site basically they mostly just
came up Google Image searches what links
back to the original sources are
available on game from scratch com
if you want to use exact same images I
am now that we have that we shall go
ahead and add a sprite to our scene and
load our newly allocated texture there
we go now I don't want it centered
perfect so here's what you see now this
little line right here is our viewport
and this is a single image representing
the various different resolutions now
I'm running at 1920 by 1080 so the
effect here is going to be fairly
obvious when I run this full screen
there you go it's actually filling out
the full screen very cool very much what
we want now what we often want to do
though is set it so that we're working
with a virtual fixed resolution in side
of Godot but then we'll scale to our
different platforms now let's see the
results of doing that and that is done I
don't have my escape handler anymore
back here again in project settings
you'll see there's these two settings
here through width and height that is
the default viewport size and it's
actually being shown right here this is
this is
viewport as displayed but it's just not
accurate so what we need to do is go
ahead and just turn that on so project
settings and we'll just go with height
so so now our resolution is 800 by 600
and run and now you will see what did I
just do now you'll see absolutely
nothing because putting a quick no I am
NOT alright cool
still recording I believe yes I am
alright so now let's actually close the
right window shut that down now we come
back in here and there's a couple of
very important settings here that we
need to cover through there essentially
the heart of how you deal with different
first off resolutions and then second -
aspect ratios when you're dealing with
the Godot engine so right here we're
saying we want our width and height to
be 800 by 600 but now we just got to
come in here and say stretch mode and
what we're actually going to do and
right off the hop disabled is nothing so
if I just press play I'm gonna have the
exact same result we've had up on out
however if I set this so a stretch mode
is turned on but I set this instead to
2d the next same result alright one
second okay this was my bad the settings
I changed it here to 2d like so but I
didn't click close and it wasn't applied
until after the fact so here is now set
to 2d and we'll show you the result so
suddenly that 800 by 600 resolution is
actually being used so you can see it's
being cropped off and this is probably
what you want now there is a big
difference here there's another mode and
I'm gonna display it in a second and
it's not going to be immediately obvious
what the difference is but let's head on
back so the other option you have is
viewport and close it so it actually
commits and run it and you can see the
exact same results so that 800 by 600
resolution we set earlier is now being
applied here and that is probably what
you're going to want to use across the
board now there was a difference between
viewport
and 2d and once and that is when I'm in
2d let me go back come on Alta for when
I have it set to D mode here it's
actually resampling so your native
resolution is still 1920 by 1080 and
it's just resizing the rendered result
after the fact whereas in viewport it's
actually changing it to that aspect
ratio so what you're going to get with
the viewport thing is less pixels
ultimately but probably less visual
quality so both 2d and viewport are
going to cause these the resolution you
specify here to be used it's just one
will resize it to actually scale up to
the native resolution of your device the
other one will actually use this
directly if you're trying to make a
pixel perfect game and you want the
resolution to be exactly what you want
you want your nice chunky non alias no
scaling happening at all you'll go ahead
and pick a viewport otherwise you will
pick it 2d unless I mix that up I don't
believe I did and the way that you can
actually tell what's going on here is if
you go ahead and do a screenshot of the
results in the case of 2d my image size
is gonna be 1920 by 1080 or do a
screenshot with the viewport set to 3d
my Emer size is actually going to be 800
by 600 the only difference there is the
sampling the one size is up to your
resolution the other one just does it
with the smaller pixel count which will
have a slightly lower performance
overhead as a result so they'll show you
how you can deal with your different
resolution so basically you do disabled
disabled' will then ignore this value
completely and just use whatever the
resolution of your device is or whatever
the resolution of your window is so this
is some of this only going to apply
fullscreen because if you're a window
device and you're making a weight and
window that's 800 by 600 it will simply
do it right so there's no stretching or
scaling at all it's so it's more on a
full screen devices or on the mobile
devices where you can't change the
resolution that that becomes applicable
but if you're on a Windows machine you
want to have it so they can support
whatever resolution they're using you
just set this to disabled and whatever
resolution it is is what it'll be
otherwise you set it either to 2d or
you port and like I said the one will
cause it to actually scale out to match
the device size the other one will stay
the native size with whatever artifacts
that that lower resolution rendering
causes realistically just flip between
the two find out which one works best on
your machine and be content with it so
if the viewport works for you it's got
lower processing powers overheads
slightly because it's using less pixels
so that may be the way to go if it looks
like crap go with 2d but those are how
you can deal with the different
stretching to fit the way your window
works now the next question is how are
you going to deal with the different
aspect ratios and this gets a lot
trickier and for it I need a slightly
different setup to show you what's going
on so let me just go ahead and I will
just change this note let's clear it and
we shall load in a different texture I
no need to import what are you dealing
with the full screen image like we were
there it's not gonna be completely
obvious what the effect of different
aspect ratios is but when you're dealing
with a sprite like this guy it will
become immediately obvious so we just
came in import and we will Center this
guy for a change and let's load him in
and so there is our sprite and let me
just I want to position him yeah let's
set it quick script on this guy so it
automatically positions him to the
viewport
very simple substitute self dot set
position and it's a victor or two and
get viewport correct dot size width if
two and get you poor rect that's size
the height if two so alright so that's
all we're gonna do so this will
automatically when we run it position
this guy in the middle of the screen and
again I'm going to have to stick with
this full screen stuff so you're
actually going to see the result of
these different resolutions
now let's exit this guy out and we shall
now all right let's change a couple
settings here so we will change our
resolution to 1280 by 720 oops
so here we are running
720p resolution right now and we shall
set stretch mode to 2d so go ahead and
run that and there's what happens as our
image is being stretched to fit the new
sized viewport now it's not bad in this
case because of the aspect ratio of my
monitor is nicely matching that of this
image so let's look at a couple of
different results and what we can do
about it
and that is the different aspect ratios
and let me close that out right focus
okay perfect
heading back to our scene and let's go
back to our project settings there are a
bunch of different things you can do so
you can you can have it stretch to match
the aspect ratio change and ignore as
the effect of doing nothing
you've got keep we show go ahead and run
no effect here on a widescreen now go
back to scenes settings and already
let's go to afford a3 resolution like
the iPad has and run that guy and
there's the effective keep what keep is
doing is trying its best to keep that
640 by 480 aspect ratio on your device
as well as it can and in this case it's
best way of doing it was by adding these
black bars on each side now the nice
thing is there's no distortion going on
so your your 4 to 3 asset looks just as
good as on 16 to 10 or 16 to 9 however
you're not taking full advantage of the
device now if you want an HDTV you're
gonna know about the next approach
basically you can just basically say
stretch it and you can either say keep
the width and make the height match as
best as possible
or keep the height and make them the
width mass as possible and this is keep
in this case is the exact same thing I
believe as keep with now I will verify
so let's go in now do keep width
close that and run yeah so keep with is
it's going to match this and stretch the
height out for now if I go
ACK and we go to keep height it's dead
it's going to match the height and then
stretch the width out to match this
nicely is using more of your screen and
it's all gonna depend like if you're in
landscape mode versus portrait mode the
ultimate effects are gonna be different
and this is also going to work a little
bit differently based on your device but
you're kind of essentially telling how
to resample and which axis is most
important to you so if you want your
height to be the most accurate you do
keep height if you want your width to be
most accurate you do to keep width and
then rescale accordingly in the other
direction the results look pretty solid
on a PC like you're seeing now on a
mobile device it can be a little bit
more profound now at the end of the day
the mode you choose is going to be up to
you if you can't stand your art being
distorted at all you can go with like a
keep width setting and then have those
black bars if you can't stand black bars
and personally I can't stand black bars
then you're gonna wanna probably go to
keep height and have that taken off
there or just keep which basically is
the same it will automatically determine
which which axis is the best direction I
believe yeah it will take whatever
resolution you've passed in so a 640 by
480 or whatever and then stretch it in
whichever direction it needs to adding
black bars as required or you can
specify which direction to be the one
that was going to be sized by and have
it stretch out and the other very common
way to do this and what makes sense is
if you look at the world of devices the
PC the monitors basically are sixteen to
ten nowadays sixteen to ten are 16 to 9
and then there's a couple real big
outliers like 21 to 9 these really super
wide screen ignore those basically
they're set up to be 16 to 10 twice over
like they're not they're not a
demographic you need to worry about so
the majority of your desktop users are
now running devices that are along the
lines of that your typical 1080p 720p or
derivatives thereof in between so my
laptops 1600 by 900 is its native
resolution for example those are
probably the resolutions on a PC
that you want to target and if somebody
has a slightly screwy one like such as I
have an old monitor downstairs which is
nineteen twenty by twelve eighty it the
old-style the resolutions they preferred
in that case black bars are not
insufferable small bar across the top
and bottom make up the aspect ratio not
a big deal
no when you get into the world of mobile
the vast majority of devices out there
are 16 to ten or 16 to 9 and I believe
the majority are actually 16 to 10 at 16
and 9 I think the only one I've
experienced was the Galaxy Note the
early Galaxy Notes but for the most part
there are 16 to 10 aspect ratio the
exception is the iPads the iPads are 4
to 3
I'm not sure why they went away from the
world of wide F height of the standard
High Definition resolutions I went with
the more old-school 4 to 3 which is what
we used to live for the world of pcs it
used to be 640 480 800 600 1024 768 etc
so that's gonna be your most glaring
shift and a 4 to 3 set of assets drawn
and displayed on 16 to 9 device looks
pretty squished pretty awful so this is
the one case where you might actually
want to do your game for make one
version for 1610 69 and another version
for 4 to 3 it wouldn't be a whole lot of
work you can basically use the same
assets for it you just set it up
slightly different it might be a dapping
view the one resolution difference where
it makes sense not to try to stretched
out because if you make for a 4 to 3
native resolution and then port it to a
16 to 10 device by using black bars or
vice versa people are not gonna be happy
with that but as you saw the actual way
of handling it is quite simple it can
all be done and there are the
programmatic equivalents to all these
things too but it's done by you set the
negative resolution that you want to
work at which would probably be again if
you're targeting Android make sense do a
16 16 to 10 or 16 to 9 type resolution
whereas if you're probably targeting
like an iPad this is a nice solid
resolution to start with or 1024 by 768
is actually the native resolution of the
iPad 1 and then you can have it so it
the stretch mode is gonna determine how
it's sampled up to match the actual
resolution
and as I said earlier you've got
disabled which does nothing it just uses
the native resolution it ignores the
resolution you set to D which will scale
it up to the actual device size or
viewport which will basically render it
to whatever settings you did in that
many pixels and then you've got the
stretch aspect which is determined to
how you're going to map to aspect ratios
that don't match together and they're
basically keep which will try and figure
it out how to work the aspect ratio as
best as possible by automatically
inserting bars or ignore which ignores
it completely which I believe will
result in cropping on us device to small
I'm not actually certain on that one or
your keep within your keep height which
you're saying I want the width the width
aspect is more important to me and then
it'll scale the height too to work
correspondingly or the vice versa what
you're saying the height is most
important to me a neural scale the width
to match correspondingly so that's how
you can deal with all the different
resolutions when you're working with
Godot engine now another key concept we
don't really touch on this is viewports
can also exist within the scene so yeah
we'll leave this right here and we'll
create a bit of a new hierarchy here and
I'll show you what I mean so under our
node we're gonna go ahead and add a new
node of a window dialog for no
particular reason other than it works
for me okay and we'll set it to show
oops well undo that we'll drag that guy
down here like so so here is a new node
within our hierarchy I'll go ahead and
run it nothing too exciting but it's a
dialog being shown in our world alright
so now I shall go ahead and close this
guy let me just get rid of that
fullscreen for now I don't need that
anymore so let's just turn full-screen
back off okay so where a viewport can
come in very handy it's when you want to
constrain the rendering results within
this window itself so here's your
viewport for your your route your base
of your scene let's go ahead and roll
create another one inside of our dialog
box here so we're just gonna create a
new node and we'll call that a viewport
like so and now within that viewport
we're gonna go ahead and create a new
sprite so you'll see immediately what
we're talking
about here and that sprite it shows up
here which is annoying I really wish
graphically it would be parented to the
viewport but you'll see what this
actually does in a second so we got a
new sprite and let's just load an image
into it just use our classic icon like
so
so this sprite is a child of this new
port which is child of this control and
now we just go ahead and run that see
what happened so then all of the nodes
below that particular view port are
rendered within that viewport so if you
want to do picture in a picture or
certain device you can do some special
effects such with this it's easily done
and now on top of that you can also
render a viewport to a sprite so you can
actually render to texture this viewport
so you could do it a separate scene or
so you had two players split screen you
can actually render each one to a
separate viewport if you wished so very
powerful functionality there very simply
done so the viewport anything below the
viewport is using its device coordinates
and then as I said earlier the top-level
node is a viewport so all these things
are inheriting its device coordinates so
there is the end result of a nested
viewport very very handy now the next
thing we're going to talk about very
quickly is cameras now in some platforms
cameras are very very important here the
viewports actually doing most of the
heavy lifting and the camera is just
there for fun now let me just show you
we're gonna tweak our scene slightly
more so what I want to do is go ahead
and get rid of everything we just did so
that was nested viewports hopefully that
made sense this is close down that whole
tree like so and what I want to do is I
make it over a world so that it's more
than a single viewport in size and
that's going to involve bringing in a
different background and that is again
taken from the web the link is on my
site I believe this actually a scene
taken from Mortal Kombat itself so don't
use it it's it's completely not legal
but there we go
so now we're gonna go ahead and add a
new node type sprite like this guy we
want it not centered and let's just go
ahead and load our new background like
so there you go so now we have this
nice little sprite of consider this
picture this has your world
here's your viewport within it and now
let's just get our other sprite back for
a second and we just bring it to Zed
order up a bit so you can actually see
it there we go so picture this was say
your character oops this is
all right let's lock you grab you there
there's your character in the world
here's your world just check quickly
what the resolution of that guy are is
me speak good English
800 all right so 27 over by 800 so let's
go ahead on back here and let's change
our our viewport here default viewport
to be 800 height and so let's just go
800 800
close so now you see our default
viewport shows us this nice chunk of one
scene let's go ahead and use that and
there you go there you see now obviously
we're going to want to be able to scroll
through this world and page and pan and
you can do it manually but it's much
easier to just use a camera and let's do
that now so in our our world here oops
let us add a camera so camera 2d so and
here is set camera so let's just
position it in our world where abouts we
want it to be it's centered so the
center of the target is basically that's
where we want to be and know one last
setting is this guy it's current each
viewport can only have one active camera
there could be multiple cameras but only
one active and that's what this current
does so now you see we're basically at
the center of Buddha's chest because
we've brought this camera into the scene
go ahead and run it there you go
so you could programmatically move that
camera around and it will then follow
your scene accordingly as you can see I
actually went a little too low on my
height should technically be slightly
higher but as the camera moves like so
your view within the world moves
- so cameras are super super super easy
to use in in Godot but technically all
they're really doing is updating the
transform on the viewport above them now
that's an important concept to
understand here though the camera will
use whichever viewport it finds first
okay so in this case I have no viewports
so this camera will now affect the
parent level viewport now the earlier
case where we had that dialog and then
we drew the sprite inside of it if I set
a camera inside of that well then that
camera would find that particular
viewport first and it would affect it so
cameras will ultimately affect the
viewport above them first in the scene
and if they don't find any at all they
will ultimately affect the route again
as I said earlier you can have multiple
cameras however only one of them can be
active at a given time per viewport and
realistically that's probably about it
now sorry if it was a little confusing
on the aspect ratio topic because
unfortunately the easiest way to show
aspect ratios and what they do and how
they apply best is using an actual
device so you can see the profound
results of actually doing so and
unfortunately I don't have that easily
available to me so the best way I can
come up with is kind of a contrived
fullscreen version but when you start
using these different settings that we
showed you today on physical devices you
will immediately see their use and the
approach that you want to take for
dealing with multiple resolutions is
ultimately up to you but could don't
have made it quite simple you can sit
here and work in the tools as you want
and then have it for the most part take
care of all the scaling and such for you
so that part's quite nice but you are
going to run into an issue when you
start looking from a four to three to
like a sixteen to ten it's kind of a
glaring jump there and a lot of times
your best bet is to just basically make
a different version for each so make
yourself an iPad version versus a
generic Android version for example is
probably your best approach to take but
for the most part almost 100 cent of
your code in your
assets will be the same it's just what
will be ultimately visible on the screen
will be slightly different but it will
probably be a better approach than
allowing black bars to be shown but
that's also my opinion I'm not a huge
fan so anyways that's dealing with that
viewports and cameras again there's
pretty much all the what you see here is
programmatically controllable so you
could you can script a lot of the
behavior we've seen here as we saw at
the very beginning you can set up the
full screen using settings or you could
use code for everything that we did here
with settings you could also have done
it correspondingly over the code the
process should be straightforward to at
this point in time so it's not a lot of
point in going into that so hopefully
that was useful stay tuned see you later