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

Decorating Buttons in Gumps

Summary of the tutorial

Buttons in gumps do not allow you to hue them, or change their size. In this tutorial you will learn how to do both.
Tags:

Traditional Buttons

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 button fronts

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.

Code (C#):
  1.  
  2.   AddImageTiled( 25, 289, 68, 16, 2624); // New Button BG
  3.   AddImageTiled(100, 289, 68, 16, 2624); // Delete Button BG
  4.   AddImageTiled(642, 289, 68, 16, 2624); // Save Button BG
  5.  
  6.   AddLabel(47, 286, 49, @"New");
  7.   AddLabel(117, 286, 49, @"Delete");
  8.   AddLabel(663, 286, 49, @"Save");
  9.  

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.

Backing Buttons

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.  
The backing button for the [New], [Delete] and [Save] buttons were added using the following code:
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.