HeroEngine Forums
Welcome, Guest. Please login or Register for HeroCloud Account.
Pages: [1] 2

Author Topic: Need help understanding GUI  (Read 3458 times)

Amarak

  • General Accounts
  • *
  • Posts: 281
    • View Profile
Need help understanding GUI
« on: Apr 04, 15, 01:00:45 PM »

Hi guys. I need some help understanding how to make a list of items show up as icons. Inventory is a good example. I know that an inventory is just a list of objects, and I know the GUI on screen of the inventory is just a visual representation of that list.

In simple code, could someone please explain this to me? I've been trying to learn this concept for 2 years now but just can't seem to grasp it since I don't know anyone to ask. I almost got the concept when I studied Java, but not quite.
Logged

FI-ScottZ

  • General Accounts
  • *
  • Posts: 1407
    • View Profile
    • Forever Interactive, Inc.
Re: Need help understanding GUI
« Reply #1 on: Apr 04, 15, 01:33:40 PM »

The GUI system is rather large and has a lot of possibilities.  I would recommend that, like any gui, you begin if you haven't already by designing it on paper.  How it is done will depend on the details desired.

For instance, should the icons be interactive, or just present read-only information?  That would affect which control is used for the icons.

Will the list possibly show more than can be viewed in the area supplied for it? That would affect which control is used for the icon container.  The _scrollableParent is good if you want a panel that will automatically provide a scrollbar if the items do not all fit visually.  A paging system where you click buttons to flip through pages would be another possibility.

The easiest way to create guis is with the GUI Editor, where you create the control hierarchy visually.  I'd recommend working through the gui tutorials to learn the system, as it is all a bit much to cover in a forum post.

The Developer Created Tutorials also contain some hints on guis.
« Last Edit: Apr 04, 15, 01:35:44 PM by FI-ScottZ »
Logged
Scott Zarnke
Lead Programmer, Visions of Zosimos
CTO, Forever Interactive, Inc.

Amarak

  • General Accounts
  • *
  • Posts: 281
    • View Profile
Re: Need help understanding GUI
« Reply #2 on: Apr 04, 15, 01:38:47 PM »

Thanks for the reply. I've gone through all of that already. I just don't get the basic concept of the list of items, say 3 items, how do I load those into the GUI? I know it's easy but nobody so far has actually explained it to me in simple terms I can understand. :)
Logged

FI-ScottZ

  • General Accounts
  • *
  • Posts: 1407
    • View Profile
    • Forever Interactive, Inc.
Re: Need help understanding GUI
« Reply #3 on: Apr 04, 15, 04:40:15 PM »

The GUI Window Tutorial shows how to create a window with a scrollable panel, which might work for you.  But there is also the _window control which already has all of that built in.  So you could create a gui that inherits from _window and either use the class that it uses (_GUIBaseWindow, which is automatically filled in to the creation dialog when you select _window as the Inherit From control) or specify a client class of archetype GUICONTROL and which inherits from _GUIBaseWindow, and specify that class for your control in the dialog AFTER setting _window as the Inherit From type.  Specifying your own class for guis is one way you can customize their behavior, the other being glomming a class onto a control after it is exists at runtime.

After you create the gui, it will open your control in the GUI Editor.  To add a new control, you need to select which existing control will be the parent of the new control. Look on the Properties Panel for the gui tree that shows the controls that are part of the opened gui. Drill down in it until you find the control called clientarea under a control called scrollable.  With that control selected in the tree, go to the GUI Editor panel and find the control type you wish to add.  The simplest for your use would be _panel.  Double-click that name in GUI Editor panel and an instance of it will be added to the children of the control currently selected in the Properties Panel.  After you add a control, it will be selected in the Properties Panel, so to add more, you would need to re-select the clientarea control again so that it will be the parent of the next new control.

For each panel you add, you could manually set their size and position as you wish to have them.  Another possibility is to set for each panel the DockMode property to TOP and then set their size.y property to the desired size.  That will line them up vertically with each one having the width of their parent (clientarea).  To use them for images, you need to set up the texture coordinates.  Set the Texture property of one to the path of the image in your Repository, preferably whose dimensions are each a power of two.  Then set the defaultStatePresention position and size to use the whole image.  Then copy those same texture coordinates to each of the other panels.

Save the gui.

This shows one way to create the gui at runtime.  After creating the control instance and setting controlName.build = true (very important, since child controls are not created until this step is performed).  You would use FindGUIControlByName() to get a handle to each panel and then set the texture property on each one to the path of the image desired as it is in your Repository.  Which images to use would depend on the particulars of the inventory you are showing at the moment.



There are many other ways this could be done.  You'll have to experiment with the GUI editor, as well editing the XML files directly, to gain an understanding of all that can be done.

I hope that helps you get started.
« Last Edit: Apr 04, 15, 04:44:15 PM by FI-ScottZ »
Logged
Scott Zarnke
Lead Programmer, Visions of Zosimos
CTO, Forever Interactive, Inc.

Thazager

  • General Accounts
  • *
  • Posts: 1138
  • Never stop learning
    • View Profile
    • Heroes and Villains MMORPG
Re: Need help understanding GUI
« Reply #4 on: Apr 04, 15, 07:51:43 PM »

From another perspective or angle, a GUI is just a picture on screen. An icon is also just a picture on screen, but it shows on the main gui, like an inventory of items. In the inventory, we have slots or containers for the icons (item pictures) to show. There are a few ways of setting up the slots in the inventory. A slot is first made as a container or panel type, which will hold the item picture in it. Usually it has a square edge with empty looking middle.

Slots by code
In code slots can be made using offsets and spacing between each one in the inventory. for example 5 rows of 4 columns. Where the amount of slots is easy to update if needed. Maybe moved them a little closer to each other, or change the size of the slots.

Slots by gui editor
In the gui itself, slots are more of a hard coded, because to change this type you need to reopen the editor and shift the individual slots around so they are set where you want them.

A list of items, has data values for each item. It has a picture to show in the icon, a name of the icon, a type of icon (like stackable or not), and other such values. These icons can be a panel that displays the picture on it. The panel is added to the container to show the item in the slot. Usually best done through code, so that it can also be removed when needed. The picture for each icon is stored on a picture file, similar to the ones in the editor. (check their item sheet.) it has rows and columns of pictures. The offset to each picture is also part of the data for each item.

client as noderef of class guiControl = findguicontrolbyname(Win, "clientarea")    // where win is the main gui already found
slot as noderef of class container = createguicontrolbyprototype("myslot")      // where myslot is a prototype gui
slot.position.x = Xloc
slot.position.y = Yloc

add back slot to client.children

// not sure of exact spelling (from memory) - createguicontrolbyprototype()
Logged

Amarak

  • General Accounts
  • *
  • Posts: 281
    • View Profile
Re: Need help understanding GUI
« Reply #5 on: Apr 04, 15, 10:24:01 PM »

Thazager, this is a lot of work you did and I appreciate it. I can make a GUI easy enough, it's linking it to the item list that I still don't get.

How does the icon slot know what to put/show in it? How does the Inventory GUI with a bunch of slots know which list (of items) to use? I'm still not getting the one simple answer that will allow me to understand. :-\
It is possible I'm not asking the right question, LOL
Logged

Thazager

  • General Accounts
  • *
  • Posts: 1138
  • Never stop learning
    • View Profile
    • Heroes and Villains MMORPG
Re: Need help understanding GUI
« Reply #6 on: Apr 05, 15, 02:02:43 AM »

What I do might be a little different from others, but I save a list (by item#) on the player. Similar to E_hitpoints which is an integer, itemList can be a list of integers. Each item is saved in a different slot. This list can grow or shrink, but is usually defined with an initial size. When you look up the item#, it has data with it, some like to put that data in a spec, some will use a datatable. Either way its just info about each item, with the item# being the offset into that list.

The list of actual data is defined separate from the list of stored items on the player. The player has the item#, which is used to find the itemData in the list. When the data is found, its used to show the item in the slot.

example:
player has 3 items
itemList[1] = "spellbook" which has an item number to tell it apart form other spell books item# = 23
itemList[2] = "weapon"   "" "" item# = 437
itemList[3] = "armor"     "" "" item# = 1245

items in spec or list
Item# 23 -->   data = guisheet# 7, picture #42, name "spell book of the wizard", Level usable 10, ...
Item# 437 ->   data = guisheet# 12, picture #85, name "broadsword", level usable 3, ...
Item# 1245 -> data = guisheet# 18, picture #15, name "chest plate", level usable 5, ...

When we load the list of player, we find the 1st thing in the list is #23, we then look at the list in the ItemList and get its data, we load the guisheet, and get the picture offset for the display, we then print some data like name and level.

Code: [Select]
acct as noderef of class _playerAccount = GetAccountID()
player as noderef of class E_playerCharacter = acct.GetMyCharacter()

itemList as list of integer = player.itemList    // get list from character
offset as integer

loop i from 1 to itemList.length    // for each item in list
  offset = itemList[i]
  dataList as list of string = getItemData(offset)    // get values from the data
  guisheet as string = dataList[1]          // 1st part is sheet name
  picOffset as string = dataList[2]         // our offset into the gui
   // .... and so for the rest
.
Logged

Amarak

  • General Accounts
  • *
  • Posts: 281
    • View Profile
Re: Need help understanding GUI
« Reply #7 on: Apr 05, 15, 11:25:10 AM »

So when you say offset, that is just the word you use to name the location of the icon?
I understand that the "loop" just goes through each item in the list.
itemList[1] is the location of the item in the list, so some locations can be empty, like empty slots in a backpack while others will have items?

I almost get it, but still don't quite see the relation of the item# and the slot location. I mean, where in here does it show which icon to use in which offset? I believe that is the part I am not seeing. The offset is an integer, how do we make that connect to the inventory panel and how are the offsets made in the GUI?

In other words, say there are 12 slots in the GUI inventory window, where/how are they named in such a way that the inventory list can correlate? Again, thanks for the help, I just am not grasping this one little thing!

I have indeed gone through the GUI tutorials, and can design some complicated GUIs in the Editor. I just haven't figured out how to use them in run time. You might need to pull out the crayons to teach me this. I mean, I can make clickable buttons in my GUI that do stuff, it's just the List thing that is causing me the confusion.

I'm going to go work on it some with my Java book, since it is the overall concept I'm not getting. Lits of items = list of offsets...
Logged

FI-ScottZ

  • General Accounts
  • *
  • Posts: 1407
    • View Profile
    • Forever Interactive, Inc.
Re: Need help understanding GUI
« Reply #8 on: Apr 05, 15, 12:01:43 PM »

Quote
In other words, say there are 12 slots in the GUI inventory window, where/how are they named in such a way that the inventory list can correlate?

If I may jump in here, what Thazager is suggesting is that you would create each panel that will show an icon at the time you are showing the inventory, or at least when it is being updated.  So the first icon put in will correspond to the first index (or "offset", if you prefer) that is in player.itemList.  The second icon will show the image for the second item in player.itemList, and so on.  What Thazager did not put in that loop was that after getting picOffset (which should be a path to the image file in your repository) you would create an icon panel, add it to the inventory gui's icon container, and set that icon panel's texture to be picOffset.  By doing that for each item in player.itemList, as player.itemList changes, the view of it in the inventory gui will change to reflect that.

You would need to do an update when the inventory is created and whenever the player.itemList changes, and when updating first clear any icon panels already in the gui.
« Last Edit: Apr 05, 15, 12:06:19 PM by FI-ScottZ »
Logged
Scott Zarnke
Lead Programmer, Visions of Zosimos
CTO, Forever Interactive, Inc.

Amarak

  • General Accounts
  • *
  • Posts: 281
    • View Profile
Re: Need help understanding GUI
« Reply #9 on: Apr 05, 15, 12:28:01 PM »

Ok I am getting closer to understanding. You guys are awesome! The one thing I am trying to find out is something you may have explained already but I am not getting:
How does the GUI know to use the player item list? It is how they are connected that I still don't see. I guess I need a line of code and a description saying exactly "this says for this GUI to use this list". I'm sorry for being so slow about this one concept.

That connection is the one thing I need for now so I can make inventories, banks, loot containers, spell books, crafting recipes, etc.

I know when I figure this out I'll say "Duh! *SMH*"
Logged

Amarak

  • General Accounts
  • *
  • Posts: 281
    • View Profile
Re: Need help understanding GUI
« Reply #10 on: Apr 05, 15, 01:09:37 PM »

Um...is it in the GUI Class Methods script that tells it what list to use? It just occurred to me that the class methods script for the GUI happens to be specific for that GUI...sooo...
Do I smack my head now?
Logged

Thazager

  • General Accounts
  • *
  • Posts: 1138
  • Never stop learning
    • View Profile
    • Heroes and Villains MMORPG
Re: Need help understanding GUI
« Reply #11 on: Apr 05, 15, 06:28:44 PM »

When you open the gui, whether its the inventory, bank, loot container, or other, that gui determines which to use. Each has its own script. The inventory has its script, in that script it has a method to check mouse and button clicks. The bank has its own script, with its mouse method, as do the others. Each one is also a class. Inventory is a class, using a gui archtype. A good parent for most window Guis would be _guibasewindow. It has most of the fields you would want, plus you can add in some different fields, depending whether its the inventory, the bank, or the loot container.

So, you would make a class for each GUI you wanted, add a parent, and some fields. When making the GUI itself, you could inherit from a base template you made or make each gui different. On the player character, you would save a list for the inventory. In the InventoryClassMethods script, you would load in the inventory list. The list would contain a spot for every item the inventory can hold. If your inventory can hold 30 items, the list has 30 values. In this list the first item[1] tells what is in the 1st inventory slot. If it contains a 0, it has no item there, so it would skip showing any item in this slot. This is done individually for each Container type you had - inventory, bank, loot container, and others.

on character
player.inventory     // list of inventory items
player.bank           // list of bank items
player.loot            /// list of items in loot container

Logged

Amarak

  • General Accounts
  • *
  • Posts: 281
    • View Profile
Re: Need help understanding GUI
« Reply #12 on: Apr 05, 15, 07:13:31 PM »

Thanks, I think I finally get it. The GUI class methods for the Inventory has the methods for the inventory icons and all that. This is where I was getting confused, I wasn't thinking about the fact that each GUI has its own class methods in which to tell it how to populate the icon slots.
  :o

Logged

keeperofstars

  • General Accounts
  • *
  • Posts: 998
    • View Profile
    • StarKeeper Online
Re: Need help understanding GUI
« Reply #13 on: Apr 05, 15, 08:19:56 PM »

not to throw a different approach but...

With use of the Item System and the Icon System you can create a really robust setup without a ton of coding work that is highly manageable.

Nice thing with the Icon System, is it has a ton of drag and drop / swap functionality already in place.

The Item System then has the ability for stacking etc, along with some of the other key elements you will need. Also it provides the concept of containerOwnership which is helpful for when you are needing to transfer objects from one owner to another. Such as from a player inventory to a bank.


http://hewiki.heroengine.com/wiki/Icon_System

In the icon system it has you provide the texture / display values for the icon.

////
//  With the given texture list, icon size, and icon id. Sets the defaultStatePresentation of the control
//    provided by _GetIconImage()
////
method _SetIconTexture(textures as List of String, iconSize as Class xy, theIconID copies Integer) as Boolean
 
And a ton of other Icon related features, like what icon to use when dragging an item, etc etc.
Logged
[img]http://screencast.com/t/x7btcSSyp3h0[\img]

Amarak

  • General Accounts
  • *
  • Posts: 281
    • View Profile
Re: Need help understanding GUI
« Reply #14 on: Apr 05, 15, 08:29:21 PM »

Yes I like the Item System, but again I don't think it has a GUI already set up so my questions still applied. :)
Logged
Pages: [1] 2