This tutorial will teach you how to setup the Default.xml (GUI) file for your game/program.

I recommend using Notepad++ to open and edit all the Updater’s XML files.

alt text

The Default.xml file is located in \data\gui\Default\Default.xml.

alt text

Link to the rest of the below code: https://pastebin.com/tBsXRvsR

<gui>
	<!-- Form -->
	<FrmMain>
		<control>
			<size>
				<width>615</width>
				<height>450</height>
			</size>
			
			<image>
				<path>data\gui\**\background.png</path>
				<layout>stretch</layout>
			</image>
		</control>
	</FrmMain>

	<!-- Labels -->
	<LblName>
		<control>
			<location>
				<x>12</x>
				<y>9</y>
			</location>
			
			<size>
				<width>575</width>
				<height>140</height>
			</size>
			
			<image>
				<path>data\gui\**\name.png</path>
				<layout>center</layout>
				<textVisible>False</textVisible>
			</image>
		</control>
		
		<text>
			<alignment>center</alignment>
			<font>Times New Roman</font>
			
			<color>
				<red>0</red>
				<blue>0</blue>
				<green>0</green>
				<alpha>255</alpha>
			</color>
		</text>
	</LblName>
</gui>

There are a lot of different nodes you can use to change the GUI, but I’d rather not get into all of them in this thread, I will make a separate thread to go into more detail about all of them.

Some nodes will have a <states> node but those are for select controls that change depending on the state of the Updater.



Setting up the GUI for your own game:

The Updater is able to reload the GUI by pressing F5 on the keyboard. When making changes to the GUI file, save them, switch to the Updater, and press F5 to view your changes. This makes previewing your GUI changes a lot faster and easier to do.


<FrmMain>
This only has a <control> node because there isn’t much text you can change.
You can use the <size> node to change the form starting size and the <image> node to give it a background. You can also use the <color> node to change the background color.


<LblName>
This has a <control> and <text> node that you can change. Both have different nodes you can add to customize the GUI more.


<control> nodes have things like <size>, <location>, <image>, and <color> that will change the form control itself.

<text> nodes have things like <alignment>, <font>, <bold>, <underline>, <italic>, <size>, and <color> to customize the text you see.

As previously stated, there are more nodes that can be used, but I don’t want this topic becoming too long.


Adding Graphics:
To add custom graphics for the Updater to use, navigate to the folder containing the xml file for the GUI (in this case it’s Default.xml and the path is \data\gui\Default\. Create a new folder called graphics and two new folders inside that one called no text and english [or whatever the default lang you’re using is].)

The folder layout should now look similar to this:
\data\gui\Default\graphics\no text\
\data\gui\Default\graphics\english\

Any images that don’t have text (eg. a background) should be added to folder \no text\.
Any images that do have text (eg. a description image) should be added to the folder that the text is written in, such as \english\.

These folders are used by the <image> <path> nodes to find the correct graphics to use.

Eg.

<image>
	<path>data\gui\**\name.png</path>
</image>

The Updater replaces the ** with the current language (eg. english) and checks if the file exists, if it doesn’t it replaces the ** with no text and checks that folder for the image. This allows a GUI to support multiple languages while still using images instead of normal text.


NOTE:
You may see something like <state id="Launch"> in the file, do NOT change the value inside of the id=""



Examples:

Eclipse Renewal:

alt text

alt text


Andur:

alt text

alt text

alt text