I am releasing kiUi as alpha, officially working with both Ogre 2.1 and 2.0
I believe this makes it one of the first few Ui libraries to officially support Ogre 2.1
kiUi also supports Emscripten, and has a live demo here : http://novembermonk.github.io/kiui/livedemo/kiui.html
kiUi
- is a very lightweight Ui library but feature-complete : it even has a docking space for your windows and a file tree browser
- auto-layouts : no manual positioning or sizing is ever needed except when explicitly specified (no messing with VSizers and HBoxes)
- is skinnable : provided in the example is a sample imitating the base skin of MyGui
- separates Ui logic from Ui appearance
- has few dependencies : only GLFW for the sample renderer, and only Ogre for the kiog renderer
- compiles under gcc, clang and visual studio, you can check for the Travis CI status stating that it builds, and you can look at the .travis.yml script to have an example of how to build it
- has : tables, dockspaces, tabs, radiobuttons, sliders, text inputs
- doesn't have yet : documentation, but it has a bunch of simple examples
- uses Gorilla for fast and efficient rendering on top of Ogre
- is not tied to Ogre, and has a standalone renderer using NanoVG : you can both use it in your Ogre app and outside of it
- is in an alpha state : if you wish to try it I will be happy to help, but a lot of things are probably gonna change (for the better), so it will need a bit of upkeep
Get it here :
https://github.com/novembermonk/kiui (The kiUi library)
https://github.com/novembermonk/kiog (The Ogre backend for kiUi)
A few screenies :
A resizable draggable window : The same window with the MyGui example skin : Original post
Here is the backstory : for years, I have been looking for a gUi solution that would cover some simple requirements :
- Separation of Ui appearance and logic
- Automatic layout as the norm, not the exception (as in HTML)
- Easy styling, separated from logic (as in CSS)
- Brevity and simplicity above everything else, especially in C++ code
- Good for both an editor Ui and a game Ui
So, year after year I have tried a handful of solutions and they all fell short of what I was looking for :
- CEGUI is an enormous piece of software and simplicity isn't its main advantage, especially not : convenient automatic layout and skinning
- Qt is a bloated framework that make you shoehorn all your code into their models, classes, toolchain (even though I would concur that Qt Creator is a great editor), and it is okay for writing an editor but not so much for a game
- These two (and let's add in MyGui) while being very good pieces of software are good examples of how "over-flexibility" actually kills flexibility and make you lose tons of time at the end of the day
- LibRocket at first seemed promising, in offering HTML/CSS layouting for games, but it is the opposite of "simple" or "modern", and it actually doesn't feature the main advantage of HTML layout which is that the layout is done automatically when nothing is specified. So in the end it is much like CEGUI, except you write stuff in HTML and you have to wire it to render manually
So after a few iterations and trying almost all of them I came to the realization that it didn't exist and that I'd have to write it, so I started working on it.
These days the features are coming together, and I am coming close to something that will be clean and functional enough to be shared soon, so I wanted to share first a general overview.
Code is not usable yet for a few reasons (no comments in the code, no examples, and it is still a bit coupled to the rest of my engine, so I'd have to take care of that)
To give a short description of what this Ui library is : think of a nice C++ api for HTML/CSS-similar layout and styling system, applied to game Ui and rendering to Gorilla / Ogre.
This screenshot, although from a work-in-progress, should show the basic functionality of the library : not one widget on this has had its position set manually. It's all wrapping and padding and one weight to set the (viewport on right/ tool tabs on left) size respectively.
Nothing fancy : no animations or deformations, visually we are targeting something similar to basic HTML and CSS, which already allows to do basically anything
Let me explain the main features and design principles :
Define your Element in C++
A lot of Ui solutions have dismissed the fact that an Ui is inevitably a more or less complex architecture in native code.
In kiUi we completely embrace that fact, and that you will have to write some C++ to make your Ui interact with your application.
That is probably one key in the simplicity of kiUi : we don't try to make complicated scripting workarounds, delegates systems, clumsy rewirable slots/signals architectures. We do it simple, in pure C++, just using an interface and virtual functions to control and propagate the events.
Otherwise, we commit to two things :
- C++ definitions will be short, concise, will not be intertwined with confusing appearance / layout code
- the styling and layout properties will be easily setup in a separated manner, and these definitions could be easily setup from a script file by a designer (although not implemented yet)
Code: Select all
class Menu : public Form
{
public:
Menu()
: Form("mainmenu")
{
this->insert<Button>("mainbutton", "Start Game", std::bind(&Menu::startGame, this));
this->insert<Button>("mainbutton", "Load Game", std::bind(&Menu::loadGame, this));
}
void startGame()
{}
void loadGame()
{}
};
No styling. We just specify the functional type of the element (Button), its Ui class (mainbutton), a label, and a callback for the buttons.
Style your Layout
Manual positioning and sizing is an antiquated way to go about Ui design, yet most Ui libraries still mainly rely on it, and automatic positioning is usually shoehorned on top of it.
Look at your screen : do you see a lot of widgets whose positions were manually hardcoded ?
Our Layout approach is the opposite, and relies on automatic positioning as the default, for ALL elements, called Flow (as in HTML I believe).
You can always set a widget as manually positioned, and it is pulled out of the Flow, but it's a rare occurrence.
The layout system mainly relies on an attribute that can take three values :
- either it shrinks around its contents
- either it expands to take all available space
- either it's fixed size (really rare occurrence too)
A Layout Style is defined by this property for each dimension (X,Y) and a few others, like margins, padding.
It is setup in code for each Ui class, and there is an inheritance mechanism so that you can define a hierarchy of layout styles :
Code: Select all
// wrap is a builtin layout style which wraps around its content in both X and Y dimensions
layout->add("mainmenu", "wrap");
layout->style("mainmenu")->d_layoutDim = DIM_Y;
layout->add("mainbutton", "wrap");
Skin your Elements
After the layout styling comes the graphic styling, which we will refer to as Skinning.
Again this is very much like CSS styling : it consists of a background (color, gradient, or image), text properties (size, colour), and border (thickness, radius for angles)
Code: Select all
inker->add("default")
inker->ink("default")->d_textColour = Colour(1.f, 1.f, 1.f);
inker->ink("default")->d_textSize = 7.f;
skinner->add("mainbutton", inker->style("default"));
No code yet ?
I know it's harsh not to provide any code right away, but I need to get an idea of the (free) market here, would many people would be interested to try it out right away ? I could share it with a few people and keep in contact with them to iron out the basic usability problems before releasing it ?
If many people are interested in trying it out, it could motivate me to do the needed work sooner than never
So, am I the only one who needed that library ?