How to use AGS Part 43 (List Boxes) Video Lecture | Learn and Master: Adventure Game Studio (AGS) - Game Development

hi guys welcome back to another AGS
tutorial i look'd was looking back long
before i you know quit for six months
and didn't make a video and I realized
that we were doing remembered that we
were doing gooeys the last time so I was
gonna do a couple just a couple more
videos on gooeys to finish that up
before I move on to something else what
we're gonna do in this time is if you
remember before I'll bring up the the
name GUI that we talked about before and
if you remember we we did a GUI where it
had a button oops didn't mean to do that
we had a button a textbox and a label
and that was just three of the controls
up here that you can choose from button
label and text box there's actually
three more and I was gonna go over these
three actually to one of these in this
video and we'll go over the other two in
future video this one I'm going to talk
about is list box now list box is just a
list of items it's a way to display a
list of items to the user and let them
choose one of the items you know from
from a list so first of all I'll show
you what we're trying to accomplish here
so this is what we're gonna create in
this video we're gonna create a dialog
box that basically asked the user to
choose their personality this isn't
something I didn't in Sammy's quest it's
just an example of something of some way
that you could get the user for example
choose from a couple of different values
so it's gonna ask choose your
personality you can either choose I'm
mad or I'm happy if you choose mad
there's a little picture over here of a
cat with a with a gun aiming out the
window and if you choose happy it shows
a picture of a monkey smiling so
whichever one you choose it will change
the picture according to which one of
everyone you choose and then you click
OK and we'll go from there and the
dialog box will go away and you'll be
able to play your game so that's what
we're trying to do and then let's get
started
first thing you want to do is
right-click on gooeys
and create a new one so new GUI and
we'll call this one let's say let's call
this one G list box what we're gonna do
as you saw is have the user choose a
personality so the first thing I want to
do is resize this this this dialog box
so let's make it 100 pixels wide let's
say by oh I don't know 150 pixels tall
yeah that's that looks about right
and then let's go ahead and put our list
box in the middle here we gotta save
room for the picture on the side so
let's put our list box about like this
make it a little bigger so it fits and
then now the picture on the side is not
there's no control up here to allow us
to display a picture directly there is
one however in the button we can
actually put a button on the side and we
won't do anything if the user clicks on
the button we'll just use this button
strictly for displaying a picture as you
saw in the in the sample so I'm gonna
click that button then and the first
thing I'm gonna do is take the text out
of it
so go down here to the properties and
remove the text from the button which
basically gets rid of the of the button
makes it invisible which is okay but I
really want it to be 50 pixels tall or
wide by 650 pixels tall because that's
the size of the sprites that I'm going
to use when displaying the monkey and
the cat so that's what I want and then
I'm gonna put a label across the top
that says go down here to text change it
to choose your personality and that
looks good now we just need a button at
the bottom that they can click on to say
okay
you see how easy this is once you start
laying out your dialog box is fairly
easy to do I'm gonna make that text
centered now the next thing we want to
do is import our sprites the problem is
is that the the sprites that I got off
the internet I just did a google search
and look for those sprites I'll bring
them up here this one here is the kitty
sprite and then this one is the monkeys
pride and for one thing they're
different sizes for another thing
they're too big they're far too big to
put in our game we really want to reduce
these down to 50 pixels by 50 pixels and
there's no way to do that within a GS
you really have or at least not that I
know of
you really have to scale them down
manually in a graphics program I'm using
paint.net let me make this window
smaller so you can see I'm using
paint.net here so I have the kitty image
open here and in paint.net if you search
for it it's a free program you go up to
image resize and I'm gonna make this 50
pixels by 50 pixels which reduces the
image quality quite a bit but for this
purpose I think that's okay
I'm gonna do the same thing with our
monkey a big smiling monkey okay so
that's good so I'm gonna save these save
these back out to the desktop back of
that and then let's go back to AGS know
in AGS I'm gonna open up our sprites
folder go into the gue graphics folder
which I created last time right click
import new sprite from file select Kitty
sniper now you want to make sure here
that you that you select no transparency
in the transparent color box because we
don't want any transparency in this
particular graphic we don't want to be
able to see through any part of this
image so make sure you select no
transparency otherwise it'll look sort
of strange and we want to import the
whole image
there's no tiling here so we'll just say
import whole image do the same thing
again this time we'll do the mochi image
no transparency import whole image there
we have our two graphics
that we're gonna display so now let's go
back to our list box GUI now by default
it's gonna be the very first the first
selection is going to be default which
which will be our kitty graphics so by
default we want this to display our
kitty image which is image number let me
go back to the sprites image number 711
is our kitty image and then image number
7 12 is our monkey so the default one we
want is 711 and there's our cute little
kitty with a gun and it's hard to tell
at that resolution what that is I might
be able to play with that and make the
GUI a little bit bigger but for now this
is okay you get the idea because I made
this image so small it's hard to tell
exactly what it is but anyway so that's
what we want to do there now we want to
fill in we want to put two personalities
here mad and happy we can put more I
just chose not to it shows two items
here that doesn't mean you were limited
to two items you can put as many as you
want and if you put too many that will
fit in the window here it will create a
scrollbar for you and you'll be able to
scroll and things like that but for now
I'm just gonna create two so the first
one is gonna be man and the second one's
gonna be happy now there's nothing
there's nothing here and the properties
that let you add add elements to the
list box so we're gonna have to do that
within the script within the the room
script so let me go back to our rooms go
back to main hall and go into the room
script and if you remember this is where
I showed the player named GUI last time
or a couple times ago so here instead of
displaying the players name I'm just for
demonstration purposes I'm gonna comment
this out and I'm gonna display the
personality dialog box so I'll just
replace the name box with a personality
just to give you an example here so I'm
gonna say gee list box which
this box GUI visible equals true just
like before but before I show it I want
to this is where I want to add the items
to the list box so the way you do that
is if you remember let me go back to the
list box GUI
this is the actual list box here and it
was called in the properties here the
name of the list box is list box one so
that's how we'll refer to it in the
script so let me go back to the room
script and say list box 1 dot add item a
head item and it just once a text a
string of what you want to add well the
first item I want to add is mad there's
a little frowny face and then the second
item I want to add so I'm just gonna do
that again let's box 1 dot add item
happy and put a little happy face I know
it's pointless but that's just to give
you just to give you an example of how
to use this thing so I have the two
items basically this said add am add
item and then add a happy item to our
list box and then display the list box
but we're not done yet we haven't got it
quite working yet so I'll finish it up
finish up the list box in the next video
so hope to see you around guys thanks