GBUI "principles"

Troubleshooting gui
1

I abandoned the work I was doing on my own hud-style GUI to get GBUI running and see how it works.  It took a few days of serious wrestling and stepping through a lot of code, but I now have GBUI running in a StandardGame application inside Eclipse.  Now I just need to figure out what to do with it.  :smiley:



I've dug through the *.bss stylesheet and the BStyleSheet class that parses the different properties in that file.  I've looked at Bang Howdy as an example of what can be done with it (and I must say "wow!").  I've noticed it seems to be very artwork-intensive, in the sense of a lot of background images, images for UI widgets in different states, etc.  But I'm looking for some sort of "primer" on how to approach the development of a GUI with a particular look-and-feel for a game.


  1. I want to build my main menu as a basic window that display an image as a background, and buttons that appear over that image.  I can see in the stylesheet where I specify the images to be used for the different button states.  Does that imply that all the buttons I use will have the same appearance?  What if I want the buttons on another window to look different?


  2. Does the style2.bss contain all possible properties that can be set?  If there isn't a simple reference to what the differenthe  options do, I'd at least like to start with a list of what all can be set before I step into the code to figure out what they do.


  3. Is there any sample code showing a more advanced GUI example than I see in the source code?  In a similar vein, is anyone familiar with the specifics of how Three Rings used BUI in Bang Howdy?  Is it all "basic" jME and BUI components, or are some elements textured quads in Ortho mode?



    Thanks for any guidance on using the tool.  Most of the development I've done has been business apps, where the GUI uses pretty standard components, but I'm hoping I can get off to a good start with game-specific UIs by studying any current wisdom instead of having to figure it all out from the basics.
2

Wow, lots of questions.  I wish I knew who could answer them.  This is a simpler explaination, I have a more indepth one I'm writing for a few fellows whom have asked.



There is no primer at this point.  There are some things you can get from the google code page (http://code.google.com/p/gbui) wiki.  I am writing the primer on bss right now.  When BUI was written BSS was, as best I can tell a "streamlined" or thinner version of CSS.  It never occurred to me, a web developer, that there would be Swing developers who don't know CSS (just as there are Swing developers who don't think that there are web developers that don't think like them;).  In any case, on to the rest of the questions.



Basically each BComponent has a set mapping for a BSS style (like BButton maps to button {} in the BSS and BWindow maps to window {}, etc).  These are documented in the code not by any documentation, mind you, just by knowing where to look.  I'm working on that.


  1. You do not have to use the default look and feel.  If you come up with a style that you want your buttons to look differently from one screen to another, you merely apply the style by overriding the default style.  That is done by [BComponent].setStyleClass("nameOfStyle") and every BComponent has this.  I address more of your questions in the next section, but yes, basically all buttons would have the same appearance, if you want them to look different in another window you specify a different bss class name (as I'll explain, hopefully sufficiently for now, later in this post)


  2. style2.bss does not contain every possibility… it was a simplified list of some of the consolidated values.  If you open styles.properties (which I don't think is being used right now), there are multiple bss files listed.  button.bss for example shows several styles for the default button component (which to make things even more confusing in CSS and BSS each of these listed are called classes button {} button:hover {} button:disabled{} are all classes that are applied to the BButton component). 



    Anyway, by default the button (in style.bss, not style2)  will show a specific image with padding around the outside, the "Dialog" font bolded size 24, aligned center, outline and a specific effect color.



    if the button is disabled then the style button:disabled is applied by default, if you click the mouse down then button:down is called by default, if the button is a toggle and is selected then button:selected is called by default.  If you hover over the button then button:hover is called by default.



    Again, if you change these values and call them something else like "myButton" and apply them via button.setStyleClass("myButton") then your style sheet should reflect that:

    myButton {}

    myButton:hover {}

    myButton:disabled {}

    myButton:down {}

    myButton:selected {}


  3. The only people I know that are familiar with the Bang Howdy GUI are the ones who originally wrote BUI and their lips are sealed:)  I know there are examples out there with GUIs that are more advanced, I've made more advanced GUIs, but none that I have published.  Most of the "tests" in the GBUI framework are simply to show what is there and when code changes are made to ensure that things still work since automated testing of GUI frameworks is somewhat limited in this case.  To answer your question, the Objects in Bang Howdy are JME objects the displays for the GUI are BUI (but not the life markers nor the stars, gold, etc… just the logins, and instructionals, etc, I believe).



    thx



    timo
3

Thanks for the info.  I'll keep checking the wiki, and stepping through the code to try to figure things out - you've given me some good starting points on where to look.  As I dig, I'll try to take notes so you can "check" them to make sure I've gotten things right, and maybe they can turn into something for the wiki to help the next guy.



Thanks again.