Solved! - Turning a Textbox into a Quick Menu image map.

[FatUnicornGames]

I have been running around the quick menu image map threads and parsing together some code to make one for myself.

Code: Select all

# A screen that's included by the default say screen, and adds quick access to
# several useful functions.
screen quick_menu:

    # Add an in-game quick menu.
    hbox:
        style_group "quick"
    
        xalign 1.0
        yalign 1.0
        ground "textbox.png"
        hover "textbox1.png"
        hotspot (495, 559, 69, 35) action ShowMenu('save'))
        hotspot (572, 561, 61, 31) action ShowMenu('load')
        hotspot (637, 560, 37, 28) action Skip()
        hotspot (687, 560, 36, 24) action ShowMenu('preferences')        
        
init -2 python:
    style.quick_button.set_parent('default')
    style.quick_button.background = None
    style.quick_button.xpadding = 5

    style.quick_button_text.set_parent('default')
    style.quick_button_text.size = 12
    style.quick_button_text.idle_color = "#8888"
    style.quick_button_text.hover_color = "#ccc"
    style.quick_button_text.selected_idle_color = "#cc08"
    style.quick_button_text.selected_hover_color = "#cc0"
    style.quick_button_text.insensitive_color = "#4448"
    
    # Set a default value for the auto-forward time, and note that AFM is
    # turned off by default.
    config.default_afm_time = 10
    config.default_afm_enable = False
    
    

Here is what I came up with.

I am getting an error code though...

Code: Select all

File "game/screens.rpy", line 517: u'ground' is not a keyword argument or valid child for the hbox statement.
    ground "textbox.png"
          ^

What am I doing wrong? textbox.png does exist. Thanks for any help.


Also I am having a bit of an issue trying to get the name to line up in the box correctly.

[Code Monkey]

You need to add imagemap to your code

Code: Select all

screen quick_menu:

    # Add an in-game quick menu.
    hbox:
        style_group "quick"
    
        xalign 1.0
        yalign 1.0
        imagemap:
                ground "textbox.png"
                hover "textbox1.png"
                hotspot (495, 559, 69, 35) action ShowMenu('save')
                hotspot (572, 561, 61, 31) action ShowMenu('load')
                hotspot (637, 560, 37, 28) action Skip()
                hotspot (687, 560, 36, 24) action ShowMenu('preferences')   

Also I think you have one too many right parentheses after ShowMenu('save'). I'm not sure what name you're talking about.

[FatUnicornGames]

Excuse the dummy art. I want to push the name up so it lives in that little bubble connected to the upper left side of the text box.

Thanks for your help! I'll give it a go and let you know how it goes.

Edit:

Ok... I changed the code and this happened.



They layered the two pictures over themselves for some reason.

The buttons seem to be working! Yay! But I don't know why it is still looking like the above image.

[FatUnicornGames]

Yay! I think I got it. Thanks for your help Code Monkey.

If anyone could help with moving the Name of the person who is talking to its proper spot I still need help with that.

[Code Monkey]

No problem! As for the next part, just using a piece of the default code for the say screen

Code: Select all

# This file is in the public domain. Feel free to modify it as a basis
# for your own screens.

##############################################################################
# Say
#
# Screen that's used to display adv-mode dialogue.
# http://www.renpy.org/doc/html/screen_special.html#say
screen say:

    # Defaults for side_image and two_window
    default side_image = None
    default two_window = False

    # Decide if we want to use the one-window or two-window varaint.
    if not two_window:

        # The one window variant.        
        window:
            id "window"

            has vbox:
                style "say_vbox"

            if who:
				frame:
					background None
					yoffset -50
					text who id "who"

            text what id "what"

The key part is after the if who, you can add a frame around the text and add some positioning to make it go above the frame. yoffset or ypos should work.

The styles are inline just for the example but you can make some rules for like a style group to keep the code cleaner. Also not sure if this is the best solution for this, if anyone has a better way of doing it then I'm open to learning it =)

[FatUnicornGames]

Fantastic! Thanks for the help! I would have never figured that out.

I now have a fully programmed textbox with image mapping. Just gotta wait on the permanent gui to program it in, but all the parts are there.

Thanks again!

[Code Monkey]

Glad to help! ^_^

[KaosMoon]

No problem! As for the next part, just using a piece of the default code for the say screen

Code: Select all

# This file is in the public domain. Feel free to modify it as a basis
# for your own screens.

##############################################################################
# Say
#
# Screen that's used to display adv-mode dialogue.
# http://www.renpy.org/doc/html/screen_special.html#say
screen say:

    # Defaults for side_image and two_window
    default side_image = None
    default two_window = False

    # Decide if we want to use the one-window or two-window varaint.
    if not two_window:

        # The one window variant.        
        window:
            id "window"

            has vbox:
                style "say_vbox"

            if who:
				frame:
					background None
					yoffset -50
					text who id "who"

            text what id "what"

The key part is after the if who, you can add a frame around the text and add some positioning to make it go above the frame. yoffset or ypos should work.

The styles are inline just for the example but you can make some rules for like a style group to keep the code cleaner. Also not sure if this is the best solution for this, if anyone has a better way of doing it then I'm open to learning it =)

The easy way is to change

Code: Select all

    default two_window = False

into

Code: Select all

   default two_window = True

[Destiny]

I tried this, too, but seem to miss the important parts...
The text is under the box (which seems to get not explained here) and I also have the original textbox UNDER my textbox.
That the hotkeys are not working is my least problem here right now, I guess...

Code: Select all

screen quick_menu:

    # Add an in-game quick menu.
    hbox:
        style_group "quick"
   
        xalign 1.0
        yalign 1.0
        imagemap:
                ground "Textbox.png"
                hover "Textbox1.png"
                hotspot (444, 433, 444, 450) action ShowMenu('save')
                hotspot (526, 433, 526, 450) action ShowMenu('load')
                hotspot (580, 433, 580, 450) action Skip()
                hotspot (690, 433, 690, 450) action ShowMenu('preferences')    
       
init -2 python:
    style.quick_button.set_parent('default')
    style.quick_button.background = None
    style.quick_button.xpadding = 5

    style.quick_button_text.set_parent('default')
    style.quick_button_text.size = 12
    style.quick_button_text.idle_color = "#8888"
    style.quick_button_text.hover_color = "#ccc"
    style.quick_button_text.selected_idle_color = "#cc08"
    style.quick_button_text.selected_hover_color = "#cc0"
    style.quick_button_text.insensitive_color = "#4448"
   
    # Set a default value for the auto-forward time, and note that AFM is
    # turned off by default.
    config.default_afm_time = 10
    config.default_afm_enable = False

Result:




I even tried it with changing the script in the options.rpy, but the only difference is, the texts sits nice and the origanl textbox expands a bit

Code: Select all

    ## Padding is space inside the window, where the background is
    ## drawn.

    style.window.left_padding = 80
    style.window.right_padding = 77
    style.window.top_padding = 35
    style.window.bottom_padding = 6

    ## This is the minimum height of the window, including the margins
    ## and padding.

    style.window.yminimum = 203

Result:




Can someone help? .__.

[FatUnicornGames]

You have to make the menu a seperate image.

Code: Select all

# Quick Menu
#
# A screen that's included by the default say screen, and adds quick access to
# several useful functions.
screen quick_menu:

    # Add an in-game quick menu.
    hbox:
        style_group "quick"
    
        xalign 1.0
        yalign 1.0
        imagemap:
                ground "textbox1.png"
                hover "textbox2.png"
                hotspot (500, 250, 53, 34) action ShowMenu('save')
                hotspot (556, 249, 57, 34) action ShowMenu('load')
                hotspot (619, 251,51, 31) action Skip()
                hotspot (440, 249, 55, 35) action ShowMenu('preferences')   

init -2 python:
    style.quick_button.set_parent('default')
    style.quick_button.background = None
    style.quick_button.xpadding = 0

    style.quick_button_text.set_parent('default')
    style.quick_button_text.size = 12
    style.quick_button_text.idle_color = "#8888"
    style.quick_button_text.hover_color = "#ccc"
    style.quick_button_text.selected_idle_color = "#cc08"
    style.quick_button_text.selected_hover_color = "#cc0"
    style.quick_button_text.insensitive_color = "#4448"
        
    # Set a default value for the auto-forward time, and note that AFM is
    # turned off by default.
    config.default_afm_time = 10
    config.default_afm_enable = False
    

this is textbox1

textbox2




The whole thing.

Edit: I just realized there is a typo there. ;D

Edit edit: I think I will do a little tutorial about this when I get the energy up.

[Destiny]

Thank you so much
Looks great now!

[Coren]

I tried the code, and it didn't work. /: Anyway, I don't get how that imagemap can work - it's not as if textbox1 and textbox2 are ground and hover versions of each other. How do I make it work?

[Hellboy]

Sorry, I know this is a bit old, but I had to say thanks!
I've been trying to do this since a couple of days ago and was getting frustrated. This worked perfectly. Thanks for the examples too. I could have not done it without them.

Thank you! Now my textbox looks really fancy!

[MioSegami]

omg...gonna bookmark this! :]

[azureXtwilight]

Doesn't work on me either... I can't click on them :/