Making a Mass Effect-style dialogue wheel?

[SLDR]

I'm making a Mass Effect fan game and want to replace the regular choice menu with a Bioware/Mass Effect dialogue wheel. So far I've set up a simple screen that contains pictures of the individual sections, hotspots to light up the sections when highlighted, and set them to change a variable when clicked to reflect which choice the user picked.

Code: Select all

screen dialogue_wheel:
    imagemap:
        ground "wheel_1_idle.png"
        hover "wheel_1_hover.png"
        hotspot (645, 471, 1280, 720) action [SetVariable("choice", 1), Return()]
    imagemap:
        ground "wheel_2_idle.png"
        hover "wheel_2_hover.png"
        hotspot (710, 558, 1280, 720) action [SetVariable("choice", 2), Return()]
    imagemap:
        ground "wheel_3_idle.png"
        hover "wheel_3_hover.png"
        hotspot (645, 639, 1280, 720) action [SetVariable("choice", 3), Return()]
    imagemap:
        ground "wheel_4_idle.png"
        hover "wheel_4_hover.png"
        hotspot (236, 471, 1280, 720) action [SetVariable("choice", 4), Return()]
    imagemap:
        ground "wheel_5_idle.png"
        hover "wheel_5_hover.png"
        hotspot (167, 556, 1280, 720) action [SetVariable("choice", 5), Return()]
    imagemap:
        ground "wheel_6_idle.png"
        hover "wheel_6_hover.png"
        hotspot (236, 639, 1280, 720) action [SetVariable("choice", 6), Return()]

Here's a webm of what it looks like in action. I'm happy with it so far.

This is a super quick mockup of how I want it to look and work in the context of the game itself:

Basically I want choice menu buttons aligned to fit around the outside of the wheel with a transparent background (no visible button, just the text). When I hover over a button, the text should light up as well as the relevant section of the dialogue wheel. I would also need a way to maintain the button alignment when I don't need to use all 6 choices. I'm thinking an empty/invisible button but I'm not sure.

I'm having a hell of a time trying to figure out how to implement it though. I don't know if this should be done through customizing styles in screens.rpy or through imagemaps. I was reading through this thread last night and while it has a lot of good information in it, I wasn't able to figure out how to adapt it to my situation. If anyone could give me some advice on where to start, I would really appreciate it!

[Divona]

This is definitely a 'screen' job. You could combine it with imagemaps for the wheel, and customize the 'choice()' in 'screens.rpy' to get the menu choices to match the position you want. Here are the steps I would take:

1. Make an imagemaps frame of the wheel in 'choice' within 'screen.rpy'.
2. Position the 'textbutton' around the wheel.

Code: Select all

for i in items:
    if i = 0:
        textbutton i.caption action i.action at choice_position_1
    if i = 1:
        textbutton i.caption action i.action at choice_position_2

    #... and so on

3. If you have imagemaps of each button on the wheel large enough to cover the area where textbutton appear then it should be good when the mouse hovered on top both of them, but this is a lazy way to do it.

Else, I was thinking about having variable to check if one of the button on wheel or textbutton being hovered, and make sure both of them know, so they can be light up at the same time.

Or might as well forget about imagemaps and make each button on the wheel into 'imagebutton' along side 'textbutton'.

Well... I hope my idea help.

[SLDR]

Thank you for the response, Divona! I have some questions, if you don't mind.

1. Make an imagemaps frame of the wheel in 'choice' within 'screen.rpy'.

This is what "choice" in screen.rpy looks like right now. Is this what you meant? The wheel appears and lights up just fine when entering a choice menu. Now I need to figure out a way to make the wheel and buttons interact.

Code: Select all

screen choice(items):
    imagemap:
        ground "wheel/wheel_1_idle.png"
        hover "wheel/wheel_1_hover.png"
        hotspot (645, 471, 1280, 720) clicked Return(0)
    imagemap:
        ground "wheel/wheel_2_idle.png"
        hover "wheel/wheel_2_hover.png"
        hotspot (710, 558, 1280, 720) clicked Return(1)
    imagemap:
        ground "wheel/wheel_3_idle.png"
        hover "wheel/wheel_3_hover.png"
        hotspot (645, 639, 1280, 720) clicked Return(2)
    imagemap:
        ground "wheel/wheel_4_idle.png"
        hover "wheel/wheel_4_hover.png"
        hotspot (236, 471, 1280, 720) clicked Return(3)
    imagemap:
        ground "wheel/wheel_5_idle.png"
        hover "wheel/wheel_5_hover.png"
        hotspot (167, 556, 1280, 720) clicked Return(4)
    imagemap:
        ground "wheel/wheel_6_idle.png"
        hover "wheel/wheel_6_hover.png"
        hotspot (236, 639, 1280, 720) clicked Return(5)
    style_prefix "choice"

    vbox:
        for i in items:
            textbutton i.caption action i.action


## 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 = True


style choice_vbox is vbox
style choice_button is button
style choice_button_text is button_text


style choice_vbox:
    xalign 0.5
    ypos 270
    yanchor 0.5

    spacing gui.choice_spacing

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

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

This pops up the dialogue wheel during menu choices, which is good.

2. Position the 'textbutton' around the wheel.

What should I replace "choice_position_1" with? I was experimenting with the code during classes today but couldn't figure out what's supposed to go there.

3. If you have imagemaps of each button on the wheel large enough to cover the area where textbutton appear then it should be good when the mouse hovered on top both of them, but this is a lazy way to do it.

I originally thought of this too! I may or may not, I'll see if I can't put together a more elegant solution. And about the imagebutton thing, that thread I linked in the OP was what got me thinking about other ways to setting it up. Align the buttons correctly and put the image of the wheel segment next to the button to form the complete wheel in the center. I need to get the buttons aligned first before I continue, though.

[Divona]

This is what "choice" in screen.rpy looks like right now. Is this what you meant?

Will need some adjustment for imagemap to make it work, though.
First make sure that it will not light up when there is no choice available on that wheel button. Perhaps something like:

Code: Select all

for i in items:
    if i == 0:
        imagemap:
            ground "wheel/wheel_1_idle.png"
            hover "wheel/wheel_1_hover.png"
            hotspot (645, 471, 1280, 720) action i.action

    if i == 1:
        imagemap:
            ground "wheel/wheel_2_idle.png"
            hover "wheel/wheel_1_hover.png"
            hotspot (710, 558, 1280, 720) action i.action

# And so on to all 6 choices...

I have replace the 'clicked Return' with 'action i.action', so it will work just like choice buttons when clicked.


What should I replace "choice_position_1" with?

That would be that you need to setup a custom transform to position the text:

Code: Select all

transform choice_position_1:
    xpos 500
    ypos 500

I would get ride of the 'vbox:' and replace it with 'frame:'. It's more suitable in this case, as we're not display choice buttons vertically.


Now I need to figure out a way to make the wheel and buttons interact.
Lazy way is to size the textbutton to be the same size as one button part of the wheel and put it there on top. So when the mouse is hovered on top, it will light up both the textbutton and the wheel...hopefully.


Align the buttons correctly and put the image of the wheel segment next to the button to form the complete wheel in the center. I need to get the buttons aligned first before I continue, though.
If imagemap doesn't quite work as plan, then 'imagebutton' would be the way to go. Maybe something like this:

Code: Select all

frame:
    for i in items:
        if i == 0:
            imagebutton idle "wheel/button_idle_0.png" hover "wheel/button_hover_0.png" xpos 645 ypos 471 action i.action
            textbutton i.caption xpos 645 ypos 471 action i.action
        else:
            imagebutton idle "wheel/button_idle_0.png" xpos 645 ypos 471 action NullAction

        if i == 1:
            imagebutton idle "wheel/button_idle_1.png" hover "wheel/button_hover_1.png" xpos 710 ypos 558 action i.action
            textbutton i.caption xpos 645 ypos 471 action i.action
        else:
            imagebutton idle "wheel/button_idle_1.png" xpos 710 ypos 558 action NullAction

# And so on for all 6 choices...

This is pretty much create imagebutton under and place textbutton on top... just like imagemap...
Well, let me know if it's work, as it could in theory. If not then we'll come up with another way.

[SLDR]

Sorry I haven't responded, I was studying for an exam yesterday evening. Anyway, I made progress today! A few things I want to talk about.

Code: Select all

for i in items:
    if i == 0:

That piece of code up there had me incredibly confused. The things I put inside if i == int: never appeared on screen because i isn't an integer! i contains the caption, action, and chosen state of each item inside the list items. I solved the problem by using enumerate() to create my own counter. Here's what my choice screen code looks like right now.

Code: Select all

screen choice(items):
    style_prefix "choice"
    frame:
        for choice_count, i in enumerate(items):
            if choice_count == 0:
                if i.caption == " ":
                    textbutton i.caption action NullAction() at choice_position_1
                else:
                    textbutton i.caption action i.action at choice_position_1
                imagemap:
                    ground "wheel/wheel_1_idle.png"
                    hover "wheel/wheel_1_hover.png"
                    hotspot (645, 471, 1280, 720):
                        if i.caption == " ":
                            action NullAction()
                        else:
                            action i.action

# and so on for the rest of the 6 buttons

Since I have to create all six menu items every time the wheel comes up even if I don't need them all, I needed a way to make "blank" buttons to avoid list out of range errors. This is what the if i.caption == " ": statements are for. This is what the code for a yes/no question would look like:

Code: Select all

menu wheel_test_stage_1:
    "Yes":
        s "Sure, let's talk."
    " ":
        ""                 # middle-right segment of wheel
    "No":
        s "Not right now."
    " ":
        ""                 # top-left segment
    " ":
        ""                 # middle-left segment
    " ":
        ""                 # bottom-left segment

# anything called " " will be invisible and its code will never run thanks to NullAction()

My code checks whether or not i.caption (the button text) is " ". If it is, then both the button and the relevant wheel segment are set to NullAction() so that clicking on either won't do anything. If not, then the button and wheel segment will do what they're supposed to.

So yeah, I'm super psyched about this. I'm especially tickled by the fact that the code can also perfectly handle the "more information" submenus that Mass Effect has too. I still need to make the wheel and buttons to light up at the same time, in addition to visual tweaks. I'll be working on that tonight and tomorrow.

Again, thank you so much Divona for your help and patience!

[magistrate]

Did you ever finish this, and if so, mind sharing the code? I'm trying to do the same thing.