Menu Customisation (very complex customisation)

[shahab96]

I need to know how to customise the preferences menu using an image as the background followed by using ui.hboxes and ui.vboxes to place the buttons which are ui.imagebuttons. I've already placed the buttons and the back ground has been declared in the init block just like any other bg, but how do i let renpy know that this is the preferences menu?

[Aleema]

The best way to customize the preference screen's look is to use an imagemap. Building it from the ground up is something I think you should put off until Screen Language is released in Ren'Py 6.11. But if you want an honest answer to your question: don't know, never tried. ^^;

[Jake]

The best way to customize the preference screen's look is to use an imagemap. Building it from the ground up is something I think you should put off until Screen Language is released in Ren'Py 6.11.^^;

I'd tend to agree with this. But if you really want to try it, I believe that the correct approach is to define a preferences layout.

[shahab96]

ok....I cant really understand the link.

can you give me step by step instructions including

1)If I should make a new file, and if I should where should it be saved and what should it's name be.
2)How exactly do I define a preferances layout?

[playswithtribbles]

I'm trying to figure out the same thing right now, lol.
I learn best by example, so I was excited when I found a thread with a great example that may help you...

Just download the link by mugenjohncel in this thread:

http://lemmasoft.renai.us/forums/viewto ... ces#p93160

It has excellent examples of what you need to do in the options section.
-To access the script put the folder "Heavy Metal Girl Madonna" (what you download) in the same folder as where your game's data is stored. Then open up renpy, choose 'select project', then 'edit script'. The examples are in the 'options' section.

Here's an example of his code:

Code: Select all

# ███▓▒░ LOAD / SAVE  ░▒▓███████████████████████████████████████
# This block is responsible for the Image-Map based Load/Save screen     

init -2 python:
    layout.imagemap_load_save(
        "gui_set/gui_save_ground.png",
        "gui_set/gui_save_idle.png",
        "gui_set/gui_save_hover.png",
        "gui_set/gui_save_selected_idle.png",
        "gui_set/gui_save_selected_hover.png",
        [
            (554, 169, 897, 250, "slot_0"),
            (554, 286, 897, 366, "slot_1"),
            (554, 400, 897, 481, "slot_2"),
            (554, 515, 897, 596, "slot_3"),

            (919, 169, 1263, 250, "slot_4"),
            (919, 286, 1263, 366, "slot_5"),
            (919, 400, 1263, 481, "slot_6"),
            (919, 515, 1263, 596, "slot_7"),
            
            (554, 656, 653, 755, "Return"),
            (675, 656, 775, 755, "Save Game"),
            (798, 656, 896, 755, "Load Game"),
            (919, 656, 1018, 755, "Preferences"),
            (1041, 656, 1140, 755, "Main Menu"),
            (1163, 656, 1262, 755, "Quit"),

            ], variant="save")
    
    layout.imagemap_load_save(
        "gui_set/gui_load_ground.png",
        "gui_set/gui_load_idle.png",
        "gui_set/gui_load_hover.png",
        "gui_set/gui_load_selected_idle.png",
        "gui_set/gui_load_selected_hover.png",
        [
            (554, 169, 897, 250, "slot_0"),
            (554, 286, 897, 366, "slot_1"),
            (554, 400, 897, 481, "slot_2"),
            (554, 515, 897, 596, "slot_3"),

            (919, 169, 1263, 250, "slot_4"),
            (919, 286, 1263, 366, "slot_5"),
            (919, 400, 1263, 481, "slot_6"),
            (919, 515, 1263, 596, "slot_7"),
            
            (554, 656, 653, 755, "Return"),
            (675, 656, 775, 755, "Save Game"),
            (798, 656, 896, 755, "Load Game"),
            (919, 656, 1018, 755, "Preferences"),
            (1041, 656, 1140, 755, "Main Menu"),
            (1163, 656, 1262, 755, "Quit"),

            ], variant="load")
        
    style.file_picker_ss_window.xpos = 222                                  # This line dictates (in pixels) the x-axis (horizontal) position of the screenshot thumbnail inside a save/load slot window
    style.file_picker_ss_window.ypos = 7                                      # This line dictates (in pixels) the y-axis (vertical) position of the screenshot thumbnail inside a save/load slot window
    style.file_picker_text_window.xpos = 9                                    # This line dictates (in pixels) the x-axis (horizontal) position of the text inside a save/load slot window
    style.file_picker_text_window.ypos = 8                                    # This line dictates (in pixels) the y-axis (vertical) position of the text inside a save/load slot window
    config.thumbnail_width = 116                                                   # This line dictates the width of the displayed screenshot thumbnail inside a save/load slot window                                                         
    config.thumbnail_height = 70                                                   # This line dictates the height of the displayed screenshot thumbnail inside a save/load slot window
    config.file_entry_format = "%(time)s\n%(save_name)s"
    
 
# ███▓▒░ OPTION / CONFIG  ░▒▓█████████████████████████████████████
# This block is responsible for the Image-Map based Option/Config screen 

init -2 python:
    layout.imagemap_preferences(
        "gui_set/gui_prefs_ground.png",
        "gui_set/gui_prefs_idle.png",
        "gui_set/gui_prefs_hover.png",
        "gui_set/gui_prefs_selected_idle.png",
        "gui_set/gui_prefs_selected_hover.png",
        [
            (740, 232, 815, 305, "Fullscreen"),
            (832, 232, 907, 305, "Window"),
            (1074, 232, 1149, 305, "All"),
            (1166, 232, 1241, 305, "None"),
            (736, 415, 897, 435, "Music Volume"),
            (1070, 415, 1231, 435, "Sound Volume"),
            (667, 535, 828, 555, "Voice Volume"),
            (1001, 535, 1162, 555, "Text Speed"),
            ])    

If your familiar with imagemapping, programing your new menu should be a piece of cake with this.

[shahab96]

umm....is there a way to define idle, hover etc for each specific button in an imagemap layout, if not can someone please tell me how I can do it?

[shahab96]

Ok....i'm gonna try to help out everyone by putting up the code i'm using.

I wrote this code in a new tab in Jeditor, you know file,new and then code.

preferences_screen.rpy

preferences_screen.rpy

(9.55 KiB) Downloaded 83 times

and the error i'm getting is this

traceback.txt

(2.66 KiB) Downloaded 65 times

so I hope someone can help me now.

[Aleema]

Do you have any preference screen codes in your options file? like "layout.one_column_preferences()"? You need to comment/delete those if you do.

[saskuto]

Maybe this can help http://lemmasoft.renai.us/forums/viewto ... f=8&t=7446

[vaanknight]

ah, that's my post xD

I managed to understand the whole deal with mugen's example, just as it's shown in that thread. I'm pretty sure it all should work like a charm in your script, the traceback says the only error is that you kept the preferences code as active in your options script, which I suppose summons the classic_preferences.rpym file as well as the file you made. You're giving Ren'Py two defined preferences menues and it doens't know which one to pick ;]

I'd look for the block regarding the preferences_screen code inside the options.rpy and place a # to comment it, or delete it for good. you might as well place the contents of your preferences file in the options screen too, just for the sake of clarity.

EDIT: oh, Aleema already said that...