HeroEngine Forums
Welcome, Guest. Please login or Register for HeroCloud Account.

Author Topic: GUI basics  (Read 2264 times)

Thazager

  • General Accounts
  • *
  • Posts: 1160
  • Never stop learning
    • View Profile
GUI basics
« on: Feb 21, 14, 08:51:42 PM »

Working with GUIs.

The GUI Editor can be found on the HeroScript tab on the top line of the Editor.
The wiki, on this page - http://hewiki.heroengine.com/wiki/GUI_Editor - show users how  to work with the GUI Editor, except  that the toolbar is no longer there. There is a smaller toolbar that shows.

In my tutorials, I make use of the GUI Editor. Here is an example:

In the GUI editor create a new GUI,
name = TMP_LogoutWindow
inherited from = _GUIBaseWindow
class TMP_LogoutWindow

This window can be seen  here.

Basics with GUIs.
Some GUIs will need a class definition. These are the GUIs that are the base for the system, like a chat system, a hotbar, a minimap, a vendor, or any that are stand alone features. Others that don't require a class definition but can make use of one are those like panels, buttons and other sections of the main GUI.

The name of the GUI control matches the class name. The class name will add ClassMethods to the end for the name of the script. This allows methods to be created in the script. Many of the GUI features like buttons, sliders, resizers, and inputboxes work better when using a method instead of a function.

Many GUIs will make use of the _GUIBaseWindow as a parent. This allows the main GUI to move around on screen. Some GUIs that don't need to move around can use the _panel for a parent. The _GUIBaseWindow also allows the use of a field called owner. When set, this lets the window to move around without being connected to all other windows. Control g is a toggle used to hide all GUIs on screen in order to see behind them. This works if the layer of the GUI is set to game.

Making a GUI.
When making a GUI , after its defined, the parent is the on the top line in the Editor. It is the background for the GUI that is created. It can be made see through by setting the defaultStatePresentation.color.a to 0. Sometimes you will also need to set hoverStatePresentation.color.a to 0. This is needed for buttons and other features which have a hover value.

Setting the docking on a GUI, will make that GUI location on that side of the parent. For example, DOCKLEFT will make the GUI as tall as the parent GUI and on the left side. This can be useful for when you want to make a GUI always appear on one side even when the user changes the screen resolution. I usually make an empty panel and add all features to that panel, that will be set to a certain side. Dock mode will often override the sizes and positions of the GUI. When setting dock mode left, you can effect only the width or size X.

Using autocenter horizontal and vertical can help in placing the GUI in the correct position.

When adding one type of GUI to another type, select the parent in the list on the properties page, then on the GUI editor page, select the GUI to be added and double click to add it. For example, adding a label to a panel. Select the panel in the tree, then double click label in the GUI editor page.

Script references for buttons and sliders will look for the name of the GUI part in the method. The name should be set to something that is different from other parts of that GUI. As each GUI will have its own script, it is ok to have the names similar from  one GUI to another. For example, the hotbar might have names like button1, button2, ... and the vendor might also have names like button1, button2, ...  It can be useful to name them something similar to this so that methods can be made with less code.

When making complex windows with many different parts, it can help to make the parts in a separate GUI, and then add to the main. Things like an Options window, can have each panel set up for its own use - sounds, mouse, key configuration, and graphics, then added to the main optionWindow.

GUIs sections can be moved by dragging and dropping them in the tree view on the properties panel. They can be moved from one parent to another, or from child to parent, or from parent to child. They can also be moved from the front of list to further back, and from back to further front, by using the 2 left icons in the toolbar. The next icon is the save, which should be done often.  The far right icon is exiting. After exiting the GUI Editor, you may need to wait a few seconds for the GUI to be sent to the server for all to use. This will show in the console window as the name is saved.

When making a GUI, the sections which I usually check/change are name, position, size, sometimes dockmode, autocenter, texture if needed, layer, and the colors set in defaultStatePresentation and hoverStatePresentation. These are the common ones. The others are useful for when you need to add more than just the basics to a GUI.

Scripting GUI features.
There are different methods names to use for  when some GUI parts need script interaction. Such things like buttons, sliders, check boxes, mouse wheels, dropdown boxes, are all parts that will need a script to work properly. Below I have added some of the basic methods to use for those features that I have used in my code.

mouse buttons
Code: [Select]
method _OnButtonMouseClick(button as NodeRef of Class _GUIButton, args references Class GUIMouseEvent)

  when button.name
    is "button1"
      doFunction()
    .
  .
.
 

mouse clicks  (this can also be used to click on panels)
Code: [Select]
method onMouseClick(args references Class GUIMouseEvent)
  target as NodeRef of Class GUIControl = args.source
  when target.name
    is "panel1"
      doFunction()
    .
  .
.
 

check boxes
Code: [Select]
method _onCheckboxMouseClick(args references Class GUIMouseEvent)
  checkBox as NodeRef of Class GUICheckBox = args.source
  when checkbox.name
    is "checkbox1"
      doFunction()
    .
  .
.
 

mouse wheel
Code: [Select]
method onMouseWheel(args references Class GUIMouseEvent)
  var win = FindGUIControlByName(None, "game.OptionWindow")
  c as NodeRef of Class GUIScrollablePanel = FindGUIControlByName(main, "graphics")
  if c = None
    return
  .

  where c is kindof GUIScrollablePanel
    if args.wheelDelta > 0
      var newOffset = c.offset.y - 60       // 60 is size of the scroll
      if newOffset < 0
        newOffset = 0
      .
      if newOffset > (c.area.y - c.size.y)
        newOffset = c.area.y - c.size.y
      .
      c.offset.y = newOffset
    else
      var newOffset = c.offset.y + 60
      if newOffset < 0
        newOffset = 0
      .
      if newOffset > (c.area.y - c.size.y)
        newOffset = c.area.y - c.size.y
      .
      c.offset.y = newOffset
    .
  .
.
 

sliders
Code: [Select]
method _onSliderValueChange(args references Class GUIValueChangeEvent)
  slide as NodeRef of Class GUISlider = args.source
  when slide.parent.name
    is "slider1"
      doFunction()
     .
  .
 .

dropdown boxes
Code: [Select]
method _onDropDownBoxValueChange(args references Class GUIValueFieldChangeEvent)
  when args.value
    is "dropdown1"
      doFunction()
     .
  .
 .
 
Logged
Lead scripter for EO, Repop helper.
HSL Video tutorials:
https://community.heroengine.com/forums/index.php/topic,1719.msg36858.html#msg3685