[Tutorial] Customizing Menus

[badspeler]

oh my goodness you're right. i had that open and i totally didn't notice. >< thanks...

[mcdof]

Great Tutorial!
Thanks u very much!

[manga_otaku]

Hey I've just tried to change the preferences menu (only the buttons and the frame, not the actual prefs) and the buttons only stay on "navigation_ground.png" and won't let me click on them at all =.=

What it looks like...

I have the separate 'maps' for each of them, so why isn't it working? >3<
My maps...

Ground...

Idle...

Selected...

Selected idle...

Selected hover...

[Aleema]

Okay, I can help. Can you post your code? Your coordinates are probably the reason it's not changing.

[manga_otaku]

Code: Select all

screen navigation:

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

    # The various buttons.
    imagemap:
           ground "navigation_ground.png"
           idle "navigation_idle.png"
           hover "navigation_selected.png"
           selected_idle "navigation_selected_idle.png"
           selected_hover "navigation_selected_hover.png"
        
           hotspot (10,55,119,34) action Return()
           hotspot (15,55,119,34) action ShowMenu("save")
           hotspot (20,55,119,34) action ShowMenu("load")
           hotspot (25,55,119,34) action ShowMenu("preferences")
           hotspot (30,55,119,34) action MainMenu()
           hotspot (35,55,119,34) action Quit()

init -2 python:
    style.pref_frame.background = Frame("frame.png",10,10)

That's all of it >3<

[Aleema]

Right now, your coordinates are not right. Right now, they are aligned to be at the top left of the screen (your buttons are the opposite of that). For example, the first one starts 10 px to the right and only 55 px down from the top.

How did you get your coordinates? Because you need to get them again. Tell me and I can see what you're doing wrong.

[manga_otaku]

Ahah...*hides in corner*
Thanks xD It works now :3 I should check everything over before I scream blue murder or something like that xD

EDIT: Ok. It was working. I found out the coordinates using the Image Location Picker and when I hit launch it worked but when I tried it again it won't appear anymore =.=

Code: Select all

screen navigation:

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

    # The various buttons.
    imagemap:
           ground "navigation_ground.png"
           idle "navigation_idle.png"
           hover "navigation_selected.png"
           selected_idle "navigation_selected_idle.png"
           selected_hover "navigation_selected_hover.png"
        
           hotspot (258,554,79,38) action Return()
           hotspot (352,556,60,33) action ShowMenu("save")
           hotspot (426,555,62,35) action ShowMenu("load")
           hotspot (503,552,69,40) action ShowMenu("preferences")
           hotspot (582,555,126,33) action MainMenu()
           hotspot (721,555,57,35) action Quit()

init -2 python:
    style.pref_frame.background = Frame("frame.png",10,10)

[Simulacro]

Another noob question. Found some talk about it, but didn't manage to find how to actually do it.

Got my imagemap working nicely, but still can't figure out how to make hotspots insensitive.

EDIT: and probably a more complex question:

The project I'm working on uses saturation to make backgrounds and characters go gradually from color to black and white as the story moves forward. Can the imagemaps be set in such a way as to also change with my saturation value?

[Aleema]

What do you mean, always insensitive, or only insensitive conditionally (part of the time)? With screen language, you can easily add an "if" statement to your hotspots:

Code: Select all

if can_shop:
    hotspot (0,0,0,0) action Jump("store")

I believe this works, and in SL only (not the old method of imagemaps).

As for your 2nd question ... It is difficult to apply a full screen filter like that right now, but you can for each individual displayable. You can make transitions to screens (aka your SL imagemap), but I'm not sure what your color transition entails. If it's just a color switch, you can probably apply the im.ColorMatrix (or whatever you're using to change colors) to the ground/hover images in the imagemap code?

[Simulacro]

Part of the time. For example, if the player has not unlocked something, or some action cannot take place at that moment.

Ahh, if statements, so clever and straightforward. I shall try it.

EDIT: For the saturations, I'm using:

Code: Select all

init python:
    saturation = 1.0
    def bwImage(st,at,path):
        return im.MatrixColor(Image(path),im.matrix.saturation(saturation)),None

And then: 

image libro basico = DynamicDisplayable(bwImage,"img GN/Menu libro plain.png")

This has been working nicely so far. For reference's sake, my SL is (truncated):

Code: Select all

    screen libro_menu_inicial:             
        imagemap: 
            ground libro_menu_inicial_ground_jpg
            hover libro_menu_inicial_hover_jpg
            idle libro_menu_inicial_idle_jpg
            
            hotspot (160, 124, 175, 29) action Return(libro_GO_personajes) #Ver personajes 
            hotspot (130, 171, 236, 31) action Return(libro_GO_save) #Guardar Juego . . .
            [. . . etc . . .]

Where the libro_menu_..._jpg is a variable with the full location of the files. (still optimizing variable name uses.) I'm currently redoing the menus, so going step by step slowly here.

EDIT 2: Switched some stuff around and the insensitive with the ifs work like a charm. I'm using the ground image with the insensitive images. Changed the sample above to reflect how it looks now.

[Gumaster]

I tried having an outline effect for only selected menu options, but this results in the text moving slightly when the outline is active. I guess this is because when it renders the text it takes the outlines into account and adjusts accordingly. Is there a way to stop it from doing this? It's not really a serious problem but it...bugs me

[Aleema]

You can try changing the xanchor of the text to be in the middle? (0.5) If it's not already.

[Gumaster]

(I'm using it with textbuttons in the preferences screen, in case it matters)
It does fix the original problem, but it throws the positioning of all the text out (basically, it center aligns it, so changing style's xpos doesn't help, and I'm not sure if I can/how to change the xpos for each individual button)

[Veniae]

First of all, thank you for the amazing tutorial! It's beyond helpful for me and exactly what I needed, given that my programming abilities are... non-existent! xD

Secondly, can I ask a very n00bish question?

I'm tinkering with bars now and used your code (without the x/ymaximum, because I actually dun know what to do with them ^^;). However, there's another problem. When I save and try to launch, here's what appears:

Code: Select all

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


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

Ren'Py Version: Ren'Py 6.12.0e

Here's lines 351-356:

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

I bet it's something really obvious, but I'm lost. Any suggestions?

Thanks again!

[Aleema]

Where have you placed that code? Since the first line is erroring, that might matter. (I don't know what the error means, personally.)

As for x/ymaximum, they're important for bars because xfill is on by default, which means that it will fill the entire screen. Usually, you don't want your bars to be the entire screen length. This may be different for the preference screen, but if you made a bar somewhere else, it would blow up and possible break you interface. It's a nice way to control the size of the bar.