Godot Tutorial -- Canvas Layers and Parallax Backgrounds Video Lecture | Godot Game: Learn and Master - Game Development

hello this is Mike and welcome back to
our ongoing Godot game engine tutorial
series today I'm actually going to be
covering a user request and that's
covering something called parallax
scrolling now the reality is in order to
cover that we're gonna be covering
something that I should have probably
already touched on in the past and I
kind of missed it somehow which is
layers so parallax scrolling uses layers
in a particular way now if you've never
heard of it
first off layers are pretty common and
software these days it's like how you
order things on top of each other so how
things in virtual depth are ordered
we're often using something called a
z-index which indicates how to the
images or even 3d images are stacked
upon each other in the virtual depth of
your monitor what are as parallax is a
very specific thing it's where your
background of your game moves at a
different speed or potentially at a
different speed than the rest of your
game
it's very common you may think back to
old-fashioned movies you had a lot of
ones where they would be standing
stationary in a car and the move the
landscape would be moving in the
background that's an example of using
parallax to mimic motion very common in
video games almost all 2d platformers
have parallax to some degrees often for
cloud scrolling in the background etc
and ultimately this is all being solved
using something called layers but the
important thing is layers also allows us
to do things like do a foreground HUD or
head-up display early so we could layer
up a high score overtop of our project
etc so we're gonna look at all of that
it's gonna be a fairly quick video the
topic is actually quite simple once you
know how to use it but it's not
immediately intuitive so let's just jump
right in we're gonna make a new project
here called let's go to the layers demo
that doesn't make any sense why are you
starting there very odd that's good
and they're great folder layers demo
we'll use that it's great this project
at this point you've seen this all
hundred times all right
so let's save our scene oh we need a
root node no it sounds good
now one of the challenges of interpret
layers become very important is in our
our scene treaty or scene graph over
here
all of the things inherit the motion of
the things below them which is where a
layer comes in special because it's a
bit of an exception it won't necessarily
move otherwise if we moved our we move
all these things everything will come
underneath them so that'll make sense in
a second let me just now go ahead and
save defaults fine let's set this up as
our run project
this sense feels like something that
could be set for automation okay go
ahead run it fresh install so first time
I've run all right there we go there's a
new project and the brain off the hop
we're gonna go ahead and create a sprite
in the foreground that way we can
actually see depth we can see something
in front of them we can see something
behind it so let's go ahead and create a
new sprite and not centered we'll use
our default icon so it will just
position it somewhere so this is you can
think of this as layer 0 by default
everything there in front of or behind
this but anything you create on a flat
hierarchy is on the same layer so there
is a natural layer that is created you
can think of again as a zero and then
what if we create layers are created in
front of it and parallax layers are
created behind it and that will all make
sense very shortly but right now we have
our default layer so right here see it
simple sprite and we're gonna want to be
able to move it around so let's it's
attached quick script of this guy oh
yeah so
why didn't you create Aereo let's get
rid of you want you everything so we're
gonna respond to the movement compare
hand set process input it's true we've
seen this all or nothing new here so I'm
not really gonna cover what I'm doing if
this doesn't make sense refer to a
previous tutorial no doubt I've covered
everything I'm doing right now but
basically we're just checking the input
type roles but the key is pressed
from my semicolon me working in too many
C's language lately / pause x equals her
boss X - so we're just going to move
along the x-axis if you press left or I
should guess we're gonna do the same
thing for right X 5 and then finally set
yes I realize I'm updating the position
even if they pressed any other key what
you're gonna update it to itself so it's
not really a big deal so now we're go
ahead and run this if I press
why are you not updating
you know what her into this the other
day I think this is a new bug so let's
go to my script grab it we just quickly
check the script that's attached and
clear that and load it run yeah I don't
know what's going on there I don't know
if that's a newly introduced fog if
that's a Windows 10 problem but I've run
into a few times where the first script
that crate doesn't automatically attach
so I just saw it just cleared it out add
it back and then suddenly it works I
don't know what's going on there that
seems to be new behavior though anyways
so there we have our simple sprite on
layer 0 now hold down the keys it moves
in different axes like so so now we're
going to go ahead and create first off
the request was for parallax layer so
let's go ahead and create one behind it
and this is two-step process basically
first we need to create a new nude
called parallax background so under the
tree of your node so this will be a
pureness right but not below it or not
containing it will create a new and it's
parallax background as you can see this
inherits from canvas layer it's a
special kind of canvas layer and it's
one it is behind layer 0 so we have this
new layer now it's not really much you
set for this though mirroring is down
below I don't think I should set
anything so then child into parallax
background we go ahead and create a pair
lair and this is where the magic happens
okay so now we have come on back we have
this layer that's now in behind our
sprite and you can see if you come down
here if you have multiple you can
influence that using this Z value and
make them otherwise but we're only gonna
have one so that's not gonna be a big
deal but this mirroring is gonna be
somewhat important I'll show you why in
a moment and I'm using completely not my
or legal rights downloaded from the
interwebs stuff here so you don't need
to use use whatever graphic you walk but
I just downloaded a seamless cloud
graphic and then a foreground graphic
through transparencies let's go ahead
and import both those things now my
desktop yeah
all right I don't know why it just
doesn't default a route all right import
so now have our two sprites available
under new console owned by your parallax
layer not the parallax background but
your parallax layer we're gonna go ahead
and create a new and I'll just use the
texture frames I don't need positional
information this isn't going to move I'm
not going to be moving it around you
could use a sprite if you need more
advanced logic why not getting it free I
don't know why I didn't show up under
that all right so now we have our
texture frame which is going to be going
to buy our parallax layer and now we can
actually apply a texture to it so let's
go ahead and apply sky so there you go
as you can see here's our camera view so
I'm not using obviously all of this
texture and it's just downloaded from
the web but it's purely for example so
now we have this layer here in the
background which is perfect now what we
want to do is attach a script to it so
that it moves independently
the script is going to be attached to
the paradox layer not the graphics we're
gonna move the layer not the graphic is
attached to its a new script and call
this scrolling background create that
guy very very very simple script all we
gonna do is say yes we have four frame
processing and obviously now we need to
implement go away so far get a
composition we'll get a position so
we're gonna move at 100 frames per sec
CIL's per second and just update it
simple as that so quick logic obviously
tell us that we have a process loop
inside we get the current position
incremented by whatever one hundredth of
a full update will give us a total of
100 pixels per second and update the
position and that's it that's all this
required
now we head on back we should see our
sprite will stay stationary but our
background will move and there you go so
there is a parallax background now
you're about to see a problem I'm not
really a problem but we just ran out of
Louisville right makes sense that's
because well we got to here so we
basically scroll it off screen now
there's two ways you can look at this
and why I picked this particular graphic
you see this edge here this edge here
are identical this music I actually
extend it out it's going to be something
called seamless or tiled texture so this
allows you to actually infinitely scroll
it if you wish a very easy way to extend
this out virtually read in the Godot
editor and that is to go back to your
parallax layer here and enable mirroring
that's the guy
now first off our background image this
guy
is details all right this is 1300 by 11
on that we're all gonna actually do it
along this axis
so every 1300 pixels we want to mirror
it so that's where this comes in and
we'll just go fourteen hundred and zero
so now you'll see there's I didn't press
Enter is nothing there so now we've got
twice as much work to room twice as much
green to work with that's what this a
mirroring function does is it enables
you to basically stretch out or repeat a
background image over and over and over
again in your parallax layer what we can
also do here is potentially and here's
where the logic comes in as you can just
detect when your current location or
your current cameras midpoint is that
25% or 75% so when it hits 75% so right
here tell them to go to 25% which is
right here and then that will cause
basically an infinite scrolling effect I
may have actually done that an earlier
example on just using us right as your
background as opposed to using this so
go back through my previous examples if
it's not there if it's something you
can't figure out let me know and I can
easily hack together some code to show
you how to do that well you can easily
make an infinitely running background no
problem at all using this mirror
basically just mirror across and like I
said 25% so you've got it totally
covered on screen and then 25% and then
so the 25% marker here on the 75% marker
here will be exactly the same due to
this mirroring so you could just
transition this loop infinitely then it
will just run forever now we will see
basically we run through this entire
cloud background it will loop but since
it is seamless you're not actually going
to tell eventually it will hit the end
and this is why if you do need that
infinite mist in your level you can do
it the way I just described that
algorithm of flipping in the 25 and 75
percent points but that is it that is
parallel parallax background very very
simple stuff very very handy very very
cool now let's look at doing something
in the foreground and this is actually
quite simple as well so go back
parenting off our node create a new
it was that campus layer so we want to
go ahead and create parallax layer
whereas a canvas layer so now we're in
the foreground it's really the only
difference and I can go ahead and it's
attached us right this time you could do
a texture frame you can do a sprite
doesn't really make a difference we just
want to turn centering off and set the
texture to a my columns here there so
now we have this image in the floor
craft
bitch
and what I'm happy where it is so this
is in front of our sprite and the clouds
obviously are behind the sprite I could
resize it scale it up so that it looks
better but ultimately your game you can
finesse more time into it I just want to
show you how things can be in front of
him behind each other and go ahead and
run that and there you go now it makes
it look like because of the way that I
have the graphics setup it makes it look
like the columns are moving too but
they're actually stationary silly this
these are stationary the clouds in the
background are moving and then I can use
the arrow keys and you'll see this
bright moves so we now have three layers
going I could actually animate the front
ground layer foreground layer if I
wanted to as well it could loop it as
well it's at all those things but
generally you don't and this is actually
showing you the three layers so your
your parallax layer your paragraphs
background is where you put your
parallax layer so you have multiple so
if you have layers of depth in the
background you can create multiple
parallax layers you're just gonna have
to set that z-index so that they draw
accordingly but you could have scrolling
clouds in front of a running waterfall
in front of etcetera etc so you can
haven't led many layers going back as
you want obviously there's performance
hit involved in each one but not that
bus but then when you want the
foreground layers all you do is put them
on a canvas layer that's it then you're
done however one other very common thing
that you're going to want to accomplish
is probably going to be a head-up
display this is like a stationary non
moving layer out there very front for
drawing on the screen and this again is
easily accomplished make another canvas
layer
so let's rename this guy to hood put on
hood because we will put text all right
attach a script to that I don't know why
but the text method is not an editable
property I don't get it set text GD
create that script and all we're doing
is text obviously each set font up you
do some graphics you do much more than
this so I just want to show you like a
foreground layer and that's probably it
I don't know if it's position right yes
it's just run that
stop run so there you see in the
foreground we have the score being shown
now it's it's working on top of things
just because the order I created them
but if you wanted to like specifically
specified you would have to give them
the Z order of the various layers but
they're working in the order on
providing them because I'm actually
doing things from back to front
so my layout is working the rendering is
going to get them in this order as it is
but if I'd actually created the hood
here you have to manually set the Z
index of the layer which is set there
your layer 1 layer 2 3 so help you say
layer fly I'll show you what I mean
so there flies should be the frontmost
layer like so let me just go back to our
canvas layer and we will set that to 8
now our text is obscured so there's
where the layers come in important so
that's pretty much it it is very
powerful functionality allows you to
easily implement things like parallax
scrolling foreground scrolling layering
things on top of each other it's
something you will probably use quite
often so sorry I think comes it's
already it's kind of an oversight basic
overview then everything that is created
just basically without layering is at 0
think of that as you know there's a
normal clean sheet and then anything
that's created in a parallax background
is behind 0 anything created in a canvas
layer is in front of 0 and then you use
the layer value for canvas layers to
determine the order things are layered
on top of each other and that's it oh I
guess the only other thing was and this
is where I think some people are being
thrown off is the parallax background
isn't it's just telling things that it's
in the background it's ultimately this
parallax layer that is the reversal I
could have multiple layers underneath
this pale edge background but I would
only have one parallax background so
this is the layer equivalent to a canvas
layer it just happens to be it has to be
parented to a parallax background for
doing to make
pushing it behind the render hierarchy
there so that's an important last thing
to remember and then of course there's
this mirroring which enables you to
repeat the layer over and over and over
again and I put a mirror in both
directions but I just needed to mirror
in the one so that's it
that's basically what I intended to
accomplish hope that all made sense well
that was useful cheerio
you