

=== Creating a new Theme


==== Understanding Styles

The Style class is set up to be as open ended as possible for creating custom controls.+

+

Each property of a style can be one of the following data type:


*  String
*  float
*  int
*  boolean
*  ColorRGBA
*  Vector2f
*  Vector3f
*  Vector4f
*  Effect
*  Object

To retrieve a tag from a style you must use the get method for the data type you trying to retrieve like so:


[source,java]

----

screen.getStyle(“StyleName”).getColorRGBA(“TagNameInStyle”);

----

These can be used as flags for configuring you control, or style specific info for default Look &amp; Feel+

+

Lets look at the Button.xml file as an example:

<htmlblock>
&lt;root&gt;
    &lt;element name=”Button”&gt;
        &lt;font&gt;
            &lt;property name=”fontSize” type=”float” value=”18″ /&gt;
            &lt;property name=”fontColor” type=”ColorRGBA”&gt;
                &lt;r value=”0.8″ /&gt;
                &lt;g value=”0.8″ /&gt;
                &lt;b value=”0.8″ /&gt;
                &lt;a value=”1.0″ /&gt;
            &lt;/property&gt;
            &lt;property name=”textAlign” type=”String” value=”Center” /&gt;
            &lt;property name=”textVAlign” type=”String” value=”Center” /&gt;
            &lt;property name=”textWrap” type=”String” value=”Clip” /&gt;
            &lt;property name=”hoverColor” type=”ColorRGBA”&gt;
                &lt;r value=”1.0″ /&gt;
                &lt;g value=”1.0″ /&gt;
                &lt;b value=”1.0″ /&gt;
                &lt;a value=”1.0″ /&gt;
            &lt;/property&gt;
            &lt;property name=”pressedColor” type=”ColorRGBA”&gt;
                &lt;r value=”0.6″ /&gt;
                &lt;g value=”0.6″ /&gt;
                &lt;b value=”0.6″ /&gt;
                &lt;a value=”1.0″ /&gt;
            &lt;/property&gt;
        &lt;/font&gt;
        &lt;attributes&gt;
            &lt;property name=”resizeBorders” type=”Vector4f”&gt;
                &lt;x value=”5″ /&gt;
                &lt;y value=”5″ /&gt;
                &lt;z value=”5″ /&gt;
                &lt;w value=”5″ /&gt;
            &lt;/property&gt;
            &lt;property name=”defaultSize” type=”Vector2f”&gt;
                &lt;x value=”100″ /&gt;
                &lt;y value=”30″ /&gt;
            &lt;/property&gt;
        &lt;/attributes&gt;
        &lt;images&gt;
            &lt;property name=”defaultImg” type=”String” value=”tonegod/gui/style/def/Button/button_x_u.png” /&gt;
            &lt;property name=”hoverImg” type=”String” value=”tonegod/gui/style/def/Button/button_x_h.png” /&gt;
            &lt;property name=”pressedImg” type=”String” value=”tonegod/gui/style/def/Button/button_x_d.png” /&gt;
        &lt;/images&gt;
        &lt;effects&gt;
            &lt;property name=”event0″ type=”Effect”&gt;
                &lt;event value=”Hover” /&gt;
                &lt;effect value=”Pulse” /&gt;
                &lt;speed value=”3″ /&gt;
            &lt;/property&gt;
            &lt;property name=”event1″ type=”Effect”&gt;
                &lt;event value=”Press” /&gt;
                &lt;effect value=”ImageSwap” /&gt;
                &lt;speed value=”0″ /&gt;
            &lt;/property&gt;
            &lt;property name=”event2″ type=”Effect”&gt;
                &lt;event value=”LoseFocus” /&gt;
                &lt;effect value=”ImageSwap” /&gt;
                &lt;speed value=”0″ /&gt;
            &lt;/property&gt;
        &lt;/effects&gt;
    &lt;/element&gt;
&lt;/root&gt;
</htmlblock>

The Style XML file for any given control can contain as many element tags as you would like.  Each becomes another style that can be retrieved via:


[source,java]

----

screen.getStyle("styleName");

----

Each element tag is divided into 4 sections:


*  fonts
*  attributes
*  images
*  effects

The first 3 are interchangeable and only there for organizational purposes.+

+

The 4th (effects) is more specific, as the effects are stored and retrieved via the EffectManage of the Screen.+

+

The tags for storing properties are fomatted as follows:


*  if the data type has a single value, the value is stored in the single property tag:
<htmlblock>
&lt;property name=&quot;ID&quot; type=&quot;float&quot; value=&quot;0.5&quot; /&gt;
</htmlblock>

*  If the data type has multiple value, the property tag would contain inner tags named after the value, like such:
<htmlblock>
&lt;property name=&quot;ID&quot; type=&quot;Vector4f /&gt;
    &lt;x value=&quot;0.5 /&gt; 
    &lt;y value=&quot;0.5 /&gt; 
    &lt;z value=&quot;0.5 /&gt; 
    &lt;w value=&quot;0.5 /&gt; 
&lt;/property&gt;
</htmlblock>

Again, to retrieve this you would call:


[source,java]

----

screen.getStyle("styleName").getVector4f("ID");

----


==== The 'effects' Tag

To add a default effect to a control, you would add a property tag under the 'effects' tag, like so:

<htmlblock>
&lt;property name=”event0″ type=”Effect”&gt;
    &lt;event value=”Hover” /&gt;
    &lt;effect value=”Pulse” /&gt;
    &lt;speed value=”3″ /&gt;
&lt;/property&gt;
</htmlblock>

Using Effects can be found HERE.



==== style_map.xml

The style_map.xml file consists of a list of all other XML documents that contain style information for controls. All other XMLdocs could very well could be a single XML document containing all styles, however, for organization purposes, I read in as many from this list as you would like to add.+

+

Each entry in the style_map.xml file are formatted as follows:

<htmlblock>
&lt;style control=”CustomControl” path=”somePath/MyNewControl.xml” /&gt;
</htmlblock>





==== To set up a custom global Look & Feel for your UI


===== STEP 1: Copy the style_map.xml file to a local directory in your Project Assets folder.
<htmlblock>
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;root&gt;
	&lt;cursors path=&quot;somePath/Cursors.xml&quot; /&gt;
	&lt;audio path=&quot;somePath/Audio.xml&quot; /&gt;
	&lt;style control=&quot;Font&quot; path=&quot;somePath/Fonts.xml&quot; /&gt;
	&lt;style control=&quot;Common&quot; path=&quot;somePath/Common.xml&quot; /&gt;
	&lt;style control=&quot;Scrolling&quot; path=&quot;somePath/Scrolling.xml&quot; /&gt;
	&lt;style control=&quot;Window&quot; path=&quot;somePath/Window.xml&quot; /&gt;
	&lt;style control=&quot;Button&quot; path=&quot;somePath/Button.xml&quot; /&gt;
	&lt;style control=&quot;Menu&quot; path=&quot;somePath/Menu.xml&quot; /&gt;
	&lt;style control=&quot;Label&quot; path=&quot;somePath/Label.xml&quot; /&gt;
	&lt;style control=&quot;Slider&quot; path=&quot;somePath/Slider.xml&quot; /&gt;
	&lt;style control=&quot;TextField&quot; path=&quot;somePath/TextField.xml&quot; /&gt;
	&lt;style control=&quot;ChatBox&quot; path=&quot;somePath/ChatBox.xml&quot; /&gt;
	&lt;style control=&quot;Indicator&quot; path=&quot;somePath/Indicator.xml&quot; /&gt;
&lt;/root&gt;
</htmlblock>


===== STEP 2: Point your Screen class to the new style_map.xml file.

[source,java]

----

Screen screen = new Screen(this, "somePath/style_map.xml");

----

+

You can now copy the existing XML docs for each listed in the style_map.xml file and make the adjustments you would like as default styles.




