Help building HUD in-game

rachelstevens7 · Oct 17, 2018

Hello everyone,
I'm gonna explain you the whole thing so you understand where I want to go.
(Just in case, I'm French, so I hope you will understand my English)

I recently discovered the old

You must be registered to see the links

game and since the original version was abandoned by the creator, I wanted to build a new one, with improvements. But I started using Ren'Py this week only, so I'm still weak at coding in it. And I'm currently missing somethings to "achieve" the base gameplay of this game. That's why I'm here.

I need two things :
- Most important : The possibility to have static menus on any screen (non dialog). I believe it's something like change the x/y position of the menu box, but I've been unable to do so.

- Second most important : The HUD with current stats. On the original game, the HUD showed stats about the character and the time in-game. I know how to show images on Ren'Py, but I don't know how to show values from variables on the in-game screen.

Here's the things I'm talking about :

Thanks for any kind of help you can give me !
(btw, if anyone's interested in this remake, let me know)

anne O'nymous · Oct 17, 2018

PhoenixizFire said:
I need two things :
- Most important : The possibility to have static menus on any screen (non dialog). I believe it's something like change the x/y position of the menu box, but I've been unable to do so.

Er... not sure to understand your question.
Unless you explicitly make it works otherwise, in Ren'py a menu always have a static position and a static content. So, with the help of the screenshot I assume that you mean it as in "a menu that will stay on the screen even if the scene change".
Then, reading

You must be registered to see the links

can help you here.

PhoenixizFire said:
- Second most important : The HUD with current stats.

Well, reading the same thread should be a good start also for this.

rachelstevens7 · Oct 17, 2018

anne O'nymous said:
Then, reading
You must be registered to see the links
can help you here.

Thanks a lot ! It was really useful ! I didn't thought that the settings bar down the screen was currently a "menu" and that you could use more of them ^^

Still, I have another issue now. I don't get how I can make my "textbuttons" to change the label the player is in. I've tried using :

Code:

screen locations():

    zorder 100

    vbox:
        style_prefix "locations"

        xalign 0.05
        yalign 0.9

        textbutton _("City") action jump city
        textbutton _("Livingroom") action jump("livingroom")
        textbutton _("Kitchen") if label livingroom
        #textbutton _("Phone"):
                  #action show phone
                  #textbutton _("Bree"):
                              #textbutton _("Call")
                              #textbutton _("Send message")

but none of these writings are working.

anne O'nymous · Oct 17, 2018

PhoenixizFire said:
I don't get how I can make my "textbuttons" to change the label the player is in. I've tried using :

Code:

textbutton _("Livingroom") action jump("livingroom")

You were almost there. It's Jump. For the list of all the actions available from a screen button, just take a look at the doc, starting by

You must be registered to see the links

. It's not always clear (especially since English isn't your natural language) but all in all, it's enough to understand the base and make a working game.
Note that the same doc is already available on your computer, in the same place than Ren'py's SDK. And if you've some questions, you can still ask here ; you can even do it in french when talking with me, as long as you keep a, more or less, accurate English translation to respect the rules of the forum.

rachelstevens7 · Oct 18, 2018

Thanks for understanding my needs

I'll do my best to speak the best English I can ^^

So far so good ! I'm beginning to understand things now !
Look at my HUD (Yeah, only text/links for now, I'll work on aesthetic later)

Now I'm having some new needs. I want to hide some buttons out of context. For example, in this screen, I would like to hide (on the left) "Kitchen" & "My Bedroom" and (on the right) "Shower", "Eat", "Drink coffee", etc... which all are out of context.
Basically what I need, is to only show them on certain labels. Which would look like this :

Code:

screen actions():

    zorder 100

    vbox:
        style_prefix "actions"

        xalign 0.95
        yalign 0.925

        if label==bathroom:
            text _("Shower")
        if label==kitchen:
            text _("Eat")
        text _("Drink coffee")
        text _("Work")
        text _("Shop")
        text _("Inventory")
        text _("Use phone")
        text "Cancel"

EDIT : Nevermind, just found another way without using label ^^

Soon I'm gonna have to code the girls, their stats, and the interactions you can have, so I think I'll still be in need of a bit of help at this point

Oh and I also have another question : Is it possible to hide those menus until something enables them ? I mean, I don't want them to appear until the tutorial ends, and then enable them. But I don't know how to turn them on/off.

anne O'nymous · Oct 18, 2018

PhoenixizFire said:
I'll do my best to speak the best English I can ^^

It's the best practice, it will make you works your English and have better skills when writing dialogs for the game.

PhoenixizFire said:
Now I'm having some new needs. I want to hide some buttons out of context. For example, in this screen, I would like to hide (on the left) "Kitchen" & "My Bedroom" and (on the right) "Shower", "Eat", "Drink coffee", etc... which all are out of context.

That's the role of

You must be registered to see the links

and

You must be registered to see the links

screen statements. There's a difference between them, but my brain is not working well enough today for the explanation, sorry.

You where almost there :

Code:

        if label==bathroom:
            text _("Shower")

You forgot the quote, because it's a string :

Code:

        if label=="bathroom":
            text _("Shower")

Now, some words on the design part. There's a thing people tend to forget when they use if or showif... It's that something will be displayed or not, and that will change the design.
This is the usual code for this kind of behavior :

You don't have permission to view the spoiler content. Log in or register now.

Like you can see by playing it, the visual always change, because sometimes there's a button "here", and sometimes there's nothing. It's not really good, even if it's not this bad either. But the more you'll try to have a good design, the more it will end being bad looking.
The solution is to make it in a way that there's always something displayed... Either the button, or nothing, but a "nothing" explicitly shown on the screen :

You don't have permission to view the spoiler content. Log in or register now.

In this example, the buttons disappear, but in the same time each button always stay at the exact same place, which is better. You just replaced the button by

You must be registered to see the links

, which will display an empty space of the given size. It's now better, but still the button disappear. Sometimes it's not a problem and it feel right, some other it don't make it.
For theses last cases, it's better to move the place where you do the test :

You don't have permission to view the spoiler content. Log in or register now.

It the condition are reached, the button have an action property, else it don't have it. A button without action property is said "insensitive" (look at the style I used). In the end, the buttons will be always displayed, but some can be used, some not, and the way they'll look depend of that.
Note that, unlike the two examples above, here only if can be used to test the condition.

PhoenixizFire said:
Oh and I also have another question : Is it possible to hide those menus until something enables them ?

Code:

default menuIsActive = False

screen myScreen:
    if menuIsActive is True:
        vbox:
            textbutton "button 1":
                action NullAction()
            textbutton "button 2":
                action NullAction()

label start:
    show screen myScreen
    "no menu"
    $ menuIsActive = True
    "And now you show it"
    $ menuIsActive = False
    "Oh, it's gone again"
    return

rachelstevens7 · Oct 21, 2018

2nd UPDATE : Well, looks like I'm getting skilled in Ren'py pretty fast right now x) I figured out I only needed to add a "idle" property for it to work ! Going this fast, the game should be ready in less than a month !

Because as far as I can see, I only now need to add the girls and their own interactive imagebutton, and add the frames on the HUDs and it'll be good !

############################################

UPDATE : I'm ok with the thing I asked below, but now I'm stuck with something else.

I need to put static images on my menus (screens) aside to text, but except imagebutton, there are no code to input images in a Screen, and even with a Modal True, I can't figure out how to properly use imagebutton in Screen.

Any info to debug me ?

######################################
Hey ! I'm back after a few rest days !
And yes..I still need a bit of help.

I'm currently stuck : I need to execute a "while" in a "textbutton" action (because the textbutton starts calculating something that needs to be altered instantly after being "recorded"). But Ren'Py says that while can't be used there :/
But the code might be easier to understand what I mean:

Code:

if whr=="My bedroom" and sleep>10:
                textbutton _("Sleep"):
                    if wakeup==True and hour>clock:
                        action [SetVariable("memoryClock", clock+24), SetVariable("memoryHour",hour), SetVariable("sleeping",memoryClock-memoryHour)]
                        while sleeping > 0:
                            [SetVariable("hour",hour+1), SetVariable("sleep",sleep+1), SetVariable("sleeping",sleeping-1)]
                            if sleep==24:
                                SetVariable("sleep",0)
                        [SetVariable("wakeup", False), SetVariable("hudClock", False)]
                        ....

I've already tried putting "action" before "while", but this doesn't change anything :/

anne O'nymous · Oct 22, 2018

PhoenixizFire said:
I need to put static images on my menus (screens) aside to text, but except imagebutton, there are no code to input images in a Screen, and even with a Modal True, I can't figure out how to properly use imagebutton in Screen.

There is one,

You must be registered to see the links

. And for once the documentation is enough to understand it since it's really simple.

PhoenixizFire said:
I'm currently stuck : I need to execute a "while" in a "textbutton" action

You can't. Here, you'll have really on the

You must be registered to see the links

screen action.

Code:

init python:
    def sleepingAction():
          while sleeping > 0:
              store.hour += 1
              store.sleep += 1
              store.sleeping -= 1
          if sleep==24:
              store.sleep = 0

screen theScreen:
    if whr=="My bedroom" and sleep>10:
         textbutton _("Sleep"):
              if wakeup==True and hour>clock:
                   action [SetVariable("memoryClock", clock+24),
                       SetVariable("memoryHour",hour),
                       SetVariable("sleeping",memoryClock-memoryHour),
                       Function( sleepingAction ),
                       SetVariable("wakeup", False),
                       SetVariable("hudClock", False) ]

Note that all the "SetVariable" can in fact be put in the function. But all this said, it's just a demonstration, it's not how you should do it in this particular case. This is more Ren'py spirit compliant :

Code:

screen theScreen:
    if whr=="My bedroom" and sleep>10:
         textbutton _("Sleep"):
              if wakeup==True and hour>clock:
                   action [SetVariable("memoryClock", clock+24),
                       SetVariable("memoryHour",hour),
                       SetVariable("sleeping",memoryClock-memoryHour),
                       # You increment /hour/ and /sleep/ of one unit by unit
                       # in the value of /sleeping/. So, why not directly adding
                       # the values ?
                       SetVariable("hour", hour + sleeping ),
                       SetVariable("sleep", sleep + sleep ),
                       SetVariable("sleeping", 0 ),
                       # I have a doubt here. Is it "None", or "NullAction()" ?
                       If( sleep == 24, SetVariable( "sleep", 0 ), None ),
                       SetVariable("wakeup", False),
                       SetVariable("hudClock", False) ]

This said, don't forget to deal with the fact that hour will clearly go further than 24.

Obviously, all this can be better with replacing all the SetVariable by a single Function, add assigning the new values to each variable in the said function.

rachelstevens7 · Jan 4, 2019

Hey ! It's been a while since this post was made, but I continued working on this project, and overall learned a lot about Python programming, and now my game is almost ready to be published...BUT...there's still some stuff I need to figure out first. Well, currently, only one for now :

I got screens over other screens...And I don't know how to correct that issue. I've tried using zorder or modal, but nothing.

I need my "screen actions():" to get in front of my "screen showSasha():". How can I proceed ? I've even tried changing order in the gui.parameters, but no result. Any idea of what I'm missing ?

Help building HUD in-game

rachelstevens7

Newbie

anne O'nymous

I'm not grumpy, I'm just coded that way.

rachelstevens7

Newbie

anne O'nymous

I'm not grumpy, I'm just coded that way.

rachelstevens7

Newbie

anne O'nymous

I'm not grumpy, I'm just coded that way.

rachelstevens7

Newbie

anne O'nymous

I'm not grumpy, I'm just coded that way.

rachelstevens7

Newbie