Change the "choices" format, completely.

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
ISAWHIM
Veteran
Posts: 287
Joined: Sun Nov 06, 2016 5:34 pm
Contact:

Change the "choices" format, completely.

#1 Post by ISAWHIM » Mon Oct 30, 2017 10:46 am

I would like the choices menu to be completely different than it is now.

I moved the "question" over the "answers", which was the first step in making it more logical...

However, for this setup, I need the question to be on the left (where the "other" person speaks from.) While the answers stack on the right-hand side (where the protagonist speaks from.) {I will tackle non-person questions later-on. When the narrator is the one speaking.}
qa.jpg
qa.jpg (36.42 KiB) Viewed 1086 times
At the moment, I can't get the answers to isolate from the question component. (Using an hbox forces the questions off the screen, no matter what size I tell it to be.)

User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:

Re: Change the "choices" format, completely.

#2 Post by Divona » Mon Oct 30, 2017 11:47 am

Sound like the need to create your own choice menu screen. I did a quick prototype here:

Code: Select all

screen new_choice(question="", answers):
    style_prefix "new_choice"

    fixed:
        xmaximum 550
        ymaximum 320

        xalign 0.0
        yalign 1.0

        add "#00000099"
        text question

    vbox:
        for k, v in answers.iteritems():
            textbutton k action v

style new_choice_vbox is vbox
style new_choice_button is button
style new_choice_button_text is button_text

style new_choice_vbox:
    xalign 1.2
    yalign 0.7
    yanchor 0.5

    spacing gui.choice_spacing

style new_choice_button is default:
    properties gui.button_properties("choice_button")

style new_choice_button_text is default:
    properties gui.button_text_properties("choice_button")


label start:

    "This is the new choice screen."

    $ answer_dict = {
        "Answer 1": Jump("answer1"),
        "Answer 2": Jump("answer2"),
        "Answer 3": Jump("answer3")
    }

    call screen new_choice(question = "This is my question.", answers = answer1)

    return

label answer1:
    "You chose Answer 1."
    return

label answer2:
    "You chose Answer 2."
    return

label answer3:
    "You chose Answer 3."
    return
The use of dictionary might be a mistake, as it doesn't sort.

There might be the other way by checking if the choice screen is showing, then display alternative "say screen" as question box to the left. Use default choice screen, but adjust them to display on the right. I wouldn't be using "hbox".
Completed:
Image

User avatar
ISAWHIM
Veteran
Posts: 287
Joined: Sun Nov 06, 2016 5:34 pm
Contact:

Re: Change the "choices" format, completely.

#3 Post by ISAWHIM » Mon Oct 30, 2017 12:52 pm

Can I hijack the other values?

Just replace that screen with a python function, leading to that screen?

The strange thing about the "choice" screen... There is no actual "question" area to edit... It just displays the (items)... Has to be internally hard-coded, which is why it acts strange if I try to alter the choices box.

Code: Select all

## When this is true, menu captions will be spoken by the narrator. When false,
## menu captions will be displayed as empty buttons.
define config.narrator_menu = False
I guess that is the "Question"... I'll have to try and play with narrator_menu settings. :P

User avatar
ISAWHIM
Veteran
Posts: 287
Joined: Sun Nov 06, 2016 5:34 pm
Contact:

Re: Change the "choices" format, completely.

#4 Post by ISAWHIM » Mon Oct 30, 2017 1:34 pm

So, I figured-out how to detect the "question"...

If one exists, it has no "action" attribute.
While each of the answers do...
(For the question) [items[0].action] = None
(For the answers) [items[1].action] = <renpy.ui.ChoiceReturn object at 0x049D7B70>

Tested by adding this line before the textbutton

text "[items[0].action]"

However, if I put this...
if items.action == None:

I get an error that items has "no action"... Duh... no kidding... (Tried using "if not items.action:", which also crashed renpy)

So, if I can detect them, I can simply display whichever formatted box I want. Gutting the original formats.

User avatar
ISAWHIM
Veteran
Posts: 287
Joined: Sun Nov 06, 2016 5:34 pm
Contact:

Re: Change the "choices" format, completely.

#5 Post by ISAWHIM » Mon Oct 30, 2017 1:42 pm

I think I got it... Thanks to your help.

I had to do...

Code: Select all

if i.action == None:
Now, I can isolate the Question, if it exists...

Code: Select all

screen choice(items):
    style_prefix "choice"
    vbox:
        for i in items:
            if i.action == None:
                fixed:
                    xpos 0
                    ypos 0
                    text "[i.caption]" 
            else:
                textbutton i.caption action i.action:
                        text_outlines [(1, "#FF0000", 0, 0)]
It doesn't actually go to 0,0... (It is constrained within the vbox)

However, I can now move the vbox to the actual questions area, and get my format. I think... Trying it now.

User avatar
ISAWHIM
Veteran
Posts: 287
Joined: Sun Nov 06, 2016 5:34 pm
Contact:

Re: Change the "choices" format, completely.

#6 Post by ISAWHIM » Mon Oct 30, 2017 6:51 pm

Final setup, complete code... It will obviously need modification for personal taste.

Code in "gui.rpy", edited for this format.

Code: Select all

## Choice Buttons ################################
define gui.choice_button_width = 650
define gui.choice_button_height = None
define gui.choice_button_tile = False
define gui.choice_button_borders = Borders(0, 2, 0, 2)
define gui.choice_button_text_font = gui.text_font
define gui.choice_button_text_size = gui.text_size
define gui.choice_button_text_xalign = 0.5
define gui.choice_button_text_idle_color = "#cccccc"
define gui.choice_button_text_hover_color = "#ffffff"

# A few lines below is the "spacing"

## The spacing between menu choices.
define gui.choice_spacing = 4
Code in "screens.rpy", edited for this format.

Code: Select all

## Choice screen #################################

# variable to ensure there are no repeats and that a "question" only shows, if there is one to display.
define choiceCount = 0
screen choice(items):
    #Forces the count to zero
    $ choiceCount = 0
    for i in items:
        #If there is NO action, this is the narrator speaking, the "question" to display with the choices.
        if i.action == None:
            fixed:
                xanchor 0.0
                xpos 200
                xsize 500
                yanchor 1.0
                ypos 1080
                #The OTHER character would be displayed here, asking the question below.
                text "[i.caption]" color "#000000" justify True xanchor 0.0 xpos 0 yanchor 0.0 ypos 910
        else:
            #Or else, this is a selection "answer"...
            #Setup the vbox, and loop through the list again, avoiding the "question", if one exists.
            if choiceCount == 0:
                vbox:
                    style_prefix "choice"
                    $ choiceCount += 1
                    for i in items:
                        if i.action != None:
                            #Not None = This is an answer/selection, not a narrator/question/display
                            textbutton i.caption action i.action:
                                text_hover_color "#FFFFFF"
                                text_idle_color "#DDFF00"
                                text_size 18
                                text_justify True
                                text_outlines [(1, "#000000", 0, 0)]
                fixed:
                    #This is my protagonist, so he is shown next to the answers.
                    add "side you.png" xalign 0.5 xpos 1450 yalign 1.0 ypos 1080
So, that, roughly, displays the "Question" and "Answers", in a format like the above illustration. (Minus the custom window graphics and without settings to display the OTHER speaking character. That was just code-clutter.)

Hope this helps someone in the future.

The shorter set of code... Minus the text formatting...

Code: Select all

define choiceCount = 0
screen choice(items):
    $ choiceCount = 0
    for i in items:
        if i.action == None:
            fixed:
                text "[i.caption]"
        else:
            if choiceCount == 0:
                vbox:
                    style_prefix "choice"
                    $ choiceCount += 1
                    for i in items:
                        if i.action != None:
                            textbutton i.caption action i.action

User avatar
Ibitz
Regular
Posts: 63
Joined: Thu Jul 27, 2017 4:47 pm
Projects: Magical Disarray (WIP)
Organization: Ibitz Visual Novels
Deviantart: http://ibitz.deviant
itch: ibitz
Contact:

Re: Change the "choices" format, completely.

#7 Post by Ibitz » Tue Oct 31, 2017 12:27 am

This sorta looks like something I've been looking into for my next game (when I'm finished with my current one). I'm trying to go for a "social media" feel. Mind if I use this code and try to build it into my next game? I will credit you too, if you'd like.
Image

Ibitz is a self-taught coder/artist who works alone on their games. All games I create are freeware. If you need any help with coding or creating your game, just let me know. I'd be more than happy to help.

User avatar
ISAWHIM
Veteran
Posts: 287
Joined: Sun Nov 06, 2016 5:34 pm
Contact:

Re: Change the "choices" format, completely.

#8 Post by ISAWHIM » Sat Nov 04, 2017 5:34 am

Ibitz wrote:
Tue Oct 31, 2017 12:27 am
This sorta looks like something I've been looking into for my next game (when I'm finished with my current one). I'm trying to go for a "social media" feel. Mind if I use this code and try to build it into my next game? I will credit you too, if you'd like.
No credit required... Yes, you can use this code. PM me if you need help formatting it to taste. (I will try my best to help.)

User avatar
Ibitz
Regular
Posts: 63
Joined: Thu Jul 27, 2017 4:47 pm
Projects: Magical Disarray (WIP)
Organization: Ibitz Visual Novels
Deviantart: http://ibitz.deviant
itch: ibitz
Contact:

Re: Change the "choices" format, completely.

#9 Post by Ibitz » Fri Nov 10, 2017 6:33 pm

ISAWHIM wrote:
Sat Nov 04, 2017 5:34 am

No credit required... Yes, you can use this code. PM me if you need help formatting it to taste. (I will try my best to help.)
Awesome. Thank you very much. I'll keep that in mind when I begin working on my project.
Image

Ibitz is a self-taught coder/artist who works alone on their games. All games I create are freeware. If you need any help with coding or creating your game, just let me know. I'd be more than happy to help.

User avatar
ISAWHIM
Veteran
Posts: 287
Joined: Sun Nov 06, 2016 5:34 pm
Contact:

Re: Change the "choices" format, completely.

#10 Post by ISAWHIM » Sat Nov 11, 2017 3:50 am

Ibitz wrote:
Fri Nov 10, 2017 6:33 pm
Awesome. Thank you very much. I'll keep that in mind when I begin working on my project.
Just adding... I have finished a more complex, yet simple variation of this code. It now has the "Frames", and correctly builds the "answers" to a more desirable format.

1: When only given a few answers, it maintains a fixed-height, filling the questions from the top-down.
2: When reaching the limit of the minimum "answer" bubble, it expands the bubble upwards. This allows several answers, as much as can fit on the vertical screen.

The "Frame" image, is just a 32x32 pixel image, of a circle. The frame-corners are set to 16x16 pixels. Resulting in a rounded rectangle "bubble". (I did not include a "say-bubble tail", since the selected list of answers are essentially just a thought in the protagonist's head. Once selected, the response would be, appropriately, a standard "say-bubble".

NOTE: There are various other settings, related to text-formatting, which are not part of this code. Those would have to be adjusted, for this code to "look right", as-is. They will also have to be adjusted for your own formats, as the default alignments will not work here. The code is just for example of the functional format, not the text-format.

The "bubble" graphic is named "question.png"
question.png
question.png (959 Bytes) Viewed 887 times

Code: Select all

define choiceCount = 0
screen choice(items):
    $ choiceCount = 0
    for i in items:
        if i.action == None:
            ### QUESTION-BOX ####
            frame:
                xanchor 0.0
                xpos 220
                xpadding 20
                xsize 680
                yanchor 1.0
                ypos 1075
                yminimum 185
                background Frame("question.png",16,16)
                hbox:
                    text "[i.caption]" color "#000000" justify True xanchor 0.5 xpos 0.5 yanchor 0.0 ypos 0 size 22
        else:
            ### Else, this is the ANSWER-BOX ###
            if choiceCount == 0:
                frame:
                    xanchor 0.0
                    xpos 900
                    xsize 490
                    yanchor 1.0
                    ypos 1075
                    yminimum 185
                    background Frame("question.png",16,16)
                    vbox:
                        xalign 0.5
                        style_prefix "choice"
                        $ choiceCount += 1
                        for i in items:
                            if i.action != None:
                                textbutton i.caption action i.action:
                                    xsize 490
                                    text_hover_color "#000000"
                                    text_idle_color "#EEFFAA"
                                    text_size 18
                                    text_outlines [(1, "#889911", 1, 1)]
                fixed:
                    ### Optional display of the protagonist, next to the answer-selections. ###
                    ### Mine always displays on the right-hand side ###
                    add "side you.png" xalign 0.5 xpos 1470 yalign 1.0 ypos 1080
I will try my best to say what this does... (Needs to be formatted to your screen. My values were left here for you to change.)

1: If you use this format in code... (below)... The "question-box" will replace anyone's speaking "say box". (i.action = None)

Code: Select all

menu:
    "This is a headless QUESTION. The default NARRATOR speaking."
    "Answer #1":
        pause
    "Answer #2":
        pause
2: If you use this format in code... (below)... {Optional use for a question, giving it a named-character.}
The "question" will be spoken by BOB, in a standard SAY-WINDOW. (i.action = Something) My SAY boxes, for anyone besides the protagonist, are on the left-hand side. The standard display will not work here. It could be coded to display a special variation of the dialogue-box, or you could just ignore the use of a named-character actually saying the "question".

Code: Select all

menu:
    BOB "This is a headless QUESTION. The default NARRATOR speaking."
    "Answer #1":
        pause
    "Answer #2":
        pause
3: If you use this format in code... (below)... This is a headless menu. No question is asked. Just selectable answers are displayed.. (i.action = None)

Code: Select all

menu:
    ### No actual "Question" is asked ###
    "Answer #1":
        pause
    "Answer #2":
        pause

Post Reply

Who is online

Users browsing this forum: Bing [Bot], HowardTheDuck