Print

[Mikey90]

I was wondering how I would go about creating my own custom GUI for this. I looked at the example but I can't for the life of me figure out where they're getting the lines from. I don't see it on the cleanenginegui.dds file when I try to follow the position coordinates. Any help would be much appreciated.

[HE-JAY]

I assume you're talking about the _textInputBox gui control; if not, stop me now! (:

Gui controls have - for the most part - two basic components: the visualization/structure, and the underlying hsl code (functionality).

The visualization/structure is defined by the guixml for the control (which is generated from the GUI editor when you create or edit a control); this structure can contain a complex hierarchy of GUIControls. For example, the _textInputBox control has four children which define the borders of the control (top, bottom, left and right). These are simple _panel controls and just have their background set to the color black (no texture is used). If you want to redefine the look of a clean-engine control, it's recommended that you derive a new control from it (by creating a new control in the GUI Editor) and naming it something unique (for example, M_textInputBox). If you want it to handle input events in a unique manner, you would also want to create a new class, implement the new event handlers inside of it, and base your new GUI control off of that class.

Instructions on how to do this is located at:

• http://wiki.heroengine.com/wiki/GUI_Editor
• http://wiki.heroengine.com/wiki/GUI_Events
• http://wiki.heroengine.com/wiki/GUI_Controls

If you have any additional questions, don't hesitate to post here. I'm glad to offer assistance.

-Jay
 

[Mikey90]

Thanks a lot Jay. That really helped. However, I'm still confused on how the _panel controls are being drawn. And if I wanted to create say an actual textInputBox based off of a texture. Would I need to do the four borders?

[FI-ScottZ]

Would I need to do the four borders?

I'm not sure exactly what you are asking, but if you want the four borders, you can inherit from the control and you'll get all of its components, ready to be modified.

But if you don't, then don't inherit.  We've found that when you inherit from a control, you cannot delete any of the inherited components, at least we couldn't seem to get that to work.  The properties can be changed, so you could hide them, but what's the point of inheriting things you don't want? In that case, you can just find the source code of it in its XML file, copy that and paste it into a new control, then delete what you want.

I believe all controls have a texture property, although only some actually use it, specifically the panels.  So if you set the texture to point to an image file, then you can set the size and position (in texture coordinates), and optionally the color for it in the appropriate presentationSettings fields, doing so at least for the default.

One little wrinkle if you haven't used them yet, is that regardless of the image's actual dimensions, or the size of the control, the extents of the texture coordinates are always a power of two.  So going all the way across an image would either be 128, 256, 512, or something like that, and so your texture coordinates need to be based on that, rather than the image or control sizes.

[JoshHalls]

Our main GUI textures are just packed into 1 or 2 textures since we use the 9slice stuff quite a bit (for the most part the center part of a window is all the same so you just need the borders).  I would look into that as well if you are not familiar with it as it will save you a ton of texture space.  We have a handful of controls in just a 256x256 texture because of that.

Their GUI system works on top of templates.  Say I create REPOP_Dropdown.  I add in all the base controls I want along with any visuals (such as panels or 9slices) and then I can drop that dropdown into another control (say REPOP_Dropdown_Label) that includes a label and a Dropdown.  Things get fairly nested over time.  Each control can have an associated script as well that tells it what to do when it is initialized or you can send commands to it to perform different functions, etc.

Our main windows are like that of course as well.  They all use a standard design and the controls go into it.  If we want to make a visual change we just update the main template instead of 20 different controls.

[Mikey90]

Wow, you guys have all been very helpful. Thanks so much.

@joshhalls - I wanted to create the 9slice but I'm not exactly sure what to inherit it from. There's 3 different elements with that name. Another thing, when creating the 9slice are things created only on a per section basis? For example I want to make a 50x100 bar and then a 100x50 bar. Using the same texture I could establish the different corners and center in order for it to work right?

Also, if I'm using a 9slice how would I get the actual text input to work with it? I haven't been able to find an actual way of making the cursor render on it. But, I might be looking in the wrong place.

[FI-ScottZ]

_panel9Slice is the basic control itself.  There is also a GUI9SliceWrapper, which is a panel that has a 9-slice called cover and a panel called controlArea.  I haven't used that second one, though, so I can't vouch for it.

As far as text goes, the 9-slice is just a panel for displaying an image; it can't do text.  So you would need to have a separate TextInput control involved, either as a child of the 9-slice, positioning, sizing, anchoring, etc. as appropriate, or part of some larger hierarchy.  The 9-slice will just sort of be providing a backdrop.