GUI Editor

(Difference between revisions)
Jump to: navigation, search
(Removed 'future' features)
(Overview: Now using GUI_tab-organizer_panel.png)
Line 5: Line 5:
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.  
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.  
[[Image:GUI tab-organizer panel.jpg|right|GUI tab-organizer panel.jpg]]  
== Starting the Editor  ==
== Starting the Editor  ==

Revision as of 20:40, 3 November 2011



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.


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 via the Organizer Panel, by:

Modifying a GUI prototype

Create a New Prototype

Appearance and Layout

GUI Textures

Art for GUI Controls must be stored in the Repository in the form of a DirectDraw Surface (.DDS) file.

If you will not be creating your own art, you can skip this next section, or bring it to the attention of those who will.

Creating your own art

The first rule of creating your own art is: when in doubt, have an artist do it. However, should you not be an artist, and still find yourself with the need to create GUI art, read on.

I'm not going to go into a lot of detail regarding the creation of a new piece of art, and I'm going to assume you have a minimal working knowledge of Photoshop. The easiest way is to find art on Google Image Search, or use clip art or stock photography. You should avoid copyrighted images; it's possible to find royalty-free art, but this document is in no way going to address the legalities of what art may be used for what. Paste your art into Photoshop (or draw your own, if you prefer), and alter it as necessary (resizing, coloring, etc). Again, the specifics of this are way beyond the scope of this document. DDS files use the alpha channel to determine transparency, so you'll need to modify that as well.

Click the channels tab (or use Window->Channels), and you should see at minimum four channels marked RGB, Red, Green, and Blue. You may also see an Alpha 1 channel. If not, your next step is to create an alpha channel. Do this by clicking the third button at the bottom of the channels panel (left of the trash can, looks like a page with one corner peeled back). This should automatically create the Alpha 1 channel, if it did not already exist.

Now switch back to the Layers tab, and make sure that the layer which contains your piece of art is selected. Using the wand and/or lasso tools, select only the portions of your art that you want to be visible. Often, the easiest way to do this is to simply click outside of the art with the Wand tool, thus selecting all of the transparent pixels, and hit Control-Shift-I, to invert the selection. Viola, only your art is selected. If your art has transparent pixels inside of it as well, you will want to make sure that the Wand tool has its Contiguous box unchecked (which means that it will select ALL qualifying pixels on the layer, instead of ignoring those which are separated from your click location by nontransparent pixels).

Now switch back to the Channels panel, and select only the Alpha 1 channel. Your selection should still be only the space taken up by your piece of art. Alpha channels work on a greyscale to determine opacity, where black is completely transparent, and white is completely opaque, so go to Edit->Fill and fill the selected area with White. You can play with making the borders somewhat darker, or using a gradient, but if you're getting into that much detail, an artist should probably have been doing it in the first place, or you should have just skipped this whole section 'cause you already know it.

Three important notes on DDS files:

Settings for saving a DDS file for use with HeroEngine:
File:Dds settings.gif

Making New Art Available

After you have your new art, you'll need to upload your new DDS file to the repository using the Repository Browser. The DDS file needs to be uploaded to your GUI art folder.

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.

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.

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:

Save Changes

See also

Personal tools