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

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.
Message
Author
User avatar
FatUnicornGames
Miko-Class Veteran
Posts: 576
Joined: Sun Mar 25, 2012 7:54 pm
Projects: Club Shuffle
Contact:

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

#1 Post by FatUnicornGames » Tue Jun 19, 2012 6:43 pm

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.
Last edited by FatUnicornGames on Wed Jun 20, 2012 12:33 am, edited 1 time in total.
Image
Developer Blog for Club Shuffle - Follow and Share?
-Also! You can call me Crystal if you want.-

Code Monkey
Regular
Posts: 88
Joined: Tue Apr 03, 2012 9:17 am
Projects: Dandelion
Organization: Cheritz
Location: Seoul, South Korea
Contact:

Re: Trouble with turning a Textbox into a Quick Menu image m

#2 Post by Code Monkey » Tue Jun 19, 2012 10:37 pm

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.

User avatar
FatUnicornGames
Miko-Class Veteran
Posts: 576
Joined: Sun Mar 25, 2012 7:54 pm
Projects: Club Shuffle
Contact:

Re: Trouble with turning a Textbox into a Quick Menu image m

#3 Post by FatUnicornGames » Tue Jun 19, 2012 10:55 pm

Image

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.

Image

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.
Image
Developer Blog for Club Shuffle - Follow and Share?
-Also! You can call me Crystal if you want.-

User avatar
FatUnicornGames
Miko-Class Veteran
Posts: 576
Joined: Sun Mar 25, 2012 7:54 pm
Projects: Club Shuffle
Contact:

Re: Trouble with turning a Textbox into a Quick Menu image m

#4 Post by FatUnicornGames » Tue Jun 19, 2012 11:51 pm

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.
Image
Developer Blog for Club Shuffle - Follow and Share?
-Also! You can call me Crystal if you want.-

Code Monkey
Regular
Posts: 88
Joined: Tue Apr 03, 2012 9:17 am
Projects: Dandelion
Organization: Cheritz
Location: Seoul, South Korea
Contact:

Re: Trouble with turning a Textbox into a Quick Menu image m

#5 Post by Code Monkey » Tue Jun 19, 2012 11:55 pm

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 =)

User avatar
FatUnicornGames
Miko-Class Veteran
Posts: 576
Joined: Sun Mar 25, 2012 7:54 pm
Projects: Club Shuffle
Contact:

Re: Trouble with turning a Textbox into a Quick Menu image m

#6 Post by FatUnicornGames » Wed Jun 20, 2012 12:31 am

Image

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!
Image
Developer Blog for Club Shuffle - Follow and Share?
-Also! You can call me Crystal if you want.-

Code Monkey
Regular
Posts: 88
Joined: Tue Apr 03, 2012 9:17 am
Projects: Dandelion
Organization: Cheritz
Location: Seoul, South Korea
Contact:

Re: Trouble with turning a Textbox into a Quick Menu image m

#7 Post by Code Monkey » Wed Jun 20, 2012 12:35 am

Glad to help! ^_^

KaosMoon
Newbie
Posts: 4
Joined: Tue Jul 05, 2011 10:47 pm
Location: California, USA
Contact:

Re: Trouble with turning a Textbox into a Quick Menu image m

#8 Post by KaosMoon » Sat Jul 07, 2012 2:51 am

Code Monkey wrote: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

User avatar
Destiny
Veteran
Posts: 468
Joined: Thu Jun 14, 2012 2:00 pm
Projects: Cards of Destiny, Sky Eye
Location: Germany
Contact:

Re: Solved! - Turning a Textbox into a Quick Menu image map

#9 Post by Destiny » Tue Jul 10, 2012 8:37 pm

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:
Image



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:
Image



Can someone help? .__.
Image
Cards of Destiny (WIP) / Sky Eye (WIP)

User avatar
FatUnicornGames
Miko-Class Veteran
Posts: 576
Joined: Sun Mar 25, 2012 7:54 pm
Projects: Club Shuffle
Contact:

Re: Solved! - Turning a Textbox into a Quick Menu image map

#10 Post by FatUnicornGames » Tue Jul 10, 2012 8:45 pm

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
    
Image


this is textbox1
Image
textbox2
Image

Image

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.
Image
Developer Blog for Club Shuffle - Follow and Share?
-Also! You can call me Crystal if you want.-

User avatar
Destiny
Veteran
Posts: 468
Joined: Thu Jun 14, 2012 2:00 pm
Projects: Cards of Destiny, Sky Eye
Location: Germany
Contact:

Re: Solved! - Turning a Textbox into a Quick Menu image map

#11 Post by Destiny » Wed Jul 11, 2012 7:40 am

Thank you so much :D
Looks great now!
Image
Cards of Destiny (WIP) / Sky Eye (WIP)

User avatar
Coren
Mindscrew Driver
Posts: 1691
Joined: Fri Sep 18, 2009 9:24 am
Completed: Dear Mariko, Six Rules, Ribbon of Green, RE: Prince of Nigeria, Doppelganger, Cole's Gate Demo, Crimson Rafflesia Demo, Mica: Apoptosis Demo
Projects: Crimson Rafflesia, Mica: Apoptosis, Fantasy Euthanasia
Organization: Soyasushi Productions
Tumblr: CorenBaili
Deviantart: CorenB
Skype: coren.baili
Contact:

Re: Solved! - Turning a Textbox into a Quick Menu image map

#12 Post by Coren » Sat Jul 14, 2012 9:21 am

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?

User avatar
Hellboy
Regular
Posts: 85
Joined: Mon Dec 24, 2012 9:37 pm
Location: Heredia. Costa Rica.
Contact:

Re: Solved! - Turning a Textbox into a Quick Menu image map

#13 Post by Hellboy » Sat Jan 05, 2013 1:08 am

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! :lol:
Image
FREE and easy 3D customization, posing, and animation software with pre-made people and environments:
DAZ Studio Pro 4.9

User avatar
MioSegami
Regular
Posts: 189
Joined: Thu Nov 15, 2012 11:40 pm
Projects: PATUKA PRIVATE PARADISE
Organization: BlueAngelService
Contact:

Re: Solved! - Turning a Textbox into a Quick Menu image map

#14 Post by MioSegami » Sat Jan 05, 2013 7:38 pm

omg...gonna bookmark this! :]
Image
CLICK IT------------->viewtopic.php?f=43&t=40639&p=430149#p430149
Projects: PATUKA PRIVATE ISLAND
Story: 15% complete
Script: 0%
Art: 35%
Outline: 15%
Code: 10%

User avatar
azureXtwilight
Megane Procrastinator
Posts: 4078
Joined: Fri Mar 28, 2008 4:54 am
Completed: Fantasia series (ROT and ROTA), Doppleganger: Dawn of The Inverted Soul, a2 (a due), Time Labyrinth
Projects: At Regime's End
Organization: Memento-Mori VNs, Team Sleepyhead
Location: Yogyakarta, Indonesia.
Contact:

Re: Solved! - Turning a Textbox into a Quick Menu image map

#15 Post by azureXtwilight » Sun Jan 06, 2013 12:05 am

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

Post Reply

Who is online

Users browsing this forum: Corvaena, Google [Bot], rayminator, xavimat