GUI Expansion

So I really need to break the habit of posting whenever is convenient so here goes.

So in order to progress further, I needed to further expand my GUI systems to allow for more complex tasks. In order to achieve this, I opted for an event-driven system and ran across a fun issue that had me stumped for a while.

The issue I had was mouse input surprisingly. I had implemented the system and was confused as to why it was inconstant. Turns out the input system for OpenTK uses hardware coordinates and I have no point of reference to convert them damn. No problem let us look at the documentation. Okay, the window has its own cursor class. It did not compile and I was confused and double checked the documentation and realised that it is part of the GameWindow class and I am using NativeWindow. I spend a while digging around for things that work the suggested thing was to pInvoke out to get the cursor position. The problem with this is it only worked on a handful of Linux distributions damn. I ended up finding that WinForms had cursor handling, so in defeat begrudgingly implemented it and of course it works. My concern with this is that no all the versions of Mono run-time on Linux distributions will have it implemented so it will be a wait and see.

I realised that I say the windowing system is XML based but I never state how so here I am going to show a bit of a sample.

<?xml version="1.0" encoding="UTF-8"?>
<Canvas xRes="640" yRes="480">
    <TextBox name="Host" text="Host Game" xPos="192" yPos="100" xLock="Left" yLock="Top" width="256" height="48" fontSize="24" 
    onhover="MainApplication.State.MainMenuState+MenuController:Hover" onnormal="MainApplication.State.MainMenuState+MenuController:Normal" 
    onclick="MainApplication.State.MainMenuState+MenuController:Click" submenu="HostMenu.uInterface" />
    <TextBox name="Join" text="Join Game" xPos="192" yPos="172" xLock="Left" yLock="Top" width="256" height="48" fontSize="24"
    onhover="MainApplication.State.MainMenuState+MenuController:Hover" onnormal="MainApplication.State.MainMenuState+MenuController:Normal" 
    onclick="MainApplication.State.MainMenuState+MenuController:Click" />
    <TextBox name="Quit" text="Quit" xPos="192" yPos="244" xLock="Left" yLock="Top" width="256" height="48" fontSize="24"
    onhover="MainApplication.State.MainMenuState+MenuController:Hover" onnormal="MainApplication.State.MainMenuState+MenuController:Normal" 
    onclick="MainApplication.State.MainMenuState+MenuController:Click" onrelease="MainApplication.State.MainMenuState+MenuController:Quit"/>
</Canvas>

As you can see there are a few things to note in the document. So I will break it down

First, you have to define a Canvas with the canvas node. This contains the reference resolution(xRes and yRes). That will be used to adjust the User Interface to the resolution display.

Next, you have the elements that make up the user interface as the children. For this example, I am using a Textbox. It consists of a series of attributes there are a lot so I will go through the important ones. The first is name this is a tag unique to the Element and can be used to find it.  The next is the locks these are used as anchors relative to the parent, in this case, the Canvas. They can be set to any of the corners, edge or to stretch the element. The next important thing is the OnHover, OnNormal, OnClick and OnRelease these are events that send callbacks to the functions defined when the action stated is triggered. Finally, we have SubMenu this is used to define another canvas to load in order to add to the menu stack to allow easy transition between menus.

With this, I should be able to build the user interface reasonably pain-free(Hopefully…).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s