Ren'Py Interface icons and menus

[lydcreations]

I'm looking to upgrade the interface for my game and I have 2 questions.

1. How do I create the icons that I often see used in a menu to represent a particular stat? For example, the one below:


2. I'm still learning renpy so I've used a text approach in the top left & right corners to display variable in the interface as below:


What would you suggest to improve the look of the interface? Image buttons that display on the interface? An image button that leads to a separate screen to keep the interface clean? Thank you for your assistance.

 

[Egglock]

If you want to make icons as far as I know I haven't found a software that auto generates icon (someone might of come across one) but I haven't, and it has more to do with making them in a 2d software such as Photoshop, Krita.

As for your second question. Here's some suggestion as to how I would approach it.
(Keep in mind that I don't use Ren'py, so I'm not sure if this will work with it or not)

1. Have a button where ever you want upon clicking it, an overlay screen with the stats shows up.

2. Have a key press bound, to show the stats like you have it.

 

[Porcus Dev]

For icons you can use pages like this one:

You must be registered to see the links

(just make sure you read the licenses... normally it's only necessary to mention the website in your game)

 

[anne O'nymous]

What would you suggest to improve the look of the interface? Image buttons that display on the interface? An image button that leads to a separate screen to keep the interface clean? Thank you for your assistance.

There's so many possibilities.

It can be a top bar by example :

# Replace your computation.
define dow = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]
# Icon representing the period of the day.
define period = [ "gui/earlyMorning.png", "gui/morning.png", "gui/midMorning.png", "gui/afternoon.png", "gui/midAfternoon.png", "gui/night.png" ]

style hud_frame is empty:
    xfill True
    # Change to the background of your choice.
    background Solid( "#000" )
    ysize 40

screen hud:

    style_prefix "hud"

    frame:

        hbox:
            # Left side of the bar
            xalign 0.0
            text "Day [day]/[game_length]"
            # Aerate the display
            null width 10
            hbox:
                #  Let the space for the day of the week with the
                # longer name.
                xsize 200
                # Day of the week
                text dow[day%7]
            null width 10
            # Period of the day
            add period[dayTime]
            null width 20
            add "gui/money.png"
            text "{color=#67c149}[player_money]{/color}"

        hbox:
            #  Not totally centered because there's more on the left
            # part, than the right one.
            xalign 0.6
            #  For each stats
            for s in [ "intell", "art", "charm", "faith", "fashion", "athlete", "deduction", "sexexp" ]:
                hbox:
                    #  Force the size to keep the same design whatever
                    # the stats have 1 or 2 digits.
                    xsize 100
                    #  Add the icon for the actual stat.
                    add "gui/{}.png".format( s )
                    #  Get the actual value of the actual stat.
                    $ v = getattr( store, s )
                    #  and display it.
                    text "[v]"

        hbox:
            # Right side of the bar
            xalign 1.0

            #  Icon for the player score.
            add "gui/player.png"
            text "[plscore]"
            #  Icon for the eternal score.
            add "gui/eternal.png"
            text "[etscore]"

You can also have a screen shown only when the player ask for it :

screen hud:

    #  True if the stats are shown, False else
    default opened = False

    #  Click to open, click again to close
    imagebutton:
        xpos 0 ypos 0
        auto "gui/stats_%s.png"
        action ToggleScreenVariable( "opened" )

    #  Whatever you want for the date, money and scores.
    # Can be put here (and always be displayed), or put behind
    # the /showif/ screen statement and be seen only when the
    # player ask for it.

    #  Will be shown only if /opened/ is True
    showif opened is True:
        frame style "empty":
            #  Right side of the screen
            xalign 1.0
            text " Intell: [intell] {p} Art: [art] {p} Charm: [charm]{p} Faith: [faith]{p} Fashion: [fashion]{p} Athlete: [athlete]{p} Deduction: [deduction]{p} Sex exp: [sexexp]" style "statStyle" at topright

You can also go for the actually classical "smartphone" displaying the stats. The principle is the same than above, with the "stats_idle.png" icon being a smartphone, and the frame displaying the said stats having a smartphone as background.

And there's more, way more. It all depend of the atmosphere you want to give to your game.

 

[lydcreations]

If you want to make icons as far as I know I haven't found a software that auto generates icon (someone might of come across one) but I haven't, and it has more to do with making them in a 2d software such as Photoshop, Krita.

I was wondering if photoshop could make them. I only have gimp, but maybe it could manage one. I'll see if I can find a tutorial for creating icons. Thanks.

As for your second question. Here's some suggestion as to how I would approach it.
(Keep in mind that I don't use Ren'py, so I'm not sure if this will work with it or not)

1. Have a button where ever you want upon clicking it, an overlay screen with the stats shows up.

2. Have a key press bound, to show the stats like you have it.

If I'm following you correctly, the first option would have an image button that, when pressed, would show the stats on the interface screen. The second option would be an image button that takes you to another screen?

Currently, the book in the right corner is an image button that leads to a screen that has the stats for the girls in the game. My thought being that stats for the girls would be something one only consults from time to time. The player stats would be something you'd use more often so I show those on the interface. This certainly presents the necessary information to the players. I was just wondering what approaches might do the same thing and perhaps looks nicer. Thanks for your suggestions.

 

[lydcreations]

For icons you can use pages like this one:

You must be registered to see the links

(just make sure you read the licenses... normally it's only necessary to mention the website in your game)

Thanks for the link & reply.

 

[lydcreations]

There's so many possibilities.

It can be a top bar by example :

# Replace your computation.
define dow = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]
# Icon representing the period of the day.
define period = [ "gui/earlyMorning.png", "gui/morning.png", "gui/midMorning.png", "gui/afternoon.png", "gui/midAfternoon.png", "gui/night.png" ]

style hud_frame is empty:
    xfill True
    # Change to the background of your choice.
    background Solid( "#000" )
    ysize 40

screen hud:

    style_prefix "hud"

    frame:

        hbox:
            # Left side of the bar
            xalign 0.0
            text "Day [day]/[game_length]"
            # Aerate the display
            null width 10
            hbox:
                #  Let the space for the day of the week with the
                # longer name.
                xsize 200
                # Day of the week
                text dow[day%7]
            null width 10
            # Period of the day
            add period[dayTime]
            null width 20
            add "gui/money.png"
            text "{color=#67c149}[player_money]{/color}"

        hbox:
            #  Not totally centered because there's more on the left
            # part, than the right one.
            xalign 0.6
            #  For each stats
            for s in [ "intell", "art", "charm", "faith", "fashion", "athlete", "deduction", "sexexp" ]:
                hbox:
                    #  Force the size to keep the same design whatever
                    # the stats have 1 or 2 digits.
                    xsize 100
                    #  Add the icon for the actual stat.
                    add "gui/{}.png".format( s )
                    #  Get the actual value of the actual stat.
                    $ v = getattr( store, s )
                    #  and display it.
                    text "[v]"

        hbox:
            # Right side of the bar
            xalign 1.0

            #  Icon for the player score.
            add "gui/player.png"
            text "[plscore]"
            #  Icon for the eternal score.
            add "gui/eternal.png"
            text "[etscore]"

You can also have a screen shown only when the player ask for it :

screen hud:

    #  True if the stats are shown, False else
    default opened = False

    #  Click to open, click again to close
    imagebutton:
        xpos 0 ypos 0
        auto "gui/stats_%s.png"
        action ToggleScreenVariable( "opened" )

    #  Whatever you want for the date, money and scores.
    # Can be put here (and always be displayed), or put behind
    # the /showif/ screen statement and be seen only when the
    # player ask for it.

    #  Will be shown only if /opened/ is True
    showif opened is True:
        frame style "empty":
            #  Right side of the screen
            xalign 1.0
            text " Intell: [intell] {p} Art: [art] {p} Charm: [charm]{p} Faith: [faith]{p} Fashion: [fashion]{p} Athlete: [athlete]{p} Deduction: [deduction]{p} Sex exp: [sexexp]" style "statStyle" at topright

You can also go for the actually classical "smartphone" displaying the stats. The principle is the same than above, with the "stats_idle.png" icon being a smartphone, and the frame displaying the said stats having a smartphone as background.

And there's more, way more. It all depend of the atmosphere you want to give to your game.

Thanks for the suggestions. These sound like great options. I just need to follow your coding examples well enough to apply them to my game.

 

[anne O'nymous]

I just need to follow your coding examples well enough to apply them to my game.

I used your game to make the examples and, quickly, tested them in it. So, you can use placeholder for the images and you should already have a preview of what it would look. It's probably the better approach since you don't know yet what you really want as interface. If you start directly by making the icons, you'll feel trapped by their style and size, and perhaps miss something that would please you more.

 

[lydcreations]

I used your game to make the examples and, quickly, tested them in it. So, you can use placeholder for the images and you should already have a preview of what it would look. It's probably the better approach since you don't know yet what you really want as interface. If you start directly by making the icons, you'll feel trapped by their style and size, and perhaps miss something that would please you more.

Thanks for using my game for the examples as this will make it easier for me to implement into my game. I noticed the stats you used were from my game. Like you say, I need to determine what interface looks to be the best fit for my game style. I already have a scene that the player emails something to his home computer so this would prevent the player from owning a smart phone. Will also need to decide if I can continue to use the image button that opens up to a new screen for the stats for the girls. Placeholders for the icons is also a great idea so that I keep my options open like you say.

Next on my list is to better follow your post on save compatibility for when I make changes to my game. Coding unfortunately takes me some time to learn.

 

[Egglock]

I was wondering if photoshop could make them.

Any 2D software is fine. Though I personally wouldn't use Gimp. That software is more or less tuned for image manipulations. But some may see it otherwise. I personally would use Krita or Inkscape they're both free and easy to use. There's loads of references floating on the web, just find one that is to your liking and tune it to your liking.

 

[lydcreations]

Any 2D software is fine. Though I personally wouldn't use Gimp. That software is more or less tuned for image manipulations. But some may see it otherwise. I personally would use Krita or Inkscape they're both free and easy to use. There's loads of references floating on the web, just find one that is to your liking and tune it to your liking.

Thanks for the reply and site suggestions.

 

[lydcreations]

I used your game to make the examples and, quickly, tested them in it. So, you can use placeholder for the images and you should already have a preview of what it would look. It's probably the better approach since you don't know yet what you really want as interface. If you start directly by making the icons, you'll feel trapped by their style and size, and perhaps miss something that would please you more.

I wasn't able to find icons that showed the day progressions so I kept this portion as a text. I implemented icons for the various stats and the option for the player to hide the stats. However I was thinking it would be helpful if there was a text button that would show a description of the stat when the player hovered the mouse over the stat value. I've seen it used in a game but wasn't able to find documentation as to how to code a text button to do this. Would this be a good approach to allow players to determine what stat each of the icon represents? Thanks again for your help.

 

[anne O'nymous]

I've seen it used in a game but wasn't able to find documentation as to how to code a text button to do this.

Keeping what I wrote previously to be the less confusing possible :

define dow = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]
define period = [ "gui/earlyMorning.png", "gui/morning.png", "gui/midMorning.png", "gui/afternoon.png", "gui/midAfternoon.png", "gui/night.png" ]
# Long description of the statistics.
define statsTooltip = { "intell": "Player's intelligence",
                        "art": "Player's artistic sense",
                        "charm": "Player's charm",
                        "faith": "Player's faith",
                        "fashion": "Player's sense of fashion",
                        "athlete": "Player's force",
                        "deduction": "Player's power of deduction",
                        "sexexp": "Player's sexual experience" }

style hud_frame is empty:
    xfill True
    background Solid( "#000" )
    ysize 40

screen hud:

    style_prefix "hud"

    frame:

        hbox:
            xalign 0.0
            text "Day [day]/[game_length]"
            null width 10
            hbox:
                xsize 200
                text dow[day%7]
            null width 10
            add period[dayTime]
            null width 20
            add "gui/money.png"
            text "{color=#67c149}[player_money]{/color}"

        hbox:
            xalign 0.6
            for s in [ "intell", "art", "charm", "faith", "fashion", "athlete", "deduction", "sexexp" ]:
                # Will make the /imagebutton/ be displayed on top of the /hbox/.
                fixed:
                    #  The size need to be moved here. Previously was defined in
                    # the /hbox/ block.
                    xsize 100
                    hbox:
                        add "gui/{}.png".format( s )
                        $ v = getattr( store, s )
                        text "[v]"
                    # Here's the trick: An imagebutton,
                    imagebutton:
                        # fully transparent,
                        idle Solid( "#00000000" )
                        # With no action (still need it to be like this),
                        action NullAction()
                        # that will show a tooltip when hovered.
                        tooltip "{}".format( statsTooltip[s] )

        hbox:
            xalign 1.0
            add "gui/player.png"
            text "[plscore]"
            add "gui/eternal.png"
            text "[etscore]"


    # Here you get the value of the tooltip.
    $ tooltip = GetTooltip()
    # And if there's something you display it.
    showif tooltip != "":
        text "[tooltip]" xalign 0.5 yalign 0.05

 

[lydcreations]

I wasn't able to make the last part work. The icons appear on top of one another now.

define statsTooltip = { "intell": "Player's intelligence",
                        "art": "Player's artistic sense",
                        "charm": "Player's charm",
                        "faith": "Player's faith",
                        "fashion": "Player's sense of fashion",
                        "athlete": "Player's force",
                        "deduction": "Player's power of deduction",
                        "plscore": "Player's contest scorce",
                        "eternal_score": "Player's power of deduction",
                        "player_money": "Player's money" }


style hud_frame is empty:
    xfill True
    # Change to the background of your choice.
    background Solid( "#009933" )
    ysize 40

    ##displays stuff for the player during normal gameplay

screen hud:

    #  True if the stats are shown, False else
    default opened = False

    #  Click to open, click again to close
    imagebutton:
        yalign 0.1
        auto "gui/stats_%s.png"
        action ToggleScreenVariable( "opened" )

    #  Whatever you want for the date, money and scores.
    # Can be put here (and always be displayed), or put behind
    # the /showif/ screen statement and be seen only when the
    # player ask for it.

    style_prefix "hud"

    frame:

        hbox:
            # Left side of the bar
            xalign 0.0
            text ("Day %i/[game_length] - %s %s \n{color=#67c149}" %(day, day_name, time_name)) size 26 style "hudStyle" at topleft #TODO make this a style and unify the UI in v0.4


        #  Will be shown only if /opened/ is True
        showif opened is True:
             frame style "empty":

                 hbox:
                    xalign 0.6
                    for s in [ "intell", "art", "charm", "faith", "fashion", "athlete", "deduction", "player_money", "plscore", "eternal_score" ]:
                # Will make the /imagebutton/ be displayed on top of the /hbox/.
                        fixed:
                            #  The size need to be moved here. Previously was defined in
                            # the /hbox/ block.
                            xsize 100
                            hbox:
                                add "gui/{}.png".format( s )
                                $ v = getattr( store, s )
                                text "[v]"
                                # Here's the trick: An imagebutton,
                            imagebutton:
                                # fully transparent,
                                idle Solid( "#00000000" )
                                # With no action (still need it to be like this),
                                action NullAction()
                                # that will show a tooltip when hovered.
                                tooltip "{}".format( statsTooltip[s] )

                     #  Not totally centered because there's more on the left
                     # part, than the right one.

                            add "gui/player_money.png"
                            text "{color=#67c149}[player_money]{/color}"
                            null width 10
                            add "gui/art.png"
                            text "{color=#67c149}[art]{/color}"
                            null width 10
                            add "gui/athlete.png"
                            text "{color=#67c149}[athlete]{/color}"
                            null width 10
                            add "gui/charm.png"
                            text "{color=#67c149}[charm]{/color}"
                            null width 10
                            add "gui/deduction.png"
                            text "{color=#67c149}[deduction]{/color}"
                            null width 10
                            add "gui/faith.png"
                            text "{color=#67c149}[faith]{/color}"
                            null width 10
                            add "gui/fashion.png"
                            text "{color=#67c149}[fashion]{/color}"
                            null width 10
                            add "gui/intell.png"
                            text "{color=#67c149}[intell]{/color}"
                            null width 10
                            add "gui/sales.png"
                            text "{color=#67c149}[sales]{/color}"
                            null width 10
                            add "gui/plscore.png"
                            text "{color=#67c149}[plscore]{/color}"
                            null width 10
                            add "gui/eternal_score.png"
                            text "{color=#67c149}[eternal_score]{/color}"
                            null width 10

                    # Here you get the value of the tooltip.
    $ tooltip = GetTooltip()
    # And if there's something you display it.
    showif tooltip != "":
        text "[tooltip]" xalign 0.5 yalign 0.05

Did I get anywhere close to what I was suppose to do?

 

[anne O'nymous]

I wasn't able to make the last part work. The icons appear on top of one another now.

It's because of the

You must be registered to see the links

. Everything you put in it is displayed on top of what was previously display in the same fixed block.

This part :

                        fixed:
                            xsize 100
                            hbox:
                                add "gui/{}.png".format( s )
                                $ v = getattr( store, s )
                                text "[v]"
                                # Here's the trick: An imagebutton,
                            imagebutton:
                                # fully transparent,
                                idle Solid( "#00000000" )
                                # With no action (still need it to be like this),
                                action NullAction()
                                # that will show a tooltip when hovered.
                                tooltip "{}".format( statsTooltip[s] )

Must be duplicated for each stats you want with a tooltip. So, with your actual screen something like :

                        fixed:
                            xsize 100
                            hbox:
                                add "gui/player_money.png"
                                text "{color=#67c149}[player_money]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Your wallet"
                        null width 10
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/art.png"
                                text "{color=#67c149}[art]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Your artistic sense"
                        null width 10
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/athlete.png"
                                text "{color=#67c149}[athlete]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "How athletic you are"
[...]
    $ tooltip = GetTooltip()
    # And if there's something you display it.
    showif tooltip != "":
        text "[tooltip]" xalign 0.5 yalign 0.05

And like it's too much repetition of the same thing, you can also

You must be registered to see the links

a screen for that. use let you have a screen that will works more or less in the same way than a function. You "call it" with arguments, and it perform the same action, applying the said argument to give an unique result depending of them :

screen displayStats( img, statsValue, tt ):

    fixed:
        xsize 100
        hbox:
            add img
            text "{color=#67c149}[statsValue]{/color}"
        imagebutton:
            idle Solid( "#00000000" )
            action NullAction()
            tooltip tt

screen hud():
[...]
                        use displayStats( "gui/player_money.png", player_money, "Your wallet" )
                        null width 10
                        use displayStats( "gui/art.png", art, "Your artistic sense" )
                        null width 10
                        use displayStats( "gui/athlete.png", athlete, "How athletic you are" )
                        null width 10
[...]
    $ tooltip = GetTooltip()
    # And if there's something you display it.
    showif tooltip != "":
        text "[tooltip]" xalign 0.5 yalign 0.05

 

[lydcreations]

Thanks again for your incredible help and patience. Still having 2 issues. 1. Each of the stat icons such as money start at the far left when I thought I had assigned them a position of xalign 0.6. 2. The tool tip doesn't have a stop so it creates multiple copies of the icons. And puts a "None" under the stat bar. It's really cool to see the info show when you hover over a stat!

Code as follows:

#  True if the stats are shown, False else
    default opened = False

    #  Click to open, click again to close
    imagebutton:
        yalign 0.04
        auto "gui/stats_%s.png"
        action ToggleScreenVariable( "opened" )

    #  Whatever you want for the date, money and scores.
    # Can be put here (and always be displayed), or put behind
    # the /showif/ screen statement and be seen only when the
    # player ask for it.

    style_prefix "hud"

    frame:

        hbox:
            # Left side of the bar
            xalign 0.0
            text ("Day %i/[game_length] - %s %s \n{color=#67c149}" %(day, day_name, time_name)) size 26 style "hudStyle" at topleft #TODO make this a style and unify the UI in v0.4


        #  Will be shown only if /opened/ is True
        showif opened is True:
             frame style "empty":

                 hbox:
                    xalign 0.6
                    for s in [ "intell", "art", "charm", "faith", "fashion", "athlete", "deduction", "player_money", "plscore", "eternal_score" ]:
                # Will make the /imagebutton/ be displayed on top of the /hbox/.
                        fixed:
                            #  The size need to be moved here. Previously was defined in
                            # the /hbox/ block.
                            xsize 100
                            hbox:
                                add "gui/player_money.png"
                                text "{color=#67c149}[player_money]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Your wallet"
                        null width 10
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/art.png"
                                text "{color=#67c149}[art]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Your artistic sense"
                        null width 10
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/athlete.png"
                                text "{color=#67c149}[athlete]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "How athletic you are"
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/charm.png"
                                text "{color=#67c149}[charm]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Your charm"
                        null width 10
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/intell.png"
                                text "{color=#67c149}[intell]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "How intelligent you are"
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/faith.png"
                                text "{color=#67c149}[faith]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Your faith"
                        null width 10
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/fashion.png"
                                text "{color=#67c149}[fashion]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Your fashion sense"
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/deduction.png"
                                text "{color=#67c149}[deduction]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Your reasoning skill"
                        null width 10
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/plscore.png"
                                text "{color=#67c149}[plscore]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Player competition score"
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/eternal_score.png"
                                text "{color=#67c149}[eternal_score]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Eternal competition score"



                     #  Not totally centered because there's more on the left
                     # part, than the right one.

                            add "gui/player_money.png"
                            text "{color=#67c149}[player_money]{/color}"
                            null width 10
                            add "gui/art.png"
                            text "{color=#67c149}[art]{/color}"
                            null width 10
                            add "gui/athlete.png"
                            text "{color=#67c149}[athlete]{/color}"
                            null width 10
                            add "gui/charm.png"
                            text "{color=#67c149}[charm]{/color}"
                            null width 10
                            add "gui/deduction.png"
                            text "{color=#67c149}[deduction]{/color}"
                            null width 10
                            add "gui/faith.png"
                            text "{color=#67c149}[faith]{/color}"
                            null width 10
                            add "gui/fashion.png"
                            text "{color=#67c149}[fashion]{/color}"
                            null width 10
                            add "gui/intell.png"
                            text "{color=#67c149}[intell]{/color}"
                            null width 10
                            add "gui/sales.png"
                            text "{color=#67c149}[sales]{/color}"
                            null width 10
                            add "gui/plscore.png"
                            text "{color=#67c149}[plscore]{/color}"
                            null width 10
                            add "gui/eternal_score.png"
                            text "{color=#67c149}[eternal_score]{/color}"
                            null width 10

                    # Here you get the value of the tooltip.
    $ tooltip = GetTooltip()
    # And if there's something you display it.
    showif tooltip != "":
        text "[tooltip]" xalign 0.5 yalign 0.05

 

[anne O'nymous]

Still having 2 issues.

[...]
                 hbox:
                    xalign 0.6
# ***** Why this loop *****
                    for s in [ "intell", "art", "charm", "faith", "fashion", "athlete", "deduction", "player_money", "plscore", "eternal_score" ]:
# ***** when you clearly define each one individually ? *****
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/player_money.png"
                                text "{color=#67c149}[player_money]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Your wallet"
                        null width 10
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/art.png"
[...]

Remove the for loop, and it should solve the problems.

 

[lydcreations]

[...]
                 hbox:
                    xalign 0.6
# ***** Why this loop *****
                    for s in [ "intell", "art", "charm", "faith", "fashion", "athlete", "deduction", "player_money", "plscore", "eternal_score" ]:
# ***** when you clearly define each one individually ? *****
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/player_money.png"
                                text "{color=#67c149}[player_money]{/color}"
                            imagebutton:
                                idle Solid( "#00000000" )
                                action NullAction()
                                tooltip "Your wallet"
                        null width 10
                        fixed:
                            xsize 100
                            hbox:
                                add "gui/art.png"
[...]

Remove the for loop, and it should solve the problems.

Sorry, but still struggling to make this work. I tried removing the s loop:
for s in [ "intell", "art", "charm", "faith", "fashion", "athlete", "deduction", "player_money", "plscore", "eternal_score" ]:

Without the s loop the button to show the icon bar doesn't work. I tried removing the intell portion to test the code. Intell is still shown twice despite not be included with the revised s loop coding. So do I need to define "s" in a different way?

 

[lydcreations]

I've got everything working with the exception of the "None" text which continues to be displayed even after selecting to hide the stat icons. I believe this is due to the tooltip code not being part of the showif loop. When I move the tooltip code into the showif loop, the "None" text is hidden when the hide button is used. However, the tooltip descriptions of the icons display over the top of the icons.

I've left the tooltip code separate so that the descriptions show up on a separate line. What would you recommend in order to address the "None" text that doesn't get hidden when using the hide button? Is there a way for the tooltip to not show a value which would eliminate the "none" issue? Thanks again for your help and patience.

Coding:

showif opened is True:

            frame style "empty" at topright:

                 hbox:
                   

                # Will make the /imagebutton/ be displayed on top of the /hbox/.
                    fixed:
                        #  The size need to be moved here. Previously was defined in
                        # the /hbox/ block.
                        xalign 0.6
                        xsize 150
                        hbox:
                            xalign 0.6
                            add "gui/player_money.png"
                            text "{color=#67c149}[player_money]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "Your cash."
                    null width 12
                    fixed:
                        xsize 100
                        hbox:
                            add "gui/art.png"
                            text "{color=#67c149}[art]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "Your artistic sense."
                    null width 10
                    fixed:
                        xsize 120
                        hbox:
                            add "gui/athlete.png"
                            text "{color=#67c149}[athlete]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "How athletic you are."
                    null width 10
                    fixed:
                        xsize 120
                        hbox:
                            add "gui/charm.png"
                            text "{color=#67c149}[charm]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "Your charm."
                    null width 10
                    fixed:
                        xsize 120
                        hbox:
                            add "gui/intell.png"
                            text "{color=#67c149}[intell]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "Your intelligence."
                    null width 10
                    fixed:
                        xsize 120
                        hbox:
                            add "gui/faith.png"
                            text "{color=#67c149}[faith]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "Your faith."
                    null width 10
                    fixed:
                        xsize 120
                        hbox:
                            add "gui/fashion.png"
                            text "{color=#67c149}[fashion]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "Your fashion sense."
                    null width 10
                    fixed:
                        xsize 120
                        hbox:
                            add "gui/deduction.png"
                            text "{color=#67c149}[deduction]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "Your reasoning skill."
                    null width 10
                    fixed:
                        xsize 120
                        hbox:
                            add "gui/sales.png"
                            text "{color=#67c149}[sales]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "Your persuasive skill."
                    null width 10

                    fixed:
                        xsize 135
                        hbox:
                            add "gui/plscore.png"
                            text "{color=#67c149}[plscore]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "Player contest score."
                    null width 10
                    fixed:
                        xsize 135
                        hbox:
                            add "gui/eternal_score.png"
                            text "{color=#67c149}[eternal_score]{/color}"
                        imagebutton:
                            idle Solid( "#00000000" )
                            action NullAction()
                            tooltip "Eternal contest score."
                           
# Here you get the value of the tooltip.

    $ tooltip = GetTooltip()
    # And if there's something you display it.
    showif tooltip != "":
        text "{color=#ff0000}[tooltip]{/color}" xalign 0.5 yalign 0.05

 

[anne O'nymous]

I've got everything working [...]

Oops, didn't saw your previous message, sorry.

with the exception of the "None" text which continues to be displayed even after selecting to hide the stat icons. I believe this is due to the tooltip code not being part of the showif loop.

It's not because of its place, but because of its default value. Change the test from this :
showif tooltip != "":
to that :
showif tooltip:

Probably me who mixed the old and new way to use them, sorry.