GameMaker: Studio - Automatic Tiles Tutorial Video Lecture | Game Maker Tutorial: Build Games from Scratch - Game Development

alright guys welcome back and Happy New
Year what we're going to be looking at
first this year is topic a few people
have asked me about automatic tiling so
in your game you might be using any tile
sets that like seems perfectly together
to create your backgrounds and/or your
platforms or you your top down walls or
any number of different things and
typically the way you would implement
that in game maker is to import it as
like a background and then split it into
a tile set and you can place that tile
set in game maker but then that tile set
doesn't have any interaction with the
player and doesn't have any coat so you
have to then build walls kind of on top
of it and it can be very time consuming
to build your levels this way just
because you have to specifically alter
all the artwork by hand but it is
possible to create a system whereby you
place blocks around your level and then
those blocks automatically decide when
the game has run what title what piece
of artwork from your tile set they need
to be in order to match up with the
tiles around them this tile set is
actually from my game that just came out
under the perspective and you can see it
includes all the floors walls and like
ceilings and stuff like that that are in
the game and those blocks I didn't place
any of these like bits of artwork by
hand in another perspective all of those
blocks are simple objects that work out
when the game is run one which one of
these little images that they need to be
so I'm going to show you how to set that
up so obviously the first thing you're
going to need in this tutorial is an
actual tile set to work with the kinds
of tile sets this specific tutorial
works with include 47 tiles that
basically cover every possible layout of
like if you imagine like a nine by nine
grid every possible kind of arrangement
of surrounding tiles possible so each
one of these tiles is based on like the
tiles that are round in a nine by nine
grid and whether or not I need to
connect those tiles or whether it the
the space next to it is empty and that
for show an edge or a ceiling
and so on and so forth your tires need
to be in this specific order as well so
like your your u-shaped I'll wear the
only only tile next to the style is the
tile above it should be this first tile
the second tile is a tile where the only
neighboring tile is one to the right of
it and someone took both just for the
code that I use you need to be using
this specific order of tiles again just
for a little bit of context here is
another look at the e tiles form another
perspective and you can see where all
the floors walls and ceilings are etc
and it doesn't actually know what the
dimensions of this tile set are you
could have them all in a big long row
just make sure the order wise and I'm
using 64 by 64 tiles here but just make
sure otherwise it goes in this order
from from this top left tile to this
bottom right tile that's done the main
thing that's important I've just split
it in two rows of 12 because that was
just convenient for me so the first
thing you want to do in game maker is
import that tile set into a sprite and
yes I mean a single sprite so how we
would do that for example with that
template I'll set as I'm going to go to
create sprite and then instead of going
to load sprite here because I don't want
to load the entire image I want each one
of those tiles to basically be an
independent frame inside of one sprite
so I'm going to do instead of going to
load sprite and go straight to edit
sprite sprite one and then go to file
and create from strip now basically this
is also the system you would use to like
import a any like tile set or like a
sprite sheet for example so I'm just
going to type tiles it's too open and
now you'll be presented with this menu
here so loading a strip image so I mean
we have a list our tile set here and
basically what we can do now is tell
game maker to import the specific frames
that we want based on the size and shape
the image now we know that these images
are all 64 by 64 so we're going to type
that into image width and image
by 64 you can see this box will stretch
out to accommodate to light showers what
exactly we're going to import and we
know there are 47 images that we want
the import and there are 12 on each row
you can see all the boxes they're just
flood it out and filled up this entire
thing so there's no cell offsets or
anything like that but I mean you can
use those if you're using a different
sprite sheet or something like that in a
different game to um you know if your
tiles are split split apart on on like
pixel by pixel next to each other but
mine are all perfectly lined up so I
don't need to say any offsets or
anything like that
click OK and boom there you go fully
imported into the sprite and this is why
it was also important to make sure you
had it in that specific order because
it's imported them in that order so you
can see image 0 was the the tile that we
had in the top left image 1 is tile we
had them second along and so on so forth
all the way to the bottom bottom right
of that image then the next thing you
want to make sure of absolutely make
sure I just make sure you click Center
on the origin here make sure you have a
centered origin very very important
because the system we're going to use is
going to check from here to like the
different sides or whatever from that
origin to see what the tiles are
surrounding it so if your origin or self
set in the corner it's going to give you
a lot of strange results I don't
presently need the the sprite because I
already have my tile set from another
perspective already all set up in here
so now I'm just going to get in there
and show you exactly what I have setup
code wise so the first thing I have is a
simple obj on the scroll wall which is a
wall object which would obviously have
whatever the code we all gonna have a
not wall for collisions or whatever
other things you want to go on in here
but for now it only has the things to
work out the artwork the cassettes what
we're interested in so all I have is a
create event and a single execute a
piece of code action in this action I
have image speed equals zero so
basically we don't want to animate that
that tile set that we were using the
focus of animate it would just it will
blast through all the tiles all the time
we want to just use a single single one
of those tiles as its
it's artwork and we're going to set our
image index is going to be set by a
script I've named this scr underscore
Auto underscore tile open bracket close
bracket now basically all the important
stuff that works out all the magic of
what tile needs to be what is contained
inside this script this script is
actually something I modified based on a
script by person called Nocturne from
the GMC game maker forum it was a pretty
handy little script and I only modified
it to just make some things a little bit
more effective for me so original credit
alter Nocturne for coming up with the
script in first place it's very very
awesome and I'll explain to you now how
it works so how I set the script up
because I modified it a little bit is
first of all I establish a bunch of
variables so one tile is the the number
of the frame of the tile set that we're
going to use those there's 47 tiles and
are in our sprite now and so tile is
what's going to return to the object the
frame it needs to use is going to tell
our object which which frame of the
sprite to use iw is just the width of
our sprite W left on right up down left
down left up right down right these are
all just placeholders that will
basically take in the results of
collision checks in all of those
directions so we use a the width of our
sprite and to check basically from our
origin like for example this one W
underscore left equals place underscore
meeting X minus our sprite with and Y so
from our origin it checks our sprite
with to the left to see if there is
another wall object there that's what we
see by object index so it's checking for
the same object as itself one sprite
width to the left and then we have one
sprite with the right one a sprite width
upwards one sprite with downwards and
one sprite with oak and
and so on so forth then checks all eight
corners and this little extra bit of
code here basically makes the game makes
the the tiles sorry assume that there is
a wall of tiles around the outside of
the map this means that I mean you might
want to get rid of this section if it
doesn't appeal to you but basically it
means if I put a tile in the top left
corner of the map it assumes there is
also a tiles like around the outside of
the map so that your walls carry on into
the distance if you know I mean so that
they don't like end there and assume
that like the very top of your map must
also be like a floor if if that makes
sense
it means they seem onwards forever and
as soon as the walls stretch outside of
your map if you don't want that effect
then you can just you just get rid of
that basically there's these four lines
go that's all that does after that we
basically have a hue
pile of like a big nested if statement
now before those of you more experienced
cry and get upset about the idea there's
a really big nested if statement
the reason it's kind of okay to do what
would normally be a very very messy
approach to any kind of logic here is
because we're only really running this
script on the create event of every one
of these tiles we've already done all
the complex some collision checking
stuff here so really all we're doing now
is comparing on these like ones and
zeros to each other these W left or B
right W up and basically this is the
part the Nocturne did the the heavy
lifting of working now is creating this
whole series of statements that works
out which based on the wall tiles are
next to you which we've already got from
this um what tile should be used where
so it by default assumes like there's
nothing next to us and sets us to title
44 and then says our if tile up is like
taken then set tile to 0 if it's if
right is taken then sector 4 and so on
and continues this logic basically
eliminating all the different
possibilities or by sort of a you know
trial of an elimination until eventually
one of these numbers comes out of the
earth statement and then tile is the
right number that it needs to be and
there are a lot of other ways of doing
this but I actually really quite like
this this big nested if statement I mean
you can create like a big lookup table
and use some fancy bitwise method stuff
um there are some very interesting
articles on this topic um about the
internet and I'll link a few of them in
the description because there are some
other cool methods of doing the
different types of tiling and stuff like
that
so you might want to give those a read
if you are interested in this sort of
thing as well but otherwise so we do
this big number crunch here and then
basically we return the tile and that's
this here is also why is very important
that your tiles are in that specific
order because if they're not then it's
going to return the wrong number for the
one pile and so on so forth so a very
end here of our script we had the word
return tile if what return tiles are
basically that will end the script here
and it's going to send tile back to
wherever the script was called and if
you recall where our script is called an
object wall we said image index equals
the result of FCR and score to time
so basically when this griff when we do
this line of code here it runs that
whole script and then returns tile that
variable into this because we've set it
to equal that script so that's all that
that was and then we can see that that's
working now if I come into here and I
place some of our object wall around our
room you can see by default is only
using the first time in here so it all
looks like the upside down thing at the
moment but then hopefully when we run
our game
you can see that it's tiled everything
as we have expected so it's worked down
based on tiles around it what tile needs
to be what on only creative then and
yeah it's sort it all out so there we
have it that's basically how you do an
automatic tiling system or a simple one
and include everything in this tutorial
in the download in the description
except for my artwork because that comes
from my game sorry but I will include on
the template a sprite sheet that you can
build your own tile set based on top so
yeah
I hope you enjoyed that again credits to
Nocturne for the original script and
thank you guys watching and I'll catch
you guys next time
see dude one little PS is worth
mentioning as well just about the system
while I still remember is that be
careful on the sort of one of
limitations of the specific system you
don't want to do anything like this
where you play some tiles line outside
of the Aeon like the 64 by 64 grid or
whatever size your tiles happen to be
it'll work with any size tiles as long
as they're square but on make sure you
don't place them like offset like this
otherwise unless they're quite far apart
from one another otherwise you're going
to run into problems like if we try and
run this now
yeah you'll notice that it hasn't really
titled correctly oh because it's like
this block here is like going to look
above it to see if there's a tile it's
going to find one here because it's just
using a collision check to see if
there's a tile here so basically you
want to make sure that all of these are
aligned correctly with a grid otherwise
you will run into problems like this
that is if you're using this specific
system thanks I just wanted to add that
on the end there
see you guys