Frictional Game Wiki

<h1>Gui</h1> <div class="level1"> </div> <h1>Overview</h1> <div class="level1"> <p> There are currently two GUI-systems in the engine. The normal one which is called "retained" or just the "normal" GUI. This works by creating all the assets up-front and then works by having special callbacks for all of the GUI elements. For instance when a button is clicked a callback is sent to some piece of code that does the logic for that. It is easy to make an editor where you can build the element for this type of GUI (unfortunately we presently do not have one). </p> <p> The other one is the immediate mode gui or just ImGui. This is a bit special and works by drawing graphics and doing logic at the same time. None of the GUI elements are saved by defined any created every update. This makes it very easy to make changes and extremely fast to iterate (especially when working in script). It does not work very well for more complex interfaces though and is mainly used to make stuff like HUD, Game menus and in-game interfaces. </p> <p> The game also support to draw the GUI on rendered surfaces and how to achieve this will be brought up at the end of this document. </p> </div> <h1>Retained GUI</h1> <div class="level1"> <p> Info coming later! </p> </div> <h1>Immediate GUI</h1> <div class="level1"> </div> <h2>Summary</h2> <div class="level2"> <p> The Immediate Mode Gui (ImGui) is a bit special to how you normally do GUI and works by essentially recreating the entire interface every update. On top of this also handles logic and graphical update in the very same function. Normally this is a sort of sin, but for this system it works really well and make it very easy to set up interfaces. The ImGui have been designed around this concept and the main focus have been to have a system that make GUI creation and iteration really fast. </p> <p> Anyone who has used Unity's older GUI should get the basics of this and it is actually worth looking through <a href="http://docs.unity3d.com/Documentation/Components/GUIScriptingGuide.html" class="urlextern" title="http://docs.unity3d.com/Documentation/Components/GUIScriptingGuide.html" rel="nofollow">their manual</a> for some extra information. This GUI has some extra tricks though and do somethings a bit differently so do not take this as a copy of the Unity one. One of the biggest changes is that it contains some state saving making it even easier to main things. </p> <p> Another important feature of the ImGui is that it works seamlessly with both mouse, keyboard and gamepad input. The most important part of this is a system that calculates navigate with keys/stick on the fly so it is really easy to set up. </p> </div> <h2>Names and Ids</h2> <div class="level2"> <p> In order to keep track of the state of the various GUI elements, the ImGui must save some states. In order to do this it creates 64-bit Ids from the names of the widgets, variables, etc. This makes it very important that the Name of the gui elements are all unique, or else the interface will not work. </p> <p> Internally the actually string names are not used at all, but for speed reasons they are instead represented by 64 bit numbers (that are generated from the strings). </p> </div> <h2>Widgets</h2> <div class="level2"> <p> Widgets are the different elements that make up an interface. Some of these are possible to interact with, while other are not. This is important to note so that you use the right kind of widget when you want a specific behavior. Worth noting is also that all widgets have one function that use the default data settings and one where a data class is needed as argument. All of the widget functions start with ImGui_Do*. </p> <p> <b>Button</b><br/> <b>RepeatButton</b><br/> <b>ToggleButton</b><br/> <b>SliderHorizontal</b><br/> <b>SliderVertical</b><br/> <b>Label</b><br/> <b>Image</b><br/> <b>MultiToggle</b><br/> <b>CheckBox</b><br/> <b>TextFrame</b><br/> <b>MultiSelect</b><br/> </p> </div> <h2>Modifiers</h2> <div class="level2"> </div> <h2>Previous State</h2> <div class="level2"> </div> <h2>Layout</h2> <div class="level2"> </div> <h2>State Variables</h2> <div class="level2"> </div> <h2>Fading</h2> <div class="level2"> </div> <h2>Timers</h2> <div class="level2"> </div> <h2>Custom Widgets</h2> <div class="level2"> </div> <h1>In-Scene GUI Rendering</h1> <div class="level1"> <p> In order for the a game entity to have a GUI surfaces the following criteria must be met: </p> <ul> <li class="level1"> The surface that is to contain the GUI must be flat, consist of 4 vertices and have UV coords going from 0→1 where (0,0) is the upper left corner.</li> <li class="level1"> The material of this surface must be translucent. It can be any blend mode though, making it possible to have transperant in-game GUI.</li> <li class="level1"> The material must have a diffuse texture set, although this texture will never be used in-game (it will only show up in editors and such).</li> <li class="level1"> Any other textures may also be set, so it is possible to give the GUI screen refractive patterns, etc.</li> </ul> <p> Currently, the only entity type that support GUI is "Prop_Terminal", so set the entity to that type and then in the ent-file class settings, set up the properties required. Most important is to set the ConnectedSubmesh variables which is the name of the flat surface where the GUI will be displayed. Also remember to set up a ScreenSize (in pixels) that has the same ratio has the ConnectedSubmesh. </p> </div>