Hello, I'm trying to write my own GUI system with SFML, but I'm a bit lost where to start...
Like how should the classes be designed? How should the events be handled when there are 2 overlapping windows?
Are there any resources on this?
Trying to write my own GUI with SFML
I usually go with a base class that contains a child container. Child elements are sorted (either top to bottom). To draw elements, I disable the z-test (too annoying to offset each element) and draw bottom to top (you can use the parent element dimensions as viewport to get automatic clipping).
When processing clicks, you go through the children top to bottom, so clicks are automatically processed by the right window and you don't need to care about overlapping. You might also want to have some kind of mechanism that allows "useless" elements to forward clicks to their parent element (a button might contain a label, yet when you click the label you generally want the button to trigger). Again, the easiest way is to avoid special handling and make the default event handler call the parents event handler.
Also, after you figured out which element was clicked on, loop over it and all parents and move them to the front (or back, whichever is "top") of their own parents respective child list.
Getting a basic ("static") GUI to work is usually pretty trivial, up to the point where you add drag & drop (which is unfortunately often the most convenient way to do stuff).
This is the tutorial about writing your own GUI that I liked most: http://iki.fi/sol/imgui/ .
It nicely avoids creating a complicated class hierarchy with duplicated state you would constantly need to update, as its using the IMGUI concept. You just call the functions as needed and if the menu should show - it does.
Its using SDL, but should be easy to adapt to SFML. I would suggest writing your own helper function to draw a rectangle with a given color, texture or text inside first, to not scatter that code all over your GUI; that also makes it easy to batch these draws calls later.
It nicely avoids creating a complicated class hierarchy with duplicated state you would constantly need to update, as its using the IMGUI concept. You just call the functions as needed and if the menu should show - it does.
Its using SDL, but should be easy to adapt to SFML. I would suggest writing your own helper function to draw a rectangle with a given color, texture or text inside first, to not scatter that code all over your GUI; that also makes it easy to batch these draws calls later.
Take a look at this article it seems to cover the basics rather decently as well :) There are also a few GUI libraries for SFML that you might be interested in looking at their source to see how they designed things as well.
For my simple UI I go with a design similar to what Trienco described. My base frame has everything a generic frame would need, with sliders, buttons, ect. containing specific functionality. A complex UI is then just broken down into simpler elements making it much easier to create. Mouse interaction is just handled using simple virtual functions (Like OnMouseDown, OnDragStart, ect) since UI interaction was written with C++ in mind. It feels a little hacky but it gets the job done for right now :) Good luck!
Just as a quick example what you can do with a relatively simple approach described by AnnaMarie and me:
While I wouldn't use the code as example for great coding, the GUI code is relatively well separated (the gui directory has the classes with the logic, the renderer has the functions to draw the elements).
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
