TonegodGUI different Button-Styles

Troubleshooting gui
1

hi all

I’m currently testing TonegodGUI to replace my current self-made UI-Classes.

How to i prepare or apply different Styles to the same kind of Element?

For example, i have a Back-Button (grey) and a connect-button (colored), different Buttons to add / remove Equipment inside the game, select an Action and like that.

Different buttons with different Styles, i can easily replace the default-image, but that doesn’t effect hover- and active-Images. I don’ want to remove those.

I did take a look into the Sourcecode and found that “Button” always calls “getStyle(“Button”)”. I assume that’s what reads the xml Style-definition.
Maybe changing that to a String-Variable getStyle(buttonStyle) ?

One slightly different problem i ran into is GUI-clipping.
ToneGodGUI seams to clip all elements pretty well, but that only accounts for ToneGodGUI-Elements.
I do have a Minimap, which can easily contain 200+ Icons.
Solution 1: convert the map and every icon to ToneGodGUI-Elements, which might take a toll on Performance.

Solution 2: How do i clip GUI-Nodes myself?
Text, Textured Quads, Maybe lighted 3d-Meshes later.
TonegodGUI uses a Shader with clipping-Coordinates, but that would require all Map-Items to have a specific shader.
Is There an option to merge Nodes and their Childnodes for Render/Shader only?
… each Icon is Moving independently.

thank for your help

2
@tyrion said:

Different buttons with different Styles, i can easily replace the default-image, but that doesn’t effect hover- and active-Images. I don’ want to remove those.

To change that you have to call :
[java]youButton.setButtonHoverInfo(String hoverImagePath, hoverColor);
//or
youButton.setButtonPressedInfo(String pressedImagePath, pressedColor);[/java]

3

Hey you,

There are multiple ways to change style info for buttons. You can set up your own style def xml and add it to a local copy of the the style_map.gui.xml file, extend button and alter the style info in your implementation of button. Or simply extend button and alter the styles not using stored style info.

As for clipping. You could simply render everything using the OSRViewPort. This will clip the final render or allow you to add an alpha map to reshape the final rendered image. Using this will allow you to use whatever combinations of shaders you need to produce the output you desire and then use the GUI shader to display the final,

4

thanks.

Tonegod, nice work by the way. Didn’t took as much time as i thought to get the Basics running.

Any way to change the alignment of Sub-Elements, for example “upper-left, lower-left, upper-center”?

One Issue came up: when i turn down font-size below 19 tonegodgui seams to blur and in smaller sizes (15,13) ignore some letters / letter-combinations.
(l and i in “Multiplayer”), doesn’t happen with the default JME Gui-Font.

5
@tyrion said: thanks.

Tonegod, nice work by the way. Didn’t took as much time as i thought to get the Basics running.

Any way to change the alignment of Sub-Elements, for example “upper-left, lower-left, upper-center”?

One Issue came up: when i turn down font-size below 19 tonegodgui seams to blur and in smaller sizes (15,13) ignore some letters / letter-combinations.
(l and i in “Multiplayer”), doesn’t happen with the default JME Gui-Font.

If some characters are missing, it is due to the default font not containing the characters in questions. You can create your own font using something like BMFont and then use a local copy of the default style_map.gui.xml and Fonts.gui.xml with the updated info for the new font.

As for text blurring, I believe that @rockfire came up with a fix for this, I just haven’t had a chance to apply the patch yet. So, it should be resolved in a day or three.

As for alignment of sub elements… since all placement is absolute, you can… however, I have a feeling you are talking about docking when resizing. If this is the case, you can define the docking to NW, NE, SW, SE and depending on the child resize options, the child element will lock to the defined side(s). I believe this is set by calling Element.setDocking(Docking.NE); for example.

There are some alignment issues with fonts using JME’s BitmapText, however, you can replace the text element of components with the library’s version of BitmapText called TextElement. Eventually, I will be replacing all use of BitmapText with this version, but for the time being, it is something that needs to be implemented manually.

6

You can also create Fonts right in the SDK using the new file wizard.

7

@tyrion - “I did take a look into the Sourcecode and found that “Button” always calls “getStyle(“Button”)”. I assume that’s what reads the xml Style-definition.
Maybe changing that to a String-Variable getStyle(buttonStyle)”

I would love to see this too! I do much the same, and find myself often doing stuff like this :-

[java]
Label b = new Label(screen, UIDUtil.getUID(), screen.getStyle(“Minimap”).getVector2f(positionStyle),
screen.getStyle(“Minimap”).getVector2f(“directionLabelSize”),
screen.getStyle(“Minimap”).getVector4f(“directionLabelResizeBorders”),
screen.getStyle(“Minimap”).getString(“directionLabelImg”));
[/java]

This works because you can put any styles you like in the style files. It would great to be able to do as you suggest …

[java]
Label b = new Label(screen, “MinimapDirectionLabel”);
// or if you can’t face yet more constructor arguments
b.setStyleName(“AnotherStyle”);
[/java]

In fact I use this pattern so much I extend a bunch of the tonegod controls to do exactly this. For example, this is a setStyles() for Button :-

[java]

protected void setStyles(String styleName) {
    if (screen.getStyle(styleName).getString("defaultImg") != null) {
        getElementTexture().setImage(screen.getApplication().getAssetManager().loadTexture(screen.getStyle(styleName).getString("defaultImg")).getImage());
    }
    if (screen.getStyle(styleName).getString("hoverImg") != null) {
        setButtonHoverInfo(
                screen.getStyle(styleName).getString("hoverImg"),
                screen.getStyle(styleName).getColorRGBA("hoverColor"));
    }
    if (screen.getStyle(styleName).getString("pressedImg") != null) {
        setButtonPressedInfo(
                screen.getStyle(styleName).getString("pressedImg"),
                screen.getStyle(styleName).getColorRGBA("pressedColor"));
    }
    buttonTextInsets = screen.getStyle(styleName).getFloat("buttonTextInsets");
    setFontSize(screen.getStyle(styleName).getFloat("fontSize"));
    setFont(screen.getStyle("Font").getString(screen.getStyle(styleName).getString("fontName")));
    setFontColor(screen.getStyle(styleName).getColorRGBA("fontColor"));
    setTextVAlign(BitmapFont.VAlign.valueOf(screen.getStyle(styleName).getString("textVAlign")));
    setTextAlign(BitmapFont.Align.valueOf(screen.getStyle(styleName).getString("textAlign")));
    setTextWrap(LineWrapMode.valueOf(screen.getStyle(styleName).getString("textWrap")));
    setDimensions(screen.getStyle(styleName).getVector2f("defaultSize"));
    orgDimensions = getDimensions().clone();
    borders.set(screen.getStyle(styleName).getVector4f("resizeBorders"));
    borderHandles.set(screen.getStyle(styleName).getVector4f("resizeBorders"));

    getModel().updateDimensions(getWidth(), getHeight());

    originalFontColor = fontColor.clone();
    hoverSound = screen.getStyle(styleName).getString("hoverSound");
    useHoverSound = screen.getStyle(styleName).getBoolean("useHoverSound");
    hoverSoundVolume = screen.getStyle(styleName).getFloat("hoverSoundVolume");
    pressedSound = screen.getStyle(styleName).getString("pressedSound");
    usePressedSound = screen.getStyle(styleName).getBoolean("usePressedSound");
    pressedSoundVolume = screen.getStyle(styleName).getFloat("pressedSoundVolume");
}

[/java]

@t0neg0d - Regarding blurring, I did post a patch for a couple of things (Button - already applied, ScrollArea - the one you haven’t look at yet).

However, there still is an issue I can’t seem to get rid of.The problem shows with center aligned text, particularly with tooltips for some reason :-

Is this what you mean by “there are some alignment issues with fonts using JME’s BitmapText”?

2 Likes
8

@rockfire
I like this! Is it okay to add this (and related functions) to different controls?

As for the alignment issue. Yes, this is the general problem. And it gets weird(er) at different font sizes. This type of alignment issue is resolved in TestElement (and I’m starting to use it exclusively), however… I’m still a little uncomfortable with the idea of updating the entire library as there is so much crap in place to try and account for oddities with BitmapText.

One of these days, I’ll take the plunge and do it… just not quite yet.

9

Well, i have to say … i’m impressed how fast i can get quality-answers here :slight_smile:

I tried replacing my classes with tonegodgui, most of it worked right away.
For now, i return to the drawing board (in this case inkscape) and put some prototypes of the dialogs together - which means i have to work on content as well.

There is only 1 tonegodgui-example correct? - maybe i have a few to share soon.

10

@t0neg0d - as usual sorry for slow reply, but please do!

One thing to watch for there is how I do font names. I actually define a set of about 10 logical styles in Fonts.gui.xml, then in my Button.gui.xml, labels, whatever, I use the logical name in a ‘fontName’ attribute. This is basically because I intend to have a few skins for my game, and the possiblity of user skins. Using logical font names I think is best for this. Not sure if you’d want to do that, I can always worked around it if not.

[java]
setFont(screen.getStyle(“Font”).getString(screen.getStyle(styleName).getString(“fontName”)));
[/java]