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

alright guys welcome back so this week
we're going to be stunt to take a deeper
look at drawing text into our games so
this is a subject we've covered a little
bit before by using draw underscore tags
to draw text into specific parts of the
screen but this week what we're going to
look at is how to draw text a one letter
at a time like you might see in like a
dialog box or text box like displayed on
the screen we're going to draw it inside
of a box as well just to sort of show
you how you might go about saying up
your own system to draw text or dialogue
or anything like that where you might
want to draw one letter at a time for
that nice kind of like that feel and
aesthetic as if someone is talking or
you know you're reading reading the text
and so on now exactly what we're going
to do is we're going to create a script
that we can call any point in the game
to draw a text box anywhere on the
screen and we're going to be able to set
what text we want to draw and how fast
we want to be able to draw it and first
of all though it's a completely blank
project we're going to do some basic
setup here I'm just going to go create a
new room it doesn't really matter what
we call and I set 60 fps and then I'm
going to go into fonts and add a font
for us to draw for our text we're not
going to have more than one form so I'm
just going to call FNT normally I do FNT
underscore something but it's the only
font we're going to use so I'm just
going to call FNT and tick that entire
listing to zero and I'm going to use one
called Coda's crooks which is a cool
little pixel font by dude named Andrew
McCluskey or Nell Gaines no Gaines no
Gaines and mixed up with game maker as
well so you can check in I'll put him in
the description or whatever I'm using
his cool little font called coders
crooks just as an example font for this
tutorial so anyway now we've done that
um there's that's all the basic stuff
when you just need a room and a font
setting up then I'm going to go ahead
actually make the script that we're
going to use to create our text box and
we call SCR underscore text and then as
I usually do with scripts I'm going to
put a comment at the top
using two slashes to show what I want
the eventual command to look like so
when we're creating a script you can
almost think of it as creating a command
that you can call from within other code
in your game so I'm going to be
essentially creating the command or
creating the function SCR underscore
text and you'll be calling it by typing
ser and score text and then putting in
the text that you want the call in
quotation marks the speed how quickly
you want it drawing and the X&Y corner
of where you want it drawing on the
screen so that obviously without a
comment will be eventually what our
script will look like when you call it
in the edge in code other places in the
game so the thing we're going to do with
this is we're going to use this script
to create an object and that object will
carry the text that we want to draw and
a bunch of variables with it that will
allow us to draw the text to the screen
where we want it and do everything we
want to do with it
so what we're going to do is we can use
a variable just going to call it txt and
they said equal instance create
arguments to argument to I don't
remember
arguments 0 is the first one argument 1
is the second one argument 2 is the
third one so that's the x-coordinate so
the x-coordinate that we send through
and the command is argument 2 and then
the y-coordinate as you may have guessed
would be argument 3 so that's the x and
y-coordinate that we pass through to the
script obj underscore text which will
stay white because we haven't made that
object yet but we will later on so the
next thing I want to say is I'm going to
send some variables across to this
object now we've created the object the
object is run it's create event but now
because I set because I did instance
creators equal to this blank variable
this variable now takes on the ID of
this instance so now we can do stuff to
this instance that we've just created by
referring to this
variable so I'm going to say with ext so
with that text object that we've just
created I'm going to change some of the
variables based on other stuff in the
script so first of all I'm going to set
some things that are really not going to
change but I will set them in here so
that you could in theory add more
arguments into the script and then be
able to change it later I'm going to
create a padding variable which is what
I'm going to use because we're going to
draw a text box but obviously we don't
want the text like right at the edge of
the text box one give some space around
lips I'm going to give 16 pixels of kind
of breathing room around the outside of
the text where the text box will draw
you can change that to whatever suits
you I guess next length on this is the
maximum like length the text is allowed
to be before it'll start like scrolling
whatever the max length of the box so
I'm going to just say it to be the width
of the room now you to believe you zero
the text itself the text that we are
actually sending through to our text
object there's going to be argument 0
remember it's this thing that we've just
passed through SPD for speed will be
argument 1 and the font that we're going
to use in the objects of the object
noticeable font to use now in theory
that's another thing you could set as an
argument but like I'm putting in here
just to sort of demonstrate it's going
to be FNT which is the font that we set
up there see it's turned red and now
we're going to use those variables to
sort of determine a few other things so
the next thing we need to know is how
long the text is that we're going to
draw like in terms of the number of
characters because we're drawing it a
number of letters at a time or one layer
at a time we need to know when we're
finished so the next thing you need is
to say text I'm just a link it's going
to equal string underscore length
eggs and that will return a number just
a number of characters inside the string
that we sent across the next thing I
want is the size of the font so our font
size is equal font get size font font
referring to this variable which is
referring to the fun that we sent across
so use out how big in terms of like
number of pixels the font is for like
setting the size of the box then what we
need to do is work out how wide the text
is going to be at its biggest so I'm
going to say tags underscore width
equals string width
ext so what this is going to do is we're
going to draw the text based on like a
maximum width which is the width of our
room we're going to like virtually draw
the text and say like if it goes beyond
that with then it will automatically
break a line and we'll draw like on the
next line um so like one line will go
all the way to the maximum length of the
room and then like it will start
breaking into multiple lines oh so a
text width equals string with ext for
this thing it needs as the string is
also text um the separation between
lines and this is where our font size
comes in we're going to use font let's
go sighs um plus like about on size over
two so the separation is going to be
like like font size so like already like
the height of the font but that would
put the font like the next line directly
below of light with no gap and we want a
tiny a little gap and as I'm showing you
is whatever half the height of our font
currently is and then the maximum length
is next length so that's that and then
we do the same thing for the height
so we now call our box needs to be
string right XK our text on size and
this is going to return the height in
pixels all now we'll return the height
in pixels all off text having been drawn
into this virtual space so with this
Mike virtual separation and this virtual
max width so now that we know how wide
and how high the text is in pixels we
can work out how big our box actually
needs to be distort the text in it so
I'm just a box with equals text
underscore width that we've already
worked out plus our padding value adding
times two so it's going to be however
wide our text is plus 16 pixels either
side of it so it's like a little bit
bigger than the box in each direction
now you're the same thing with the high
box height equals text height plus
padding by 2 then we have it we've
passed through everything we actually
need to know about the box that we're
going to draw in the text we're going to
draw in its width and its height and
everything appropriately now we can go
ahead and actually make the object
that's going to draw our text I'm going
to go to objects create object and
create obj underscore text I'm going to
create the create event now it's not
what I'm going to do in here the only
variables I'm going to establish in here
are the ones the arm but I'm never
really going to change based on like the
script or based on like choice or
anything like that they're just they're
variables that we use to like tick as a
time or so on so forth you'll see what I
mean
was that alpha equals zero we're going
to start in text boxes invisible and
we're going to like fade it onto the
screen so that it doesn't just pop on
instant
if you do you can just either set out to
one or just ignore it
Frank equals two quotation marks and a
semicolon print is going to be the text
that we're going to print the screen at
any point in time because we're not
drawing the whole piece of the whole
string at once what we're doing is we're
going to create a variable that we're
going to add the text to piece by piece
over time and that's what print is going
to be so say we were saying hello or
something we would like this will be
start offers nothing just to quotation
marks then on the next frame it will
become H then it will become e then it
become our egl then will become pachi ll
and then I'll give them hello
but it's going to start as nothing and
it will always start as nothing let's
fold in it here and the same goes the
time equals zero that variable is just
going to be how many frames have passed
basically since this object was made and
we're going to tick that about um oh I
shouldn't take it up by however quickly
we want to draw the text every frame and
then we used that time variable to
decide how many characters to draw in
this print variable and you'll see how
it works a second and then the last
thing I'm going to say is a depth equals
death - instance number obj underscore
text this just ensures that if we draw
one text object then we draw another
text object the new text object will
draw on top of the old text object so
that you know we don't make new ones and
they appear underneath type of thing
because obviously the lower detect the
depth is the further forward it's drawn
on the screen that's all we need in that
and then the only other event in here we
need just the draw event and that and
now we're going to add two things to
this the first thing I'm going to add is
one execute code action which I'm going
to name at the start by using a three
slapped command and letters
over time so all we're going to do here
is we're going to as time passes we're
just going to add more and more letters
to that print variable from the text
string that we've already passed across
from the script that need this object in
the first place
so if time is less than text length and
you remember text length is the total
number of characters in the string that
we worked out from the script time plus
equals SPD which is the speed that we
want to draw so if it was you can start
to see how this might work now because
then we'll go we're going to do some s a
print equals string underscore copy text
the the string we want to copy from zero
where we want to actually count from and
time which is the number of letters we
want to copy so what string copy does is
as I said it's going to take a take a
string it's going to count from a
particular letter up to a particular
letter and copy that part of the string
into this variable now obviously at the
beginning time equals zero and with zero
zero it's going to copy nothing into
print and it's just going to be what it
was to begin with which is just two
quotation marks but then as time keeps
gained SPD the speed add it to it say it
was like 2 or no say it was - yeah so
time plus equal to so in time becomes 2
on the next frame oh we can't be
counting from 0 up to the second
character of our string say it was hello
that would be H and then E and it would
put that into print and then it keeps
adding and adding all the time when we
keep building until we get the entire of
the string and it will draw the entire
thing to the screen and that's it that's
all you need in order in order to
actually build up this variable so now
this object is building this uh text
variable and then it'll just stop doing
this once um once time Mon is equal to
or greater than the text length because
that means we've got it all
we've got the whole string at that point
um so that's the first
action we're going to have in here then
we're gonna have another one in here
another execute code action which I'm
going to call render Xbox and text you
need to keep these separate but I just
thought isn't nice way to organize it so
in here now that we actually have all
the text that we're going to draw to the
screen now we just need to actually go
ahead and draw it so first of all I'm
going to do draw set alpha equal alpha
which as you remember is set to zero at
the moment and if alpha is less than one
which it is alpha plus C equals SPD the
speed we're going to draw the text
divided by ten else alpha equals 1 so if
alphas less than one we're going to
increase the alpha so increase the
transparency at which we're drawing by
just the speed we want to draw a text
divided by 10 the only reason I use that
is just so that like if we want to draw
the text faster
it means the box will fade in faster and
if we draw it slower it'll fade in
slower just so that it just kind of
matches with the sort of feel that
whether one we draw a text really
rapidly because someone's talking really
fast or if we want to draw it slowly
because we want it to be a bit more
dramatic or whatever well and then the
ælis alpha is one on the top just means
that we don't go over one we just set it
to 1 when it gets there
so that's that it's a draw
set underscore set font is going to be
font which is the one that we've already
passed through draw a set color now what
we're going to do is I'm going to set
the color to be just see underscore gray
for now when you draw it like a grey box
and then we're going to draw like a
black border on the box and then we're
going to draw the text on top in white
so first of all just gonna draw the box
so draw rectangle on X Y X plus box with
y+ box height and you remember our out
current X&Y coordinates are whatever has
been passed over to us from the script
at the beginning because we made the
object and then we set its x-coordinate
or on the same frame so we're like we
don't even get to this draw event before
those variables have been set and it's
not an outline so zero and that will
draw a gray box at the right size then
what we want to do is say draw set color
see I'm still black I'm going to draw
the exact same rectangle again X Y X
plus box with y plus box height but I'm
going to put one in here this time to
say that it is an outline so we're going
to get a gray box with a black outline
so that's actually drawing text box now
we want to draw the actual text so draw
set color C underscore white a draw set
each a line so this is like like
whenever you've used like word or word
processing or anything before you can
set the alignment of text the draw from
the left or draw from the center or draw
from the right we're going to draw from
the left so say 10 mins left draw a set
and then the vertical align I'm going to
draw from the top so when I draw from
the top left so we're basically going to
pick up any coordinate like like on the
screen and then we're going to draw like
down into the right essentially from
that position so now that we've set that
we can actually draw the Texas also draw
I'm just got text and store ext the ext
stands for extended because a draw text
command and there's a draw text extended
command which just gives you a few more
things that you can pass along and now
as opposed to doing a bracket and
writing all the stuff like in here as
one big function what I'm going to do is
I'm going to open that bracket down here
and close it down here you can do this
and it works in exactly the same way and
it just makes it a little bit easier to
read these commands sometimes say X
first of all the first function we want
in here is um the x coordinate of where
we want to draw the
which is rx go on plus the padding the
amount of padding when I draw inside the
box that we've created so X plus padding
so about 16 pixels into the box and why
it was padding 16 pixels into the box
downwards the actual text we want to
draw is print the variable the
separation between each line that we
want to draw is going to be font just
course size Plus on size over 2 which we
worked out earlier or not semicolon Kham
Kham and the maximum length is max
language which is currently just the
size of our room but will be whatever
and that works just the same as if we
put all that on one line just as long as
it's comma separated at the end of each
one and then end with just up closing
the bracket a semicolon line so and then
once that's all done we can say draw set
alpha back to 1 so that we don't draw
anything else with half transparency and
that's really it that's all there is to
that so now we have that we have the
create event we have the script so we
can now try that out if I go in through
the room and I just go into the creation
code of the room and I type ser sort of
text and you see that turns yellow
that's the thing we're going to actually
do this is a test string we'll draw it a
slow speed so we can see it working like
north point 5 so it will draw like 1
character every 2 frames and X&Y corner
300 by 300 just to the center so if we
run that now we can see I've actually
made a mistake and the text is drawing
way too long outside of the box and the
reason for that so I go into ser and
score text here is that when we use
these this function here to work out how
wide the text was going to be it was
doing that based off of the default font
um it doesn't know what fun we want to
use because we hadn't set of fun so what
you need to do in here at any time and
draw a set font to equal 1 which is the
fun we've just set so that font is ready
to use ahead of time so that when we use
string with DX T
and string height ext it's working out
based on if it were using that font to
draw the text so now if we run the game
you see it works fine and it draws text
letter-by-letter
into this box now to make that a bit
more sort of interesting to test out I'm
just going to create a quick object here
called I will be J underscore spawner
and I'm going to create an object so
that we can just click all over the
screen and spawn lots of different text
boxes um
how this works is a really an important
part of the tutorial but I can explain
it anyway I'm going to say if nice
Jack put an underscore release NV
underscore left bar str switch i random
4 oops
there we go basically long mooing here
is i'm just going to create four random
scenarios and set this string to be
something good don't do that inside the
string to be something based on for just
a random number between 1 4 so case 0 so
in case our random number between or 4
comes at with 0 str equals four lines of
text in the object hash symbol if you
talk a hash symbol into a string
whenever you use a draw text or draw
text extended as a function in game
maker and it comes across a hash symbol
it will interpret that as a line break
and it will do an automatic line break
for you which can be very useful
sometimes so four lines are texting
you'll get four lines of text a pink one
down i have prepared these in advance i
passed it around still
on your four lines of text
okay so I'll have that as a really big
one study go on break just to end the
case semicolon a case one STR equals
I don't understand I just get understand
let me go on break
let me call case to STR equals
wow this is a long one don't you think
question mark SEMICON likes that's all
on one line now hash symbols are break
case three steel equals haikus have
three lines which makes them good for
testing within a three push remarks I'm
go on break sending on case for STR
equals a dot dot it's the most boring
one I guess break default xgr
equals something went wrong
because I shouldn't ever come up break
so we're just going to pick one of those
strings at random and we're going to set
it to be that variable and then all I'm
going to do is I'm going to say ser
underscore text string a speed one why
not Mouse X Mouse y so wherever we just
clicked with the left mouse button and
ended on a statement I'm going to plug
that object in the room though should be
called object one now I know we're in
the game again
it should still draw our test one at the
beginning it's a test string but now if
I click around I'll start drawing those
text boxes that we came up with more or
less anywhere
yeah they are that's the very basics on
like drawing text or drawing dialogue in
a specific spot and how that actually
works I can go in there here and show
you what happens if we want to draw that
bit faster so draw like three older like
three characters at a time and draw
everything really fast you see the first
one was quite slow but now these are all
zum-zum zum-zum super fast and you can
do the same thing by making it like more
point to detroit like really slow like
one every five frames and fade in slower
as well see that's a bit more slow and
dramatic and so on till four so it's
kind of flexible there's a lot more I
could show you how to do this I might
follow up this tutorial with more stuff
on this um because I've kind of been
working on a flexible ish kind of text
engine but we'll see whether or not I
get to doing that either way I hope this
was useful to you guys um and I will
catch you guys next week
thanks for watching guys
you