Tile Systems (MenuQue)

A TileSystem is an automated process that will do the same as certain hardcoded behaviour for the UI. Things like using the mouse wheel to scroll, dragging an element back and forth or a small yet effective textedit box.

General

In order for modders to easily mark an element as a TileSystem they need to use a specific string-constant for the <id> trait of the element in question. Then, whenever the game processes that particular XML the code will pick up on the desired tile system, create the needed background stuff and attach it to the element.

Only one system can be associated with a single element but there are no limits to the total amount. Atleast, not practical ones.

Types

There are a number of different types of TileSystems, each one dealing with a different aspect of user-to-UI interaction. Some have required traits for specific input data and some have optional traits for additional configuration.

A short list (more details on each induvidual system can be found below:

• Scroll System - This system responds to the mouse wheel movement and will increment or decrement a specific trait accordingly.
  • ID is: &Scroll;
  • (required) <user5> - the trait that gets altered by code.

• Drag System - This system responds to the mouse movement while the left mouse button is held down over the element. There are three different types of movement: horizontal, vertical or both.
  • IDs are: &DragHorizontal; and &DragVertical; and &DragRect; respectively
  • (required) <user8> - controls the step-distance for dragging.
  • (required) <user9> - the trait that gets altered by code.

• TextEdit System - This system provides a simple field where the user, after clicking the element, can type in.
  • ID is: &TextEdit;
  • (optional) <user0> - controls the initial text upon activating.
  • (optional) <user1> - controls the default text for when it is deactivated and the input string is empty

• FocusBox System - This system will adjust the size and position of the designated element to match that of the active element, provided its <focus>, <target> and <visible> traits are true.
  • ID is: &FocusBox;
  • (optional) <user15> - used as a static depth adjustment.

Details

Below you will find more details on each system and a few examples. A useful guide to creating and using these systems is to start out with a snippet of code from the existing XML files. Then adjust things like position, size and perhaps names. Finally change the <id> trait to the proper code for what you want it to do.

Almost all examples listed below come from existing XML files, either as a direct copy or slightly modified to clean things up.

FocusBox

The size and position of a focus box can be adjusted using the <focussize> and <focusinset> traits. They control the additional size and additional offset of the focus box in relation to the active element in the following fashion:

focusBox_X = (element_X - (focussize / 2) + focusinset)
focusBox_Y = (element_Y - (focussize / 2) + focusinset)
focusBox_Width = (element_Width + focussize)
focusBox_Height = (element_Height + focussize)

<rect name="focus_box">
<include src="focus_box.xml"/>
	<id> &FocusBox; </id>
	<visible> &false; </visible>
</rect>
...
<rect name="some_element">
	<width> 200 </width>
	<height> 50 </height>
	<x> 45 </x>
	<y> 160 </y>

	<!-- when the mouse is over this element its dimension
	and position will be copied to the focus box -->
	<focus> &true; </focus> 

	<!-- this gets added to the width and height before they are copied.
	And half of it gets substracted from X and Y to even the increase in size
	between the outline. -->
	<focussize> 20 </focussize> 

	<!-- this gets added to the X and Y before they are copied -->
	<focusinset> 0 </focusinset>
</rect>

With the example above, when the mouse is held over "some_element" the "focus_box" gets the following traits set:

<x> = 45 - (20 / 2) = 35
<y> = 160 - (20 / 2) = 150
<width> = 200 + 20 = 220
<height> = 50 + 20 = 70

TextEdit

In order to begin typing the user must first click on the element. Modders can also use ClickMenuButton to activate it through script. Once activated the user

• The initial value is determined by the <string> trait when it gets activated, any changes once it is active are ignored.
• The textedit is activated by clicking on either the element itself or the parent element.
• To terminate the textedit the user has to click on any element (that can be targeted).
• The use of the Enter key will terminate the textedit.

<rect name="_textedit">
	<!-- this is the element that determines the size and position of the
	clickable area needed to activate the typing. -->
	<locus> &true; </locus>
	<target> &true; </target>
	<width> 240 </width>
	<height> 40 </height>
	<depth> 3 </depth>
	<text name="_textedit_text">
		<id> &TextEdit; </id>
		<string> some text </string>
		<depth> 3 </depth>
		<locus> &true; </locus>
		<target> &true; </target>
	</text>
</rect>

See Also

Oblivion XML