Difference between revisions of "Tile Systems (MenuQue)"
Jump to navigation
Jump to search
no edit summary
imported>Kyoma (Rewrite) |
imported>Kyoma |
||
| Line 3: | Line 3: | ||
==General== | == 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. | 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. | ||
| Line 9: | Line 9: | ||
==Types== | == 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. | 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. | ||
| Line 24: | Line 24: | ||
* TextEdit System - This system provides a simple field where the user, after clicking the element, can type in. | * TextEdit System - This system provides a simple field where the user, after clicking the element, can type in. | ||
** ID is: '''&TextEdit;''' | ** ID is: '''&TextEdit;''' | ||
** (optional) <user0> - controls the initial text upon activating | ** (optional) <user0> - controls the initial text upon activating. | ||
** (optional) <user1> - controls the default text | ** (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. | * 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;''' | ** ID is: '''&FocusBox;''' | ||
** (optional) <user15> - used as a static depth adjustment. | ** (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) | |||
<pre> | |||
<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> | |||
</pre>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. | |||
<pre> | |||
<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> | |||
</pre> | |||