[Solved] High res custom slider graphics

[Nash]

No, I cannot use a replacement for ConFont.lmp as that will affect the regular console's font. I am trying to avoid touching the console!

Now that that's out of the way...

Here's my custom DrawConText drawer:

Code: Select all

class LADgameMenu : GenericMenu
{
    // LADgameMenu.DrawConText
    static void DrawConText (int color, int x, int y, String str)
    {
        screen.DrawText ("LADCFont", color, x, y, str, DTA_CellX, 8 * CleanXfac_1, DTA_CellY, 8 * CleanYfac_1);
    }
}

I already have LADCFont defined inside FONTDEFS:

Code: Select all

LADCFont
{
    <???> "graphics/menu/slider back L.png"
    <???> "graphics/menu/slider back R.png"
    <???> "graphics/menu/slider back.png"
    <???> "graphics/menu/slider.png"
}

Those ???s are what I need help on. What EXACTLY are the characters used to draw the sliders? I looked inside the menu drawers in gzdoom.pk3 and see all these /x10s or whatever and I have no idea what they are.

[Nash]

Solved, LOL this one was easy shit.

Code: Select all

LADCFont
{
    \x10 "graphics/menu/slider back L.png"
    \x11 "graphics/menu/slider back.png"
    \x12 "graphics/menu/slider back R.png"
    \x13 "graphics/menu/slider.png"
}

Also just found out that \x is the hexadecimal specifier... corresponding to the numbers 16, 17, 18 and 19 - also happens to be the exact grid positions that the glyphs are in the ConFont lump. Good to know!

[AFADoomer]

Were you able to make this work with existing menus?

e.g., does using this in MENUDEF:

DefaultOptionMenu
{
Class "LADgameMenu"
}

..cause existing slider bars to be drawn in high resolution?

I was having problems with making that work without replacing/duplicating a *lot* of MENUDEF code.

[Nash]

Oh, no, sorry, I'm actually building menus from scratch.

Yeah, I can imagine your situation and unfortunately that won't work too easily. :( I don't know what could be done to make menus have less copy/pasting... it seems the entire system isn't too friendly to "I just want to tweak a small thing here or there".

It's either you rip the whole thing down and build your own, or copy/paste a lot of code.

[Nash]

Just an addendum based on my findings after actually trying to get this thing functional.

1) If you're going to use a custom font for the sliders, don't bother with the hex codes. For some reason they just showed blank graphics. So here's my adjust code:

Code: Select all

// FONTDEFS
// UI widgets used in menus
LADCFont
{
    L "graphics/menu/slider L.png"
    B "graphics/menu/slider B.png"
    R "graphics/menu/slider R.png"
    C "graphics/menu/slider C.png"
}

class LADMenu : GenericMenu
{
    // LADMenu.DrawCFont
    static void DrawCFont (int color, int x, int y, String s)
    {
        Font fnt = Font.GetFont("LADCFont");
        screen.DrawText (fnt, color, x, y, s, DTA_CellX, 8 * CleanXfac_1, DTA_CellY, 8 * CleanYfac_1);
    }
}

// in your custom slider widget:

    void DrawSlider (int x, int y, double min, double max, double cur, int fracdigits, int indent)
    {
        // <snip>
        // this entire method was copy/pasted from the vanilla code in gzdoom.pk3
        // I ommitted all the irrelevant code and am only showing the important part
        
        // basically I replaced the hex codes with literal characters that I defined inside the FONTDEFS
    
        if (!mSliderShort)
        {
            LADMenu.DrawCFont(Font.CR_WHITE, x, cy, "LBBBBBBBBBBR");
            LADMenu.DrawCFont(Font.CR_WHITE, x + int((5 + ((ccur * 78) / range)) * CleanXfac_1), cy, "C");
        }
        else
        {
            // On 320x200 we need a shorter slider
            LADMenu.DrawCFont(Font.CR_WHITE, x, cy, "LBBBBBR");
            LADMenu.DrawCFont(Font.CR_WHITE, x + int((5 + ((ccur * 38) / range)) * CleanXfac_1), cy, "C");
            right -= 5*8*CleanXfac_1;
        }
        
        // <snip>

    }
 

2) Be aware that for translation with regards to custom graphics, this important caveat mentioned by YukiHerz applies (very hard to miss and can be very frustrating)

3) Just to further elaborate on what AFADoomer said (for other readers): whatever is being discussed here involves making new widgets. It will not work modularly and you can't just "plug" this into existing menus. It involves you making a new Slider widget (the easiest way is to make a class, let's say, OptionMenuItemCustomSlider (you must follow naming conventions!), and inherit from OptionMenuItemSlider), overriding its Draw method to call a new function to draw your custom graphics (because DrawSlider cannot be overridden), and then in your MENUDEF, replace every instance of Slider with CustomSlider.

[AFADoomer]

For reference, here's a similar solution that I came up with:

Code: Select all

class OptionMenuItemExtendedSlider : OptionMenuItemSlider
{
    void DrawExtendedSlider (int x, int y, double min, double max, double cur, int fracdigits, int indent)
    {

/* same snip out of duplicate code that Nash talked about above */

        if (!mSliderShort)
        {
            DrawElement(x, cy, "Slider_L", g_inactivecolor);
            for (int s = 1; s < 11; s++) { DrawElement(x + s * 8 * CleanXFac_1, cy, "Slider_M", g_inactivecolor); }
            DrawElement(x + 11 * 8 * CleanXFac_1, cy, "Slider_R", g_inactivecolor);
            DrawElement(x + int((5 + ((ccur * 78) / range)) * CleanXfac_1), cy, "Slider_H", g_altcolor);
        }
        else
        {
            // On 320x200 we need a shorter slider
            DrawElement(x, cy, "Slider_L", g_inactivecolor);
            for (int s = 1; s < 6; s++) { DrawElement(x + s * 8 * CleanXFac_1, cy, "Slider_M", g_inactivecolor); }
            DrawElement(x + 6 * 8 * CleanXFac_1, cy, "Slider_R", g_inactivecolor);
            DrawElement(x + int((5 + ((ccur * 38) / range)) * CleanXfac_1), cy, "Slider_H", g_altcolor);
            right -= 5*8*CleanXfac_1;
        }

        if (fracdigits >= 0 && right + maxlen <= screen.GetWidth())
        {
            textbuf = String.format(formater, cur);
            screen.DrawText(SmallFont, Font.CR_DARKGRAY, right, y, textbuf, DTA_CleanNoMove_1, true);
        }
    }

/* more snip */

    void DrawElement(double x, double y, String pic, int clr = 0)
    {
        let tex = TexMan.CheckForTexture (pic, TexMan.Type_MiscPatch);

        if (tex.isValid())
        {
            screen.DrawTexture(tex, true, int(x), int(y), DTA_DestWidth, 8 * CleanXFac_1, DTA_DestHeight, 8 * CleanYFac_1);
            if (clr > 0) { screen.DrawTexture(tex, true, int(x), int(y), DTA_DestWidth, 8 * CleanXFac_1, DTA_DestHeight, 8 * CleanYFac_1, DTA_FillColor, clr, DTA_Alpha, 0.5); }
        }
    }
}

The major difference is that I didn't bother with a separate font definition; I re-worked everything to draw a set of square textures scaled to 8x8, via the DrawElement function that you can see here. This implementation also has the benefit of (hackily) applying color overlays to graphics to allow the appearance of translations on .pngs - I used cvars (set in CVARNIFO) to set the color values. This lets you have something like this... The base graphics for the sliders are all grayscale, with the green as an alpha stencil overlay.

Getting this to work with the default menus means copy/pasting the entirety of MENUDEFS and replacing the slider entries with my custom slider.

(One oddity that I noticed just now is that if I bump the zscript version to 2.5, this breaks... hmm...)

[Nash]

(One oddity that I noticed just now is that if I bump the zscript version to 2.5, this breaks... hmm...)

Oh SHIT. Totally forgot about this. All the progress I've made the last few days was still at 2.4. Oh man oh man...

Also, bug report? :S If you're confident that it's not supposed to break.