The easiest way to change the look of the windows is to change the color scheme and text. This can be done by using the gms_show_set_constant(...) function. For a full list of all possible constants, see the function's documentation page.
You should make sure to always set the room speed to 60 to make the windows more fluid and responsive.
For the first part of this tutorial, I'll re-color the login window. In the second part of this tutorial, I'll dive deeper into completely changing the look of the login window and deleting, adding, or moving UI elements around.
GM:Studio does not have the font_add functionality any more, so to get the custom fonts used by GameMaker Server, you'll have to add them manually:
Create 3 fonts:
Arial Black, 24pt, bold
Verdana, 16
Verdana, 10, bold
Call the function gms_show_set_fonts(...) and provide the fonts in the order above as arguments to the function. The dialogs will now be able to use the custom fonts, and look much better.
Let's start by changing the color scheme. One important thing to note is that all changes to a screen should be applied before the first gms_show_* command is called.
That's not too hard, right? Put the code above into a create event somewhere. I added it right below the gms_settings(...) call. Then call gms_show_login, or any other gms_show_* function and your custom color scheme will be used.
To change the layout, a custom file needs to be made that consists of a few sections:
A constants section: Here, any custom constants can be defined. For example, a color that is used in multiple places can be defined as a constant. When that color needs to be changed, only the constant will have to be changed.
A styles section: This section will consist of the style information for all the UI elements. Every single gradient and every color is declared here.
Lastly, the layout section: This section will contain the structure of the UI elements, and it also links the UI elements and their respective style information.
The file will look a lot like XML and CSS, but not fully. The format has been optimized for fast loading.
The default windows can be replaced by a custom design by calling gms_show_replace(...):
The download contains a folder named 'Custom Windows'. This folder contains the source of the default windows GameMaker Server uses, and a program named Window Inspector. This program helps design custom windows.
Let's start with an empty file. Open up the window expector, and it'll create a file named window.scn in the same directory as the executable automatically. If the file already exists, it'll be loaded. Create a new file, change it's extension to .scn, and use your favourite text editor to change its contents to:
Press Control+O in the Window Inspector to open your custom file. You should see an empty screen.
There are a few basic UI elements that can be used:
Canvas: An element that can contain other elements. Has a background. Elements are stacked vertically
Container: The same as a canvas, but a container is completely transparent.
Multielement: Same as a container, but stacks elements horizontally, allowing multiple elements to be placed next to each other.
Textbox: A user can type text in this box.
Label: An element that may contain text.
Button: An element that may contain text, and generates an event when a user clicks on it.
The window inspector contains a help page (press F1 to open it) that has a full list of all elements and properties.
The default windows are made of the same elements as the ones above. You can even open & edit them by opening the Window Inspector, pressing Control+O, and navigation to the extracted Custom Windows folder (from the download). All default windows use a canvas with a slightly opaque black background to darken everything below the window. This can be made by adding an empty canvas element, and creating a bit of style info:
The topmost element, the canvas in this case, must cover the entire screen. Setting the width and/or height to something else will not work. There must be one single top-level element, multiple are not allowed. Make sure you've got the right file opened in the window selector, and it should update automatically.
Not very exciting so far. Expand your code to this:
Note that constants always start with a @. Also note that border-size and border-color are two separate properties. You may not merge properties into one single property (unlike CSS). Attributes to UI elements are defined by adding "attributename[value]" inside the tag.
For sizes, the special properties min, max and preferred are available. Min will keep the size as small as possible, max as big as possible, and preferred will try to get the size to width-preferred or height-preferred, but may also be less.
The Window Inspector will update automatically, and you'll see a blue bar in the center of the screen. On the right side of the window inspector, a list of all layout elements is displayed. Elements can be collapsed or expanded by clicking on them. By pressing Control+E a property can be watched. For example, press Control+E, w, and select the width property. The value of the property width now appear under every layout element. Control+R can be used to remove it again.
Add a header and text fields to complete the design:
Once again, a few things to note:
<tag /> is the same as <tag></tag>
Properties look a lot like CSS, but are not exactly CSS.
Text on a button or label is centered by default.
Margin is one of the few properties that will expand into 4 different properties, namely margin-left, margin-right, margin-top and margin-bottom.
The name attribute is for linking the UI with GameMaker Server. "login.username" and "login.password" are two reserved names from which GameMaker Server will read the username and password. You can see all required and optional names in the Window Inspector by setting the right window type. Press Control+A and select wt_login to set the window type to the login window.
The UI still lacks animations, working buttons, a true password field. Starting with the password field, change your code to look like this:
Actions can be linked to buttons by giving them the right name. For example, login.login, login.register and login.close are used for the actions on the login screen. Take a look inside the .scn files in the download if you need to know the name of a specific button.
Animations
Finally, adding animations. Animations are always triggered as a response to an event. These events can be:
hover: the mouse moves onto the element
unhover: the mouse leaves the element
open: the window is opened
close: the window is closed
special: depending on the window type
unspecial: depending on the window type
extrawindow: the register screen is opened while the login screen is open
unextrawindow: the register screen is closed while the login screen is open
error: the login or registration failed
unerror: the error message should be hidden
These events are specified just like the name and style properties are declared:
Adding an animation works like this:
Note how style groups can be defined inside style groups. No properties are inherited by defining styles this way. It's just to save time.
Note the tween-speed property. It sets the time in seconds of the animation. Properties are transformed, so in this case, the background slowly becomes visible when opening, and fades out again when closing. Note that close and open are not default names, but names referenced from the layout section.
Make sure to familiarize yourself with the keyboard shortcuts of the Window Inspector. The help-window (F1) can be kept open while using the Window Inspector. Most of the supported features are used in the default windows, please take a look at them if you're wondering how something works. Feel free to edit the designs and include them in your game. If you run into any problems, please let me know in the comment section below.