GUI Editor

From HEWIKI
(Difference between revisions)
Jump to: navigation, search
(redesigning the page, making it easier to understand and get started using the GUI Editor)
(added GUI Control property category descriptions)
Line 33: Line 33:
 
=== Appearance  ===
 
=== Appearance  ===
  
The [[GUI Controls#Appearance|Appearance]] section of properties controls how the GUI Control's texture is displayed to all of the state presentation properties as well as the <code>texture</code> property, which is the Fully Qualified Name (FQN) of the texture file in the [[Repository]].
+
The [[GUI Controls#Appearance|Appearance]] section of properties controls how the GUI Control's texture is displayed to all of the state presentation properties as well as the '''texture''' property, which is the Fully Qualified Name (FQN) of the texture file in the [[Repository]].
  
 
[[Image:GUIProperties_Appearance.png|GUIProperties_Appearance.png]]
 
[[Image:GUIProperties_Appearance.png|GUIProperties_Appearance.png]]
Line 75: Line 75:
 
In both cases, positive-x points toward the right edge of the image, while positive-y points towards the bottom. However, if either of the size xy fields are given negative values, the image will appear reversed along that axis, making it possible to reuse a single piece of a texture up to four different ways.  
 
In both cases, positive-x points toward the right edge of the image, while positive-y points towards the bottom. However, if either of the size xy fields are given negative values, the image will appear reversed along that axis, making it possible to reuse a single piece of a texture up to four different ways.  
  
Note that one approach taken by some art departments is to create their GUI art at double the intended size, to allow for less pixelization when a control is scaled. In a situation such as this, the state presentation dimensions would still follow the same procedure as with a normal-sized texture, as the size field of the control still dictates its displayed appearance. For example, an icon whose art is created at 128x128 pixels may still be displayed as a 64x64 icon, simply by setting its state presentation size to 128x128, and its actual size to 64x64.  
+
Note that one approach taken by some art departments is to create their GUI art at double the intended size, to allow for less pixelization when a control is scaled. In a situation such as this, the state presentation dimensions would still follow the same procedure as with a normal-sized texture, as the size field of the control still dictates its displayed appearance. For example, an icon whose art is created at 128x128 pixels may still be displayed as a 64x64 icon, simply by setting its state presentation size to 128x128, and its actual size to 64x64.
  
[[Image:Gui editor texture viewer.png|400x500px|Texture Mapping in a state presentation]]  
+
[[Image:Gui_editor_texture_viewer.png|400x500px|Texture Mapping in a state presentation]]
  
<br>  
+
<br>
  
 
==== Color in a state presentation  ====
 
==== Color in a state presentation  ====
  
'''Color''', a complex field of type rgba, is most often used to set the background color of a control which has no texture applied to it. This simply fills the control with a solid color, such as the titlebar of the texture viewer to the right. If you are familiar with the 0 to 255 scale for RGB, rgba simply translates that into a float of range 0 to 1, with alpha (color.a) equating to completely transparent at 0, completely opaque at 1.  
+
'''Color''', a complex field of type rgba, is most often used to set the background color of a control which has no texture applied to it. This simply fills the control with a solid color, such as the titlebar of the texture viewer to the right. If you are familiar with the 0 to 255 scale for RGB, rgba simply translates that into a float of range 0 to 1, with alpha (color.a) equating to completely transparent at 0, completely opaque at 1.
  
 
If a given state presentation has all three fields set, the texture's colors will be multiplied on a per-pixel basis by the RGBA you specify via the color field, essentially adding a tint to the texture. Texture multiplication is beyond the scope of this document, but here are a few simple guides:  
 
If a given state presentation has all three fields set, the texture's colors will be multiplied on a per-pixel basis by the RGBA you specify via the color field, essentially adding a tint to the texture. Texture multiplication is beyond the scope of this document, but here are a few simple guides:  
Line 91: Line 91:
 
*A disabled state can often be created by simply using the texture map from the defaultStatePresentation and applying roughly a 50% grey to it. This will simply grey out the original control. You may have to play with the rgb values to get a good look, depending on your texture. Don't be fooled into lowering the alpha to increase the darkness, as that will only work on a black/dark background.  
 
*A disabled state can often be created by simply using the texture map from the defaultStatePresentation and applying roughly a 50% grey to it. This will simply grey out the original control. You may have to play with the rgb values to get a good look, depending on your texture. Don't be fooled into lowering the alpha to increase the darkness, as that will only work on a black/dark background.  
 
*An rgba of 1,1,1,1 will result in the texture's appearance being unchanged from the original.  
 
*An rgba of 1,1,1,1 will result in the texture's appearance being unchanged from the original.  
*As you might guess from that, the default rgba for any given state presentation is 1,1,1,1.
+
*As you might guess from that, the default rgba for any given state presentation is 1,1,1,1.  
  
[[Image:StatePresentation ColorPicker.png|Color Picker]]  
+
[[Image:StatePresentation_ColorPicker.png|Color Picker]]
  
 
<br>  
 
<br>  
Line 99: Line 99:
 
=== Behavior ===
 
=== Behavior ===
  
The [[GUI Controls#Behavior|Behavior]] properties determine how the control processes [[GUI_Events|GUI Events]], whether it appears on the screen, the [[GUI_Animations|GUI Animations]] the control uses and if the control is selected. If <code>IgnoreMouseEvents</code> is '''false''' then the control will process mouse input events. The value of <code>IgnoreMouseEvents</code> does not affect the control's parent or children.
+
The [[GUI Controls#Behavior|Behavior]] properties determine how the control processes [[GUI_Events|GUI Events]], whether it appears on the screen, the [[GUI_Animations|GUI Animations]] the control uses and if the control is selected. If '''IgnoreMouseEvents''' is FALSE then the control will process mouse input events. The value of '''IgnoreMouseEvents''' does not affect the control's parent or children.
  
 
[[Image:GUIProperties_Behavior.png|GUIProperties_Behavior.png]]
 
[[Image:GUIProperties_Behavior.png|GUIProperties_Behavior.png]]
Line 115: Line 115:
 
=== Layout ===
 
=== Layout ===
  
[[GUI Controls#Layout|Layout]]
+
The [[GUI Controls#Layout|Layout]] properties of a GUI Control determine it's position and size as well as how it's moved and resized based off of it's parent control. The position property determines the control's offset relative to it's parent. Anchoring determines how the control is positioned and sized when its parent is resized. For whichever one is TRUE, resizing the parent will also move or size the child in relation. Having just one of the top/bottom or left/right pairs set to TRUE will move the child, and having both of a pair set to TRUE will cause the child to resize. The positioning due to anchoring is overridden by '''autoCenter''' (horizontal,vertical). When true, the corresponding part of its position (x,y) will always be set so the control is centered in its parent. '''dockMode''' determines how the control docks to its parent. Options are NONE (no docking, and position is determined exclusively by the x/y coordinates), LEFT, RIGHT, TOP, BOTTOM and FILL (which uses all available space). If this were set to RIGHT, then the GUI Control would do its best to dock itself flush to the far right of its parent control taking up all available vertical space.
  
 
[[Image:GUIProperties_Layout.png|GUIProperties_Layout.png]]
 
[[Image:GUIProperties_Layout.png|GUIProperties_Layout.png]]
Line 123: Line 123:
 
=== Misc ===
 
=== Misc ===
  
[[GUI Controls#Misc|Misc]]
+
Any additional properties that are defined in the GUI Control's '''type''' class will appear in the [[GUI Controls#Misc|Misc]] category. The '''layer''' property determines which [[GUI_Layers|Layer]] the GUI Control will appear on. Only the '''layer''' of the top-most parent, as seen in the GUI Control Hierarchy, will be taken into account when determining what layer each GUI Control is on. The '''gluedtonode''', '''worldspaceoffset''' and '''fadeDistance''' properties are used when [[Gluing_a_GUI_Control_to_a_node|Gluing a GUI Control]] to a node.
  
 
[[Image:GUIProperties_Misc.png|GUIProperties_Misc.png]]
 
[[Image:GUIProperties_Misc.png|GUIProperties_Misc.png]]

Revision as of 16:58, 7 November 2011

Contents

Overview

The GUIEditor allows for the creation of GUI Control Prototypes, in a WYSIWYG visual format. After a prototype has been created, a script can be written which creates nodes based on the prototype.

GUI Editor Properties


Starting the Editor

In older versions of HeroEngine, the GUI Editor needed to be started from the GUI Editor Toolbar.

In current versions, the GUI Editor is accessed by:


Using the Editor

The GUI Editor is used to modify the default value of a GUI Control's fields. The value of these fields are stored in a client-side prototype which is generated from GUIXML files. These fields are edited in the Properties Panel. When a prototype is opened for editing the Properties Panel will automatically open.

When editing a GUI Control prototype the layout of the Properties Panel is similar to how it looks if a Model was selected except the listed properties are different and there is a GUI Control Hierarchy Tree View at the top of the panel. The properties can be displayed in two ways, Categorized and Alphabetical. The Categorized view will split the properties into the following collapsible sections: Appearance, Behavior, Data, Layout, Misc and Presentation States. The Alphabetical view will list all of the properties in alphabetical order.


Appearance

The Appearance section of properties controls how the GUI Control's texture is displayed to all of the state presentation properties as well as the texture property, which is the Fully Qualified Name (FQN) of the texture file in the Repository.

GUIProperties_Appearance.png

GUI Textures

Art for GUI Controls must be stored in the Repository in the form of a DirectDraw Surface (.DDS) or .PNG file. To assign a texture to be used by a GUI Control you can use the Texture Viewer accessible from a state presentation field or the texture field.


Presentation States

A GUI control's State Presentation determines its appearance in various predefined states. There are five state presentations available to work with:

State presentations are complex fields with three subfields: size, position, and color. You will typically only be concerned with either size and position, or color, but will sometimes want to use all three.

Note that GUILabel class controls are treated differently by their state presentations. Changing the color of a GUILabel's state presentation will actually affect the text of the label, not provide a background color. Adding a texture to a GUILabel-based control will do nothing of interest.

Default state presentation properties


Texture Mapping in a state presentation

The size and position fields of a state presentation refer to the image specified by the control's texture field. If a control has no texture field declared, size and position will do nothing. Used in conjunction, these two fields determine the placement and size of a rectangular slice of the image, to be applied to the control. While state presentations may (and frequently will) use different areas of a .dds file to determine a control's appearance, they must all use the same texture file. You cannot have your hover states in one .dds file, and your disabled states in another. The texture viewer shown to the right can be pulled up by clicking in the texture field in the GUI Editor, or on any of the state presentation fields or subfields, with the exception of color.

In both cases, positive-x points toward the right edge of the image, while positive-y points towards the bottom. However, if either of the size xy fields are given negative values, the image will appear reversed along that axis, making it possible to reuse a single piece of a texture up to four different ways.

Note that one approach taken by some art departments is to create their GUI art at double the intended size, to allow for less pixelization when a control is scaled. In a situation such as this, the state presentation dimensions would still follow the same procedure as with a normal-sized texture, as the size field of the control still dictates its displayed appearance. For example, an icon whose art is created at 128x128 pixels may still be displayed as a 64x64 icon, simply by setting its state presentation size to 128x128, and its actual size to 64x64.

Texture Mapping in a state presentation


Color in a state presentation

Color, a complex field of type rgba, is most often used to set the background color of a control which has no texture applied to it. This simply fills the control with a solid color, such as the titlebar of the texture viewer to the right. If you are familiar with the 0 to 255 scale for RGB, rgba simply translates that into a float of range 0 to 1, with alpha (color.a) equating to completely transparent at 0, completely opaque at 1.

If a given state presentation has all three fields set, the texture's colors will be multiplied on a per-pixel basis by the RGBA you specify via the color field, essentially adding a tint to the texture. Texture multiplication is beyond the scope of this document, but here are a few simple guides:

Color Picker


Behavior

The Behavior properties determine how the control processes GUI Events, whether it appears on the screen, the GUI Animations the control uses and if the control is selected. If IgnoreMouseEvents is FALSE then the control will process mouse input events. The value of IgnoreMouseEvents does not affect the control's parent or children.

GUIProperties_Behavior.png


Data

The Data of a GUI Control contains it's name, what prototype it's created from and what GUIXML file it's data is stored in. The control's name is used to uniquely identify it among all others in it's control hierarchy. If the FindGUIControlByName is used to find the control then the control's name must be unique among all other children control's of the GUInode parameter.

GUIProperties_Data.png


Layout

The Layout properties of a GUI Control determine it's position and size as well as how it's moved and resized based off of it's parent control. The position property determines the control's offset relative to it's parent. Anchoring determines how the control is positioned and sized when its parent is resized. For whichever one is TRUE, resizing the parent will also move or size the child in relation. Having just one of the top/bottom or left/right pairs set to TRUE will move the child, and having both of a pair set to TRUE will cause the child to resize. The positioning due to anchoring is overridden by autoCenter (horizontal,vertical). When true, the corresponding part of its position (x,y) will always be set so the control is centered in its parent. dockMode determines how the control docks to its parent. Options are NONE (no docking, and position is determined exclusively by the x/y coordinates), LEFT, RIGHT, TOP, BOTTOM and FILL (which uses all available space). If this were set to RIGHT, then the GUI Control would do its best to dock itself flush to the far right of its parent control taking up all available vertical space.

GUIProperties_Layout.png


Misc

Any additional properties that are defined in the GUI Control's type class will appear in the Misc category. The layer property determines which Layer the GUI Control will appear on. Only the layer of the top-most parent, as seen in the GUI Control Hierarchy, will be taken into account when determining what layer each GUI Control is on. The gluedtonode, worldspaceoffset and fadeDistance properties are used when Gluing a GUI Control to a node.

GUIProperties_Misc.png


Save Changes

GUIEditorToolbar.png


Create a New Prototype


See also

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox