1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
0/5,

Gump Tips and Tricks

Summary of the tutorial

Gump HTML Reference
Button Backers for Selectable Gump Lines
Tags:

Gump HTML

An HTML element on a gump works like a label with an optional background and scroll bars. You can then specify some traditional elements in the HTML gump element.

You can't presently tell a gump to load a full webpage or specify an external image or anything else. It is basically just a glorified gump label. You can include links but they open in an external web browser.

You cannot mix fonts with different heights in the same line.

Supported HTML Tags: (tags are closed using </tag>)

  • <H1>
  • <H2>
  • <H3>
  • <B>
  • <I>
  • <U>
  • <BR>
  • <BODY>
  • <CENTER>
  • <div align=left>
  • <div align=center>
  • <a href=>
  • <BASEFONT COLOR= SIZE= FACE= >
Sample Tags:
H1, H2, H3, H4, H5, A
html_text_samples_1.png

<BASEFONT COLOR= SIZE= FACE= >abcdefghijklmnopqrstuvwxyz</BASEFONT>

The size setting seems to have limited effect. Only a few face settings are known. There are many more fonts in the .mul files, but it is unknown how to specify them.

Size 3,4,5 are the only sizes that seem to make a difference.

Core Fonts:
coreFonts.png

Decorated Core Fonts:
font_decorations.png

Gargish:
gargish.png

Runic:
runic.png

Backing Buttons for Gumps

Gump buttons cannot be colored or sized generically using a server side Application Programming Interface (API) because the standard client Gump API does not support this.

The client uses a Gump number to determine what graphic to display for a button. It also uses the graphic to determine the clickable area for a button.

press_ok_to_continue.png

The RunUO / ServUO server side API provides a way to handle Gump responses, which includes a button number.

Many of the Gump libraries that are found in custom scripts such as knives chat or VitaNex provide a way to track button numbers and responses. Typically they assign button numbers each time a button is added to a Gump and map those numbers to a call back. This removes the task of tracking button numbers for each Gump.

To add a button using one of these libraries, a scripter can just supply the x,y location, the Gump IDs for pressed and normal states and a callback method or lambda method.

If you are developing a Gump and you do not want to have the dependency of a third party library, you will have to track button IDs yourself.

Using other gump elements as buttons is the heart of this tutorial.

There are several advantages of using other gump elements as buttons:
  • Gump images can be hued.
  • Gump tiled images can't be hued, but they can be tiled to cover an area by giving them a height and width.
  • Html elements can be used to make button labels with a mixture of fonts and sizes
  • Labels can be hued and allow custom button text without the need for patching client graphics
You can also combine elements into buttons:
  • Using a dark colored tiled image combined with a label to make a flat looking button
In order to combine elements effectively, you must understand the Z Ordering of gump elements. What this means is that gump elements appear on the gump in the order that they are added.

If you add a label over a button, you will see the label in the foreground with the button behind it. If you add the label first and the image last, the image will cover up the label and you will not see it.

unselected.png

The above image uses tiled images that are black (almost black) with yellow hued labels to make the following buttons [New], [Delete], and [Save] buttons. To make the buttons actually function, you must add backing buttons behind them.

Code (C#):
  1.  
  2.   // background backed standard buttons
  3.   AddButton( 24, 289, 2463, 2463, 0, GumpButtonType.Reply, 0); // New Button
  4.   AddButton( 99, 289, 2463, 2463, 0, GumpButtonType.Reply, 0); // Delete Button
  5.   AddButton(641, 289, 2463, 2463, 0, GumpButtonType.Reply, 0); // Save Button
  6.  
  7.   // Add images over the buttons so that they can't be seen
  8.   AddImageTiled( 25, 289, 68, 16, 2624); // New Button BG
  9.   AddImageTiled(100, 289, 68, 16, 2624); // Delete Button BG
  10.   AddImageTiled(642, 289, 68, 16, 2624); // Save Button BG
  11.  
  12.   //  Add labels with button text
  13.   AddLabel(47, 286, 49, @"New");
  14.   AddLabel(117, 286, 49, @"Delete");
  15.   AddLabel(663, 286, 49, @"Save");
  16.  
Selectable Rows of Text

To make selectable rows in a table, simply back each row with buttons:

selected.png
The above image shows that labels can be used to create rows of items that are selectable. When a row of labels is clicked, your gump can highlight that row and update other elements accordingly.

The key to making other gump elements work is the fact that you can place a button and then put an image over it and the button will still be clickable.

backing_buttons.png

In the image above you can see the backing buttons that are used to make an entire line of text selectable. These buttons should be added to the gump before the background image is added.

For example:
Code (C#):
  1.  
  2.   foreach (var entry in m_mapEntries)
  3.   {
  4.  
  5.   AddButton( 25, y, 2463, 2463, SELECT_ENTRY_BUTTON_ID_OFFSET + entry.Value.MapId, GumpButtonType.Reply, 0); // Backing Button
  6.   AddButton( 93, y, 2463, 2463, SELECT_ENTRY_BUTTON_ID_OFFSET + entry.Value.MapId, GumpButtonType.Reply, 0); // Backing Button
  7.   AddButton(161, y, 2463, 2463, SELECT_ENTRY_BUTTON_ID_OFFSET + entry.Value.MapId, GumpButtonType.Reply, 0); // Backing Button
  8.   AddButton(229, y, 2463, 2463, SELECT_ENTRY_BUTTON_ID_OFFSET + entry.Value.MapId, GumpButtonType.Reply, 0); // Backing Button
  9.   AddButton(297, y, 2463, 2463, SELECT_ENTRY_BUTTON_ID_OFFSET + entry.Value.MapId, GumpButtonType.Reply, 0); // Backing Button
  10.   AddButton(365, y, 2463, 2463, SELECT_ENTRY_BUTTON_ID_OFFSET + entry.Value.MapId, GumpButtonType.Reply, 0); // Backing Button
  11.   AddButton(432, y, 2463, 2463, SELECT_ENTRY_BUTTON_ID_OFFSET + entry.Value.MapId, GumpButtonType.Reply, 0); // Backing Button
  12.  
  13.   y += 20;
  14.   }
  15.