Godot Tutorial -- 2D Scenes; Sprites; Viewports and more Video Lecture

hello this is Mike again from scratch
and welcome back to our ongoing Godot
game engine tutorial series in this
particular tutorial we are going to be
looking at 2d graphics and all that that
entails this means we're going to jump
into the Godot engine and take a look at
how the 2d view works first we're gonna
start by creating a sprite and next it
probably most importantly we are going
to look at how coordinate system works
in Godot itself this means understanding
how the view works how viewports work
etc don't worry it's not a scary subject
but it's something you do need to know
to go on I will assume that you have
gone through all of the prior tutorials
at this point so if I cover something
that you do not understand
please go back through the top the
previous tutorials if you do that and
you find I've covered something or I've
skipped over something and I've assumed
that I've covered it please let me know
and I will try to address that
additionally every single thing that I
cover here I do both in video and text
form the so for previous tutorials there
is a text version available and the text
version of this one is actually already
available in game from scratch comm
there will be a link in the in the
comments at the bottom here so if you
want to go through the text version
covers mostly the same stuff possibly in
a slightly different order please do so
additionally there are tables that show
the hotkeys that are available in the 2d
editor I'm not going to cover them in
the same level of detail in this video
so if you need that reference do be sure
to check that out so it'll be linked in
the comments below so let's jump on in
this is a brand new empty project that
I've already created there's nothing in
it at all and let me just switch over
here to the 2d view 2d view is where you
go about laying out your game world you
can see something here if you've done
high school level math this should be
familiar - this is actually the
Cartesian plane and we were what we are
right here is we're in the negative Y
and positive x quadrant down the or the
lower right quadrant a lot of graphics
especially with the opengl coordinate
system they normally are actually up
here so the coordinate value this is
your origin your world origin the
coordinate value 100 100 would be right
about here say and then 500 500 would
say be here in this case we're actually
and that is still the case behind the
scenes for the Godot engine as well but
we are using something called a viewport
that abstract set away from us and this
blue wreck
right here is that viewport so instead
it is origin right here so the
coordinates 100 100 in the viewport
would be right here and don't worry this
will all make sense very shortly and now
let's go ahead and start by creating a
sprite sprite is just a note a node with
a graphic representation and Speight
peel information to tell it where to
define itself in the world things like
rotation scale and position now let's
just create one now and it's a sprite
list filter let down you'll see there's
a couple of different kinds we're just
gonna go ahead with a normal sprite like
so and create it and default you see
it's this little blob right here but
let's go and add add some more let's add
a graphic to it so it's actually got
something to show there are two ways to
go about doing this first off you can go
ahead and import it right here as a 2d
texture you don't actually have to do
this you can just drop it within the
hierarchy of your project itself we're
still going to go ahead and do here
there's actually a bit of a bug with the
2d texture it comes out all warped and
positioned wrong if you use the import
so I'll just do it this way and I
created these for a different tutorial
but let's go ahead and use one and just
find your projects directory it was see
it's temp sprite demo it's like so just
drop your image file in alright again
you could have imported it using import
and that then will copy the file in for
you and create a dot te X file but you
don't have to do that you can just do it
this way and then over here on your
sprite just go down to your texture and
drop it down and pick load grab your
file like so and boom it's automatically
positioned so we have just now added a
sprite to our world you'll notice this
is this lattice around it this it can be
used to resize in different directions
as you want and then anywhere within
clicking the left button you can now
position the very key thing that notice
and well here I'll show you two things
at once first off you can use your
scroll wheel to zoom in and out Excel
and you can use your middle mouse button
which in my case actually happens to
still be my scroll wheel the pan like so
now so i zoomed in and you see this
it's nice little radical right here that
is your I call it a pivot a lot of game
engines called a pivot in Godot parlance
it's called an offset and that is where
all positioning is set relative to so
let me just show you something when I
move this guy around I'm going to move
this guy within the viewport you'll
notice right now this image itself is
128 by 256 pixels and right now we are
about half of that in so this value
right here if you look at the
positioning we just resize this slightly
is that a 100 and 160 so I'm going to go
ahead and set these back to 0 and you
can see what happens
0 and enter 0 penter boom right back to
the center of the world and we're back
to this into the world relative to that
radical itself so as I stand to the
parent so now as I start moving this guy
around so left click and drag I move it
down a little bit look what happens
through the coordinates they are all
done relative to this pivot point or
offset point that's a very critical
thing to understand that offset port is
very important so when you do transforms
your transforms are relative to it if
you want to move it around you can and
let me just actually I'll show you that
later on now let me just drag this guy
in and we'll show you some operations
that you can actually perform on this
guy dozes up we've been doing it down
here using these values this position
rotate and scale however it's just as
easy to do them in code and let's do
that
browse a incredibly poorly named my
script and create it
alright so very first thing let's show
get the position her position equals and
again I have a tense to use self for
accessing member variables or member
functions you don't have to this class
itself inherits from sprite so therefore
you have access to all of the different
member functions and member variables
that are exposed to sprite and all of
the various other objects that that in
here
from so canvas item no 2 D etc they're
all available to you using like just get
see they're there I have a knack for
just doing dot self dot exact same
result I find this a little clearer but
you can omit the self if you don't like
using it if you're from a C++ esque
language self and this are basically
comparable so I want to do get position
likes
oh wait that's not what I want to do
what I want to do is go ahead and get
the parents position one thing to
understand with the scene and here's our
hierarchy so far our scene consists of
just two sprite you inherit your parents
positioning and at the very root of all
scenes it's not showing on the scene
display and it probably should be it
actually would probably make more sense
if it was there and you couldn't edit it
but at the very top of the scene
hierarchy there is a node called
viewport and the viewport is what is
controlling what is available on scene
so the parent of every top-level scene
item is going to be the viewport so I'm
going to go ahead and do self dot get
parent and I'll just get us dimension so
get that's a method oops that get
wrecked and then size and then half of
its width this is actually a vector I'm
creating built-in class so no need for
doing it let's do that alright and we
will do the same thing get the height
height - all right so what this value
here is going to return is a vector to
center to the middle of the screen now
let's just go ahead and move ourselves
to it so self thoughts and it's set
position and then we will set it to that
position all right so I need to set my
scene up we covered all this in the pre
kind of save it first scene they've seen
sure scene set scene
all right so we're setting our scene as
the run scene and now we go ahead and
run it and boom remove to the center all
right so that is how a translation works
it's a matter of calling set position
now let's take a look at scaling very
similar self dot set scale I'm sorry set
really good rotation set wrote as in
rotation and then you pass in the amount
you want to rotate by one thing that
could throw you off a little bit here is
that the value being passed in is
actually in radians and you probably
want it to be in degrees I know I think
in degrees I do not think in radians so
you can easily convert there's a
built-in function called degree to
radians there's actually one for radians
to degrees as well but this is now going
to say rotate by 90 degrees if we go
ahead and run it you'll see boom we are
now turned okay and then finally we can
go ahead and scale it like so vector two
and scaling is by magnitude so we are
going to double in size so I want you to
and to each one quart we could we could
scale it like we could squash it or
stretch it by only scaling in one
direction we're going to scale it
equally to twice as much in both
directions like so so now go ahead and
run that you'll see we are now twice as
big now this might seem slightly
unpossessed to you but that's actually
due to the white space in the graphic
we're using for our texture let me just
go ahead and show you how that works and
show you another thing while I'm at it
there's a set of virtual overrides that
you can you can inherit and I'll
override like we've done here with ready
ready as being called when your your
note is created and ready to go on top
of that there are other ones such as the
one we're about to use draw and this is
called when you are being drawn and you
can actually know 2d has a number of
helper functions in there for doing you
could do for debug drawing it's such one
that's exactly we're going to do we want
to draw a rectangle around the
boundaries of our image we do that with
self dot draw underscore rect now these
have to have these actually have to be
called during the draw method to work as
self dot get item rect so we're going to
get our own dimensions and we are going
to draw it using the color blue full
blue and 20% opacity like so so now when
we go ahead and run this code you'll see
there is the outline of image and this
is just because our image itself has a
bunch of whitespace I should still have
it open here and I can show you this way
that doesn't help you much this is all
empty white space so that's why when we
did the rotate it is being done about
the center but it doesn't necessarily
look it because of the way that the
actual image is saved so there you can
see it is centered it is rotated and it
is scaled 90 degrees I'm sorry have
rotated 90 degrees and it is scaled to
double its size with the scaling again
you could also go down so here's a half
the size like so okay so that is
programmatically altering the positions
of a sprite very handy stuff now let's
go back to the the 2d layout for a bit
it is a very important window so we're
gonna spent a lot of life if you're
working on a 2-d game and this is where
you organize your world you lay things
out you add sprites you or other
different kinds of nodes and you
assemble your world in general I want
very key and useful features here
something called snapping let me just go
ahead and show you that's it it's in the
Edit section so go use snap you see this
really tight grid of lots of grid so
grid of cells appears let's make it
slightly less big we're going to make um
32 by 32 so each one of these squares is
32 units or 32 pixels in size all right
so now let me go ahead and turn snapping
turning me on if I grab this guy and I
go to move it notice what's happening is
it moves in increments of the snapping
grid now if you're working on a tile
based game this is invaluable because
you're going to probably want things to
line up perfectly and this constrains
your movement amounts by the snap amount
a very handy feature and when you're
done with it what you're getting it
turned off and now I can position myself
however I want as you can see but now
snapping is on it automatically moves
you in
you're snapping unit increments very
handy so that's the snapping again I
cover a lot of the hotkeys in the blog
post you could go there and see them
I've got three really critical ones to
understand our qw and E or select move
and rotate select is simply that select
the deselect mode you can also do select
by hitting the Escape key but when you
select a note like this you can just hit
W W will now put you in move mode so
left click and then drag will reposition
as you see your you're updating those
values over here in the inspector so you
could also numerically enter them if you
want like so and again rotate or E so W
for move r for rotate and then you can
rotate like so control Z undo and
finally you got pan here panels for
moving around your scene as you can see
like this you can also pan I think I may
have mentioned this already but using
your middle mouse button and scroll
using your mouse wheel so as your world
gets bigger you pan around it using this
guy again this rectangle right here
represents your viewport or what is
available to you and let's talk about
that for a second a viewport again oh so
I said earlier it is the top-level node
in your scene so in this case your you
have one sprite its parent is actually
the viewport but what is setting the
viewport what is setting this rectangle
right here oh that's a very good
question if you go back over here to the
project settings you will see it's being
set right here by these two values so if
instead you would rather have it be 720
by hey apparently this is being fixed
not a moment too soon you have to hit
enter after doing an edit but say 720 by
480 enter all right so there you go and
I close this you will now see the
viewport updated accordingly there's a
number of other key settings in here to
be aware of some of them are only
important to the desktop itself like
this guy right here is it toggled
resizable if I click that guy off and
then run it I can no longer resize the
window I Excel
alright now let's go back for a sec
sugar stop and settings in addition to
the resizable turn that back on you have
a couple of values that are only
important to mobile orientation
obviously there's no landscape or
portrait mode on desktop so those are
obviously ignored on the desktop you got
touch screen emulation very handy little
feature we'll talk about that later on
down the road another key kind of set of
features here are stretch mode and
stretch aspect this is going to be how
Godot handles when you're running on a
resolution other than what's available
for something when we're dealing on a
desktop it can just create the window of
whatever size it needs that's the nice
thing about desktop you can create
windowed versions so if I created a
window that was 384 by 196 it'll do it
that's just going to be a subsection of
the screen however a mobile devices your
apps are generally 100% of the screen
and this is going to determine how it
scales up or down to match that
resolution it needs something we'll
cover down the road something to be
aware of but it is set here so this is
what is controlling your viewport your
viewport is a very critical thing to
understand
another thing critical thing to
understand is this this offset I was
talking about earlier remember how this
is the offset for our viewport it's not
marked it with anything but it is
important because your child your child
inherits the coordinates from its parent
and the best way I can show this first
off remember this code right here all
done there let me just go ahead and get
rid of the the scale so we can see it a
bit better but all this translation code
yes it was comment that out specifically
or there we go all of this code right
here that does all of our movement is
being done relative to offset so when
we're saying rotate 90 degrees and
translate from here to here we're doing
it about the center because that is
where that offset is set right now so go
back to the 2d view and I'll show you
what I mean
select there that guy all right they're
set so we can we'll go ahead and move it
there's two ways to move that
and it will it will college all of our
translations to move as a result the
first one you can do a little buggy at
times but with the movement mode on like
this if you hold down V the V key and
then move there all right like so so
basically you got to start moving and
then hit V but you'll notice the image
itself is moving but the pivot is not
and then we just put at the bottom left
corner like so okay so now all of our
and if we look at the here our offset is
set to 63 and minus 126 as I told you
before this image is 128 by 256 and five
so what this is taking this offset is
set relative to the center point of your
node
so we're saying minus 126 and over 64
let me use the exact numbers you can
edit them here like so
to set that pivot okay and that is
saying our pivot is now right there we
could also do oops I suppose I should be
128 now let's show you using a positive
value our pivot instead becomes up here
okay so that is the effect now we want
it to be the bottom though so this
entire coordinate is relative to the
middle of our our node itself and this
is setting where the pivot is going to
happen relative to so let's go ahead and
run our translation code and see what
the difference is see how it happened is
not being done centered about the middle
anymore so our rotation is actually
happening relative to the bottom left
corner of our sprite as is our
translation and again if I go back here
and I change this guide to the opposite
corner like so all right
now the pivots done relative to that
corner when we do our transform boom you
can see the immediate result okay so
this pivot is a very key thing to get it
is where things happen relative to and
on top of that it's even more important
to understand because it's inherited
down when I said earlier that a
viewports pivot is right here even
though you can't see it this is a key
concept to get because let me show you
how inheritance works in layouts and
just set the pivot back to the center of
our sprite stupid Enter key bug zero
enter zero enter okay so our pivot is
now about the center and let's just
position this guy right about here okay
so now I'm going to do is go ahead and
I'm going to add another sprite
identical sprite but as a child of our
existing sprite right like so go ahead
and load it like so okay and this guy is
now positioned at zero zero relative to
zero zero on this sprite so this is a
little confusing because they're
directly overlapped but let me go ahead
and move it so this is child two that
I'm moving and you'll see I'll move it
right about there this guy's position
that 120 and 240 four is relative to the
pivot or the offset of the parent so
they're there so from literally there
there is what is represented by this
positioning so the cool thing is the
inherited all of the positioning and
scaling such is inherited down to
children so I move this guy and
everything moves accordingly and it is
done by the pivot so I'm going to grab
this guy and I'm going to move it to
pivot so that it's down in the bottom
corner and as you can see if I go back
to this child here and I set his
position zero and zero keep in mind his
pivot is still about its midpoint so
when I do this snap it automatically
comes see its position then becomes
at the pivot of the child so this
relationship is very important to get
the pivot is where all transmissions are
relative to but you automatically
inherit your parents positioning so your
positioning is all relative to the
container you're in or to the node
you're parented to so this guy is
parented to the viewport itself the
top-level node so it's positioning right
here is all set relative to this point
so I moved him to where is his pivot o
is pivots down here so that should
basically be 0 0 oh let me see yep 0 0
and it's all done your position your
pivot point to your parents pivot point
the confusing thing to get at first but
it is important to understand and again
when I move him you'll notice the child
knows but you can move the child
independently and once again the child
all of these positions are set relative
to the parent and relative to the
parents pivot or offset so as this
change is so
relationship very key thing to get it's
it's pretty easily mastered but these
hierarchies these inheritance trees are
very important you do inherit all the
positioning information from your parent
but you are not tied to it so you can
select a child and move it independently
but when the parent has moved so does
the child okay so that basically covers
it all I mean let me do a quick recap of
what we covered here today again there
is a text-based version of this it does
have some of the hotkeys that you can
use for working with the scenes for
example I didn't touch on the fact that
you can use your arrow keys to do
fine-tune movement or to shift arrow
keys to quickly move things around there
are a number or you can do see it's ctrl
P or actual F F to frame selected so it
automatically snaps in etc there are a
number of hotkeys you can use in the 2d
view for composing your world they are
on the blog post check it out
you probably learn a little bit more
than what we covered here but this is
the basics of it
so once again your 2d world is edited
within the 2d panel here you position
your things as you need if you need to
have fine-tuned control over how they
are laid out be sure to make use of
snapping which is available and edit you
set the snapping size which is the
number of pixels per square in the grid
and you will automatically snap to them
as you move around it allows you to very
nicely layout and precisely put things
together in this case we made a sprite
sprite is an image with positioning
information as you see before you then
we looked at actually parenting
coordinates are inherited from the
parent and the offset or pivot is
critical that is where rotations happen
relative to and they also determine
where the position of the children is
relative to the parent the top-level
node in the scene is the viewport so
anything you add at the top such as the
sprite is automatically parented to the
viewport you can get that by using git
underscore parent there is also a
comparable function called git
underscore viewport underscore rect
exact same effect it's probably the
better one to use to be honest because
that works regardless to if the viewport
is your parent or not but you saw here
in code you can easily translate and
and rotate just by calling set POS set
our ot or set scale again rotation is in
radians so you need to convert you can
do that using degree to Radian one other
thing that we briefly touched on here is
you can do some further drawing
customization by overriding the draw
method like we did here to draw our own
bounding box those are in so you'd
basically just override draw and do the
drawing you need to do and it will be
done automatically that's about it oh
yeah your viewport if your port is set
in the project settings it controls what
is displayed on screen at the time there
are some advanced settings we did not
cover today but you can specifically set
your resolution resize ability full
screen orientation etc using the project
settings of your scene your viewport is
your top-level node that all other
containers inherit from by default the
viewports world starts at 0 0 which is
the top-left corner of your screen and
goes down however the world itself uses
the standard standard coordinate system
so when we get into the 3d that might
feel a little bit different but don't
worry about it right now let's see
that's about the extent of it I hope
that was useful oh yeah I guess I didn't
cover on this your nodes inherit they're
dumb the pivot and positioning
information from their adult very
important to create those hierarchies as
you want as you move the parent around
the child will then move accordingly
however the child can be moved
independently so that's the basics of
graphics in 2d graphics in Godot game
engine coming up we're actually touch on
input next but then we'll jump back into
some more advanced graphic seems like
animation texture Atlas is etc but I
hope you have found that useful it's a
good foundation of what we need to cover
going forward thank you very much
goodbye