User Tools

Site Tools


hpl3:game:gui

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
hpl3:game:gui [2013/11/04 09:57]
thomas [Note on Graphics]
hpl3:game:gui [2015/09/17 10:14]
ian.thomas [In-Scene GUI Rendering]
Line 29: Line 29:
 ===== Widgets ===== ===== Widgets =====
  
-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*. 
  
-Some of the widgets have default values arguments, such as the ToggleButton,​ Slider, etc, which behave in a special way. The default value will only be used to set the initial value, and then as the value change through interaction,​ an internally saved value will be used instead. However, the default value is saved too, and if it changes then the changed default value will be used instead of the saved internal one. +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%%*%%. 
 + 
 + 
 +Some of the widgets have default values arguments, such as the ToggleButton,​ Slider, etc, which behave in a special way. The default value will only be used to set the initial value, and then as the value change through interaction,​ an internally saved value will be used instead. However, the default value is saved too, and if it changes then the changed default value will be used instead of the saved internal one
 + 
 + 
 +Widget functions usually come in two version. One that uses the the default settings, which have been set up using ImGui_SetDefault%%*%%. The other comes with the data settings as an argument and have the suffix "​Ext"​ (in helper functions, when directly using the ImGui class).
  
-Widget functions usually come in two version. One that uses the the default settings, which have been set up using ImGui_SetDefault*. The other comes with the data settings as an argument and have the suffix "​Ext"​ (in helper functions, when directly using the ImGui class). 
  
 Finally it is only widgets that are affected by the layout, so never draw anything directly unless you know what you are doing. It is almost always much better to for instance use Label instead of DrawText to print a message. Finally it is only widgets that are affected by the layout, so never draw anything directly unless you know what you are doing. It is almost always much better to for instance use Label instead of DrawText to print a message.
  
-**Button**\\ 
-This is a normal button that returns true if it was pressed this update. ​ 
  
-**RepeatButton**\\+**Button** \\  
 +This is a normal button that returns true if it was pressed this update. 
 + 
 + 
 +**RepeatButton** \\ 
 Like Button, but will return true as long as it is being pressed. Like Button, but will return true as long as it is being pressed.
  
-**ToggleButton**\\+ 
 +**ToggleButton** \\ 
 Another version of the button that can be turned on/off. It returns the current state. Another version of the button that can be turned on/off. It returns the current state.
  
-**SliderHorizontal**\\ 
-A slider button, which has values between two numbers. A step-size value can also be set to specify in which interval between min and max values can take. It returns the current value. ​ 
  
-**SliderVertical**\\+**SliderHorizontal** \\  
 +A slider button, which has values between two numbers. A step-size value can also be set to specify in which interval between min and max values can take. It returns the current value. 
 + 
 + 
 +**SliderVertical** \\ 
 Just like SliderHorizontal,​ but placed vertically. Just like SliderHorizontal,​ but placed vertically.
  
-**Label**\\+ 
 +**Label** \\ 
 The label does not have any interaction logic, but only displays a text string. If you need a text string with interaction use a button instead. The label does not have any interaction logic, but only displays a text string. If you need a text string with interaction use a button instead.
  
-**Image**\\+ 
 +**Image** \\ 
 This displays an image. Like Label it has no interaction. This displays an image. Like Label it has no interaction.
  
-**MultiToggle**\\ 
-A grid of toggle buttons, where only one can be active at a time. It returns the index (0=first) of the currently selected. In order to add items use ImGui_AddItem* functions. 
  
-**CheckBox**\\+**MultiToggle** \\  
 +A grid of toggle buttons, where only one can be active at a time. It returns the index (0=first) of the currently selected. In order to add items use ImGui_AddItem%%*%% functions. 
 + 
 + 
 +**CheckBox** \\ 
 A text next to a checkbox that can be on or off. Returns the current value. A text next to a checkbox that can be on or off. Returns the current value.
  
-**TextFrame**\\+ 
 +**TextFrame** \\ 
 A scrollable text of frame. It will return, in rows, the amount of text not outside of the window. For instance, if the text contains 5 rows, and only 4 are visible, 1 is the return value. This value is very useful when making a slider that can scroll the text. A scrollable text of frame. It will return, in rows, the amount of text not outside of the window. For instance, if the text contains 5 rows, and only 4 are visible, 1 is the return value. This value is very useful when making a slider that can scroll the text.
  
-**MultiSelect**\\ + 
-Here several different items can be selected. It returns the index of the currently selected one. In order to add items use ImGui_AddItem* functions.+**MultiSelect** \\  
 +Here several different items can be selected. It returns the index of the currently selected one. In order to add items use ImGui_AddItem%%*%% functions
 + 
 + 
 +**Frame\\  
 +** A visible frame made of graphical pieces. Has no interaction. 
 + 
 + 
 +**Window\\  
 +** Your usual graphical window. Displays a caption in its own frame and groups widgets inside it, given they are created between the ImGui_DoWindowStart and ImGui_DoWindowEnd calls. Has no interaction. 
 + 
 + 
 +**Gauge\\  
 +** Displays a horizontal or vertical bar showing progress or whatever it is meant to. Has no interaction also.
  
 ===== Modifiers ===== ===== Modifiers =====
Line 108: Line 135:
  
 <code c++> <code c++>
-cColor = cColor(1,​1)*ImGui_FadeOscillateFloat("​pulse",​1.0f,​ 0.25f,1);+cColor ​col = cColor(1,​1)*ImGui_FadeOscillateFloat("​pulse",​1.0f,​ 0.25f,1);
 </​code>​ </​code>​
 ===== Timers ===== ===== Timers =====
Line 143: Line 170:
 </​code>​ </​code>​
 This will make each frame play for 0.1 seconds. (default setting is 1). This will make each frame play for 0.1 seconds. (default setting is 1).
-**Note on Graphics** 
  
-  ​The size limit is 510x510. (1 pixel borders need for images). +**Note on Graphics** 
-  * You should NOT use the normal ​graphics for larger images ​though as it is in effective. It is meant to be for smaller images so that you can batch the graphics (making it possible to draw most of the gui in 2-3 draw calls). If you need large images, use textures! Here you can easily go up to 1024x1024 (and beyond, should it be needed).+  * For non-texture graphics the size limit is 510x510. (1 pixel borders need for images). 
 +  * Generally, ​You should NOT use the non-texture ​graphics for larger images. It is meant to be for smaller images so that you can batch the graphics (making it possible to draw most of the gui in 2-3 draw calls). If you need large images, use textures! Here you can easily go up to 1024x1024 (and beyond, should it be needed).
 ===== Custom Widgets ===== ===== Custom Widgets =====
  
Line 155: Line 182:
 ====== In-Scene GUI Rendering ====== ====== In-Scene GUI Rendering ======
  
-In order for the a game entity to have a GUI surfaces ​the following criteria must be met:+In order for the a game entity to have a GUI surface ​the following criteria must be met:
   * 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.   * 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.
   * The material of this surface must be translucent. It can be any blend mode though, making it possible to have transperant in-game GUI.   * The material of this surface must be translucent. It can be any blend mode though, making it possible to have transperant in-game GUI.
hpl3/game/gui.txt · Last modified: 2015/09/17 10:14 by ian.thomas