Screen format

Screens are a way to design 2d user interfaces using xml.

File

A screen starts with the xml declaration and the screen tag.

The key attribute defines the key used to close the screen. It is optional and defaults to escape.

<?xml version="1.0" ?>
<screen key="esc">
[...]
</screen>

Elements

Text

<text size=integer top=integer(optional) align=string(optional) z=integer(optional)> string </text>

Image

<image right=string bottom=string> string </image>

Button

<button trigger=string> string </button>

Item

<item> string </item>

List

<list> string </list>

Trigger

On keypress switch to another screen or game state. Target is the target screens name and with the gamestate: prefix a game state.

<trigger key="esc" target="gamestate:running"/>

Container

Page

<page timeout=integer(optional) key=string(optional)>
  may contain following elements: container, text, image
</page>

Container

<container width=string(optional) height=string(optional) top=string(optional) left=string(optional)>
  may contain following elements: page, text, image, list
</container>

Canvas

Area to render graphics on

<canvas></canvas>

Examples


<screen>
  <page timeout="10">
    <container width="100%" height="100px" top="1px" left="0px">
      <text size="1" align="center">Some Text</text>
    </container>
    <image right="0px" bottom="0px">test/hud.png</image>
  </page>
  <page key="enter">
    <container width="100%" height="100px" top="1px" left="0px">
      <text size="1" align="center">Some Text</text>
    </container>
    <image right="0px" bottom="0px">test/hud.png</image>
  </page>
</screen>

<screen name="menu">
  <container>
    <list>
      <item><button trigger="start-game">Start</button></item>
      <item><button trigger="end-game">End</button></item>
    </list>
  </container>
</screen>

<screen>
  <trigger key="esc" target="pause"/>
  <container>
    Press escape to pause
  </container>
</screen>

<screen>
  <trigger key="esc" target="gamestate:running"/>
  <container>
    Game paused hit escape again to go back to the game.
  </container>
</screen>