Customizing the windows

Changing colors

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:

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.

gms_show_set_constant("c_background1"$391506)
gms_show_set_constant("c_background2"$290F05)
gms_show_set_constant("c_button1"$72422E)
gms_show_set_constant("c_button2"$552916)
gms_show_set_constant("c_buttonhover1"$AB8778)
gms_show_set_constant("c_buttonhover2"$72422E)
gms_show_set_constant("c_border"$AB8778)
gms_show_set_constant("c_text"$AB8778)

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.

Changing the layout

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(...):

gms_show_replace(wt_login,'<constants></con......out></layout>')

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:

<constants></constants>
<styles></styles>
<layout></layout>

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:

<styles> overlay: { width: max; height: max; background: $000000; background-alpha: 0.5} </styles> <layout> <canvas style[overlay]> </canvas> </layout>

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:

<constants>
@c_my_window: $AB8778;
@c_my_border: $391506;
</constants>
<styles>
overlay:
{
width: max;
height: max;
background: $000000;
background-alpha: 0.5;
}
window:
{
background: @c_my_window;
border-size: 3;
border-color: @c_my_border;
center: true;
width: 300;
height: max;
}
</styles>
<layout>
<canvas style[overlay]>
<canvas style[window]>
</canvas>
</canvas>
</layout>

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:

<constants>
@c_my_window: $AB8778;
@c_my_border: $391506;
@c_my_button: $552916;
</constants>
<styles>
overlay:
{
width: max;
height: max;
background: $000000;
background-alpha: 0.5;
}
center-container:
{
center: true;
width: max;
height: min;
}
window:
{
background: @c_my_window;
border-size: 3;
border-color: @c_my_border;
center: true;
width: 300;
height: max;
}
input:
{
width: max;
font: @f_text;
background: $FFFFFF;
height: min;
margin: 10;
height: 40;
}
title:
{
font: @f_title;
}
button:
{
margin: 10;
background: @c_my_button;
border-color: @c_my_border;
border-size: 3;
color: $FFFFFF;
width: max;
height: 48;
font: @f_text;
}
</styles>
<layout>
<canvas style[overlay]>
<canvas style[window]>
<container style[center-container]>
<label style[title]>LOGIN</label>
<textbox style[input] name[login.username] />
<textbox style[input, input.password] name[login.password] />
<button style[button]>Login</button>
</container>
</canvas>
</canvas>
</layout>

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:

<textbox style[input] name[login.password] property[password=true] />



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:

<canvas style[overlay] open[overlay.open] close[overlay.close]>

Adding an animation works like this:

overlay:
{
width: max;
height: max;
background: $000000;
background-alpha: 0;
open:
{
background-alpha: 0.5;
tween-speed: 0.8;
}
close:
{
background-alpha: 0;
tween-speed: 0.8;
}
}

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.

Replies (19)

Last message on 26 Sep 2016

consti on 31 Mar 2016, 17:36:05
How to show a custom window? And how to give their buttons a function for GML?

Btw, you declared a password in two ways: input.password and password=true. Which one is the right one?
Size43 (Administrator) on 1 Apr 2016, 14:16:03
password=true is for making the characters you type look like ***. input.password is simply the name of a bit of style information.

name[login.password] is the bit that indicates "This is where you type your password"

You can use gms_show_replace to replace a window with your own, and then you can show it by calling the normal gms_show_* function.
consti on 1 Apr 2016, 14:44:38
Ok, but how to indicate what a button does? Does it give a special variable?
Size43 (Administrator) on 1 Apr 2016, 15:27:08
Seems like I completely forgot about that part.

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.

The same goes for textboxes, etc. By giving them the right name, the extension will know where the username, password, etc. are.
Size43 (Administrator) on 1 Apr 2016, 15:30:46
To add to that: you can register your own event handlers as well, by using wle_register_handler. These are all undocumented functions, so if you need something specific feel free to ask, but I can't guarantee that it'll work. :)
MrSloth on 23 Sep 2016, 16:28:17
My Login button does not work?http://pastebin.com/Cb3YyDU6
When i click on it nothing happens
Size43 (Administrator) on 26 Sep 2016, 20:00:25
Please see my reply in the other topic :)
CandyShield on 23 Jul 2015, 22:02:01
Hi Size,
one question : when i use gamemakerserver on android or ios when i try to login or register the keyboard on the mobile not show to type the name and password. any solutions?THNX.
CandyShield on 24 Jul 2015, 03:22:36
oh thats ok now it's work when i use gms_show_keyboard()
Forgeio on 2 Jul 2015, 00:38:37
Hey Size, can you send me an example on how to edit the windows like inside of Heroes of Legendary Epicness, and also, how do you disable guests from joining and only registered players? thanks :)
Size43 (Administrator) on 2 Jul 2015, 19:14:46
Seems like captain_davy hasn't used the built-in system. You should ask him. I don't have time to make examples, but you should be able to use the window inspector to modify the existing windows and make something that looks almost the same as Heroes of Legendary Epicness.

Please see gms_show_set_allowguest for the second part of your question :)
Forgeio on 3 Jul 2015, 17:14:46
thank you! Im not quite sure If I will be able to figure that out lol but thanks anyways :P
amkgames on 5 Apr 2015, 21:37:48
I can't find login.register D: how can i remove it then?
Size43 (Administrator) on 6 Apr 2015, 11:21:16
What exactly are you trying to remove?
amkgames on 6 Apr 2015, 21:29:05
The register button
Size43 (Administrator) on 6 Apr 2015, 21:46:55
Control+F for
<button 
name[login.register]
style[button, backgrounds.highlight, border]
hover[backgrounds.hover]
unhover[backgrounds.highlight]>@txt_register</button>


In the login.scn file, and remove that line. The copy and paste the entire file to a gms_show_replace call.
amkgames on 6 Apr 2015, 21:51:13
Thanks and where can i download or find login.scn file? And i found more bugs on site: when click on a game from user's profile then language changes and when click on username in game then too languahe changes.
Size43 (Administrator) on 6 Apr 2015, 22:04:58
It should be in the download, in the Custom Windows folder.

Fixed and fixed ;)
amkgames on 6 Apr 2015, 21:52:23
Language* click on username of creator of game*