GameMaker: Studio - Text & Signpost tutorial Video Lecture | Game Maker Tutorial: Build Games from Scratch - Game Development

all right guys how you doing sorry for
the enormous delay there has been since
the last video I've been a very very
busy bee but now I'm back so I'm gonna
get straight in there with this one just
a quick tutorial about how to draw text
something a lot of people were
interested in how do you do things like
dialog or signs or stuff like that lots
of different uses for drawing text in
games as you might imagine so I'm just
going to show you in this tutorial very
basics of drawing text from the context
of a signpost in our platform a game
that when you walk over it will just
show you some text and from there I
might do a more in-depth tutorial later
on on how you can do all sorts of
different fancy things with text but for
now we're just going to cover the basics
so the first thing we've got set up here
is I've put a little signpost in the
room it doesn't really do much at the
moment SPR underscore sign is my sprite
and obj underscore signpost is my object
and oh then give it that sprite
I've only set up two little events here
which are fairly simple things based on
stuff we've done before in the create
event I've set show text to equals zero
while show text is is it's just going to
be a variable we're going to use to see
whether or not our player is stood on
the signpost and if that player is stood
on the signpost we're going to make this
one and whenever we're not stood on the
signpost we're going to make this zero
and obviously we're not starting at the
start so we're going to start off with
it being zero and then later on we'll
check to see what whether or not that
thing is 1 or 0 and depending on whether
it's 1 or 0 so whether or not we're
stood on the sign we will show its text
or strip the signpost text so in our
step event we work out exactly that we
say if a place on the score meeting X Y
obj underscore player then if you don't
know how things like if statements work
at this point I suggest you go back to
when some of my older tutorials like my
basic movement GML to draw and stuff
like that that explains
the basics of how these statements work
but you know I'll just explain what this
logic is doing we're just you know
checking our sprites hitbox at its at
its current coordinates to see if our
object is colliding with our player
object and if it is then the stuff in
here happens which is show text will
equal one else so stretch them back else
so if we're not meeting meeting our
player object then we just set show text
to equals zero simpler that is exactly
what I've just explained so if we stand
on the sign show Texas 1 if we're not
still on the sign show Texas zero so now
we know whether or not we've stood on
the sign any point we just need to say
to draw the text when we are so what
we're going to do for this and what you
do for all sort of a drawing code like
all drawing GMS you have to do it in the
draw event as a special event works
similar to the step event in that it
happens every single frame happens
pretty much at the end of every frame
where y this is the point where after
doing all your calculations your objects
and your sprites and stuff are all
actually drawn to the screen or your
backgrounds and stuff like that are
drawn in order depending on what their
depth is and so on so forth so by
default if you don't set your event
every object technically has one and
it'll just draw itself it'll draw itself
at whatever frame of animation is
supposed to be out so far and so on but
if you create a draw a vent and if I
just put in some code here and I just
like put an empty comment in so nothing
in the in the drawer event will happen
now if I run the game as you'll notice a
signpost is disappeared entirely because
ah because basically in our drawer then
we're telling the object to do
absolutely nothing whereas before when
we didn't have this drawer then the the
object would draw itself by default but
we're overriding our default drawer
event by creating one ourselves so in
order to still draw the signpost we need
to type through draw underscore self
open bracket close bracket semicolon if
you want
and then what that'll do is exactly what
it says it will just draw itself so if
you don't want to completely override
all the drawing events and don't want to
manually draw your sprite and stuff in
the draw step then just say you know
draw underscore self and it will it'll
do it standard thing and it'll draw
itself you know we can see that now I
check if I hit five see again the
signpost is back so now we're drawing
our self again but you know back where
we started really so now what we want to
see is if we stood on the sign show some
text so I'm going to say if what was it
show text I think show text equals
equals one open brace close brace then
I'm gonna say draw I'm just got text
very very simple command X 2 so at the x
coordinate where I'm currently Y minus
64 so we're going to show the text a
little bit above the signpost you know
you could do whatever you want with
these two coordinates I wanted to draw
in a like in the top left corner of the
screen for example I could just do
something like 10 10 or even zero zero
or like a little bit deeper into the
screen like 100 100 you know what every
one of those five I'm just gonna use the
x coordinate the sine the y coordinate
the sine minus 64 so a little bit of
book the sine then comma and then the
very last argument you put in this is
the string that you want to draw when
you're putting a string in here you have
to use a quotation marks like that and
you can tell when the stuff in it goes
red as opposed to being gray like that
so what our string is going to be a
string just being like a piece of like
alphanumeric text again so I'm going to
just say hi exclamation mark and I'm
going to put a hash here play nine
second this is that this is a string and
end up with a quotation mark like that
and what that hash will do when you put
a hash in a string like that when you're
drawing text it'll create a new line so
it will create a line break so hopefully
now and because uh like I say the draw
step happens every frame so by default
we're drawing
of an if so text is one the new little
doors that draw this text it show Texas
not one then it won't draw this text and
therefore when the screen is refreshed
the text will go away anyway so we don't
need to write like an else don't draw
text type thing we don't need to do
something like said we'll get rid of
itself when it refreshes the frame so
now hopefully if I had come up here and
I walked under this you can see the text
up there hi
and then my line break created by the
hash this is a strength now the text
looks ugly is Oakley so that's because
it's using like a deef like a default
font not using any kind of like custom
font or anything and it's not properly
aligned the default alignment is just
left aligned you can see it like it's
coming from like dead in the center of
the signpost like here and then just
align the aligned left like that so it
looks a little bit ugly so I mean now
you know how to actually draw the text
but I'm just going to take a moment now
to just to show you how you know you can
present not a little bit better so the
first thing we're going to do is just
set up a fund so if we go to fonts here
and go to create font what fun am I
going to use I'm just going to use this
little nice pixel font I like using same
naming conventions a standard I'm gonna
use FNT for font as well three-letter
acronym of choice and just default
that'll do down here as well you can
also use like these buttons and these
options to set a font range which means
like if you say you're doing a score or
something and you're only ever going to
use the numbers you can restrict the
font to only being the numbers which is
helpful because when you make fonts it
embeds the entire font into your game
like in html5 that comes I was like a
big texture sheet which could you know
it can use a lot of memory so don't use
too many fonts with like a million
characters in them in your game trying
you know limit your use of fonts
wherever you can or at least you know
limit the amount of characters you're
using to just the ones that you actually
need like if you don't need like all
these random symbols and stuff you know
just take them out just use like health
and American stuff again all these
little options down here you can use to
change the range of characters in your
font but yeah we're just going to use
this one so now we've got that font set
up
what we need to do is tell our signpost
to actually use that font when it's
drawing the text so if we come back into
our drawer event I'm just going to say
draw underscore set fonts are empty
underscore bolts let me go on you can
tell that's the the right name the funks
turned red and then hopefully when we go
into the game signpost hi this is its
string and it's in a nice new font is
properly spaced and although it's still
badly aligned it's using like a
horizontal alignment oh they let the
left alignment even so let's fix that
now what we can do is come into here and
say draw set H align a underscore Center
so what that'll do is they'll just set
the horizontal alignment of our drawing
tool to be centered and so every text we
draw after setting that will be centered
another thing we're going to do and
that's just like a constant if you can
type in like FA left and a right and
someone to do the different horizontal
alignments you can also do vertical
align them so you can do like draw a set
V online and make half a middle and then
top and bottom and so on in the same way
all those things are listed in f1 if you
just press f1 and you know go to draw
step H and line you'll find these
constants here and they'll show you
it'll show you the diagrams there how it
works so that should we don't it right
we're going to be centered right okay
cool and so that will now Center off on
and we're also going to set the color so
I'm going to say draw a set color and
we're going to say F a
at AC underscore white that's going to
set the color of our drawing tool to be
white again this is just a constant if
you look at this in f1 you can find all
this you can find like C Y and C blue
and all the other different constants
you can use for colors in the help menu
you don't have to use a constant for
color you can use things like make a
color RGB as a function that will make a
color out of a red green and blue value
so I could do something like 200 0 200
and probably get like a purple kind of
color again that's just as legitimate as
putting in like seeing a disco white and
you can use a HSV as well like you
saturation value make color HSD to do
colors that way but I'm just gonna use
this little purpley color and going to
send to the font another thing we're
going to do is just as a point of
example is I'm going to sell the object
to draw a rectangle there with me a
second at 10 10 20 20
that's just I'm just going to draw like
a black rectangle in the upper left of
the screen and I want you to see what
happens when I and that's just going to
happen every frame regardless of whether
I'm still in the same pose I want you to
see what happens when I stand on the
signpost because it'll be a little bit
interesting so now you can see in this
top left corner I've got this little
black rectangle because my default draw
color is black so it's drawing a blank
rectangle there now when I come over to
this sign you can see it's got this kind
of purply color using to draw the string
you know as expected B as you can see
the rectangle has also turned this pinky
color now that kind of makes sense
because we set our our color in here to
be this purple color while you know show
text equals 1 but if you'll notice if I
come off of the signpost the box is
still pink or purple whatever and that's
because basically once you set that
color and it stays that way until you
said it again so if you're doing any
other kind of drawing thing it's going
to use whatever your color was
to last so make sure like you always set
your color just before you draw any or
draw anything that's actually going to
use that color thing otherwise it's just
going to use the color you used last
time so just make sure you always you
know have that color that's not there so
I'm not going to actually draw it in in
purple though what I'm going to do is
I'm going to draw this black which is
the default color and then get rid of
the rectangle now though and what I'm
going to do after that is I'm actually
going to do a cute little trick a lot of
people into use with like pixel fonts
and stuff is this first one I'm gonna as
I'm going to copy and paste this so I'm
basically drawing the text over the top
of the self twice if I did that you
wouldn't know it's a thing because it
would just be drawing the same thing
twice it'd be totally obsolete and
pointless but what I'm going to do is
I'm going to set this one to be drawn an
X plus 1 and Y minus 64 plus one I could
say my minus 63 but it's easier to see
what I'm doing if you just see that the
one the plus one and it's equally as
valid so and then I'm going to set this
one to be C on the score white now I'm
hoping this will do is what it'll draw
this black text on with like a one pixel
down and right offset and it'll draw a
white text over the top of it without
the offset which means that hopefully
it'll draw little create this cute
little blank shadow with that I come
over here yeah it's kind of hard to see
um I'll probably zoom in or something
here but like we've got this neat little
shadow effect going on our text now
which is pretty cool
other things you can do is I can set of
the like the alpha or the transparency
you might draw a set out for noir point
five so that would half the transparency
of the text but draws the Alpha works in
very much the same way that I draw
textures in fact it works like on
everything like when you set your draw
alpha it's going to affect everything
that has an alpha property so like all
of these objects now that I stood on
this I've turned like noir 25 like 50
percent transparency
including the text and it doesn't go
away when I leave it because I've
nothing that's reset in the Alpher ever
again so make sure when you change the
Alpha you always change it back after
you're done with it so it's always like
change it back to one when you're done
with it just to avoid any problems like
that which we want to hear anyway by
default because we want to draw the non
transparent text over the top but
generally like if I was stopping there
and I just wonder some like 50%
transparent text I would always have
this draw a set alpha one line at words
even if I wasn't drawing this line on
top just so that it doesn't screw
everything else like oh now you can see
that's to create that with a neat little
semi-transparent shadow effect going on
behind it and yeah there you go
basically that's more or less some
simple tips and tricks in terms of
drawing text oh there's all sorts of
different fancy things you can do in
terms of my drawing text like one letter
at time it stuff like that but that
requires going a bit more in depth than
sort of coming up with your own creative
solutions and things technically I've
already given you throughout my
tutorials or things you know to be able
to theoretically do that sort of thing
but that is a bit more complicated and I
might have another tutorial that goes
in-depth on showing fancy ways of like
displaying dialog and stuff like that
but that should be all you need to get
started with drawing text and stuff so
yeah I hope you guys enjoyed that I hope
that was useful for you all and I will
catch you next time see you guys thanks
for watching