[Solved thanks to Divona]imagebuttons display issue

[MaximeChaos]

Hello ! First of all, sorry for the mistakes I will make, I am french.
So I made a character creation system, and everything works really fine (stats, name input, character customization, etc.) BUT I have a display issue.

I can't find what the problem is here. I think it has to do with the way calculs are done in renpy, I tried two differents way to call the screen (calling the screen and showing the screen in a label loop), both of those ways worked fine BUT with the same issue as a result : When one of the value in the character creation get to 0 (minimum) or 10 (maximum) the button that follows in the script shows it focus mask for a fraction of second.

Is there an explanation for this to happen ? Am I missing out on something here ?

Having all the imagebuttons always showing and using nullaction instead of not showing useless imagebutton is not possible for me in terms of design choice.

Here is the portion of the script :

Code: Select all

screen creationperso:
    zorder 101
    
    if Beaute > 0:
        imagebutton auto "MenuCreation/moins1_%s.png" xpos 0.304 xanchor 0.5 ypos 0.75 yanchor 0.5 action [ SetVariable("Beaute", Beaute - 1), SetVariable("pointsdecrea", pointsdecrea + 1) ]
    if Beaute < 10:
        if pointsdecrea > 0:
            imagebutton auto "MenuCreation/plus1_%s.png" xpos 0.444 xanchor 0.5 ypos 0.75 yanchor 0.5 action [ SetVariable("Beaute", Beaute + 1), SetVariable("pointsdecrea", pointsdecrea - 1) ]

    vbox at Position(xpos = 0.376, xanchor=0.5, ypos=0.71, yanchor=0.0):
        label "{b}{size=+8}{color=#000}Beauté [Beaute]{/color}{/size=+8}{/b}" at truecenter xminimum 0
        bar range Beaute_max value Beaute xmaximum 200 at truecenter
        
    if Intelligence < 10:
        if pointsdecrea > 0:
            imagebutton auto "MenuCreation/plus2_%s.png" xpos 0.444 xanchor 0.5 ypos 0.85 yanchor 0.5 action [ SetVariable("Intelligence", Intelligence + 1), SetVariable("pointsdecrea", pointsdecrea - 1) ]
    if Intelligence > 0:
        imagebutton auto "MenuCreation/moins2_%s.png" xpos 0.304 xanchor 0.5 ypos 0.85 yanchor 0.5 action [ SetVariable("Intelligence", Intelligence - 1), SetVariable("pointsdecrea", pointsdecrea + 1) ]

    vbox at Position(xpos = 0.376, xanchor=0.5, ypos=0.81, yanchor=0.0):
        label "{b}{size=+8}{color=#000}Intelligence [Intelligence]{/color}{/size=+8}{/b}" at truecenter xminimum 0
        bar range Intelligence_max value Intelligence xmaximum 200 at truecenter
        
    if Metabolisme < 10:
        if pointsdecrea > 0:
            imagebutton auto "MenuCreation/plus3_%s.png" xpos 0.444 xanchor 0.5 ypos 0.95 yanchor 0.5 action [ SetVariable("Metabolisme", Metabolisme + 1), SetVariable("pointsdecrea", pointsdecrea - 1) ]
    if Metabolisme > 0:
        imagebutton auto "MenuCreation/moins3_%s.png" xpos 0.304 xanchor 0.5 ypos 0.95 yanchor 0.5 action [ SetVariable("Metabolisme", Metabolisme - 1), SetVariable("pointsdecrea", pointsdecrea + 1) ]

    vbox at Position(xpos = 0.376, xanchor=0.5, ypos=0.91, yanchor=0.0):
        label "{b}{size=+8}{color=#000}Métabolisme [Metabolisme]{/color}{/size=+8}{/b}" at truecenter xminimum 0
        bar range Metabolisme_max value Metabolisme xmaximum 200 at truecenter

    vbox at Position(xpos = 0.376, xanchor=0.5, ypos=0.48, yanchor=0.0):
        label "{b}{size=+100}{color=#FFF121}[pointsdecrea]{/color}{/size=+100}{/b}" at truecenter xminimum 0
            
    input xpos 0.5365 xanchor 0.0 ypos 0.84 yanchor 0.0 allow '{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzçÇÊÉêéèîïôöûüêëâä}' default nomdujoueur changed name_func pixel_width 150

    vbox at Position(xpos = 0.47, xanchor=0.0, ypos=0.8, yanchor=0.0):
        label "{b}{size=18}{color=#000}Le diplôme du baccalauréat général{/color}{/size}{/b}" at left xminimum 0

    vbox at Position(xpos = 0.47, xanchor=0.0, ypos=0.82, yanchor=0.0):
        if menu_art:
            label "{b}{size=18}{color=#000}en Série Littéraire{/color}{/size}{/b}" at left xminimum 0
        elif menu_Economie:
            label "{b}{size=18}{color=#000}en Série Économique et Sociale{/color}{/size}{/b}" at left xminimum 0
        elif menu_Science:
            label "{b}{size=18}{color=#000}en Série Scientifique{/color}{/size}{/b}" at left xminimum 0
        
    vbox at Position(xpos = 0.47, xanchor=0.0, ypos=0.86, yanchor=0.0):
        label "{size=18}{color=#000}né(e) le [jourdenaissance]/[moisdenaissance]/1998{/color}{/size}" at left xminimum 0
        
    vbox at Position(xpos = 0.47, xanchor=0.0, ypos=0.84, yanchor=0.0):
        label "{size=18}{color=#000}est conféré à{/color}{/size}" at left xminimum 0
        
    vbox at Position(xpos = 0.47, xanchor=0.0, ypos=0.90, yanchor=0.0):
        label "{size=18}{color=#000}Signature du directeur:{/color}{/size}" at left xminimum 0
        
    vbox at Position(xpos = 0.62, xanchor=0.0, ypos=0.90, yanchor=0.0):
        label "{size=18}{color=#000}Signature du titulaire:{/color}{/size}" at left xminimum 0

    if pointsdecrea > 0:
        imagebutton auto "diploma_hand_%s.png" focus_mask True action [ SetVariable("terminay", 1),Play ("sound", "SE/impossible.ogg")] unhovered SetVariable("terminay", 0)
    elif nomdujoueur == "":
        imagebutton auto "diploma_hand_%s.png" focus_mask True action [ SetVariable("terminay", 2),Play ("sound", "SE/impossible.ogg")] unhovered SetVariable("terminay", 0)
    else:
        imagebutton auto "diploma_hand_%s.png" focus_mask True action [ Play ("sound", "SE/papier.mp3"), Hide("creationperso"), Jump("diplomafait")] unhovered SetVariable("terminay", 0)

Here is a video (so that the issue can be understood)


Thank you very much if you read this far !

[Divona]

... (calling the screen and showing the screen in a label loop) ...

Why do you call/show screen in label loop?

[MaximeChaos]

... (calling the screen and showing the screen in a label loop) ...

Why do you call/show screen in label loop?

Hi !
Showing the screen in a label loop so I can update stats display.

Code: Select all

label diploma:
    show screen creationperso
    call verification_stats
    $ renpy.pause (0.01)
    jump diploma

But like I said I also tried to only call the screen and erase the loop, and even without updating stats and without making the loop, the problem is the same.
The thing is that I made many other menus with imagebutton, but it's the only one that does that thing so I'm pretty sure I'm missing on something hu..

The end of the script look like this :

Code: Select all

    if terminay == 1:
        text "{b}{size=+10}{color=#DC143C}Vous n'avez pas encore distribué tous vos points de caractéristiques.{/color}{/size}{/b}" at center
    if terminay == 2:
        text "{b}{size=+10}{color=#DC143C}Vous n'avez pas encore entré votre nom.{/color}{/size}{/b}" at center
        
label diploma:
    show screen creationperso
    call verification_stats
    $ renpy.pause (0.01)
    jump diploma

And everything between the code from my first post and this code right here is only pure stats and info display, not any code about the imagebuttons.

[Divona]

The thing is that screen is already a loop itself, so the more loop you put, that could cause the redraw of the image as seen on the video. The stats will update itself as soon as the variable changed. So, really, there is no need for label loop.

I have managed to replicate the problem by doing exactly what you did with label loop, and fixed it by not using label loop and simply call screen. So the problem is with the loop you have. Here is how to avoid the problem:

Code: Select all

label diploma:
    call screen creationperso

Here is the code I used to replicate the problem:

Code: Select all

default num1 = 1
default num1_max = 10

screen loop_test():

    label "Num1 = [num1]"

    if num1 > 0:
        imagebutton:
            auto "gui/button1_%s.png"
            ypos 50
            action [
                SetVariable("num1", num1 - 1),
                SetVariable("total_point", total_point + 1)
            ]

    imagebutton:
        auto "gui/button1_%s.png"
        xpos 100 ypos 50
        action [
            SetVariable("num1", num1 + 1),
            SetVariable("total_point", total_point - 1)
        ]

label start:
    jump looptest

label looptest:
    show screen loop_test
    $ renpy.pause(0.01)
    jump looptest

The second imagebutton will flick to hover image when "num1" reach zero and trigger the first image button to hide.

[MaximeChaos]

The thing is that screen is already a loop itself, so the more loop you put, that could cause the redraw of the image as seen on the video. [...]

Like I said I already tried without the loop, and it result by the same issue. Here is what I did in the main script :

Code: Select all

hide screen dateetheure #hide the screen related to the date and time
    show image "bac-ground.png" #showing the picture used as the background of the system
    call screen creationperso #calling directly the screen

Ans I put # all over the end of the system so that there is no more label or loop like so :

Code: Select all

#label diploma:
    #call screen creationperso
    #call verification_stats
    #$ renpy.pause (0.01)
    #jump diploma

But like I said, the issue is still here.

The stats will update itself as soon as the variable changed. So, really, there is no need for label loop.

That would be true if the image buttons were also changing all the related variables ; in fact that's why I need to call a verification screen to make it, here is some of the code :

Code: Select all

label verification_stats:
    if Metabolisme == 10:
        $ endurance_max = 1000
        $ force_max = 1000
        $ forme_physique_max = 1000
    elif Metabolisme == 9:
        $ endurance_max = 900
        $ force_max = 900
        $ forme_physique_max = 900
    elif Metabolisme == 8:
        $ endurance_max = 800
        $ force_max = 800
        $ forme_physique_max = 800
    elif Metabolisme == 7:
        $ endurance_max = 700
        $ force_max = 700
        $ forme_physique_max = 700
    elif Metabolisme == 6:
        $ endurance_max = 600
        $ force_max = 600
        $ forme_physique_max = 600
    elif Metabolisme == 5:
        $ endurance_max = 500
        $ force_max = 500
        $ forme_physique_max = 500
    elif Metabolisme == 4:
        $ endurance_max = 400
        $ force_max = 400
        $ forme_physique_max = 400
    elif Metabolisme == 3:
        $ endurance_max = 300
        $ force_max = 300
        $ forme_physique_max = 300
    elif Metabolisme == 2:
        $ endurance_max = 200
        $ force_max = 200
        $ forme_physique_max = 200
    elif Metabolisme == 1:
        $ endurance_max = 100
        $ force_max = 100
        $ forme_physique_max = 100
    elif Metabolisme == 0:
        $ endurance_max = 100
        $ force_max = 100
        $ forme_physique_max = 100

    if Beaute == 10:
        $ charisme_max = 1000
        $ bonus_drague = 5
    elif Beaute == 9:
        $ charisme_max = 900
        $ bonus_drague = 4

But anyway, we don't care about that, cause even when I absolutely do not put any loop, any other screens, etc. The problem is still here.

What I saw is that if I put the "if" lines of my screen in a different order, display issues happens in a different orders. But I really can't see why..

EDIT:

I tested your code like so in a new project :

Code: Select all

init:
    $ total_point = 18
    default num1 = 1
    default num1_max = 10

    screen loop_test():

        label "Num1 = [num1]"

        if num1 > 0:
            imagebutton auto "gui/moins1_%s.png" ypos 50 action [ SetVariable("num1", num1 - 1), SetVariable("total_point", total_point + 1) ]
        
        if num1 < 10:
            imagebutton auto "gui/plus1_%s.png" xpos 100 ypos 50 action [ SetVariable("num1", num1 + 1), SetVariable("total_point", total_point - 1) ]

label start:
    #jump looptest

#label looptest:
    #show screen loop_test
    #$ renpy.pause(0.01)
    #jump looptest
    
    call screen loop_test

And you are totaly right, you do have the same problem when making the loop, and then the problem is gone when only calling the screen (I had no doubt but tested to see).
But I can assure you that when I don't make any loop, I still got this issue.. It's just weird.
I am missing something I'm sure.

[indoneko]

both of those ways worked fine BUT with the same issue as a result : When one of the value in the character creation get to 0 (minimum) or 10 (maximum) the button that follows in the script shows it focus mask for a fraction of second.

What is the expected behaviour when the value hit 0 or 10 ?
I don't see any lines that deal with these value; i.e you use "if beaute > 0" or "if beaute < 10" but I can't find any line with "if beaute == 0" or "if beaute >= 0"

[Divona]

OK. Try this. Use "showif" instead of "if". Example:

Code: Select all

screen creationperso:
    zorder 101
    
    showif Beaute > 0:
        imagebutton:
            auto "MenuCreation/moins1_%s.png"
            xpos 0.304 xanchor 0.5 ypos 0.75 yanchor 0.5
            action [
                SetVariable("Beaute", Beaute - 1),
                SetVariable("pointsdecrea", pointsdecrea + 1)
            ]

    showif Beaute < 10:
        showif pointsdecrea > 0:
            imagebutton:
                auto "MenuCreation/plus1_%s.png"
                xpos 0.444 xanchor 0.5 ypos 0.75 yanchor 0.5
                action [
                    SetVariable("Beaute", Beaute + 1),
                    SetVariable("pointsdecrea", pointsdecrea - 1)
                ]

    vbox at Position(xpos = 0.376, xanchor=0.5, ypos=0.71, yanchor=0.0):
        label "{b}{size=+8}{color=#000}Beauté [Beaute]{/color}{/size=+8}{/b}" at truecenter xminimum 0
        bar range Beaute_max value Beaute xmaximum 200 at truecenter
        
    showif Intelligence < 10:
        showif pointsdecrea > 0:
            imagebutton:
                auto "MenuCreation/plus2_%s.png"
                xpos 0.444 xanchor 0.5 ypos 0.85 yanchor 0.5
                action [
                    SetVariable("Intelligence", Intelligence + 1),
                    SetVariable("pointsdecrea", pointsdecrea - 1)
                ]

    showif Intelligence > 0:
        imagebutton:
            auto "MenuCreation/moins2_%s.png"
            xpos 0.304 xanchor 0.5 ypos 0.85 yanchor 0.5
            action [
                SetVariable("Intelligence", Intelligence - 1),
                SetVariable("pointsdecrea", pointsdecrea + 1)
            ]

. . .

[MaximeChaos]

What is the expected behaviour when the value hit 0 or 10 ?

The imagebutton should stop displaying, so that's why there is no "if beaute == 0" cause if it is there is no soustraction function. Same goes for the maximum, when it goes to 10 then the add function disappear cause it only shows when "if Beaute < 10:"
Also like that when you don't have any point to spend, all the " + " signs disappear from the screen.

OK. Try this. Use "showif" instead of "if".

OH MY GOD !!! Merci beaucoup !!! Thanks ! One week that I was losing my hairs to this thing. Thanks !!! Problem solved