Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Mohenjo Daro's Updater Tutorial: Setup GUI


Recommended Posts

**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](https://s26.postimg.cc/h2jjw29p5/ER_Updater.png)

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

![alt text](https://s26.postimg.cc/47kr15rbd/GUI_Location.png)

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

```





615
450



data\gui\**\background.png
stretch








12
9



575
140



data\gui\**\name.png
center
False




center
Times New Roman


0
0
0
255




```

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 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.

***

****
This only has a node because there isn't much text you can change.
You can use the `` node to change the form starting size and the `` node to give it a background. You can also use the `` node to change the background color.

***

****
This has a `` and `` node that you can change. Both have different nodes you can add to customize the GUI more.

***

**``** nodes have things like ``, ``, ``, and `` that will change the form control itself.

**``** nodes have things like ``, ``, ``, ``, ``, ``, and `` 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 `` `` nodes to find the correct graphics to use.

Eg.
```

data\gui\**\name.png

```
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 `` in the file, do **NOT** change the value inside of the `id=""`

***
***

**Examples:**

Eclipse Renewal:

![alt text](https://s26.postimg.cc/h2jjw29p5/ER_Updater.png)

![alt text](https://cdn.discordapp.com/attachments/379087691200987140/396054447836364801/image.png)

***

Andur:

![alt text](https://cdn.discordapp.com/attachments/379087691200987140/396047375992619028/unknown.png)

![alt text](https://cdn.discordapp.com/attachments/379087691200987140/396044207615377408/unknown.png)

![alt text](https://cdn.discordapp.com/attachments/379087691200987140/396086582261710849/unknown.png)
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
  • Create New...