User Tools

Site Tools


hpl3:game:gui

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Next revision Both sides next revision
hpl3:game:gui [2013/08/05 14:14]
thomas [Summary]
hpl3:game:gui [2013/11/04 10:04]
thomas [State Variables]
Line 79: Line 79:
 The previous state is a set of properties that are set after a widget function have been called. All come in the form of: ImGui_Prev*. The previous state is a set of properties that are set after a widget function have been called. All come in the form of: ImGui_Prev*.
  
-They can be used to get all sort of information on the state of the most recently defined widget. Mostly, these are useful when doing custom Widgets, (see below) and can then be used to see if the widget just became into focus, or more importantly what as the absolute size and position used to draw it.+They can be used to get all sort of information on the state of the most recently defined widget. Mostly, these are useful when doing custom Widgets, (see below) and can then be used to see if the widget just became into focus, or more importantly what absolute size and position ​was used to draw it.
  
 ===== Groups and Layout ===== ===== Groups and Layout =====
Line 99: Line 99:
  
 Another important fade setting is the Type one. This will determine in what way the value will be faded between start and end. The available ones are:\\ Another important fade setting is the Type one. This will determine in what way the value will be faded between start and end. The available ones are:\\
-**Linear**: Constant change. +**Linear**: Constant change.\\ 
-**Sigmoid**:​ Starts and ends smoothly. +**Sigmoid**:​ Starts and ends smoothly.\\ 
-**Cosine**: Also smooth start and end, but slightly different. +**Cosine**: Also smooth start and end, but slightly different.\\ 
-**Cube**: Starts slow and accelerates. +**Cube**: Starts slow and accelerates.\\ 
-**InvCube**:​ Starts fast and decelerates.+**InvCube**:​ Starts fast and decelerates.\\
  
 Another way to use fading it so let it oscillate between two values. This is useful to a blinking button or some moving graphic. To do this use the ImGui_FadeOscillate functions. This are meant to be called every update when defining the value of some properties. Example: Another way to use fading it so let it oscillate between two values. This is useful to a blinking button or some moving graphic. To do this use the ImGui_FadeOscillate functions. This are meant to be called every update when defining the value of some properties. Example:
  
 <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 123: Line 122:
 Then flowerGfx can be used where ever it is needed. No need to neither load or destroy the asset. Then flowerGfx can be used where ever it is needed. No need to neither load or destroy the asset.
  
 +It is also possible to load graphics as textures or animations, by using the types ''​eImGuiGfx_Texture''​ and ''​eImGuiGfx_ImageAnimated''​.
 +
 +For texture:
 +<code c++>
 +cImGuiGfx flowerGfx("​flower.dds",​ eImGuiGfx_Texture);​
 +cImGuiGfx flowerGfx("​flower.dds",​ eGuiMaterial_Additive,​ eImGuiGfx_Texture);​
 +</​code>​
 +Note that it is now possible to load DXT format files!
 +
 +
 +For for animation:
 +<code c++>
 +cImGuiGfx flowerGfx("​flower.tga",​ eImGuiGfx_ImageAnimated);​
 +cImGuiGfx flowerGfx("​flower.tga",​ eGuiMaterial_Additive,​ eImGuiGfx_ImageAnimated);​
 +</​code>​
 +When loading an animation, an extension is required and the engine will load all the files named like "​flower00.tga",​ "​flower01.tga",​ etc for as long as it can find file names. These images will then be looped around in an animation loop. Control the animation speed by setting the member variable ''​mfAnimationTime''​ like this:
 +<code c++>
 +cImGuiGfx flowerGfx("​flower.tga",​ eImGuiGfx_ImageAnimated);​
 +flowerGfx.mfAnimationTime = 0.1;
 +</​code>​
 +This will make each frame play for 0.1 seconds. (default setting is 1).
 +
 +**Note on Graphics**
 +  * 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 =====
  
hpl3/game/gui.txt · Last modified: 2015/09/17 10:14 by ian.thomas