top of page
ROHAN PATEL
User Interface Tools
Engine System Guide
system Overview
![Systems Prsentation.jpg](https://static.wixstatic.com/media/dfb871_681c0603129649b98c2d7fb1b4ac08a1~mv2.jpg/v1/fill/w_864,h_484,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Systems%20Prsentation.jpg)
Demo video
How to use
1. Changes into Graphics.cpp
The interface
![Interface.PNG](https://static.wixstatic.com/media/dfb871_4e627391b99c409fbc0b3b8a93019e4c~mv2.png/v1/crop/x_0,y_10,w_889,h_836/fill/w_827,h_778,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Interface_PNG.png)
Put an object inside your Graphics bucket
![NewBucket.PNG](https://static.wixstatic.com/media/dfb871_3db21eca6104438288d6a5805306cbb9~mv2.png/v1/fill/w_819,h_341,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/NewBucket_PNG.png)
2. Change the Effect name to your own Effect
-
Rename the Effect class inside my project
3. Add new AssetTypeInfo as “ui_item”
![BuildLua.PNG](https://static.wixstatic.com/media/dfb871_81e8d034b66e4618a0ad45b53fb81214~mv2.png/v1/fill/w_505,h_216,al_c,lg_1,q_85,enc_avif,quality_auto/BuildLua_PNG.png)
![BuilLua2.PNG](https://static.wixstatic.com/media/dfb871_7822e680f39849469325d96b8ee57d6e~mv2.png/v1/fill/w_512,h_229,al_c,q_85,enc_avif,quality_auto/BuilLua2_PNG.png)
4. Add vertex Format inside your Graphics.cpp
![SUIVertex.PNG](https://static.wixstatic.com/media/dfb871_70569bf036c14bff973c5a183fcd793b~mv2.png/v1/fill/w_509,h_193,al_c,q_85,enc_avif,quality_auto/SUIVertex_PNG.png)
5. Add UIAssetBuilder Project along with UserInterface Project in your Engine from the zip file that I provided you
The steps to use system in game
First things first, Create them.
![CreateStuff.PNG](https://static.wixstatic.com/media/dfb871_0f3adf9655fe43e28276404f086dbbc1~mv2.png/v1/fill/w_570,h_183,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/CreateStuff_PNG.png)
Lua files for creating geometry
Create UIGgeometry from Lua File and Assign it to Panel or other items
-
eae6320::UI::UIGeometry::Handle _panelGhandle;
-
eae6320::UI::UIGeometry::s_managerG.Load("data/geometry/UI/UIPanel.lua",_panelGhandle, UI::ItemType::sPanel)
-
s_panel.m_Geometry = eae6320::UI::UIGeometry::s_managerG.Get(_panelGhandle);
s_panel.m_Effect = _uiEffect;
s_panel.m_Physics.position = eae6320::Math::sVector(-95.0f, 60.0f, 0.0);
Make sure to create the Effect with my vertex shader which is provided inside zip file.
The user creates a panel, a progress bar (assign proper geometry and effect ) and then add it to the widget. (in MyGame.cpp)
![PushToWidget.PNG](https://static.wixstatic.com/media/dfb871_48129231ff434ffc9cea060fa3fff60d~mv2.png/v1/fill/w_714,h_102,al_c,lg_1,q_85,enc_avif,quality_auto/PushToWidget_PNG.png)
Next, submit data to render and that's it from myGame.cpp
![SubmitFromGame.PNG](https://static.wixstatic.com/media/dfb871_b76030602ba9457f96c8debb2fd58801~mv2.png/v1/fill/w_704,h_116,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/SubmitFromGame_PNG.png)
User needs to add this function inside the Graphics.cpp along with putting the object of UIRenderer in their bucket. I retrieve the data here.
![Retrieve.PNG](https://static.wixstatic.com/media/dfb871_00a313cbba1445608952b5974f3c6309~mv2.png/v1/fill/w_843,h_136,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Retrieve_PNG.png)
Then call to BindDraw
![BindDraw.PNG](https://static.wixstatic.com/media/dfb871_02e70c8917a64118ae8459d0b63621ef~mv2.png/v1/fill/w_942,h_98,al_c,lg_1,q_85,enc_avif,quality_auto/BindDraw_PNG.png)
And Clean
![Clean.PNG](https://static.wixstatic.com/media/dfb871_360417e0070e49ccb1d2178586dcbe6a~mv2.png/v1/fill/w_870,h_110,al_c,lg_1,q_85,enc_avif,quality_auto/Clean_PNG.png)
Feel free to contact me for any help
![Systems Prsentation (1).png](https://static.wixstatic.com/media/dfb871_fec4ad57b20c4c36ac9c94b5f7e41780~mv2.png/v1/fill/w_890,h_501,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Systems%20Prsentation%20(1).png)
![Systems Prsentation.png](https://static.wixstatic.com/media/dfb871_48f98cfca246487db7828b3d32e5a5be~mv2.png/v1/fill/w_834,h_469,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Systems%20Prsentation.png)
bottom of page