Creating an interface - Revision history

Scratch at 10:34, 31 July 2017

2017-07-31T10:34:26Z

Scratch at 12:38, 24 July 2017

2017-07-24T12:38:05Z

Scratch: /* Adding interaction */

2017-07-24T12:33:31Z

‎Adding interaction

Scratch at 12:04, 24 July 2017

2017-07-24T12:04:47Z

Scratch: /* More about the gui file */

2017-07-19T21:24:09Z

‎More about the gui file

Scratch at 21:23, 19 July 2017

2017-07-19T21:23:41Z

Scratch: /* Adding it to our gamemode */

2017-07-19T21:22:52Z

‎Adding it to our gamemode

Scratch: Created page with "Interfaces is what makes the HUD, Netricsa, etc. This means an interface can either be shown passively (without user input) or actively (with user input). {{Box|Note|This pag..."

2017-07-19T21:15:21Z

Created page with "Interfaces is what makes the HUD, Netricsa, etc. This means an interface can either be shown passively (without user input) or actively (with user input). {{Box|Note|This pag..."

New page

Interfaces is what makes the HUD, Netricsa, etc. This means an interface can either be shown passively (without user input) or actively (with user input).

{{Box|Note|This page is a work-in-progress!}}

== The gui file ==

Let's start by creating a gui file. Let's call it <code>hello.gui</code> and we'll put it inside of our scenario in a <code>gui</code> folder. We will discuss its contents later.

<pre class="prettyprint">
<gui>
<doc>
<group>
<text anchor="0.5 0.5" font="gui/fonts/font_agency16.fnt" text="Hello, world!" />
</group>
</doc>
</gui>
</pre>

== Adding it to our gamemode ==

...

== More about the gui file ==

Gui files are formatted as basic XML. Here, the <code>gui</code> tag is our root element, and is required for all interfaces. Inside of this, we have the <code>doc</code> tag, which is also required. Inside of that, we have our first widget, which will be the root widget. In this case, we use the <code>[[GroupWidget]]</code> by using the <code>group</code> tag. A group widget does not draw anything to the screen. Instead, it is simply a container. It has the special property that it will automatically take the width and height of its parent widget, or if there is no parent widget, the entire screen. This makes it perfect as a container for all other widgets.

Inside of that, we have our first real widget, a <code>[[TextWidget]]</code>, which we indicate by using the <code>text</code> tag. This widget is inside of the <code>group</code> tag, which means that this text widget is a child of the group widget, and the group widget is its parent. Also note that we close the <code>text</code> tag immediately instead of opening it, since we don't need to have any child widgets inside of it.

The <code>font</code> and <code>text</code> attributes speak for themselves, however the <code>anchor</code> attribute in the above example is more interesting. This is a vector attribute, meaning it accepts 2 floating point numbers. The first is X, the second is Y. These values defines the scalar position of the widget within its parent's size (based on its own size). For example, if you set the anchor X to 0, the widget will be left-aligned. (0 is the default for both X and Y if you don't define the anchor.) If you se this value to 0.5, it will be aligned in the center of its parent. And if you set it to 1, it will be aligned on the right side. The same counts for Y, but then for the Y axis, where 0 would be the top and 1 would be the bottom.

← Older revision		Revision as of 10:34, 31 July 2017
Line 253:		Line 253:
	}		}
	</pre>		</pre>
		+
		+	[[Category:Tutorials]]

← Older revision		Revision as of 12:38, 24 July 2017
Line 1:		Line 1:
	Interfaces is what makes the HUD, Netricsa, etc. This means an interface can either be shown passively (without user input) or actively (with user input).		Interfaces is what makes the HUD, Netricsa, etc. This means an interface can either be shown passively (without user input) or actively (with user input).
−
−	~~{{Box\|Note\|This page is a work-in-progress!}}~~

	== The gui file ==		== The gui file ==

@@ Line 178: / Line 178: @@
 		return m_isInterfaceVisible
 		    || VersusGameMode::ShouldFreezeControls();
+	}
 </pre>

@@ Line 48: / Line 48: @@
 		// Remember to call the base function from the inherited gamemode!
 		VersusGameMode::RenderWidgets(player, idt, sb);
+	}
 </pre>
@@ Line 62: / Line 75: @@
 The <code>font</code> and <code>text</code> attributes speak for themselves, however the <code>anchor</code> attribute in the above example is more interesting. This is a vector attribute, meaning it accepts 2 floating point numbers. The first is X, the second is Y. These values defines the scalar position of the widget within its parent's size (based on its own size). For example, if you set the anchor X to 0, the widget will be left-aligned. (0 is the default for both X and Y if you don't define the anchor.) If you se this value to 0.5, it will be aligned in the center of its parent. And if you set it to 1, it will be aligned on the right side. The same counts for Y, but then for the Y axis, where 0 would be the top and 1 would be the bottom. Thus, in our example above, <code>0.5 0.5</code> means to put the widget exactly in the center.

← Older revision		Revision as of 21:24, 19 July 2017
Line 61:		Line 61:
	Inside of that, we have our first real widget, a <code>[[TextWidget]]</code>, which we indicate by using the <code>text</code> tag. This widget is inside of the <code>group</code> tag, which means that this text widget is a child of the group widget, and the group widget is its parent. Also note that we close the <code>text</code> tag immediately instead of opening it, since we don't need to have any child widgets inside of it.		Inside of that, we have our first real widget, a <code>[[TextWidget]]</code>, which we indicate by using the <code>text</code> tag. This widget is inside of the <code>group</code> tag, which means that this text widget is a child of the group widget, and the group widget is its parent. Also note that we close the <code>text</code> tag immediately instead of opening it, since we don't need to have any child widgets inside of it.

−	The <code>font</code> and <code>text</code> attributes speak for themselves, however the <code>anchor</code> attribute in the above example is more interesting. This is a vector attribute, meaning it accepts 2 floating point numbers. The first is X, the second is Y. These values defines the scalar position of the widget within its parent's size (based on its own size). For example, if you set the anchor X to 0, the widget will be left-aligned. (0 is the default for both X and Y if you don't define the anchor.) If you se this value to 0.5, it will be aligned in the center of its parent. And if you set it to 1, it will be aligned on the right side. The same counts for Y, but then for the Y axis, where 0 would be the top and 1 would be the bottom.	+	The <code>font</code> and <code>text</code> attributes speak for themselves, however the <code>anchor</code> attribute in the above example is more interesting. This is a vector attribute, meaning it accepts 2 floating point numbers. The first is X, the second is Y. These values defines the scalar position of the widget within its parent's size (based on its own size). For example, if you set the anchor X to 0, the widget will be left-aligned. (0 is the default for both X and Y if you don't define the anchor.) If you se this value to 0.5, it will be aligned in the center of its parent. And if you set it to 1, it will be aligned on the right side. The same counts for Y, but then for the Y axis, where 0 would be the top and 1 would be the bottom. Thus, in our example above, <code>0.5 0.5</code> means to put the widget exactly in the center.

@@ Line 50: / Line 50: @@
+	}
 </pre>
 == More about the gui file ==

@@ Line 17: / Line 17: @@
 </pre>
-== Adding it to our gamemode ==
+== Drawing our interface ==
-...
+To draw our interface, we need to add it to a place that draws stuff. A prime example of this is the <code>RenderWidgets</code> function of a gamemode. But first, we need to instantiate a [[Widget Hoster]] which will do most of the hard work of interfaces for us. Here's how we would load the <code>hello.gui</code> file inside of a gamemode:
 == More about the gui file ==