Making my own GUI

[stuh505]

I want to start by remaking the simple window that pops up to show text to the player when they look at things.  I've looked through a couple tutorials but didn't find anything specifically on this.  I've made an image which I want to use as the basic background.  

1 - can anyone direct me to an information source on this?
2 - is it possible to have the gui automatically change it's size based on how much text is displayed, or do I need to just figure out how much will fit, and pause/display on a new window if it overflows the current one?
3 - in the GUI editor, I cant see how to import a new picture for the background.  
4 - what settings would I need to adjust to get this thing working as the default GUI for popup text?

[Darth Mandarb]

Look up in the manual: "Text Windows, Customizing" and take a read of that.  Basically, you need 3 pieces for the top (left, center, and right), 2 for the middle (left and right), and 3 for the bottom (left, center, and right).  You can also use a background, though this can be tricky.  It's best to just use a color.  (backgrounds in text windows don't repeat, so if you want a pattern, it's best to make a large background image)

The middle pieces, as well as the top/bottom center pieces, will repeat as the window expands/contracts depending on the size of the text being displayed.

To answer your questions:

1) Your best bet is the manual.  There's enough information in there to show you how to make your own text window, plus what I explained above.

2) yes, when you create a new GUI select (check box) "Text Window".  This will achieve the re-sizing you're speaking of (after customization)

3) You need to import the background image you want to use into the Sprite Manager, then in the GUI select 'background image' and point to the image in the Sprite Manager.  But be careful, as I mentioned, this can be tricky getting it to work right.

4) In the General Settings section there's a selection (check box) that says "Text Windows Use GUI" and then an input box.  Enter the number of the GUI you created.

[DragonRose]

Just a note about making images for text-boxes:

Make sure that you use something small for your edge pieces, and something repeatable.  That way it can increase or decrease in size based on how much text is in the box.  Which is good.

[stuh505]

Thanks, I got it

this brings me to a more complicated GUI question:

I want my inventory system to be a bit more complex than 1 simple panel that holds a scrolling list of items.

I want to have 6 inventory slots, each of which can hold only 1 item; an outfit slot, a right hand slot, left hand slot, and 3 pocket slots.

I don't see any specific support for this mentioned in the manual.  It seems like it could be done by making 6 separate inventories and displaying an inventory box for each, without scrolling enabled and just have each one sized to fit 1 inventory icon sprite.

However, the inventory manipulation functions do not seem to show support for multiple inventories...is what I propose possible?

[Darth Mandarb]

Wow!

This one might be a little out of my league.

I'm sure somebody knows a better way to do this.

Each character in a game has their own inventory so there might be a way to do it using multiple characters - for instance you could have a character called LeftHand, RightHands, Outfit, Pockets and you just display their inventorys all at once.  I'm not sure if that's possible though.

What I thought you could do to achieve this would be to not use the  actual inventory system, but variables instead.  To create your own inventory system.

So you'd have a variable for LeftHand, RightHand, etc.  And you'd assign the value for them based on inventory objects' numbers.

Does this make sense?

I've never done this before, though I thought about it back when creating my own custom inventory GUI.

[stuh505]

Ok I see 4 options, in order of easiest to hardest.

1) There is a built in way to do this.  If this is true, please let me know.

2) Do it using multiple characters each representing a different inventory.  This would require that inventories for multiple characters can be displayed on the same GUI.  Possible?

3) Code my own inventory system into a GUI.  This would require a pre-existing function that allowed me to display the image of a sprite at specified coordinates on a GUI.  Does this exist?

4) If all else fails, I could make the inventory screen a ROOM rather than a GUI where the character was invisible.  This would require a similar function, one that could display an image of a specified sprite to specified coordinates of the room.  Does this exist?

[RickJ]

Just use the current inventory system and enfrce rules about how things got added or deleted to the inventory.  So you would end up with something like the following:

• Inventory Item #1 - Outfit Slot
  
• Inventory Item #2 - Right Hand Slot
  
• Inventory Item #3 - Left Hand Slot
  
• Inventory Item #4 - Pocket Slot #1
  
• Inventory Item #5 - Pocket Slot #2
  
• Inventory Item #6 - Pocket Slot #3
  
  You will likely need to define a dummy inventory item with a blank image for the case when there is no item in the slot.  This will keep the slots in a constant position.  
  

[stuh505]

Rick,

that is not really what I am going for.

I don't know if you've every played Diablo or similar games but that is the effect I am going for; a character silhouette with slots over respective body parts so that the player can visually equip an item to a part of the body.

[Moox]

I used to be a pro d2 player on the ladder, I know what your talking about. I would make the image the background of the gui and use buttons instead of items that bring up a new inventory window of a new character so that you wont have to script all the possible items per slot. Just make a new character that can only have a certain item

[RickJ]

I would still use the character's inventory mechanism some thin like this...

• Use the AGS inventory mechanism to define inventory items.
  
  
• Instead of using the inventory window widget script your own inventory display.  Display this information on  a GUI as LostTraveler suggests or use some other methodoloy such as overlays or raw draw.  
  
  
• Use the GetInv...()  functions to look up the sprite id, invenotry name, description, etc.
  
  
• Create global variables to hold the inventory id's for each of the locations (i.e hands, pockets, etc).
  
  
• Make a couple of global script functions to manage the inventory.  Something similar to this.    
  
  Script Header
  

  #define NONE              -1
  #define INV_OUTFIT      0
  #define INV_LEFT          1
  #define INV_RIGHT        2 
  #define INV_POCKET1   3
  #define INV_POCKET2   4
  #define INV_POCKET3   5
  
  export function dbAddInventory(int item, int where);
  export function dbLooseInventory(int item, int where);
  

  
  
  Global Script
  

  
  DiaInventory[7];
  
  function DiaInitInventory()
  {
     int i;
  
     // Clear custom inventory slots
     i=0;
     while (i<7) {
        DiaInventory=NONE;
        i++;   
     }
     
     // Clear AGS inventory slots
     i=0;
     while (i<300) {
        character[EGO].inv=NONE;
        i++;   
     }
  }
  
  function DiaAddInventory(int item, int location)
  {
     int id;
  
     // Is location is not empty drop current item
     if (DiaInventory[location]!=NONE) {
        id = DiaInventory[location];
        DiaInventory[location] = NONE;
        character[EGO].inv[id] = NONE;    
     }
  
     // Add one unit of item to AGS inventory
     character[EGO].inv[item]=1;
  
     // Add one unit of item to custom inventory
     DiaInventory[location] = item;
  }
  
  DiaLooseInventory(int item)
  {
     int i;
  
     // Remove item from custom inventory
     i=0;
     while (i<7) {
        if (DiaInventory==item) {
           // Delete item from custom inventory
           DiaInventory=NONE;
        }
        i++;   
     }
  
     // Remove item from AGS inventory
     character[EGO].inv[item]=NONE;
  }
  
  
  

[stuh505]

Rick, wow!  Thanks for taking it upon yourself to write some of the function code for me.  I looked through it all, it all looks good except for 1 spelling error    I have a few questions.

1 - out of curiosity, what does "dia" stand for?  I cannot think of a logical reason why you picked this! haha

2 - "export function dbAddInventory(int item, int where);
export function dbLooseInventory(int item, int where);"

I can't figure out what these 2 lines do.  Usually in the header we have include files.  The notation in AGS seems to differ from C++ somewhat here in the header....what with the

and such, but export is the logical inverse of import.  Where is it being exported to?  Also, the "dbAddInventory" etc functions are not defined by you, and they do not seem to be in the list of AGS functions...so where do they come from?

3 -

• Instead of using the inventory window widget script your own inventory display.  Display this information on  a GUI as LostTraveler suggests or use some other methodoloy such as overlays or raw draw.  

Hmmm.  Lost Travellers method of using a button to open up new GUIs is creative (thanks for that idea btw) and I might not have thought of it.  (Of couse, most of the functions you defined would have to be rewritten...but this is not a problem, I could do that.)  But if I can make it look professional...I want to.  So, can you direct me to information on how to use these "overlays" or "raw draw" ?  I have no idea what you are talking about  

4 - From your code, I can see that AGS defines every inventory item with a -1 (char doesnt own it) or 1 (char owns it).  Interesting.  I did not realize that.  I guess this is not a question

[RickJ]

Rick, wow!  Thanks for taking it upon yourself to write some of the function code for me. ...  

Thanks for the complement and welcome to the AGS community

1 - out of curiosity, what does "dia" stand for?  I cannot think of a logical reason why you picked this! haha

You mentioned "Diablo" and "db2"...

2 - "export function dbAddInventory(int item, int where);
export function dbLooseInventory(int item, int where);"

I can't figure out what these 2 lines do.  Usually in the header we have include files.  The notation in AGS seems to differ from C++ somewhat here in the header....what with the

and such, but export is the logical inverse of import.  Where is it being exported to?  Also, the "dbAddInventory" etc functions are not defined by you, and they do not seem to be in the list of AGS functions...so where do they come from?

The export directive allows the functions to be used in room script files.  I made an error because I originally used "db" as the postfix  and then later changed it to Dia.   So those lines should be:

export function DiaAddInventory(int item, int where);
export function DiaLooseInventory(int item, int where);

I violated my own style rules in doing so;  I ususally like to use a 2 char lower case prefix to differentiate from the builtin AGS functions from global functions I create.   I normally group such related functions into modules and then use the prefix to identify the module.   This further helps eliminate the possibility of future name conflicts.

... So, can you direct me to information on how to use these "overlays" or "raw draw" ?  I have no idea what you are talking about  

Lookup in the manual RawDrawGraphic(), CreateGraphicOverlay() , and related functions in the manual to get started.   Do some experiments with each and then ask more qustions.

4 - From your code, I can see that AGS defines every inventory item with a -1 (char doesnt own it) or 1 (char owns it).  Interesting.  I did not realize that.  I guess this is not a question

Lookup "variables" in the manual.  You will find a charater struct array.  one of the elements is the inv array.  This is an int array where each element corresponds to an inventory item defined with the AGS editor.   I am not certain if  it is 0 or -1 that means the character is carrying the item.  I believe that any positive number is interpreted to mean that the character has the item (i.e. it's graphic will show in the inventory window).  This is sometimes useful as in the case of money, bullets, or other instances where the character can have multiple quanities of items.  

Happy game making ...

[a-v-o]

export function DiaAddInventory(int item, int where);
export function DiaLooseInventory(int item, int where);

it should be import though, shouldn't it?

[stuh505]

Ok, I've been doing some tests.  it's a little tricky, but I think it's all gonna work out - and with clean style.  RawDraw and GraphicOverlay both paint below the GUI layer, so I will have to make the inventory GUI invisible over the slots.  Then I will create an overlay showing the background of the slots to paint in the holes.  Then I will paint the actual inventory items over these.  The RawDraw's won't work because the images from them cannot be individually removed with an image ID like the Overlay images.  To complicate things, the "relative size" of my room is 400x300 (WHY!) even though everything is 800x600, so I need to divide all my coordinates by 2, which will cause some pixel rounding errors that will probably only be correctable by testing and adjusting exact coordinates.  Ok all sounds do-able.  

I would have it all done, but I just have a couple small technical difficulties implementing it.

1 - can't find where to put a script to execute upon the opening of the inventory GUI

2 - can't figure out how to access all the existing scripts for the AGS inventory system for modification; the edit script button brings up a bunch of inventory functions, but they are not ALL there...

3 - can't find where to put a script to have it execute whenever the mouse icon changes.  alternately, it could be running continuously and keep checking the mouse state.  (this isn't exactly for the inventory, this is for a cooler mouse system I am working on).

[RickJ]

Avo: Thanks for the correction, don't know what I could have been thinking.

RawDraw's won't work because the images from them cannot be individually removed with an image ID like the Overlay images.  

Just to clear up a small point here.  You could of course remove all of the images and then redraw the ones you wanted using RawDraw.  Since nothing actually happens to the screen until after your script finishes the result will be the same as using overlays.  As you correctly observe, using overlays  provides more ability to operate on a single overlay but the disadvantage is that the number of overlays is limited to something like 10 or 15 (I believe, no sure what the current limit is).  I don't mean to tell you to do it one way or the other, just wanted you to not misunderstand abolut RawDraw.

1 - can't find where to put a script to execute upon the opening of the inventory GUI

I would just create global functions that manage both and then call those functions whenever you wanted to open, close, or other operation on the inventory GUI.  Normally they would be called from the global script interface_click() event handler.

2 - can't figure out how to access all the existing scripts for the AGS inventory system for modification; the edit script button brings up a bunch of inventory functions, but they are not ALL there...

I don't understand the question.  

3 - can't find where to put a script to have it execute whenever the mouse icon changes.  alternately, it could be running continuously and keep checking the mouse state.  (this isn't exactly for the inventory, this is for a cooler mouse system I am working on).

I did something similar in the BlueGui and had to continously monitor the mouse.  If you want to look at my source code have a look at the source code follow my sig at the bottom of this post.

[stuh505]

EDIT -  

okay nevermind I find out how to find the rest of the scripts...the edit global script thing.  

I've decided to use RawDraw after all because Im going to have a lot of raw images (due to drawing lines to highlight inventory objects etc).

things are coming along well now

the only problem I have right now is that my buttons (non-square) are displaying their invisible parts.  Is there any way to avoid this, or is it just a rule that buttons can't have invisible colors?

[stuh505]

Update:  

• Visual representation of inventory system completed
  
  
• Mouse system completed
  
  
• Control bar completed
  
  http://www.2dadventure.com/ags/ss1.jpg
  
  Here's a screenshot so you can see how it's coming    the mouse is always a dagger, right clicking changes the picture in the upper right corner.
  
  Problem:
  
  When I try to call a function from the "start game" section of the global script, I get this error:
  
  

  
  An exception 0xC0000005 occured in ACWIN.EXE at EIP = 0x0041DOD4 ; program pointer is -42, ACI version 2.60.698, gtags(31,90)
  
  AGS cannot continue, the exception was fatal.  Please note down the numbers above, remember what you were doing at the time and notify CJ on the Tech forum
  

  
  
  However, I can call the function from any other time without problems!
  
  Do I need to put the function definition in a special place to prevent this error?  I'd like to separate some of my code out of the global script file if possible, to keep things less confusing...is this possible?

[Moox]

Brilliant Job, I probly dont know how to fix the problem but i recommend posting the global script so someone can

[stuh505]

hah....I'm an idiot.  nevermind about that problem.

But here's another dilemma: detecting when the player clicks on an inventory object.

my plan: add a conditional into the mouse is clicked script for if the inventory gui is on, then get the mouse.x/y coordinates, and compare to see what item that is highlighting, etc.  

the problem: the mouse clicked script doesn't get called if the mouse is over a gui when I click.  Is there another way I can do this?

problem 2: never noticed this in previous tests...but it turns out RawDraw paints under the character sprite.  So if the character is in the middle of the screen, they will be overlapping parts of the inventory....gah!  the graphic overlays DO paint over the sprite...but the cap is a mere 10.  that means things are goign to get a little funky no matter what option I choose.  I could use overlays just for the items, but it would crash the game if I pulled up an overlay inventory when I had 5 or more overlays already on a room (because inv could have 6).  So Il just keep it all RawDraw.

[Scorpiorus]

the problem: the mouse clicked script doesn't get called if the mouse is over a gui when I click. Is there another way I can do this?

You can handle over GUI mouse clicks via on_event() function (GUI_MDOWN/GUI_MUP events). There is a handy tutorial by Dorcan: http://www.digitalmindstudio.ch/script.php?id=1

~Cheers