[Tutorial] Customizing Menus

[Veniae]

It's in the imagemap under screen preferences. The whole block:

Code: Select all

screen preferences:

    tag menu
    use navigation
    

    imagemap:
       ground "menus/prefs_ground.png"
       idle "menus/prefs_idle.png"
       hover "menus/prefs_hover.png"
       selected_idle "menus/prefs_selected_idle.png"
       selected_hover "menus/prefs_selected_hover.png"
       
       style.pref_slider.left_bar = "menus/bar_full.png"
       style.pref_slider.right_bar = "menus/bar_empty.png"
       style.pref_slider.hover_left_bar = "menus/bar_hover.png"
       #style.pref_slider.ymaximum = 29
       #style.pref_slider.xmaximum = 197
       style.pref_slider.thumb = None

My bars are irregular forms. Does that matter for the x/ymaximums?
Also, do I need the "init -2 python"?

[Aleema]

There's the problem. Styles should only be defined under init blocks. Sorry this was not in the post! Always put them under an init (init python, etc.) I recommend writing your own init block right near it for easy management:

Code: Select all

screen preferences:

    tag menu
    use navigation
    

    imagemap:
       ground "menus/prefs_ground.png"
       idle "menus/prefs_idle.png"
       hover "menus/prefs_hover.png"
       selected_idle "menus/prefs_selected_idle.png"
       selected_hover "menus/prefs_selected_hover.png"
       
init:
       style.pref_slider.left_bar = "menus/bar_full.png"
       style.pref_slider.right_bar = "menus/bar_empty.png"
       style.pref_slider.hover_left_bar = "menus/bar_hover.png"
       #style.pref_slider.ymaximum = 29
       #style.pref_slider.xmaximum = 197
       style.pref_slider.thumb = None

What kind of "init" doesn't matter right now, but yes, the -2 python init thing should have stayed.

[Veniae]

Oh, I see. I un-commented the second init. And I pasted everything in a separate init and am getting this error:

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


On line 366 of C:\Users\Ana\Desktop\The Academy\renpy-6.12.0\The Academy/game/screens.rpy: expected statement.
style.pref_slider.left_bar = "menus/bar_full.png"
                           ^

On line 367 of C:\Users\Ana\Desktop\The Academy\renpy-6.12.0\The Academy/game/screens.rpy: expected statement.
style.pref_slider.right_bar = "menus/bar_empty.png"
                            ^

On line 368 of C:\Users\Ana\Desktop\The Academy\renpy-6.12.0\The Academy/game/screens.rpy: expected statement.
style.pref_slider.hover_left_bar = "menus/bar_hover.png"
                                 ^

On line 371 of C:\Users\Ana\Desktop\The Academy\renpy-6.12.0\The Academy/game/screens.rpy: expected statement.
style.pref_slider.thumb = None
                        ^

Ren'Py Version: Ren'Py 6.12.0e

Lines 366-371:

Code: Select all

       style.pref_slider.left_bar = "menus/bar_full.png"
       style.pref_slider.right_bar = "menus/bar_empty.png"
       style.pref_slider.hover_left_bar = "menus/bar_hover.png"
       #style.pref_slider.ymaximum 
       #style.pref_slider.xmaximum 
       style.pref_slider.thumb = None

And Aleema, you're a treasure! <3

[Aleema]

Oh. Yeah ... my bad. Wasn't thinking yesterday. It can't be just an init, it needs to be an init PYTHON! The error is saying you need a $ in front of everything. You can either do that, or just say "init python:" instead of "init:"

That was totally my bad and I wasn't thinking, sorry!

[Veniae]

You have nothing to apologise for. Unlike me xD

I did everything you told me to and it's not giving me any errors, but the bars refuse to work properly - I can only see how full they are by hovering over them. Here's my whole preference screen:

Code: Select all

screen preferences:

    tag menu
    use navigation
    

    imagemap:
       ground "menus/prefs_ground.png"
       idle "menus/prefs_idle.png"
       hover "menus/prefs_hover.png"
       selected_idle "menus/prefs_selected_idle.png"
       selected_hover "menus/prefs_selected_hover.png"
            
       hotbar (564, 193, 118, 42) value Preference('music volume') 
       hotbar (564, 274, 121, 36) value Preference('sound volume') 
       hotbar (298, 460, 165, 31) value Preference('auto-forward time') 
       hotbar (118, 380, 155, 26) value Preference('text speed') 
       
       hotspot (156, 150, 92, 33) action Preference('display', 'window') 
       hotspot (162, 185, 92, 31) action Preference('display', 'fullscreen') 
       hotspot (180, 274, 74, 33) action Preference('transitions', 'none') 
       hotspot (174, 243, 78, 29) action Preference('transitions', 'all') 
                
       hotspot (380, 303, 132, 38) action Preference('after choices', 'stop')  
       hotspot (383, 338, 133, 39) action Preference('after choices', 'skip') 
       hotspot (336, 141, 114, 36) action Preference('skip', 'seen')  
       hotspot (356, 172, 99, 37) action Preference('skip', 'all')
        
       hotspot (409, 221, 85, 39) action Preference('begin skipping')
       
init:
        $ style.pref_slider.left_bar = "menus/bar_full.png"
        $ style.pref_slider.right_bar = "menus/bar_empty.png"
        $ style.pref_slider.hover_left_bar = "menus/bar_hover.png"
        #style.pref_slider.ymaximum = 29
        #style.pref_slider.xmaximum = 197
        $ style.pref_slider.thumb = None
       
            
init -2 python:
    style.pref_frame.xfill = True
    style.pref_frame.xmargin = 5
    style.pref_frame.top_margin = 5

    style.pref_vbox.xfill = True

    style.pref_button.size_group = "pref"
    style.pref_button.xalign = 1.0

    style.pref_slider.xmaximum = 192
    style.pref_slider.xalign = 1.0

    style.soundtest_button.xalign = 1.0

Also, despite the fact that my navigation was working and I'm using it, it's not showing.

Am I missing something?

[Aleema]

Your image map is likely covering up your navigation. I suggest making it see-through ooorrr... try saying "use navigation" after the imagemap code. Not sure if it'll work, but the stuff you define last is what's on top.

As for your bar problem ... well, I think it probably is your imagemap to blame. You can't combine styling + imagemaps here, because there's nothing to style! The imagemap is one whole object. The bar graphic is determined from the imagemap images, not the styles you have defined there. The way the full/empty stuff is shown in imagemaps:
Idle: Empty Bar
Hover: Empty Bar (Hovered)
Selected: Full Bar
Selected Hover: Full Bar (Hovered)

That's how you should include them on your pref imagemap. Ground would obviously be for desensitized bars or nothing at all (recommended).

[Veniae]

Okay, thanks, you're so awesome, honestly!

Last question: Does RenPy happen to save physical images beside the ones in the "game/cache"? Because I deleted it, but there are still some parts where there seem to be older versions of the image map. >.>

[Aleema]

No, cache is the only place. You have to keep deleting it every time you update, or turn caching off. (it's frustrating while working on them, I know)

[Veniae]

*deep sigh*

Okay, everything seems to work now. I must say I'm pretty surprised. Once again, thanks, Aleema, I owe you big time!

[Veniae]

Another quick question: I'm using an image map navigation, but I intend to make the save/load screens using styling and textbuttons and all that. So, instead of using this navigation for it, can I make textbuttons jumping to the Prefs/Return/everything?

[Aleema]

Yes, that was the default before you changed it:

Code: Select all

screen navigation:

    # The background of the game menu.
    window:
        style "gm_root"

    # The various buttons.
    frame:
        style_group "gm_nav"
        xalign .98
        yalign .98
        #background None
        xpadding 0
        ypadding 0
        
        has vbox

        textbutton _("Return") action Return()
        textbutton _("Preferences") action ShowMenu("preferences")
        textbutton _("Save Game") action ShowMenu("save")
        textbutton _("Load Game") action ShowMenu("load")
        textbutton _("Main Menu") action MainMenu()
        textbutton _("Help") action Help()
        textbutton _("Quit") action Quit()

But you can use either an imagemap or textbuttons for navigation, it doesn't matter because it's its own screen. You don't have to change it for your Save/Load screen.

[GeneDNC]

I am working on the movable bars Prefs menu and using styling. Is there any way to use more than one thumb image. This is the (functional) code I have at the moment.

Code: Select all

frame:
        style_group "pref" 
        has hbox

        bar value Preference("text speed")
        bar value Preference("auto-forward time")
        bar value Preference("music volume")
        bar value Preference("sound volume")

Code: Select all

init -2 python:
    style.pref_slider.top_bar = "bar_full2.png"
    style.pref_slider.bottom_bar = "bar_empty2.png"
    style.pref_slider.hover_top_bar = "bar_hover2.png"
    style.pref_slider.xmaximum = 64
    #style.pref_slider.xalign = 1.0
    style.pref_slider.thumb = "bar_thumb.png"
    style.pref_slider.thumb_shadow = None
    style.pref_slider.thumb_offset = 18
    #style.pref_slider.top_gutter = 169
    #style.pref_slider.bottom_gutter = 185
    style.pref_slider.bar_invert = True

Note: I don't actually know what I'm doing with code, I just trail and error stuff and then try not to touch anything once something works like I want it to. ^__^

[Aleema]

Have you tried:

Code: Select all

bar value Preference("sound volume") thumb "bar_thumb2.png"

? These bars are somewhat unique and bars in general are confusing prissy babies, but I would think you could define individual elements just as you would anything else (by appending it onto the end of the line of code).

[GeneDNC]

Ha, it works! \(^__^)/ Thanks a lot. Of course it would be something totally straight forward like that that I would never think to try.

[Wright1000]

I've seen that in Renpy 13, a quick menu appears on the bottom of the screen.
It's no problem for me.
But how do I make it disappear on the splashscreen?