To make our game a little more functionally intuitive and game-like, we're going to create a custom interface, and make use of macros for keyboard controls.
If you haven't already read Tutorial #8, you should check it out first. Or, start at the beginning, if you're new to the series!

Creating an Interface
To start off, we're going to create the actual interface file (.dmf), I just named mine Interface.
http://www.angelfire.com/hero/straygames/Tutorial/ NewInterface.png
You should now be looking at a screen with 3 sections, one for Marcos, one for Menus, and one for Windows.


Creating Macros
The interface file we just created will handle how our game's windows look and function, it also handles the macros (keyboard controls).

Step 1.1 First, we'll edit our macros. Double click the macro line at the top, and then delete out the unnecessary controls, leaving only the ones for cardinal movement. You can delete a specific key's macro by right clicking on it and selecting delete, or by highlighting it and then pressing the delete key.
http://www.angelfire.com/hero/straygames/Tutorial/ EditingMacros.png

Step 1.2 Now, we'll create our own controls. Click the [New macro...] button, then select a Key to use, and set the Command to Attack.
http://www.angelfire.com/hero/straygames/Tutorial/ NewMacro.png
Using the [Find Key...] button is usually easiest, and the Command represents which verb you want to use. In our case, this will call the Attack() verb that we created a few Tutorials back.
With this new macro added, we can now attack by pressing the F key, instead of having to click a text command in a stat panel/info control.
The various check-boxes here can be used to get different input responses. ALT CTRL and SHIFT will make it so those keys must also be held down for the macro to trigger. Repeat will cause the macro to automatically repeat every tick for as long as the key is held down. 'When key is released' will activate when the key is released... instead of when it is initially pressed down. Repeat and Release cannot be selected at the same time.


The Main Game Window
Now that we have a custom interface, our game won't have a map, or stat panels, or an output, or anything else. We'll need to add these onto the default Window.

Step 2.1 Double Click the default Window to bring it up for editing.
http://www.angelfire.com/hero/straygames/Tutorial/ EditingDefaultWindow.png

Step 2.2 First, we should make some basic changes to the window itself. You can do this by double clicking anywhere on it, or by clicking the [Edit...] button on the window in the upper left.
http://www.angelfire.com/hero/straygames/Tutorial/ EditingMainWindow.png
Here, I've set the window name/ID to MainWindow, this can be used later to reference the window from the code.

Step 2.3 Switching over to the Options tab, we have a few more things to change
http://www.angelfire.com/hero/straygames/Tutorial/ EditingMainWindowOptions.png
The Title of the window will be displayed at the top, and if its the main window, also in the taskbar.
We turn the Statusbar off because its just a waste of space, it displays an /atoms name on MouseOver, but not much else.
The icon for your interface can be set to display on both the Titlebar, and on the taskbar entry, same as the Title. If you set the icon on the window marked as default, it will automatically apply to all other windows. Here, I've just set it to the Player icon, for demonstrative purposes.

Step 2.4 The last tab is the Skin options. These let you set background color/images, and an overall transparency for the window. I won't be using any of these for now, but you can mess with them if you'd like.


A Main Map Control
Our window is currently blank, we won't be able to see the actual game, or any of the stat panel info we've previously setup. To add various controls to our window, use the button from the window in the top left.

Step 3.1 First, we'll add a map control. Click the [Map] button, and then click anywhere on our window to place it.
http://www.angelfire.com/hero/straygames/Tutorial/ NewMapControl.png

Step 3.2 Now drag that map control so it is aligned with the top left of the window, just below the File Menu.
http://www.angelfire.com/hero/straygames/Tutorial/ MapAlignment.png

Step 3.3 By using the blue boxes on the sides of a control, you can re-size it. Use the bottom right box, and make the map cover the entire window.
http://www.angelfire.com/hero/straygames/Tutorial/ SizingMapControl.png

Step 3.4 Now double click the map, or use the [Edit...] button, like we did before with the main window, to bring up this map's editing window.

Step 3.5 In the General tab, set the map name/ID to MainMap and make sure the default check-box is checked.

Step 3.6 In the Anchors tab, set the anchors to 0,0 over 100,100
http://www.angelfire.com/hero/straygames/Tutorial/ MapAnchors.png

Step 3.7 Use the OK/Done buttons to close those windows back down to the base DM layout, then press ctrl+R to run your game. It should ask if you want to compile (because you've made changes to the interface), say yes.
There is now nothing but a map, with icons that will scale to fit the window, and you can attack by pressing the F key. Our output is missing though, so we won't get a report about damage!


Adding Output & Info Controls
Finally, we'll add controls so we can see our stats and damage outputs again.

Step 4.1 First, re-size the map so that it isn't taking up the entire window. Once you have room, add an output control, and set it up on the opposite side of the map.
http://www.angelfire.com/hero/straygames/Tutorial/ AddingOutput.png

Step 4.2 Select both the map and the output control, by holding ctrl and clicking both of them. Re-size one of the controls over the other. Then use the [Distribute width evenly] tool from the menu bar.
http://www.angelfire.com/hero/straygames/Tutorial/ DistrubuteWidthEvenly.png
This will evenly size them, so each one takes up half the window.

Step 4.3 With the controls still selected, click the [Auto-anchor controls] tool.
http://www.angelfire.com/hero/straygames/Tutorial/ AutoAnchorControls.png
This will make sure the controls resize properly if the window changes size. It doesn't always give the best results, so make sure you check.
You want 0,0 over 50,100 on the map, and 50,0 over 100,100 on the output. The 50s are here because each one is using 50% of the space. If you had 3 controls, you would want something like 33 to 66 to 99, and the 99% should be rounded up to 100, so no blank space is exposed.

Step 4.4 Double click your output control to edit it. Change its name/ID to MainOutput, make sure the default check-box is checked, and set the border style to sunken.
http://www.angelfire.com/hero/straygames/Tutorial/ OutputGeneralSettings.png
You can use the Appearance tab to change the default font face and colors for your output, but I won't be bothering with mine.

Step 4.5 To add an info control, follow the same basic steps we did for the output. Except, this time, place it above the output, instead of beside the map.
http://www.angelfire.com/hero/straygames/Tutorial/ AddingInfo.png
The edited settings for the info control should be about the same as the output's as well.
http://www.angelfire.com/hero/straygames/Tutorial/ InfoGeneralSettings.png
When you use the auto-anchor tool this time, make sure you have all 3 controls (map, info, output) selected.

Managing the Interface with Code
Step 5.1 winset() content by popular demand! Now then, we'll setup the default state of our main interface window with a new line of code in /mob/Login()
winset() is used to change interface settings. You give it a player (src, in this example), the window or control to be changed ("default" in this example. If we wanted to change some settings on our interface's map, we could send it "default.MainMap"), and finally, the settings we want to change. As you can see here, we are using a single winset() to change multiple parameters (the size, position, and maximized state of the window), you do this by separating the parameters with their values by a ; (as seen in the example above)
Sending multiple parameters at once is beneficial as it cuts down on network traffic and processing. We also spawn() this code off to prevent any possible network delays from effecting our overall project. Such network delays when working with the interface are more of a concern with winget(), which I won't be going into for now.
A full list of interface settings can be found here: http://www.byond.com/docs/ref/skinparams.html

After writing this tutorial, I've realized what a ridiculous amount of work it is just to get your interface halfway back to default, just so you can implement custom macros...

* Tutorial 10 will be about on-screen damage, and hiding our Attack() verb from the Commands tab.