Godot Tutorial -- Creating 2D levels using Tilemaps Video Lecture | Godot Game: Learn and Master - Game Development

hello this is Mike again from scratch
and today we're going to be taking a
look at the Godot game engine
specifically we're going to look at
creating levels using pile maps tile map
is simply a map made up of tiles I guess
you could have product guessed that by
the name more specifically you generally
have one or more sprite sheets each
sprite has little bits of a level in it
those bits of the level are then reused
to paint a level generally in a 2d grid
though it doesn't have to be you could
have an isometric tiled map for example
you could have a hexagonal Texel map for
example but today we're going to be just
dealing with a straight 2d hex map you
can work in isometric it does add some
some complications to the fact so in
order to get started we're actually
going to need tiles tile map as I said
it's just a 2d graphic containing the
thing about it is Lego or the building
blocks that you're going to paint your
level with they don't have to be but
they're often the same size we're going
to use the same size in this case we're
going to use a 32 by 32 pixel tile and I
think the spreadsheets about 512 by 512
so then it's that math should be that
hard it's but it doesn't buy a dozen
graphics that go to make up your scene
first thing you're going to need is to
actually get one you need to create one
yourself use one from wherever in my
case I'm actually going to grab one from
the free website open game art org you
need to sign up but that's it
otherwise it's completely free and I'm
using this tile set right here let's see
this is it open no that's not it that's
Kenny's where did it go here we go so
it's actually 32 by 32 pixels
chunks of reusable tile ball that's
where the name comes from because one
can blend into the next like this thus
the word tile think like flooring tiles
in your bathroom or your kitchen or the
backsplash your kitchen or whatever how
they're designed and they have a pattern
that blends into the one beside them
that's the basic concept we're going
with here they're they're usable that
you can paint with them because certain
surfaces will blend with other surfaces
so if I put this tile next to this tile
you get this nice smooth transition and
then this tile beside it you get another
nice transition again so that's where
the tile part of tide level comes from
but this is it's just a simple power of
two 32 by 32
honk image and that's what we're going
to go ahead and use so again I just
grabbed it from open game art you can
use whatever you want
ah the only thing I keep in mind here
today is I'm going to make the
assumption that all of your tiles have a
transparent background so I don't have
to do any color masking it's quite
common for tile sets to actually use
something like say fuchsia as the
background color and then you mask that
out I don't know why anybody does that
anymore the world of transparency is
here and very well established but
usually the way things were done back in
the Stone Age some people stick to it I
don't get why because now you can't use
whatever that color is in your color
palette and it can create some kind of
insidious graphic bugs as a result but
this is the guy you want over so or
whatever you want just make sure that
there's no space in between your tiles
like what we saw here Kenny from Kenny
NL creates this nice tile seats at huge
sets of them unfortunately he's got a
spacing in between each tile and that
creates a bit of a pain in the ass you
can go ahead and do it it's just you're
going to have to do some extra math and
your head will figure out where the
tiles end and begin you'll see that
shortly all right so let's fire up good
dough I actually already have I'm at the
project management screen here and let's
just go ahead and create a new project
and projects folder or I will call this
as you can see I've done a couple play
runs of this but so we'll call this one
tile map 3 and click ok I'm going to
warn you up front
the Godot engine is quite powerful in
handling Tyla maps it's also quite buggy
some of this might come down to user
error some of it might just be buggy I'm
not really sure specifically where
things go wrong but I have had some
issues with exporting of pile maps this
process might not be as smooth as I want
it to be and I'm not entirely sure that
that's my fault it might be I might be
making a mistake here just expect that
we might run into a couple of hiccups
unfortunately also this process isn't as
a smooth as I'd like to be if anyone
from the Godot team is listening this is
a process that really could use some
automation especially the importing and
creating of the tiles part which is what
we're about to see now in order to
create a tile map basically you create a
new scene and then export it as a top
map so we're going to ultimately need
two scenes for this project our tile map
scene and then our game itself so let's
go ahead first off and we'll create our
tile map scenes I'll switch over to 2d
you may
notice I've upgraded to the current
development version of 1.1 there's been
a bit of a facelift since the previous
releases but it's still functionally all
the same thing you'll find as I do these
videos I'll pretty much keep with the
most current version so if things change
slightly and look and feel from when I
started these videos that's why all
right so first things first we need our
initial scene we've already actually got
it so now in that scene our root level
just going to go ahead and were going to
create a node it's the parent container
and the next thing is and this is going
to seem a little clunky we're going to
create a graphic for our tile so we're
going to bring it
first off let's import our tile map also
if you're listening to devs I would love
to see the ability did a quick jump
recognize folders such as desktop users
my cat edit edit that desktop and that's
our tile sheet right there we'll be
messing just throw it on route like so
and import it so that imported our
graphic in your the file system you can
see it right there now let's use it what
you do is for importing your tiles you
basically create a sprite for each entry
so let me just go ahead and do that
alright now first guy is going to be a
sprite so every single tile is going to
have to have a unique name
it could be sprite sprite one sprite two
spray 3 that's kind of awful so I'm
going to use the slightly less awful but
equally awful tile one so this is our
very first tile set it to our texture so
we just load up our texture import it
here like so let me zoom out so you can
see all that guy now what we want to
actually do is just use a region of it
so region on and then you just specify
the dimensions as I said it's made up of
32 by 32 chunks so if we want the top
left tile just bring up it the tile set
here if we want this tile here it's at 0
0 and we want 32 and 32 for width and
height so let's bring in our first tile
I'm only
bring in a couple of these it's a very
slow process for the most part so
there's our dimension so now you go look
at our tile you'll see that is that
right so there's our first tile bringing
it now the next thing you want to use
and we haven't use this a whole lot in
the past but when you're working with
tiles especially if a fixed size like
this snapping is your friend we're going
to want to arrange these in this grid
you don't really have to but it makes
things nice and smooth so let's go ahead
and we're going to turn on snapping
first thing we need to do is configure
it and we want to snap in 32 by 32
increments like so and then finally we
go back here and we turn snapping on so
now when I move this guy it will move in
32 by 32 tile chunks very handy all
right so that guy was created now the
next word is all conditional on you if
you're going to be using physics or
collisions you're going to want to do
this part if you're not then you don't
but now what we're going to do is we're
gonna go ahead and we're going to find
collision details for this tile so as
you can see the character can probably
only walk in this portion right here so
we need to mask that out accordingly
okay good now this goes back to our
physics lessons before are basically
going to define a physics entry for each
tile we already done this in the
previous tutorial so I'm not gonna cover
the details of exactly how I'm doing
things so if what I'm about to do is
very foreign to you go back and watch
the previous tutorial it will cover it
nicely for you but since we don't move
but we want physics to occur we are
going to create a static body like so
and then all we do for the static body
is then in turn we add another and the
table code a collision polygon 2d this
is your boundary for it so once again
once you got that guy incoming here and
you can now edit it and since our
snapping is still turned on I should
just be able to click each corner and
I'll automatically do my four corners
like that so I've got a nice little
square now now I'm gonna want to cut out
this portion right here in order to do
that I'm actually have to come up here
in turn snapping off because otherwise
only be able to select the four corners
like anything that's at 32 by 32 for
ample and now I want to do is come in
and I want to click here oh it is a
control click yeah control click here
control click here and then we'll just
grab this corner here and
drag it in like so
actually oops I do I missed
it's like that's a bit more accurate
actually let's keep that guy lined up at
the edge all right so this is the area
that you will not be able to walk on and
this is area you can walk on and we've
just defined our first tile and that's
it so now we're going to go ahead and
define I'm going to just define the for
these guys right here and that's how
we're going to have to work with so if
you have a bunch of tiles it's a very
manual process you've got to do this a
lot which is annoying now the nice thing
is there is a bit of a shortcut come up
here select your the nodes you just
defined here and you come on down here
and there's this guy duplicate selected
node or you do control D and we just hit
that and it is now duplicated we shall
turn our snapping back on and move item
two
why are you nuts
you
you
I'm on
let's lock children there all right I
might have been moving one of the child
components of it which is kind of
irritating so now we'll take that guy
duplicate it
all right so it automatically inherited
the lock there we go and then we'll take
that guy and duplicate it and just over
here all right so we got our four piles
they're all using the same boundary
right now and they're all using the same
graphic which we obviously don't want so
let's turn those locks all off no lock
no log so that locking just met it so
that I can't select the child aspect so
I use the whole thing as a whole which
is handy okay so now we've got our
second tile tile number two I'm just
going to go in here I'm just going to
change the region in this case we just
want to be 32 pixels in and that's the
only change so now
I should do it sir done
why did you not update
I'll too
to do it
three and this one we want to be 32
pixels down and this one we want to be
32 and 32 see god I wish you'd select to
the top more often we just want switch
there and there all right
so we now have our top there they're
there and they're selected in theory
practice it's not looking like that I
don't know what's going on here to be
honest
you
you
okay why are you not drawing one second
okay it's just an illusion it actually
looks like it's using the same tile over
Norma again but it's not specifically
it's the collision mask over tops
throwing things off and let's go ahead
and we'll fix that up now and it'll
become a bit more clear I also didn't
grab as many as I thought I was which is
part of my brain fart this is actually
tile tile and then a third tile so you
know what I hate to do it but I should
actually grab them too so it makes sense
so let me just create two more tiles so
control D and we'll just move handle
snapping ah eight that selection stuff
ah and children lock and move and we
will duplicate him one last time and up
take the lock off
and take the lock off all right and
these guys then are slightly off so tile
five I'm gonna really confuse myself
with that naming convention all right
top five is now going to be at c-32
stays that way this one becomes 64 yeah
and then this guy will become just 64 in
the X that's tile six
because I cloned it so 64 X 0 I okay now
all we have to do is we have to clean up
these uh collision polygons and that is
a matter of well be honest pretty much
just manual labor so let's go to our so
the only one really we've defined it's
our first tile
so our second tile now let's expand it
out collision polygons and we will just
to rank these up oh snappings on undo
that undo turn snapping off is that
snapping is wonderful until you forget
and leave it on at the worst time and
we're going to want that to overlap with
that guy over there creating complex
geometry for no reason all right so then
we move over to our tile yeah okay this
is going to be confusing three and we
will just bring that guy over here guy
up here let's go over here
and that mostly works up that guy I
think we can just delete yeah much this
guy we're going to drag up here over
here I'm going to bring this guy down
here this guy over here and then finally
this guy same deal
so once again we're just defining where
you can walk in a particular tile it's
important to get your corners as precise
as possible though because the overlap
is going to cause if you create gaps
you're going to create oddity in your
physics engine calculations
alright good enough so there is our tile
collision you can walk here or go here
anything over here will trigger a
collision that's about it so that is how
you define your tiles if you don't need
the physics it's a lot easier you
basically just have to give the
dimensions or the offset in the region
that represent the tile itself this is
the name it's going to be exported as
tile one two three four five six
not the greatest naming but it works for
now so finally now that you've done this
go ahead and save your scene
I call it tile map cutscene and done now
what we want to do is go ahead and can
go to the convert to option here and say
tile set so convert to I'll set and then
it's really just a matter of naming it
and I will call mine
air we'll go with the lovely name of my
tile set XML like so now the only thing
to really be aware of here is this guy
if you're making changes to it you want
those changes to update into the other
to the existing tile set XML click this
it's buggy again now one thing I have
noticed is when you change your tile set
shutdown and restart Godot I don't know
why but I have had nothing but problems
with the ring import I've tried doing a
refresh I try doing to delete and add
shutting it down and bringing it back in
seems to be the best way to get the
changes to persist like I said there are
some bugs in this process unfortunately
that's one of them there is no existing
so this isn't really going to do
anything but I'm just going to set that
to off anyways so we're creating a file
called my tile set XML and done now I'm
actually gonna take the second to
actually show you that guy because this
process right here of defining the
physics for these guys doesn't always
work exactly like you want it to
unfortunately just go to our projects
here go to town up three and there is
our tile set now if it worked you will
have these definitions these are the the
geometric definitions of where the
boundaries are and you'll see for each
particular tile there is
shape and then the resource and that's
just all this is saying is shape zero in
the resources which is up here there's
zero so it's mapping it back up here but
if you don't have these entries that's
probably your problem and I don't know
why sometimes export doesn't create them
if you don't define your physics
hierarchy right they won't be created
right and like I said sometimes it just
doesn't work so it's useful to tell to
make sure that these have been defined
but as you can see we do have all the
boundaries we just set have nicely been
defined so let's close that down and
then now what we need to do is create a
new scene
all right don't give me that warning
even though I've saved her now I'm gonna
say everything's because I'm paranoid
new scene yes I will just straight away
save this guy
oh you can't alright once a root will
give it a root now give it an ode to D
so ah so there's a root of our new scene
and we'll just come back up here and we
shall now save it and new scene sure it
works for me and since we're here let's
go ahead and set that to our active
project
you see all right and
that's it all right
all right so that is our scenes started
let's move this guy down to your now the
very first thing we do is actually let
me think for one second look down do
that for a second no I can't there we go
all right so let's just go to our node
and we're going to add another node to
it this is your key this is where your
tile map is keep in mind you can have
multiple times so if you've got layers
of them with things like maps on top of
maps on top of maps you use multiple
tile maps to do this in this case we're
going to have just one we're going to
keep it pretty simple there you go there
is our tile map created and you go into
the tile map and let's go back to full
screen I've I done this entire thing not
full screen if so I apologize that was
kind of stupid of me
we go ahead and we just load in our tile
set under the tile set property here and
just pick it and now you'll see in the
editor over here all of our tiles popped
in perfect so now we just can use those
to paint so you grab one it's
automatically sort of set up for you oh
I've made a mistake I also has to set
your tile size so 32 and 32 and your
group will update corresponding so
obviously whatever tile size you use you
go with as you can see here you can set
for isometric we're not covering that
today but if you're not using square
tiles it's set there but yeah you set
your 32 by 32 up here
the only other value you might want to
consider setting is your used kinematic
if you are using physics on your tile
map click that to on we're going to head
and go ahead and do that today so I'm
turning that on I know it's really just
a matter if you take your tiles like
that adds and then you paint
where's my bottom
why not get the bottom-left corner oops
oh well you like that let's do the top
corner that and now we're going to a
down like that and since I don't
actually have this one I'll go ahead and
use this guy even though it looks like
crap some reason I did not get the
bottom corner guy and let's fill it with
some rocks and that is painting a level
with tiles it's really quite that simple
you can have a like I said another layer
of pops on top like so now I'm just
going to go ahead and put
this guy
and opposite right here okay kind of
ugly but it works and that is painting
with the tile on average really once
you've got your title mouth defined it
is really simple now let's quickly look
at our physics this is one of those
areas where things do get sort of buggy
for me so if this doesn't work out
correctly I apologize so let's add us a
sprite I guess I'm gonna need a graphic
for it
2d graphic find it again it's on my
desktop I got stopped doing this users
my desktop smile import are you just
default to the route I don't get that
all right all right so import it now
we'll go ahead and create a sprite like
so we shall give oh wait no actually
don't wanna do that
let me go ahead and delete him and go
ahead and create a rigidbody 2d like so
and then on it we create a sprite like
so that's sprite we set to image texture
load smile there we go and then finally
let's give it a shape collision shape 2d
and these shape is a circle
sighs it appropriately ish hey I'm up
and the corner good enough for me grab
the entire guy let's lock it down
drag that Parrish alright so if I've
done everything right this should just
work I don't really have my fingers
crossed mind you but let's see and there
you go that's kind of up it I mean
actually let's give it a little bounce
so that it interacts a little bit better
and go Boing Boing Boing roll roll roll
roll roll and OH
Boing Boing Boing Boing now this is an
area it actually worked today which is
wonderful but I've had my export come
out where they were off by half and I
don't know why it just falls into the
scene a bit more I don't know how to fix
it I don't know what the problem is if
you actually look at the tile maps there
is an option to be like offset by half
you can change where physics occur
relatively well should take a look at
that right now
that might be linked but I'm not
enabling any of that so it should have
never affected me and some reason it did
and unfortunately like I said it's just
kind of buggy I don't know the answer to
it but you just saw the process of
creating a physics enabled collision
enabled a tile map very quickly very
simply now there's a couple things we
should look at really quickly first off
you've got your layers here so if you
want things to only interact with
certain tile layers sort of collision
layers they're set here so things for
the things that are only on the same
layer as each other so my rigidbody will
also have the same properties it's by
using these layers you can determine
what hits what so if you've got things
like on different layers of different
tile maps and you don't want them to
interact with each other you do that
with that guy now the next most
important thing that we're going to look
at here quickly is so when you click
your tile map it brings your 2d mode
into this
editor where you can bring in and draw
using a palette of the tiles you've
defined however sometimes you want to
actually modify or create new tiles and
you can do that directly in here you
don't have to go back to the tile map
although the results again have been
somewhat buggy for me so I'm not sure I
recommend that entirely oh here's what I
was talking about earlier you can set it
so that your tile origin is about its
center or top left and then you can do a
half offset which is to say move your
dimensions by a half so if you're at the
center obviously so the top left it's
going to have a different offset that's
how you can handle it it's been a little
bit buggy for me not something I would
recommend using too much so anyways if
you're in your tile map all right here
you drop it down you can go into edit so
now we are in the actual tile map itself
you can zoom here it's reusing an editor
of the theme editor menu but if you come
to the theme you can actually add new
tiles and merge back to the scene create
from the scene etc so you can create a
new tile in your tile set now look over
here and this is actually showing you a
hierarchy of your tiles
so here's tile zero which is named tile
one okay little bit confusing the
graphic it uses so if you had if you
wanted to use a different sprite sheet
for your source you could change it here
if you wished the offset that's probably
not something you're going to use very
often the material to use this is the
region we defined so if we wanted to
just move it to a different portion you
could do it right here just by changing
these offsets and you have these three
offsets again since the top this is
where it gets screw again this is all
about the top left versus the center but
this is saying sixteen by sixteen offset
sixteen by sixteen offset sixteen by
sixteen offset and if you play around
with this it all goes really screwy
that's where the source of all the bugs
is at again it's probably user error I
may not know why it's going wrong but
the second I touch any of this stuff it
all goes foul so if I say decide that I
want to use Center instead and I change
this to zero zero it all goes wrong
completely wrong so be careful there and
then finally you can go into the shape
itself that is defining the so in this
case where do you get convex polygon
shape too
we could edit that shape change it up
there's no editor though this is kind of
frustrating so I can say okay I want to
use a line shape or a circle shape or
whatever instead but then I don't have
to have the option of going in and
painting so if you want to update your
tile map generally what you're going to
want to do is just reload the tile map
scene and export it again and then as I
said earlier that the most comprehensive
thing to do is to actually exit and
restart your editor the Godot itself
that seems to purge whatever so
sometimes I just find that junk is left
in there like I I manually added a tile
this way once and then I got rid of it
or at least tried to get rid of it and I
went and I was looking at the XML file
and it was gone everything was gone the
damn thing was gone but it would just
keep showing up in this list every
single time until I actually came back
in then it was finally gone so if you do
run into some kind of a weird persistent
bug just go ahead and exit and come back
in and generally that purges or
exorcises the demons okay so that's
basically it it's actually a pretty
straightforward clean process it's just
a little bit more work intensive than
I'd like it to be I'll do a very very
fast recap first thing you do is you
create a new scene let me save this guy
open the old guy back up see if it's
smart in your new scene you create tiles
basically you create a sprite using the
region definition within an overall
image like this sprite sheet we're using
so you basically just give it the
coordinates for each tile hopefully this
is something they can automate in the
future I don't know why this is
something that you have to do by hand
then if you've got physics for your tile
add a static body on top of your tile
and then add a collision polygon to that
you then define the boundaries of it now
big warning here something that I got
bit by didn't know this do not resize
shape or otherwise mess with the
collision body polygon this outer shape
or anything do not ever scale it do not
do anything to it or it goes stupid so
when you are defining a collision
polygon like this do it we're drawing
only do not ever use scale it goes
really dumb okay so quick warning there
but basically we just define all of our
tiles each
is given a unique name so you basically
create a sprite for each one name and
accordingly if it needs collisions you
define the static body and then the
collision bounding polygon to go along
with it
make sure that you don't have cracks or
crevices or you will cause your physics
simulation to go really stupid and in
that case the snapping is your friend
configure snap to turn it to 32 by 32 or
whatever your actual tile size is if
you're using isometric you will use
these guys to snap accordingly now turn
it on you click use snap you can also
turn on a grid if it's your liking I'm
not a big fan of grids to be honest but
they can be handy and then when you are
done you simply go scene and convert it
to a tile set now with your tile set
selected you create your new scene so
add a tile map node and then when once
the top note is selected you will have
this pallet painting brush with all of
your tiles enabled you then simply draw
your level and that's it as you saw from
this you can have physical objects
within it that will now interact with
your tile map like so exciting stuff
that's kind of it that's the working of
Thomas now again if you have multiple
layers you can create multiple tile Maps
over top of each other collisions are
handled using the collision layers
things so if you have things that
collide with one thing but not another
that's there I guess the only other
thing I should point out in this is you
can go into your individual tile set and
edit it using this guy bridge up that
slightly different theme editor except
the process is a little buggy if you
want to make a lot of edits I would
actually edit with the original and
re-export it myself personally and then
if you want physics you click the use
kinematic option to on in the collision
and that's it that is working with tile
maps in Godot truth of the matter is
it's just that initial process of
defining the coordinates for each tile
that's a pain in the ass and this is one
of six like you kind of be able to say
you should be able to say all right
making me 36 tiles of you know eight
wide by six Y like six eight by six or
whatever turn this into tiles for me and
a lot of my clean and then you just
would have to go through and rename
some nice feature that should be added
sadly it's not there yet so it is a bit
of an intensive process to create your
tiles and it's a little bit buggy when
you change them I would also make sure
that you open up the export an XML file
to make sure that your boundaries are
exported correctly also you can if you
look at that file again let me see there
we go if you want to make quick edits
this is as easy as it get it's a very
straightforward simple format you're
going to want to reload after each
change but you'll see like each one's
just named by index like so and then
it's it's simple simple data type
defined in XML so if you wanted to make
small changes to them if you wanted to
have a script that created this for you
so if you wanted to create say that
thing that automatically populated tile
sets for you
you can easily generate this XML file
here's your regions being defined you
just find slightly different coordinates
it's one of those things that if you
wanted to create your own tool for XML
importing you could pretty simply this
is a very straightforward file format I
should go figure out yourself within
minutes of playing with it so that is
also an option if you've got a lot of
tiles you want to deal with and this
workflow is too onerous just create a
tool hot that is your option as well
that's about it I hope you enjoyed that
it's it's definitely creating games with
tile apps it used to be an incredibly
popular thing to do back when memory
constraints were a really big thing now
some people are getting into there's not
a lot of reuse in your tiles and it
doesn't make a lot of sense but now that
we're into mobile and again restricted
using tiles is allows you to make really
large Maps really really large Maps
using very very very little memory and
since their tiles being polluted from
the same source they're also very
efficient on the GPU so even though the
world is moving away from tiled apps a
little bit in some ways they're starting
to move back to them again so this is a
very handy way to create specially if
you're creating like a 2d platformer
this is a nice way to go about things so
again I hope found that useful thank you
very much goodbye