(Sneak Peak) New GUI For Ashita

Past news that pertained to Ashita v2 that is now archived.
Locked
User avatar
atom0s
Site Admin
Posts: 450
Joined: Sat May 14, 2016 5:13 pm

(Sneak Peak) New GUI For Ashita

Post by atom0s » Sat Jun 18, 2016 12:17 pm

Hello everyone, in the past weeks I've been working slowly on getting ImGui to work with Direct3D8. Given that Direct3D8 lacks a lot of useful features, the process is a bit annoying.
Some things that are included in Direct3D9 that make life very much easier are not found in 8 and have to be done manually. (Mainly clipping / scissor rects etc.)

What is ImGui?

ImGui is an immediate mode graphical user interface implementation that is open source and light-weight. It allows the rapid creation of in-depth UIs for various purposes.
You can find a lot more information about the project here:
https://github.com/ocornut/imgui

Why use ImGui?

At the current moment, Ashita makes use of AnTweakBar. It is a nice and simple UI framework that works for its intended purposes, but for an in-game UI, it is not cutting it and hinders the ability for creative interfaces and useful tools.
AnTweakBar lacks a lot of simple controls that would be thought to be included. Sadly, that is not the case and things like multiple lined text boxes, proper text input, etc. is not possible.

ImGui solves this by including the basic set of controls plus a ton more! ImGui has tons of unique controls typically not found in a UI library right off the bat.

But I use AnTweakBar in a plugin/addon!?

No problem. AnTweakBar is here to stay as well. Both UI frameworks will be available to users with no sacrifices.
Although I do encourage users to make use of ImGui over AnTweakBar because in future releases it may be removed to cut down on rendering costs and bloat.

Screenshots
Image

To explain this picture a bit:
- The windows on the left side are created from a plugin.
- The window on the right side is built into Ashita currently for testing. (It will be removed when this is released.)

Creating things in ImGui is simple and does not require any object tracking for windows / controls. Beings this is an immediate mode GUI, elements are rendered from their creation every frame. For example, the left side windows in this screenshot are created using this code from the plugin:
  1. void Test::Direct3DRender(void)
  2. {
  3.     auto ui = this->m_AshitaCore->GetImGuiManager();
  4.  
  5.     // Render a simple test window..
  6.     {
  7.         static auto show_test_window = true;
  8.  
  9.         ui->Begin("Test Window #1", &show_test_window);
  10.         ui->Text("This is a simple test window!");
  11.         ui->End();
  12.     }
  13.  
  14.     // Render a window with some controls..
  15.     {
  16.         static auto show_test2_window = true;
  17.         static auto color = ImColor(125, 125, 125);
  18.         static auto f = 0.0f;
  19.  
  20.         ui->Begin("Test Window #2", &show_test2_window);
  21.         ui->ColorEdit3("color", (float*)&color);
  22.         ui->SliderFloat("float", &f, 0.0f, 1.0f);
  23.         ui->Text("Application average %.3f ms/frame (%.1f FPS)", 1000.0f / ui->GetIO().Framerate, ui->GetIO().Framerate);
  24.         ui->End();
  25.     }
  26.  
  27.     // Render a window with some Ashita information..
  28.     {
  29.         static auto show_ashita_info = true;
  30.         static auto current_item = 0;
  31.  
  32.         ui->Begin("Ashita Information", &show_ashita_info);
  33.         ui->Text("Interface Version: %f", ASHITA_INTERFACE_VERSION);
  34.         ui->Text("Loaded Plugins: %d", this->m_AshitaCore->GetPluginManager()->GetPluginCount());
  35.  
  36.         std::vector<std::string> plugins_;
  37.         std::vector<const char*> plugins;
  38.  
  39.         auto pmgr = this->m_AshitaCore->GetPluginManager();
  40.         for (auto x = 0, y = pmgr->GetPluginCount(); x < y; x++)
  41.         {
  42.             auto plugin = (IPlugin*)pmgr->GetPlugin(x);
  43.             if (plugin != nullptr)
  44.                 plugins_.push_back(plugin->GetPluginData().Name);
  45.         }
  46.  
  47.         for (size_t i = 0; i < plugins_.size(); ++i)
  48.             plugins.push_back(plugins_[i].c_str());
  49.  
  50.         ui->ListBox("Plugins:", &current_item, (const char**)&plugins[0], plugins.size());
  51.         ui->End();
  52.     }
  53. }
The demo window on the right is made from the following code found here:
https://github.com/ocornut/imgui/blob/m ... i_demo.cpp

Credits
- ocornut - For creating ImGui.
- atom0s - For implementing ImGui into Direct3D8 / Ashita, creating the Direct3D8 renderer needed for ImGui to work with Final Fantasy XI.
- wan - For assistance with Direct3D8 clipping implementation used within the Direct3D8 renderer made for this implementation.
Lead Ashita Developer

Want to donate to say thanks?
https://www.paypal.me/atom0s
User avatar
atom0s
Site Admin
Posts: 450
Joined: Sat May 14, 2016 5:13 pm

Re: (Sneak Peak) New GUI For Ashita

Post by atom0s » Sat Jun 18, 2016 2:39 pm

ImGui allows us to edit the style of the entire UI system, as well as per-item per-rendering as needed. Here is a redone UI to look like the Ashita launcher:
Image
Lead Ashita Developer

Want to donate to say thanks?
https://www.paypal.me/atom0s
User avatar
atom0s
Site Admin
Posts: 450
Joined: Sat May 14, 2016 5:13 pm

Re: (Sneak Peak) New GUI For Ashita

Post by atom0s » Sat Jun 18, 2016 3:24 pm

Upcoming Changelog For Ashita
  • Plugin interface is bumping up to 2.0
  • AS_String has been removed from Ashita. (AS_String.h will remain in the ADK for a few updates more but will be removed soon. Includes an error when compiling now to warn users to move away from it.)
  • All instances of AS_String have been converted to std::string internally within Ashita.
  • New UI System - ImGui - More info here: https://github.com/ocornut/imgui
  • The new UI system can be accessed by plugins via: m_AshitaCore->GetImGuiManager();
  • New header in the ADK holding all the new UI stuff (imgui.h).
Lead Ashita Developer

Want to donate to say thanks?
https://www.paypal.me/atom0s
User avatar
atom0s
Site Admin
Posts: 450
Joined: Sat May 14, 2016 5:13 pm

Re: (Sneak Peak) New GUI For Ashita

Post by atom0s » Tue Jun 21, 2016 2:00 am

Some more information with this as I make progress:

Plugins have full access to the new GUI system through m_AshitaCore->GetImGuiManager. This gives total access to every ImGui call available in its standard package.
Plugins have the most control of the UI between Addons and Plugins. If users want to make extensive UIs it is recommended to use plugins.

Addons now have partial access to the GUI system using the 'imgui' object in Ashita. This exposes a vast amount of the ImGui API but not all of it.
Some things are customized and tweaked to work with Lua due to Lua limitations. I will release a lot more information regarding the Lua implementation when this update is pushed so developers can understand how to work with things better.

Input with the new UI system has been tweaked constantly over the last few days to help ensure things won't affect your gameplay. Input to the UI blocks all input to the game allowing either or to have proper control when needed. If you click on the UI, it will 'swallow' the mouse event(s) while you are over it. You cannot click through the UI so be mindful where you place things if you do for some reason use the mouse to play the game.

Here is an updated screenshot of a newer style I did for the UI:
Image
Lead Ashita Developer

Want to donate to say thanks?
https://www.paypal.me/atom0s
User avatar
atom0s
Site Admin
Posts: 450
Joined: Sat May 14, 2016 5:13 pm

Re: (Sneak Peak) New GUI For Ashita

Post by atom0s » Sun Jun 26, 2016 11:38 pm

Some more progress, Lua now has access to nearly everything in the UI library. I have setup wiki info for them here:
- http://ashita.atom0s.com/wiki/doku.php? ... ions:imgui
- http://ashita.atom0s.com/wiki/doku.php? ... s:imgui.io
- http://ashita.atom0s.com/wiki/doku.php? ... mgui.style

Windows loaded with ImGui will now store their positions into a saved ini file located within <Path To Ashita>\Config\imgui.ini
This can help allow your addon/plugin to save its position information to the ini file. This all happens automatically as well without any required effort by the authors!
Lead Ashita Developer

Want to donate to say thanks?
https://www.paypal.me/atom0s
Locked