GUI XML Reference

The GUI system in ScriptTD is designed around an easy to edit XML interface. This allows you to easily change the contents of the GUI and tweak positions without editing source code.
The XML specification only defines what the GUI looks like. To control the logic and behaviour of the GUI, you will need to edit the source code.

Every GUI file has a root tag named <Window>, this defines the window that contains the controls of the GUI. You can set the location and size of the window, however in most cases you will want the GUI to be fullscreen, and so you do not need to set anything.

A GUI consists of two parts, the controls that make up the GUI, and the visuals that define what the controls look like. Controls can define their visuals by specifying a child element called <Visual> and then placing the appropriate visual objects within there.

Controls

Controls define how the GUI is constructed, and how the game can get input from the player. Controls themselves do not have a specific look, instead the look is defined by child visuals. They do however define a basic behaviour which is then linked with game logic by the ScriptTD engine.
Control Description
Label A label simply displays something on the screen, and cannot be interacted with. Often labels are used for displaying text, however static images can also be used with this control
Button A button allows the user to tap or drag, depending on what the game is expecting
TowerButton This is a special button used in the Ingame.xml file to define the tower construction buttons. The game uses this special type internally to keep track of what towers are available to build, and will enable and disable them as appropriate. (Based on level restrictions)
Checkbox This is a two-state button that alternates between each state when tapped. This is used in Options.xml
Slideshow This is a special control used by Help.xml to display the help screens. It is used by the game to easily cycle through each screen and keeps track of which one you are currently looking at. The slides themselves are defined by the visuals in this control

Visuals

A visual defines the look of the control or window. Each control can have multiple visuals, and they are defined inside a special <Visual> tag block inside the control.
Inside the following example, the Button has an Image visual which will then display the back-previous.png texture over the button.
  <Button name="sfxdown" location="30%, 35%" size="35,10%">
    <Visual>
      <Image src="Textures\Buttons\back-previous.png" VAlign="Middle" size="35,35" />
    </Visual>
  </Button>

Visual Description
Text The text visual renders text with the specified font (see custom attributes). This is used for printing text to screen as well as displaying dynamic game information in text form
Image This renders an image as a texture for the control. Note: If you do not specify a size, the default size of the image will be used. If you want to use the size specified in the control, you can set UseParentSize to true
GridOverlay This is a special visual used in Ingame.xml to draw the grid over the map
Gameplay This is a special visual used in Ingame.xml to render the enemies and towers on the map. Using this visual allows the developer to define a z-order for visuals in the scene, and specify where the gameplay content will be drawn
Circle This simply draws a circle onto the screen. This is used as the range indicator in Ingame.xml

Common Attributes

All Controls share the following attributes:
Name Type Default Value Possible Values Description
Location Float, Float 0,0 Any floating point number This is a comma separated floating point vector that defines the location of the control on the screen. This is relative to the Window location and can be specified as a percentage of the screen size if desired
Size Float, Float 0,0 Any floating point number This is a comma separated floating point vector that defines the size of the control on the screen. This can be specified as a percentage of the screen size if desired
Name String Cannot be empty Any string This is the name of the control, which is often used by the game to bind logic to controls. This cannot be empty or Null
Text String Empty Any String This is the text displayed in a Text visual in the control
Value Float NaN Any floating point number This is a numeric value that is displayed in a Text visual in the control
Enabled Boolean true true/false This defines if the player can interact with the control and cause it to trigger ingame logic
Visible Boolean true true/false This defines the visibility of the control


All Visuals share the following attributes:
Name Type Default Value Possible Values Description
Location Float, Float 0,0 Any floating point number This is a comma separated floating point vector that defines the location of the Visual in the Control. This is relative to the Control location and can be specified as a percentage of the screen size if desired
Size Float, Float 0,0 Any floating point number This is a comma separated floating point vector that defines the size of the Visual on the screen. This can be specified as a percentage of the screen size if desired
HorizontalAlignment HorizontalAlignment None See Below This defines the horizontal alignment of the Visual relative to the parent Control
VerticalAlignment VerticalAlignment None See Below This defines the vertical alignment of the Visual relative to the parent Control
Visibility Visibility EnabledDisabled See Below This defines when the Visual is visible, based on a number of factors (shown below).
Name String Empty Any String This is the name of the Visual. This is usually not required, however some screens require some named visuals to correctly animate or display information.


Visibility Type
This is a special type used by the game to determine when to render the visual. These are linked in the game to the Enabled or Checked properties on the parent control.
If the Visible property on the parent control is set to false, this will be ignored.
Possible values:
  • EnabledDisabled
  • Enabled
  • Disabled
  • Checked
  • Unchecked

HorizontalAlignment Type
This is a special type used to indicate to the renderer where to display the Visual within the parent Control.
If the Location is set in the Visual, this is ignored.
Possible values:
  • None
  • Left
  • Center
  • Right

VerticalAlignment Type
This is a special type used to indicate to the renderer where to display the Visual within the parent Control.
If the Location is set in the Visual, this is ignored.
Possible values:
  • None
  • Top
  • Middle
  • Bottom

Custom Attributes

Some Visuals also have custom attributes to help define data specific to that type of Visual.
Text Visual
Name Type Default Value Possible Values Description
Text String/Custom Empty A normal string, {TEXT} or {VALUE} This defines what to render in the visual, it can be a normal text string, or a special template string like {TEXT} or {VALUE}, which tell the engine to display the value of the Text or Value properties in the parent Control
Font String (Path) Cannot be empty Any String This defines the path to the .spritefont file to use for this text block. The path is relative to the Content folder.
Color Color 0,0,0,255 0-255 for each segment This defines the color for the Text when the parent control is Enabled. (See below for Color type)
AllowParentResize Boolean false true/false This tells the renderer if it should resize the parent Control based on the final size of the Text. The actual size of the text string in the font is unknown until it is rendererd. This can be used to ensure a text button adjusts its touch area to cover the entire string
DisabledColor Color 0,0,0,255 0-255 for each segment This defines the color of the Text when the parent control is Disabled (See below for Color type
StrokeColor Color 0,0,0,255 0-255 for each segment This defines the color of the shadow underneath the text (See below for Color type)
StrokeOffset Float,Float 2,2 Any floating point number This defines the offset (in pixels) applied to the Stroke/Shadow that is rendered underneath the text


Image Visual
Name Type Default Value Possible Values Description
DisabledTint Color 255,255,255,255 0-255 for each segment This defines the color tint that will be applied to the image if the parent Control is disabled (See below for Color type)
Tint Color 255,255,255,255 0-255 for each segment This defines the color tint that is applied when the parent Control is enabled (See below for Color type)
Src String Cannot be empty Any String This defines the path to the image file, relative to the Content folder
UseParentSize Boolean false true/false This forces the image to be resized to fill the parent Control


GridOverlay Visual
Name Type Default Value Possible Values Description
Spacing Float 35 Any floating point number This defines the spacing between each grid cell, or the width of each cell
Color Color 0,0,0,255 0-255 for each segment This defines the color of the lines in the grid (See below for Color type)


Circle Visual
Name Type Default Value Possible Values Description
Density Integer 8 Any integer value > 0 This defines the level of tesselation used to create the circle. A higher number creates a smoother circle, at the cost of performance.
Color Color 255,255,255,255 0-255 for each segment This defines the color of the Circle (See below for Color type)


Color Type
This is a standard XNA Color type, which consists of 4 bytes (values range from 0-255) defining the RGBA channels of the color.
Example:
Red: 255, 0, 0, 255

Last edited Jun 10, 2011 at 4:26 PM by Chr0n1x, version 11

Comments

No comments yet.