How to use AGS Part 41 (Text Window GUIs) Video Lecture | Learn and Master: Adventure Game Studio (AGS) - Game Development

hi guys welcome back to the AES tutorial
we've been talking about gooeys so in
this video I'm gonna show you how to
customize a GUI a little bit more than
we did in last video the GUI that we did
before has this sort of basic frankly
really ugly look to it and NVIDIA the
GUI I'm going to show you isn't
necessarily any better looking but but
it's at least it shows you how you can
customize the GUI and also how you can
actually customize the the basic look of
your game or just just one of the ways
hopefully I'll get into a lot more ways
that you can customize it it doesn't
have to look like this I guess is what
I'm saying so the first thing that we're
gonna do is if you notice whenever you
play the game and we see if I can find
one here
whatever you click on I think ok type in
a name that's gonna get annoying real
quick whenever you look at something
yeah that's not what I wanted to do it
looks like there's a book No well
remember before we had a message a
dialog box that popped up on the screen
whenever we looked at the books and they
said something like there's a book on
rat recipes there and if you remember
let me put that back because I want to
show you guys what that looked like
and because that's what we're gonna
customize in this one room script it was
actually here
remember we comment this out sammy walks
over there i'm gonna comment that out
Sammy says it looks like a book there's
a book on recipes and then before we had
we just had this where he displayed this
message there's a book on recipes there
and let me remind you you guys what it
looked like
my name is DF ok so look there ok this
is the this is the this is actually a
GUI right here you don't really know
that it's a GUI but it is it's it's a
display it's a it's a message that's
display on the screen which you can
customize how this looks excuse me I've
got something my throat apparently but
if you remember a lot of the old Sierra
games actually all of the old CR games
and I'll bring one up here Frey Farkas
for example whenever you looked at
something or whatever the narrator said
something there was a GUI there was a
dialog box or a display I should say
that came up and that display was
customized for that particular game for
example in Freddy Farkas you had a
border around the the dialog and you had
the text in the dialog and it was a
different color you had the different
borders and and things like that so
that's what we're gonna go over in this
video how to do that so the first thing
that you want to do then is that display
dialog there that the dialog that comes
up when you use the display function is
called a text dialogue or a text gooeys
so what you can do is you can right
click on gooeys and say it's actually
called a text window GUI sorry you can
click on new text window GUI and this
will define a template if you will of
all of the text windows that will be
displayed in your game this looks really
ugly and crazy right now the way the way
it shows you what it looks like but
basically what we want to do is is I'll
bring up the Freddy Farkas again and the
there are several components to that
Freddy Farkas display dialog window
there's there's the in this case there's
the guns in the upper right upper right
and lower left sorry upper right and
upper left corners there's little guns
that are displayed little pistols and
then there's the border around the
dialogue box there's the horizontal
borders and the vertical borders and
then there's also the lower right and
lower left corners of the GUI which are
actually different low graphics these
are all different graphics that have to
be drawn individually and the reason
they have to be drawn individually is
because as a developer when you're
creating your game you could be using
the display dialog box to display a
message of any length basically within
your game so you don't know how big to
make this GUI you want to make it
expandable and shrinkable and chain it
so that so that AGS can change the size
of it and still be able to add these
elements to add the corners in there to
add the horizontal and vertical bars and
things
like that in there so that's what we're
that's what you have to do when you're
developing a text window GUI within a GS
these arrows here that you see there's
nine of them and you can click on the
corner of the upper left corner of this
arrow and it sort of displays four
little dots these are actually the the
elements of your text window these are
this is going to be the upper left
corner of your text window this is the
upper right corner of your text window
despite the fact that it's not really in
the upper right corner just ignore that
but this is the upper right corner the
lower left the lower right corner sorry
in the lower left corner and then these
arrows here represent your borders so if
I go up here to my sprites actually
already have some sprites that I've
imported that represent the borders of
the windows this is just something I've
quickly put together it's not great
looking at all but this is the upper
left corner of the dialog this is what I
want it to look like the upper right
corner just sort of has a curlicue type
type border around it the lower left
corner and the lower right corner and
then these here with the border going
across the top across the left across
the bottom across the right these are
going to be the top left bottom and
right borders respectively so let me
show you what I mean by that if I go
back to my text window GUI here so I've
got the upper left corner here I've got
the the image property here and I'm
gonna click on the ellipses button
because I don't know the number now go
into GUI graphics and here's the top
left corner of my dialog box here so I
will click on it use this sprite and
then it changed from the arrow it
changed to the upper left corner of my
dialogue now I'm going to go through
each one of these this is the top so I'm
gonna go through and pick the top of my
dialogue which is this one this is the
upper right corner so I'll go through
and pick the upper right corner this is
the left
the right
and you'll see exactly what this looks
like and this hopefully this will all
become clear once I run the game because
uh in the goo in the editor it doesn't
really look right I mean it doesn't look
like any it's gonna look it doesn't look
like it's gonna be very good very good
text window you can't really tell what's
going on unless you know really they've
have seen it before but here I've got
all the elements I've got the corners
and I've got the edges here so that's
really what we need to do and now what
we want to do is go in there's one more
thing we have to do before you run the
game and that's go into general settings
and we have to tell the game to use this
GUI this gee GUI one that we just
created we have to tell it to use that
for text for um for text windows so if
you go down near the bottom here it says
text output and there's an option under
text output that says custom text window
GUI and by default it's 0 in other words
use the default GUI that's built into a
GS but we want to use the GUI we just
created which is GUI number 6 so I'll
type in 6 here it wants a number and not
a name you type in 6 which means that it
will use GUI number 6 for all text
windows so let's run the game and just
see how that looks just just based on
what we did this is our name dialog to
forget that one now our display dialog
comes when we look at these books so
let's look at ok so now notice that you
see the little squiggly now notice
across the top it's a really narrow wide
and and short dialog and you see that it
repeated that top graphic it just
repeated it over and over and over again
and then it draws the corner and then it
draws just as much vertical as it needs
to draws another corner just as much
horizontal as it needs to and so you see
how the it puts those pieces together
almost like a puzzle you know in Freddy
Farkas these corner pieces here would
have been would have been pistols for
example I mean these bottom you know
that kind of looks the the dialogue
looks silly and I wouldn't use this
dialogue I just put this together you
know really quickly but now notice
there's a little bit of a problem in
that the the text the the color of the
borders here is kind of a little color
this is but it's a different color than
this gray background that
the that's here so let's fix that
there's a couple of ways you can fix
that
the first way is you can define I'm
gonna go back to my GUI and there's a
background color by default that's 8
which is this gray color but if I
actually use the background color that
matches this background here that I have
in my and my borders which I've cheated
and I know that it is 2 7 2 4 3 and
again I use this by using the colors
dialog which we talked about in an
earlier video now that changed the color
to this purpley looking color that sort
of now matches the graphic now I'm gonna
rerun it again and you don't get that
gray box anymore that we got earlier so
now the whole thing is the same color
and it looks a little bit better when
you do it that way but you can also put
your own graphic here in the middle you
can draw like if you want a background
that looks like I don't know she of
paper or if you want you know something
that's in the background an actual image
or if you just want some kind of
textured effect you can put that in the
background as well by using this
background image so I select background
image eyebrows and I'm gonna pick this
this is just the millah graphic that I
drew and if you use the background image
it ignores this background color
property but now if I run that and look
at the books now you see how there's
sort of these little white lines that's
the graphic that I drew I just drew like
a 20 by 20 pixel image and it just tiles
that image across the entire length of
the of the dialog so you know you can
really customize how you want your
dialogue to look by using custom text
windows there that's what I wanted to
cover in this video in the next video
we'll get into a couple of more things
regarding gooeys we're not done yet so
join me the next video guys