Ren'Py Renpy Menu button alignment issue

Romalous · Jun 7, 2021

Im having an alignment problem with menu buttons i can't click on them to even start the game any help is appreciated

79flavors · Jun 7, 2021

We're going to see the code rather than the image.

Could you post your screen code for that part of your game.
Ideally within [code] [/code] tags.

[code]
# code seen here
[/code]

Shows as...

Code:

# code seen here

anne O'nymous · Jun 8, 2021

Romalous said:
Im having an alignment problem with menu buttons i can't click on them [...]

What make you think it's an alignment problem, if the problem is that you can't click ?

It's more surely that something transparent is put on top of them.

Romalous · Jun 8, 2021

anne O'nymous said:
What make you think it's an alignment problem, if the problem is that you can't click ?

It's more surely that something transparent is put on top of them.

i can click on the tiny text at the top left but all the options are sort of overlapping and only the quit option works the base game start option disappeared when i added my own start button the others were pushed down underneath that's why i thought it was an alignment issue it was even worse originally because the default was set to vbox i changed it to fixed in screen navigation

i followed this tutorial on youtube

You must be registered to see the links

Romalous · Jun 8, 2021

Code:

################################################################################
## Initialization
################################################################################

init offset = -1


################################################################################
## Styles
################################################################################

style default:
    properties gui.text_properties()
    language gui.language

style input:
    properties gui.text_properties("input", accent=True)
    adjust_spacing False

style hyperlink_text:
    properties gui.text_properties("hyperlink", accent=True)
    hover_underline True

style gui_text:
    properties gui.text_properties("interface")


style button:
    properties gui.button_properties("button")

style button_text is gui_text:
    properties gui.text_properties("button")
    yalign 0.5


style label_text is gui_text:
    properties gui.text_properties("label", accent=True)

style prompt_text is gui_text:
    properties gui.text_properties("prompt")


style bar:
    ysize gui.bar_size
    left_bar Frame("gui/bar/left.png", gui.bar_borders, tile=gui.bar_tile)
    right_bar Frame("gui/bar/right.png", gui.bar_borders, tile=gui.bar_tile)

style vbar:
    xsize gui.bar_size
    top_bar Frame("gui/bar/top.png", gui.vbar_borders, tile=gui.bar_tile)
    bottom_bar Frame("gui/bar/bottom.png", gui.vbar_borders, tile=gui.bar_tile)

style scrollbar:
    ysize gui.scrollbar_size
    base_bar Frame("gui/scrollbar/horizontal_[prefix_]bar.png", gui.scrollbar_borders, tile=gui.scrollbar_tile)
    thumb Frame("gui/scrollbar/horizontal_[prefix_]thumb.png", gui.scrollbar_borders, tile=gui.scrollbar_tile)

style vscrollbar:
    xsize gui.scrollbar_size
    base_bar Frame("gui/scrollbar/vertical_[prefix_]bar.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)
    thumb Frame("gui/scrollbar/vertical_[prefix_]thumb.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)

style slider:
    ysize gui.slider_size
    base_bar Frame("gui/slider/horizontal_[prefix_]bar.png", gui.slider_borders, tile=gui.slider_tile)
    thumb "gui/slider/horizontal_[prefix_]thumb.png"

style vslider:
    xsize gui.slider_size
    base_bar Frame("gui/slider/vertical_[prefix_]bar.png", gui.vslider_borders, tile=gui.slider_tile)
    thumb "gui/slider/vertical_[prefix_]thumb.png"


style frame:
    padding gui.frame_borders.padding
    background Frame("gui/frame.png", gui.frame_borders, tile=gui.frame_tile)



################################################################################
## In-game screens
################################################################################


## Say screen ##################################################################
##
## The say screen is used to display dialogue to the player. It takes two
## parameters, who and what, which are the name of the speaking character and
## the text to be displayed, respectively. (The who parameter can be None if no
## name is given.)
##
## This screen must create a text displayable with id "what", as Ren'Py uses
## this to manage text display. It can also create displayables with id "who"
## and id "window" to apply style properties.
##
## https://www.renpy.org/doc/html/screen_special.html#say

screen say(who, what):
    style_prefix "say"

    window:
        id "window"

        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"


    ## If there's a side image, display it above the text. Do not display on the
    ## phone variant - there's no room.
    if not renpy.variant("small"):
        add SideImage() xalign 0.0 yalign 1.0


## Make the namebox available for styling through the Character object.
init python:
    config.character_id_prefixes.append('namebox')

style window is default
style say_label is default
style say_dialogue is default
style say_thought is say_dialogue

style namebox is default
style namebox_label is say_label


style window:
    xalign 0.5
    xfill True
    yalign gui.textbox_yalign
    ysize gui.textbox_height

    background Image("gui/textbox.png", xalign=0.5, yalign=1.0)

style namebox:
    xpos gui.name_xpos
    xanchor gui.name_xalign
    xsize gui.namebox_width
    ypos gui.name_ypos
    ysize gui.namebox_height

    background Frame("gui/namebox.png", gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign)
    padding gui.namebox_borders.padding

style say_label:
    properties gui.text_properties("name", accent=True)
    xalign gui.name_xalign
    yalign 0.5

style say_dialogue:
    properties gui.text_properties("dialogue")

    xpos gui.dialogue_xpos
    xsize gui.dialogue_width
    ypos gui.dialogue_ypos


## Input screen ################################################################
##
## This screen is used to display renpy.input. The prompt parameter is used to
## pass a text prompt in.
##
## This screen must create an input displayable with id "input" to accept the
## various input parameters.
##
## https://www.renpy.org/doc/html/screen_special.html#input

screen input(prompt):
    style_prefix "input"

    window:

        vbox:
            xalign gui.dialogue_text_xalign
            xpos gui.dialogue_xpos
            xsize gui.dialogue_width
            ypos gui.dialogue_ypos

            text prompt style "input_prompt"
            input id "input"

style input_prompt is default

style input_prompt:
    xalign gui.dialogue_text_xalign
    properties gui.text_properties("input_prompt")

style input:
    xalign gui.dialogue_text_xalign
    xmaximum gui.dialogue_width


## Choice screen ###############################################################
##
## This screen is used to display the in-game choices presented by the menu
## statement. The one parameter, items, is a list of objects, each with caption
## and action fields.
##
## https://www.renpy.org/doc/html/screen_special.html#choice

screen choice(items):
    style_prefix "choice"

    vbox:
        for i in items:
            textbutton i.caption action i.action


## When this is true, menu captions will be spoken by the narrator. When false,
## menu captions will be displayed as empty buttons.
define config.narrator_menu = True


style choice_vbox is vbox
style choice_button is button
style choice_button_text is button_text

style choice_vbox:
    xalign 0.5
    ypos 405
    yanchor 0.5

    spacing gui.choice_spacing

style choice_button is default:
    properties gui.button_properties("choice_button")

style choice_button_text is default:
    properties gui.button_text_properties("choice_button")


## Quick Menu screen ###########################################################
##
## The quick menu is displayed in-game to provide easy access to the out-of-game
## menus.

screen quick_menu():

    ## Ensure this appears on top of other screens.
    zorder 100

    if quick_menu:

        hbox:
            style_prefix "quick"

            xalign 0.5
            yalign 1.0

            textbutton _("Back") action Rollback()
            textbutton _("History") action ShowMenu('history')
            textbutton _("Skip") action Skip() alternate Skip(fast=True, confirm=True)
            textbutton _("Auto") action Preference("auto-forward", "toggle")
            textbutton _("Save") action ShowMenu('save')
            textbutton _("Q.Save") action QuickSave()
            textbutton _("Q.Load") action QuickLoad()
            textbutton _("Prefs") action ShowMenu('preferences')


## This code ensures that the quick_menu screen is displayed in-game, whenever
## the player has not explicitly hidden the interface.
init python:
    config.overlay_screens.append("quick_menu")

default quick_menu = True

style quick_button is default
style quick_button_text is button_text

style quick_button:
    properties gui.button_properties("quick_button")

style quick_button_text:
    properties gui.button_text_properties("quick_button")


################################################################################
## Main and Game Menu Screens
################################################################################

## Navigation screen ###########################################################
##
## This screen is included in the main and game menus, and provides navigation
## to other menus, and to start the game.

screen navigation():

    fixed:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:

            #textbutton _("Start") action Start()

            imagebutton auto "gui/mm_start_%s.png" #xpos 101 #ypos 186 focus_mask True action start ("load") hovered






        else:

            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") action ShowMenu("load")
        imagebutton auto "gui/mm_load_%s.png" #xpos 101 #ypos 329 focus_mask True action start ("load") hovered

        textbutton _("Preferences") action ShowMenu("preferences")
        imagebutton auto "gui/mm_preferences_%s.png" #xpos 101 #ypos 471 focus_mask True action start ("load") hovered

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("About") action ShowMenu("about")

        if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):

            ## Help isn't necessary or relevant to mobile devices.
            textbutton _("Help") action ShowMenu("help")
            imagebutton auto "gui/mm_help_%s.png" #xpos 101 #ypos 618 focus_mask True action start ("load") hovered

        if renpy.variant("pc"):

            ## The quit button is banned on iOS and unnecessary on Android and
            ## Web.
            textbutton _("Quit") action Quit(confirm=not main_menu)
            imagebutton auto "gui/mm_quit_%s.png" #xpos 101 #ypos 760 focus_mask True action start ("load") hovered


style navigation_button is gui_button
style navigation_button_text is gui_button_text

style navigation_button:
    size_group "navigation"
    properties gui.button_properties("navigation_button")

style navigation_button_text:
    properties gui.button_text_properties("navigation_button")


## Main Menu screen ############################################################
##
## Used to display the main menu when Ren'Py starts.
##
## https://www.renpy.org/doc/html/screen_special.html#main-menu

screen main_menu():

    ## This ensures that any other menu screen is replaced.
    tag menu

    add gui.main_menu_background

    ## This empty frame darkens the main menu.
    frame:
        style "main_menu_frame"

    ## The use statement includes another screen inside this one. The actual
    ## contents of the main menu are in the navigation screen.
    use navigation

    if gui.show_name:

        vbox:
            style "main_menu_vbox"

            text "[config.name!t]":
                style "main_menu_title"

            text "[config.version]":
                style "main_menu_version"


style main_menu_frame is empty
style main_menu_vbox is vbox
style main_menu_text is gui_text
style main_menu_title is main_menu_text
style main_menu_version is main_menu_text

style main_menu_frame:
    xsize 420
    yfill True

    background "gui/overlay/main_menu.png"

style main_menu_vbox:
    xalign 1.0
    xoffset -30
    xmaximum 1200
    yalign 1.0
    yoffset -30

style main_menu_text:
    properties gui.text_properties("main_menu", accent=True)

style main_menu_title:
    properties gui.text_properties("title")

style main_menu_version:
    properties gui.text_properties("version")


## Game Menu screen ############################################################
##
## This lays out the basic common structure of a game menu screen. It's called
## with the screen title, and displays the background, title, and navigation.
##
## The scroll parameter can be None, or one of "viewport" or "vpgrid". When
## this screen is intended to be used with one or more children, which are
## transcluded (placed) inside it.

screen game_menu(title, scroll=None, yinitial=0.0):

    style_prefix "game_menu"

    if main_menu:
        add gui.main_menu_background
    else:
        add gui.game_menu_background

    frame:
        style "game_menu_outer_frame"

        hbox:

            ## Reserve space for the navigation section.
            frame:
                style "game_menu_navigation_frame"

            frame:
                style "game_menu_content_frame"

                if scroll == "viewport":

                    viewport:
                        yinitial yinitial
                        scrollbars "vertical"
                        mousewheel True
                        draggable True
                        pagekeys True

                        side_yfill True

                        vbox:
                            transclude

                elif scroll == "vpgrid":

                    vpgrid:
                        cols 1
                        yinitial yinitial

                        scrollbars "vertical"
                        mousewheel True
                        draggable True
                        pagekeys True

                        side_yfill True

                        transclude

                else:

                    transclude

    use navigation

    textbutton _("Return"):
        style "return_button"

        action Return()

    label title

    if main_menu:
        key "game_menu" action ShowMenu("main_menu")


style game_menu_outer_frame is empty
style game_menu_navigation_frame is empty
style game_menu_content_frame is empty
style game_menu_viewport is gui_viewport
style game_menu_side is gui_side
style game_menu_scrollbar is gui_vscrollbar

style game_menu_label is gui_label
style game_menu_label_text is gui_label_text

style return_button is navigation_button
style return_button_text is navigation_button_text

style game_menu_outer_frame:
    bottom_padding 45
    top_padding 180

    background "gui/overlay/game_menu.png"

style game_menu_navigation_frame:
    xsize 420
    yfill True

style game_menu_content_frame:
    left_margin 60
    right_margin 30
    top_margin 15

style game_menu_viewport:
    xsize 1380

style game_menu_vscrollbar:
    unscrollable gui.unscrollable

style game_menu_side:
    spacing 15

style game_menu_label:
    xpos 75
    ysize 180

style game_menu_label_text:
    size gui.title_text_size
    color gui.accent_color
    yalign 0.5

style return_button:
    xpos gui.navigation_xpos
    yalign 1.0
    yoffset -45


## About screen ################################################################
##
## This screen gives credit and copyright information about the game and Ren'Py.
##
## There's nothing special about this screen, and hence it also serves as an
## example of how to make a custom screen.

screen about():

    tag menu

    ## This use statement includes the game_menu screen inside this one. The
    ## vbox child is then included inside the viewport inside the game_menu
    ## screen.
    use game_menu(_("About"), scroll="viewport"):

        style_prefix "about"

        vbox:

            label "[config.name!t]"
            text _("Version [config.version!t]\n")

            ## gui.about is usually set in options.rpy.
            if gui.about:
                text "[gui.about!t]\n"

            text _("Made with {a=https://www.renpy.org/}Ren'Py{/a} [renpy.version_only].\n\n[renpy.license!t]")


style about_label is gui_label
style about_label_text is gui_label_text
style about_text is gui_text

style about_label_text:
    size gui.label_text_size


## Load and Save screens #######################################################
##
## These screens are responsible for letting the player save the game and load
## it again. Since they share nearly everything in common, both are implemented
## in terms of a third screen, file_slots.
##
## https://www.renpy.org/doc/html/screen_special.html#save https://
## www.renpy.org/doc/html/screen_special.html#load

screen save():

    tag menu

    use file_slots(_("Save"))


screen load():

    tag menu

    use file_slots(_("Load"))


screen file_slots(title):

    default page_name_value = FilePageNameInputValue(pattern=_("Page {}"), auto=_("Automatic saves"), quick=_("Quick saves"))

    use game_menu(title):

        fixed:

            ## This ensures the input will get the enter event before any of the
            ## buttons do.
            order_reverse True

            ## The page name, which can be edited by clicking on a button.
            button:
                style "page_label"

                key_events True
                xalign 0.5
                action page_name_value.Toggle()

                input:
                    style "page_label_text"
                    value page_name_value

            ## The grid of file slots.
            grid gui.file_slot_cols gui.file_slot_rows:
                style_prefix "slot"

                xalign 0.5
                yalign 0.5

                spacing gui.slot_spacing

                for i in range(gui.file_slot_cols * gui.file_slot_rows):

                    $ slot = i + 1

                    button:
                        action FileAction(slot)

                        has vbox

                        add FileScreenshot(slot) xalign 0.5

                        text FileTime(slot, format=_("{#file_time}%A, %B %d %Y, %H:%M"), empty=_("empty slot")):
                            style "slot_time_text"

                        text FileSaveName(slot):
                            style "slot_name_text"

                        key "save_delete" action FileDelete(slot)

            ## Buttons to access other pages.
            hbox:
                style_prefix "page"

                xalign 0.5
                yalign 1.0

                spacing gui.page_spacing

                textbutton _("<") action FilePagePrevious()

                if config.has_autosave:
                    textbutton _("{#auto_page}A") action FilePage("auto")

                if config.has_quicksave:
                    textbutton _("{#quick_page}Q") action FilePage("quick")

                ## range(1, 10) gives the numbers from 1 to 9.
                for page in range(1, 10):
                    textbutton "[page]" action FilePage(page)

                textbutton _(">") action FilePageNext()


style page_label is gui_label
style page_label_text is gui_label_text
style page_button is gui_button
style page_button_text is gui_button_text

style slot_button is gui_button
style slot_button_text is gui_button_text
style slot_time_text is slot_button_text
style slot_name_text is slot_button_text

style page_label:
    xpadding 75
    ypadding 5

style page_label_text:
    text_align 0.5
    layout "subtitle"
    hover_color gui.hover_color

style page_button:
    properties gui.button_properties("page_button")

style page_button_text:
    properties gui.button_text_properties("page_button")

style slot_button:
    properties gui.button_properties("slot_button")

style slot_button_text:
    properties gui.button_text_properties("slot_button")


## Preferences screen ##########################################################
##
## The preferences screen allows the player to configure the game to better suit
## themselves.
##
## https://www.renpy.org/doc/html/screen_special.html#preferences

screen preferences():

    tag menu

    use game_menu(_("Preferences"), scroll="viewport"):

        vbox:

            hbox:
                box_wrap True

                if renpy.variant("pc") or renpy.variant("web"):

                    vbox:
                        style_prefix "radio"
                        label _("Display")
                        textbutton _("Window") action Preference("display", "window")
                        textbutton _("Fullscreen") action Preference("display", "fullscreen")

                vbox:
                    style_prefix "radio"
                    label _("Rollback Side")
                    textbutton _("Disable") action Preference("rollback side", "disable")
                    textbutton _("Left") action Preference("rollback side", "left")
                    textbutton _("Right") action Preference("rollback side", "right")

                vbox:
                    style_prefix "check"
                    label _("Skip")
                    textbutton _("Unseen Text") action Preference("skip", "toggle")
                    textbutton _("After Choices") action Preference("after choices", "toggle")
                    textbutton _("Transitions") action InvertSelected(Preference("transitions", "toggle"))

                ## Additional vboxes of type "radio_pref" or "check_pref" can be
                ## added here, to add additional creator-defined preferences.

            null height (4 * gui.pref_spacing)

            hbox:
                style_prefix "slider"
                box_wrap True

                vbox:

                    label _("Text Speed")

                    bar value Preference("text speed")

                    label _("Auto-Forward Time")

                    bar value Preference("auto-forward time")

                vbox:

                    if config.has_music:
                        label _("Music Volume")

                        hbox:
                            bar value Preference("music volume")

                    if config.has_sound:

                        label _("Sound Volume")

                        hbox:
                            bar value Preference("sound volume")

                            if config.sample_sound:
                                textbutton _("Test") action Play("sound", config.sample_sound)


                    if config.has_voice:
                        label _("Voice Volume")

                        hbox:
                            bar value Preference("voice volume")

                            if config.sample_voice:
                                textbutton _("Test") action Play("voice", config.sample_voice)

                    if config.has_music or config.has_sound or config.has_voice:
                        null height gui.pref_spacing

                        textbutton _("Mute All"):
                            action Preference("all mute", "toggle")
                            style "mute_all_button"


style pref_label is gui_label
style pref_label_text is gui_label_text
style pref_vbox is vbox

style radio_label is pref_label
style radio_label_text is pref_label_text
style radio_button is gui_button
style radio_button_text is gui_button_text
style radio_vbox is pref_vbox

style check_label is pref_label
style check_label_text is pref_label_text
style check_button is gui_button
style check_button_text is gui_button_text
style check_vbox is pref_vbox

style slider_label is pref_label
style slider_label_text is pref_label_text
style slider_slider is gui_slider
style slider_button is gui_button
style slider_button_text is gui_button_text
style slider_pref_vbox is pref_vbox

style mute_all_button is check_button
style mute_all_button_text is check_button_text

style pref_label:
    top_margin gui.pref_spacing
    bottom_margin 3

style pref_label_text:
    yalign 1.0

style pref_vbox:
    xsize 338

style radio_vbox:
    spacing gui.pref_button_spacing

style radio_button:
    properties gui.button_properties("radio_button")
    foreground "gui/button/radio_[prefix_]foreground.png"

style radio_button_text:
    properties gui.button_text_properties("radio_button")

style check_vbox:
    spacing gui.pref_button_spacing

style check_button:
    properties gui.button_properties("check_button")
    foreground "gui/button/check_[prefix_]foreground.png"

style check_button_text:
    properties gui.button_text_properties("check_button")

style slider_slider:
    xsize 525

style slider_button:
    properties gui.button_properties("slider_button")
    yalign 0.5
    left_margin 15

style slider_button_text:
    properties gui.button_text_properties("slider_button")

style slider_vbox:
    xsize 675


## History screen ##############################################################
##
## This is a screen that displays the dialogue history to the player. While
## there isn't anything special about this screen, it does have to access the
## dialogue history stored in _history_list.
##
## https://www.renpy.org/doc/html/history.html

screen history():

    tag menu

    ## Avoid predicting this screen, as it can be very large.
    predict False

    use game_menu(_("History"), scroll=("vpgrid" if gui.history_height else "viewport"), yinitial=1.0):

        style_prefix "history"

        for h in _history_list:

            window:

                ## This lays things out properly if history_height is None.
                has fixed:
                    yfit True

                if h.who:

                    label h.who:
                        style "history_name"
                        substitute False

                        ## Take the color of the who text from the Character, if
                        ## set.
                        if "color" in h.who_args:
                            text_color h.who_args["color"]

                $ what = renpy.filter_text_tags(h.what, allow=gui.history_allow_tags)
                text what:
                    substitute False

        if not _history_list:
            label _("The dialogue history is empty.")


## This determines what tags are allowed to be displayed on the history screen.

define gui.history_allow_tags = { "alt", "noalt" }


style history_window is empty

style history_name is gui_label
style history_name_text is gui_label_text
style history_text is gui_text

style history_text is gui_text

style history_label is gui_label
style history_label_text is gui_label_text

style history_window:
    xfill True
    ysize gui.history_height

style history_name:
    xpos gui.history_name_xpos
    xanchor gui.history_name_xalign
    ypos gui.history_name_ypos
    xsize gui.history_name_width

style history_name_text:
    min_width gui.history_name_width
    text_align gui.history_name_xalign

style history_text:
    xpos gui.history_text_xpos
    ypos gui.history_text_ypos
    xanchor gui.history_text_xalign
    xsize gui.history_text_width
    min_width gui.history_text_width
    text_align gui.history_text_xalign
    layout ("subtitle" if gui.history_text_xalign else "tex")

style history_label:
    xfill True

style history_label_text:
    xalign 0.5


## Help screen #################################################################
##
## A screen that gives information about key and mouse bindings. It uses other
## screens (keyboard_help, mouse_help, and gamepad_help) to display the actual
## help.

screen help():

    tag menu

    default device = "keyboard"

    use game_menu(_("Help"), scroll="viewport"):

        style_prefix "help"

        vbox:
            spacing 23

            hbox:

                textbutton _("Keyboard") action SetScreenVariable("device", "keyboard")
                textbutton _("Mouse") action SetScreenVariable("device", "mouse")

                if GamepadExists():
                    textbutton _("Gamepad") action SetScreenVariable("device", "gamepad")

            if device == "keyboard":
                use keyboard_help
            elif device == "mouse":
                use mouse_help
            elif device == "gamepad":
                use gamepad_help


screen keyboard_help():

    hbox:
        label _("Enter")
        text _("Advances dialogue and activates the interface.")

    hbox:
        label _("Space")
        text _("Advances dialogue without selecting choices.")

    hbox:
        label _("Arrow Keys")
        text _("Navigate the interface.")

    hbox:
        label _("Escape")
        text _("Accesses the game menu.")

    hbox:
        label _("Ctrl")
        text _("Skips dialogue while held down.")

    hbox:
        label _("Tab")
        text _("Toggles dialogue skipping.")

    hbox:
        label _("Page Up")
        text _("Rolls back to earlier dialogue.")

    hbox:
        label _("Page Down")
        text _("Rolls forward to later dialogue.")

    hbox:
        label "H"
        text _("Hides the user interface.")

    hbox:
        label "S"
        text _("Takes a screenshot.")

    hbox:
        label "V"
        text _("Toggles assistive {a=https://www.renpy.org/l/voicing}self-voicing{/a}.")


screen mouse_help():

    hbox:
        label _("Left Click")
        text _("Advances dialogue and activates the interface.")

    hbox:
        label _("Middle Click")
        text _("Hides the user interface.")

    hbox:
        label _("Right Click")
        text _("Accesses the game menu.")

    hbox:
        label _("Mouse Wheel Up\nClick Rollback Side")
        text _("Rolls back to earlier dialogue.")

    hbox:
        label _("Mouse Wheel Down")
        text _("Rolls forward to later dialogue.")


screen gamepad_help():

    hbox:
        label _("Right Trigger\nA/Bottom Button")
        text _("Advances dialogue and activates the interface.")

    hbox:
        label _("Left Trigger\nLeft Shoulder")
        text _("Rolls back to earlier dialogue.")

    hbox:
        label _("Right Shoulder")
        text _("Rolls forward to later dialogue.")


    hbox:
        label _("D-Pad, Sticks")
        text _("Navigate the interface.")

    hbox:
        label _("Start, Guide")
        text _("Accesses the game menu.")

    hbox:
        label _("Y/Top Button")
        text _("Hides the user interface.")

    textbutton _("Calibrate") action GamepadCalibrate()


style help_button is gui_button
style help_button_text is gui_button_text
style help_label is gui_label
style help_label_text is gui_label_text
style help_text is gui_text

style help_button:
    properties gui.button_properties("help_button")
    xmargin 12

style help_button_text:
    properties gui.button_text_properties("help_button")

style help_label:
    xsize 375
    right_padding 30

style help_label_text:
    size gui.text_size
    xalign 1.0
    text_align 1.0



################################################################################
## Additional screens
################################################################################


## Confirm screen ##############################################################
##
## The confirm screen is called when Ren'Py wants to ask the player a yes or no
## question.
##
## https://www.renpy.org/doc/html/screen_special.html#confirm

screen confirm(message, yes_action, no_action):

    ## Ensure other screens do not get input while this screen is displayed.
    modal True

    zorder 200

    style_prefix "confirm"

    add "gui/overlay/confirm.png"

    frame:

        vbox:
            xalign .5
            yalign .5
            spacing 45

            label _(message):
                style "confirm_prompt"
                xalign 0.5

            hbox:
                xalign 0.5
                spacing 150

                textbutton _("Yes") action yes_action
                textbutton _("No") action no_action

    ## Right-click and escape answer "no".
    key "game_menu" action no_action


style confirm_frame is gui_frame
style confirm_prompt is gui_prompt
style confirm_prompt_text is gui_prompt_text
style confirm_button is gui_medium_button
style confirm_button_text is gui_medium_button_text

style confirm_frame:
    background Frame([ "gui/confirm_frame.png", "gui/frame.png"], gui.confirm_frame_borders, tile=gui.frame_tile)
    padding gui.confirm_frame_borders.padding
    xalign .5
    yalign .5

style confirm_prompt_text:
    text_align 0.5
    layout "subtitle"

style confirm_button:
    properties gui.button_properties("confirm_button")

style confirm_button_text:
    properties gui.button_text_properties("confirm_button")


## Skip indicator screen #######################################################
##
## The skip_indicator screen is displayed to indicate that skipping is in
## progress.
##
## https://www.renpy.org/doc/html/screen_special.html#skip-indicator

screen skip_indicator():

    zorder 100
    style_prefix "skip"

    frame:

        hbox:
            spacing 9

            text _("Skipping")

            text "▸" at delayed_blink(0.0, 1.0) style "skip_triangle"
            text "▸" at delayed_blink(0.2, 1.0) style "skip_triangle"
            text "▸" at delayed_blink(0.4, 1.0) style "skip_triangle"


## This transform is used to blink the arrows one after another.
transform delayed_blink(delay, cycle):
    alpha .5

    pause delay

    block:
        linear .2 alpha 1.0
        pause .2
        linear .2 alpha 0.5
        pause (cycle - .4)
        repeat


style skip_frame is empty
style skip_text is gui_text
style skip_triangle is skip_text

style skip_frame:
    ypos gui.skip_ypos
    background Frame("gui/skip.png", gui.skip_frame_borders, tile=gui.frame_tile)
    padding gui.skip_frame_borders.padding

style skip_text:
    size gui.notify_text_size

style skip_triangle:
    ## We have to use a font that has the BLACK RIGHT-POINTING SMALL TRIANGLE
    ## glyph in it.
    font "DejaVuSans.ttf"


## Notify screen ###############################################################
##
## The notify screen is used to show the player a message. (For example, when
## the game is quicksaved or a screenshot has been taken.)
##
## https://www.renpy.org/doc/html/screen_special.html#notify-screen

screen notify(message):

    zorder 100
    style_prefix "notify"

    frame at notify_appear:
        text "[message!tq]"

    timer 3.25 action Hide('notify')


transform notify_appear:
    on show:
        alpha 0
        linear .25 alpha 1.0
    on hide:
        linear .5 alpha 0.0


style notify_frame is empty
style notify_text is gui_text

style notify_frame:
    ypos gui.notify_ypos

    background Frame("gui/notify.png", gui.notify_frame_borders, tile=gui.frame_tile)
    padding gui.notify_frame_borders.padding

style notify_text:
    properties gui.text_properties("notify")


## NVL screen ##################################################################
##
## This screen is used for NVL-mode dialogue and menus.
##
## https://www.renpy.org/doc/html/screen_special.html#nvl


screen nvl(dialogue, items=None):

    window:
        style "nvl_window"

        has vbox:
            spacing gui.nvl_spacing

        ## Displays dialogue in either a vpgrid or the vbox.
        if gui.nvl_height:

            vpgrid:
                cols 1
                yinitial 1.0

                use nvl_dialogue(dialogue)

        else:

            use nvl_dialogue(dialogue)

        ## Displays the menu, if given. The menu may be displayed incorrectly if
        ## config.narrator_menu is set to True, as it is above.
        for i in items:

            textbutton i.caption:
                action i.action
                style "nvl_button"

    add SideImage() xalign 0.0 yalign 1.0


screen nvl_dialogue(dialogue):

    for d in dialogue:

        window:
            id d.window_id

            fixed:
                yfit gui.nvl_height is None

                if d.who is not None:

                    text d.who:
                        id d.who_id

                text d.what:
                    id d.what_id


## This controls the maximum number of NVL-mode entries that can be displayed at
## once.
define config.nvl_list_length = gui.nvl_list_length

style nvl_window is default
style nvl_entry is default

style nvl_label is say_label
style nvl_dialogue is say_dialogue

style nvl_button is button
style nvl_button_text is button_text

style nvl_window:
    xfill True
    yfill True

    background "gui/nvl.png"
    padding gui.nvl_borders.padding

style nvl_entry:
    xfill True
    ysize gui.nvl_height

style nvl_label:
    xpos gui.nvl_name_xpos
    xanchor gui.nvl_name_xalign
    ypos gui.nvl_name_ypos
    yanchor 0.0
    xsize gui.nvl_name_width
    min_width gui.nvl_name_width
    text_align gui.nvl_name_xalign

style nvl_dialogue:
    xpos gui.nvl_text_xpos
    xanchor gui.nvl_text_xalign
    ypos gui.nvl_text_ypos
    xsize gui.nvl_text_width
    min_width gui.nvl_text_width
    text_align gui.nvl_text_xalign
    layout ("subtitle" if gui.nvl_text_xalign else "tex")

style nvl_thought:
    xpos gui.nvl_thought_xpos
    xanchor gui.nvl_thought_xalign
    ypos gui.nvl_thought_ypos
    xsize gui.nvl_thought_width
    min_width gui.nvl_thought_width
    text_align gui.nvl_thought_xalign
    layout ("subtitle" if gui.nvl_text_xalign else "tex")

style nvl_button:
    properties gui.button_properties("nvl_button")
    xpos gui.nvl_button_xpos
    xanchor gui.nvl_button_xalign

style nvl_button_text:
    properties gui.button_text_properties("nvl_button")



################################################################################
## Mobile Variants
################################################################################

style pref_vbox:
    variant "medium"
    xsize 675

## Since a mouse may not be present, we replace the quick menu with a version
## that uses fewer and bigger buttons that are easier to touch.
screen quick_menu():
    variant "touch"

    zorder 100

    if quick_menu:

        hbox:
            style_prefix "quick"

            xalign 0.5
            yalign 1.0

            textbutton _("Back") action Rollback()
            textbutton _("Skip") action Skip() alternate Skip(fast=True, confirm=True)
            textbutton _("Auto") action Preference("auto-forward", "toggle")
            textbutton _("Menu") action ShowMenu()


style window:
    variant "small"
    background "gui/phone/textbox.png"

style radio_button:
    variant "small"
    foreground "gui/phone/button/radio_[prefix_]foreground.png"

style check_button:
    variant "small"
    foreground "gui/phone/button/check_[prefix_]foreground.png"

style nvl_window:
    variant "small"
    background "gui/phone/nvl.png"

style main_menu_frame:
    variant "small"
    background "gui/phone/overlay/main_menu.png"

style game_menu_outer_frame:
    variant "small"
    background "gui/phone/overlay/game_menu.png"

style game_menu_navigation_frame:
    variant "small"
    xsize 510

style game_menu_content_frame:
    variant "small"
    top_margin 0

style pref_vbox:
    variant "small"
    xsize 600

style bar:
    variant "small"
    ysize gui.bar_size
    left_bar Frame("gui/phone/bar/left.png", gui.bar_borders, tile=gui.bar_tile)
    right_bar Frame("gui/phone/bar/right.png", gui.bar_borders, tile=gui.bar_tile)

style vbar:
    variant "small"
    xsize gui.bar_size
    top_bar Frame("gui/phone/bar/top.png", gui.vbar_borders, tile=gui.bar_tile)
    bottom_bar Frame("gui/phone/bar/bottom.png", gui.vbar_borders, tile=gui.bar_tile)

style scrollbar:
    variant "small"
    ysize gui.scrollbar_size
    base_bar Frame("gui/phone/scrollbar/horizontal_[prefix_]bar.png", gui.scrollbar_borders, tile=gui.scrollbar_tile)
    thumb Frame("gui/phone/scrollbar/horizontal_[prefix_]thumb.png", gui.scrollbar_borders, tile=gui.scrollbar_tile)

style vscrollbar:
    variant "small"
    xsize gui.scrollbar_size
    base_bar Frame("gui/phone/scrollbar/vertical_[prefix_]bar.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)
    thumb Frame("gui/phone/scrollbar/vertical_[prefix_]thumb.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)

style slider:
    variant "small"
    ysize gui.slider_size
    base_bar Frame("gui/phone/slider/horizontal_[prefix_]bar.png", gui.slider_borders, tile=gui.slider_tile)
    thumb "gui/phone/slider/horizontal_[prefix_]thumb.png"

style vslider:
    variant "small"
    xsize gui.slider_size
    base_bar Frame("gui/phone/slider/vertical_[prefix_]bar.png", gui.vslider_borders, tile=gui.slider_tile)
    thumb "gui/phone/slider/vertical_[prefix_]thumb.png"

style slider_vbox:
    variant "small"
    xsize None

style slider_slider:
    variant "small"
    xsize 900

Romalous · Jun 8, 2021

i tried a cropped version first and manually inputted the width and height which didn't work the mm_start_hover.png doesn't show at all

anne O'nymous · Jun 8, 2021

First thing first, you could have limited to the relevant part of the screen.rpy file.

Romalous said:

Code:

screen navigation():

    fixed:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:

            #textbutton _("Start") action Start()

            imagebutton auto "gui/mm_start_%s.png" #xpos 101 #ypos 186 focus_mask True action start ("load") hovered






        else:

            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") action ShowMenu("load")
        imagebutton auto "gui/mm_load_%s.png" #xpos 101 #ypos 329 focus_mask True action start ("load") hovered

        textbutton _("Preferences") action ShowMenu("preferences")
        imagebutton auto "gui/mm_preferences_%s.png" #xpos 101 #ypos 471 focus_mask True action start ("load") hovered

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("About") action ShowMenu("about")

        if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):

            ## Help isn't necessary or relevant to mobile devices.
            textbutton _("Help") action ShowMenu("help")
            imagebutton auto "gui/mm_help_%s.png" #xpos 101 #ypos 618 focus_mask True action start ("load") hovered

        if renpy.variant("pc"):

            ## The quit button is banned on iOS and unnecessary on Android and
            ## Web.
            textbutton _("Quit") action Quit(confirm=not main_menu)
            imagebutton auto "gui/mm_quit_%s.png" #xpos 101 #ypos 760 focus_mask True action start ("load") hovered


style navigation_button is gui_button
style navigation_button_text is gui_button_text

style navigation_button:
    size_group "navigation"
    properties gui.button_properties("navigation_button")

style navigation_button_text:
    properties gui.button_text_properties("navigation_button")

Now that it's done (in case someone catch something I didn't saw), there's one error, and it's a recurring one.

I'll use the highlighted version of the code tag to show it clearly :

Python:

screen navigation():
[...]
            imagebutton auto "gui/mm_start_%s.png" #xpos 101 #ypos 186 focus_mask True action start ("load") hovered
[...]
        textbutton _("Load") action ShowMenu("load")
        imagebutton auto "gui/mm_load_%s.png" #xpos 101 #ypos 329 focus_mask True action start ("load") hovered
[...]
        textbutton _("Preferences") action ShowMenu("preferences")
        imagebutton auto "gui/mm_preferences_%s.png" #xpos 101 #ypos 471 focus_mask True action start ("load") hovered
[...]
            textbutton _("Help") action ShowMenu("help")
            imagebutton auto "gui/mm_help_%s.png" #xpos 101 #ypos 618 focus_mask True action start ("load") hovered
[...]
            textbutton _("Quit") action Quit(confirm=not main_menu)
            imagebutton auto "gui/mm_quit_%s.png" #xpos 101 #ypos 760 focus_mask True action start ("load") hovered

You commented all the properties of your imagebutton except the auto one. Therefore, they will never works, because they have no action defined.

Everything that is after a # is a comment, everything.

You should look for a text editor that offer at least basic highlighting, for at least Python language. It would save you some time, and make you see this kind of errors.

On a side note, you'll not be able to start your game if all your button lead to the save loading screen.

Romalous · Jun 8, 2021

i only started coding again yesterday from a 2 year hiatus and back then i spent a day or two at it so im not good with coding terminology is this what you meant about no action defined

Code:

if main_menu:

            #textbutton _("Start") action showmenu("Start")

            imagebutton auto "gui/mm_start_%s.png" #xpos 101 #ypos 186 focus_mask True action start ("load") hovered

and what text editor shows bad code in colour i have tried others with no improved features
i use Atom but i have tried both Editra and Notepad ++

moskyx · Jun 8, 2021

Romalous said:
i only started coding again yesterday from a 2 year hiatus and back then i spent a day or two at it so im not good with coding terminology is this what you meant about no action defined

Code:

if main_menu: #textbutton _("Start") action showmenu("Start") imagebutton auto "gui/mm_start_%s.png" #xpos 101 #ypos 186 focus_mask True action start ("load") hovered

Everything to the right of a # is considered a comment by Ren'Py and won't do anything in game. Thus meaning all your code after imagebutton auto "gui/mm_start_%s.png" won't work due to the # before xpos - and that's happening in every line. That's why your buttons didn't work as all their actions and even their alignment are behind that sign. You should delete those # before xpos and ypos. And then you have the problem that all those actions are start "load", so clicking in any button will always take you to the load/save menu, which is obviously wrong.

Romalous · Jun 8, 2021

is this it im now getting errors though

Python:

#textbutton _("Start") action showmenu("Start")

            imagebutton auto "gui/mm_start_%s.png" xpos 101 ypos 186 focus_mask True action start ("start") hovered
            
            textbutton _("Load") action ShowMenu("load")
            imagebutton auto "gui/mm_load_%s.png" xpos 101 ypos 329 focus_mask True action start ("load") hovered

            textbutton _("Preferences") action ShowMenu("preferences")
            imagebutton auto "gui/mm_preferences_%s.png" xpos 101 ypos 471 focus_mask True action start ("preferences") hovered
        
            textbutton _("Help") action ShowMenu("help")
            imagebutton auto "gui/mm_help_%s.png" xpos 101 ypos 618 focus_mask True action start ("help") hovered
            
            textbutton _("Quit") action Quit(confirm=not main_menu)
            imagebutton auto "gui/mm_quit_%s.png" xpos 101 ypos 760 focus_mask True action start ("quit") hovered

moskyx · Jun 8, 2021

Try to replace all those action start (except the first one, which is actually the start button) with action ShowMenu deleting the space between ShowMenu and the (""). Exactly as you see in the textbutton lines

Also, basically you're defining a text button (a link) and then also an image button for the same action. Is that what you really want?

Edit- just a friendly advice, you might want to take a closer look at the documentation about

You must be registered to see the links

to understand at least a tiny bit of it before copypasting some code you see in a tutorial

79flavors · Jun 8, 2021

Reading the replies, it looks like the answer is already covered... but let me try my over the top hand holding reply...

As has already been discussed, lines like:

Python:

imagebutton auto "gui/mm_help_%s.png" #xpos 101 #ypos 618 focus_mask True action start ("load") hovered

mean the xpos 101 #ypos 618 focus_mask True action start ("load") hovered is completely ignored, because it's a comment, not part of the statement.

What you actually have is imagebutton auto "gui/mm_help_%s.png"

You've talked about using Atom - so the commented out code was already highlighted in Red. So keep an eye out for that.

You could un-comment that part of the line, and the ypos co-ordinates do like they might work (I've not tested them). But the action statements look wrong. At the very least, the commented out action for the preferences button is action start ("load"). That can't be right.

Taking the code as you copy/pasted it earlier... and removing the commented out code...

Python:

screen navigation():

    fixed:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:
            imagebutton auto "gui/mm_start_%s.png" #xpos 101 #ypos 186 focus_mask True action start ("load") hovered
        else:
            textbutton _("History") action ShowMenu("history")
            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") action ShowMenu("load")
        imagebutton auto "gui/mm_load_%s.png"

        textbutton _("Preferences") action ShowMenu("preferences")
        imagebutton auto "gui/mm_preferences_%s.png"

        if _in_replay:
            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:
            textbutton _("Main Menu") action MainMenu()

        textbutton _("About") action ShowMenu("about")

        if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):
            textbutton _("Help") action ShowMenu("help")
            imagebutton auto "gui/mm_help_%s.png"

        if renpy.variant("pc"):
            textbutton _("Quit") action Quit(confirm=not main_menu)
            imagebutton auto "gui/mm_quit_%s.png"

From top to bottom (including links to the RenPy documentation)...

Someone has changed the initial

You must be registered to see the links

to a

You must be registered to see the links

. This means that all the components below it would need to be placed on the screen explicitly. That would explain the commented out xpos and ypos. A vbox is a vertically stacked box and would mean that each component would be stacked one on top of another. It's how the original navigation menu was arranged and looked okay without needing to say the position of each textbutton.

A fixed could be fine with some additional work, but I would suggest changing it back to a vbox.

Beyond that, you have an odd mix of

You must be registered to see the links

and

You must be registered to see the links

.
Within a fixed space, I would expect everything to end up in the top left corner - each overlaid over the one below. (Which is the main reason I suggest the vbox.

I'd expect them all to be all textbutton or all imagebutton. Given your intended picture, that probably means all imagebutton.

Being part of the baseline code, the textbutton uses the correct actions. The version of the code you've sent doesn't include any actions (because they were commented out). So the button's won't actually do anything.

On top of that, you have some where you have BOTH for one menu choice.

This is what I would expect things to look like with the vbox, all the textbutton replaced by imagebutton, with the duplicates removed and the correct actions from thetextbutton applied to their imagebutton counterparts.

It would be very tempting to just copy/paste this into your game. But please try to read through the explanations and understand WHY this probably works rather than doing that. At the very least, so you can fix it yourself in the future.

Python:

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:
            imagebutton auto "gui/mm_start_%s.png" action Start()
        else:
            imagebutton auto "gui/mm_history_%s.png" action ShowMenu("history")
            imagebutton auto "gui/mm_save_%s.png" action ShowMenu("save")

        imagebutton auto "gui/mm_load_%s.png" action ShowMenu("load")

        imagebutton auto "gui/mm_preferences_%s.png" action ShowMenu("preferences")

        if _in_replay:
            imagebutton auto "gui/mm_endreplay_%s.png" action EndReplay(confirm=True)

        elif not main_menu:
            imagebutton auto "gui/mm_mainmenu_%s.png" action MainMenu()

        imagebutton auto "gui/mm_about_%s.png" action ShowMenu("about")

        if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):
            imagebutton auto "gui/mm_help_%s.png" action ShowMenu("help")

        if renpy.variant("pc"):
            imagebutton auto "gui/mm_quit_%s.png" action Quit(confirm=not main_menu)

I've done a 1-to-1 conversion from the standard menu to your new image based menu choices. If you don't have pictures or you want to remove any of those menu choices... then just remove the corresponding line.

I haven't tested this. It might still need a little tweaking, but at the very least - it should be 90% the way there. My only real concern is that the preferences menu choice will be too wide. But that's your problem.

anne O'nymous · Jun 8, 2021

79flavors said:
Someone has changed the initial
You must be registered to see the links
to a
You must be registered to see the links
.

It's the guy that made the tutorial he followed. Wait for the plot twist... bellow.

79flavors said:
Beyond that, you have an odd mix of
You must be registered to see the links
and
You must be registered to see the links
.

Once again, the fault goes on the tutorial.
In short, the guy defined a menu that can only apply to the main menu, but did it in the "navigation" screen, before discovering that it put the menu at an unwanted place anywhere else than the main menu, and reverting all what he did.
Like he don't really explain what he's doing, and even less why he is doing it, someone who don't know Ren'py and/or is neither a native English speaker nor fluent enough (so who rely more on the video than on the voice) is surely lost when the video end.

79flavors said:
Within a fixed space, I would expect everything to end up in the top left corner - each overlaid over the one below. (Which is the main reason I suggest the vbox.

You expect correctly, and it's even what happened near the end of

You must be registered to see the links

.
But once again, like the guy do, but don't explain, someone with near to no knowledge will not really understand that the two are linked. Especially since the solution shown to fix the problem is to... removed almost everything that was previously done in the tutorial, starting by putting back a vbox where he started by putting a fixed.

Edit: typo

Romalous · Jun 8, 2021

the start button is now working it also changes colour when hovered over but only the the start option shows up i also deleting the # comment which then causes errors also tried vbox which removes all the text buttons

Python:

screen navigation():

    fixed:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing gui.navigation_spacing

        if main_menu:

            #textbutton _("Start") action showmenu("Start")

            imagebutton auto "gui/mm_start_%s.png" xpos 101 ypos 186 focus_mask True action ShowMenu("start") hovered


        else:

            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

            textbutton _("Load") action ShowMenu("load")
            imagebutton auto "gui/mm_load_%s.png" xpos 101 ypos 329 focus_mask True action ShowMenu("load") hovered

            textbutton _("Preferences") action ShowMenu("preferences")
            imagebutton auto "gui/mm_preferences_%s.png" xpos 101 ypos 471 focus_mask True action ShowMenu("preferences") hovered

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("About") action ShowMenu("about")

        if renpy.variant("pc") or (renpy.variant("web") and not renpy.variant("mobile")):


            textbutton _("Help") action ShowMenu("help")
            imagebutton auto "gui/mm_help_%s.png" xpos 101 ypos 618 focus_mask True action ShowMenu("help") hovered

        if renpy.variant("pc"):


            textbutton _("Quit") action ShowMenu(confirm=not main_menu)
            imagebutton auto "gui/mm_quit_%s.png" xpos 101 ypos 760 focus_mask True action ShowMenu("quit") hovered

79flavors · Jun 8, 2021

Romalous said:
the start button is now working it also changes colour when hovered over but only the the start option shows up

Start is not a menu.
You want action Start() not action showmenu("Start")

Romalous said:
i also deleting the # comment which then causes errors

Yes, possibly, if you only removed the # and not everything after it.
But it isn't clear to me where that error might be.

Romalous said:
also tried vbox which removes all the text buttons

Actually, they're not removed. They are still on screen, but they are hidden behind the image based buttons.

Python:

screen navigation():
# snip

Each reply I've crafted at this point breaks at least 1 of the F95 rules. So instead...
I'll just wish you the best of luck with your project.

anne O'nymous · Jun 8, 2021

Romalous said:
the start button is now working it also changes colour when hovered over but only the the start option shows up i also deleting the # comment which then causes errors also tried vbox which removes all the text buttons

Ok, take a break and use it to breath deeply.

What you want to do is relatively easy, even for a total beginner. But for this you've to firstly accept that you've been tricked into following a tutorial made by someone who shouldn't do tutorial and don't know enough to make tutorials regarding Ren'py ; 99% of the problems you encounter now are only due to this tutorial and what you thought you learned from it.

Coding need that you stay humble, not in regard of the others, but in regard of your code. Whatever how much experience you have, and whatever how good you are at this, it is and will always be the code that have the last word. It mean that you'll never be able to force it to do what you want, it's the code that will always force you to do how it want.
An like you've near to no experience in term of codding, what isn't at all a shame, you've just no way to achieve to twist the code if you continue to persists trying to do it "your way".

That's why I recommend you to do this break. You need to clear your mind before anything else.

Once it's done, go back to 79flavors's post. It have everything you need ; the explanation, the links to what he talk about, and a working code that do what you want.

Honestly, you would have just to copy what he wrote, to have your menu working but, as he said, it's not your interest to do it. You would learn nothing, and will be stuck with most of the next steps you'll have to do to make your game.
But what's depressing is the fact that you didn't even tried to refer to this code in order to see what's wrong with yours ; it looks like you didn't took the time to think about all he wrote, and he'd so much more patience than me...

All this being said, your "navigation" screen is now too corrupted.
Create a new project, search its "screen.rpy" file, and copy it into your game project, in order to start again with the fully original code. Note that it's important that you copy it, and not move it ; you'll not create a new project anytime you need to retrieve the original code of some part of Ren'py, or the original value of some configuration variable.

Once it's done and you've the 100% working original content of the "navigation" screen, here's what the tutorial should have said :

Each line that starts with textbutton represent one of the entries of the menu.

Launch your project and look alternatively to its menu screen and the code of the "navigation" screen. You'll see on the screen most of the entries present in the file, and this in the same order.
The only entries not visible in the screen are all preceded by an if SOMETHING on the code, what mean that their display is conditioned to a context that don't correspond to the actual state of the game. This is totally normal. You'll have to modify all the entries that apply to your game, because they'll be shown at a moment or another.
To have the menu entries represented by an image in place of a text, you "just" (relatively speaking) have to replace the start of each line corresponding to an entry.

Those lines are all following the same logic:
textbutton TEXT_DISPLAYED action WHAT_HAPPEN_WHEN_YOU_CLICK.

Note the name of the statement, textbutton ; "text" and "button", a pretty explicit name, right ? Well, the name of the statement to have an image in place of a text is as explicit as this, it's imagebutton.
Where textbutton is followed by a string representing the text to display, imagebutton is a little more complicated to use, but not this much ; and the official documentation (refer to 79flavor's post for the links) is here to help. For now, consider that the text is to replace by idle "PATH_AND_NAME_OF_THE_IMAGE". You'll be able to change that later, in order to have a better behaving button, but each step at its time.

Therefore, to pass form a text to an image, anytime you see textbutton TEXT_DISPLAYED in the "navigation" screen, replace it, and it only, by the corresponding imagebutton idle "PATH_AND_NAME_OF_THE_IMAGE".
What mean that the first entry, that is :
textbutton _("Start") action Start()
have to be replaced by:
imagebutton idle "gui/start.png" action Start()
The second button, that is:
textbutton _("History") action ShowMenu("history")
become:
imagebutton "gui/history.png" action ShowMenu("history")
and so on.
Here I assumed that the images are on the "[name of the project]/game/gui" directory, are in PNG format, and are named accordingly to the action they represent. You can obviously change this if you want.
Congratulation, you now have a menu that display images in place of text.

Yes, it's finish. You've nothing more to do.
Don't forget to give a thumbs up, it help with the referencing, follow me for more, and tell your girlfriend that you just fell in love for me.

And that's all. Seriously.

You can make the image change when the mouse is hover the entry.
You can make the button make a sound when the mouse is hover it.
You can make the button match a given position corresponding to a bigger background.
But all this is to do after you've done this first step. All this is to discover once you've understood this first step. And, incidentally, the last step do not correspond to what you want to do ; at least accordingly to the screen you shown when you started the thread.

By the way, when you're asking for help regarding a technical issue, whatever if it is codding or anything else, never lie regarding your effective knowledge. People that will answer you will base all their saying accordingly to your supposed knowledge. Therefore, if you lied or been a little too proud, you'll just understand nothing or, worse think you understood but don't.

Edit: typo

Romalous · Jun 8, 2021

anne O'nymous said:
Ok, take a break and use it to breath deeply.

What you want to do is relatively easy, even for a total beginner. But for this you've to firstly accept that you've been tricked into following a tutorial made by someone who shouldn't do tutorial and don't know enough to make tutorials regarding Ren'py ; 99% of the problems you encounter now are only due to this tutorial and what you thought you learned from it.

Coding need that you stay humble, not in regard of the others, but in regard of your code. Whatever how much experience you have, and whatever how good you are at this, it is and will always be the code that have the last word. It mean that you'll never be able to force it to do what you want, it's the code that will always force you to do how it want.
An like you've near to no experience in term of codding, what isn't at all a shame, you've just no way to achieve to twist the code if you continue to persists trying to do it "your way".

That's why I recommend you to do this break. You need to clear your mind before anything else.

Once it's done, go back to 79flavors's post. It have everything you need ; the explanation, the links to what he talk about, and a working code that do what you want.

Honestly, you would have just to copy what he wrote, to have your menu working but, as he said, it's not your interest to do it. You would learn nothing, and will be stuck with most of the next steps you'll have to do to make your game.
But what's depressing is the fact that you didn't even tried to refer to this code in order to see what's wrong with yours ; it looks like you didn't took the time to think about all he wrote, and he'd so much more patience than me...

All this being said, your "navigation" screen is now too corrupted.
Create a new project, search its "screen.rpy" file, and copy it into your game project, in order to start again with the fully original code. Note that it's important that you copy it, and not move it ; you'll not create a new project anytime you need to retrieve the original code of some part of Ren'py, or the original value of some configuration variable.

Once it's done and you've the 100% working original content of the "navigation" screen, here's what the tutorial should have said :

Each line that starts with textbutton represent one of the entries of the menu.

Launch your project and look alternatively to its menu screen and the code of the "navigation" screen. You'll see on the screen most of the entries present in the file, and this in the same order.
The only entries not visible in the screen are all preceded by an if SOMETHING on the code, what mean that their display is conditioned to a context that don't correspond to the actual state of the game. This is totally normal. You'll have to modify all the entries that apply to your game, because they'll be shown at a moment or another.

To have the menu entries represented by an image in place of a text, you "just" (relatively speaking) have to replace the start of each line corresponding to an entry.

Those lines are all following the same logic:
textbutton TEXT_DISPLAYED action WHAT_HAPPEN_WHEN_YOU_CLICK.

Note the name of the statement, textbutton ; "text" and "button", a pretty explicit name, right ? Well, the name of the statement to have an image in place of a text is as explicit as this, it's imagebutton.
Where textbutton is followed by a string representing the text to display, imagebutton is a little more complicated to use, but not this much ; and the official documentation (refer to 79flavor's post for the links) is here to help. For now, consider that the text is to replace by idle "PATH_AND_NAME_OF_THE_IMAGE". You'll be able to change that later, in order to have a better behaving button, but each step at its time.

Therefore, to pass form a text to an image, anytime you see textbutton TEXT_DISPLAYED in the "navigation" screen, replace it, and it only, by the corresponding imagebutton idle "PATH_AND_NAME_OF_THE_IMAGE".
What mean that the first entry, that is :
textbutton _("Start") action Start()
have to be replaced by:
imagebutton idle "gui/start.png" action Start()
The second button, that is:
textbutton _("History") action ShowMenu("history")
become:
imagebutton "gui/history.png" action ShowMenu("history")
and so on.
Here I assumed that the images are on the "[name of the project]/game/gui" directory, are in PNG format, and are named accordingly to the action they represent. You can obviously change this if you want.

Congratulation, you now have a menu that display images in place of text.

Yes, it's finish. You've nothing more to do.
Don't forget to give a thumbs up, it help with the referencing, follow me for more, and tell your girlfriend that you just fell in love for me.

And that's all. Seriously.

You can make the image change when the mouse is hover the entry.
You can make the button make a sound when the mouse is hover it.
You can make the button match a given position corresponding to a bigger background.
But all this is to do after you've done this first step. All this is to discover once you've understood this first step. And, incidentally, the last step do not correspond to what you want to do ; at least accordingly to the screen you shown when you started the thread.

By the way, when you're asking for help regarding a technical issue, whatever if it is codding or anything else, never lie regarding your effective knowledge. People that will answer you will base all their saying accordingly to your supposed knowledge. Therefore, if you lied or been a little too proud, you'll just understand nothing or, worth think you understood but don't.

I tried replacing my code with 79flavors and it didn't work just got an error

anne O'nymous · Jun 9, 2021

Romalous said:
I tried replacing my code with 79flavors and it didn't work just got an error

Would the error regard "qui/mm_startç%s.png", it would be a legit error.
But here, the error concern the fourth button...

The three first buttons works correctly. You already have the answer to your problem.

You shouldn't have blindly copy/pasted his code without thinking about what you are doing. You would have noticed that this kind of error would be thrown, and corrected it beforehand ; whatever with a # or by adding at least one image.

It don't need to know how to code for that, it just need to know how to think.

I said it, he have more patience than me...

79flavors · Jun 10, 2021

Romalous said:
I tried replacing my code with 79flavors and it didn't work just got an error
[...]

After a few days of deep breathing and happy thoughts... let me see if I can help with this again...

TL;DR

You are missing the file /game/gui/mm_about_idle.png. Probably /game/gui/mm_about_hover.png too.

Whilst they haven't given errors yet, I'd also suspect /game/gui/mm_history_idle.png, /game/gui/mm_history_hover.png, /game/gui/mm_endreplay_idle.png, /game/gui/mm_endreplay_hover.png, /game/gui/mm_mainmenu_idle.png and /game/gui/mm_mainmenuhover.png may be missing too. (I could be wrong).

You either need to download or create the missing images. Or find an alternatively solution (like removing those menu choices from the game menu).

The "please read the whole explanation answer"...

The way to read most RenPy error logs is from bottom to top.
The last line tells you what went wrong. The lines above it explain how it got there.

In this case:
Exception: imagebutton does not have a idle image. (auto=u'gui/mm_about_%s.png')

I still haven't watched the tutorial video - as it sounds like the person making it was just stumbling around in the dark. Which is fine... experimentation is good... but doesn't really sound like a "tutorial" to me.

But that error is saying that imagebutton doesn't have an idle picture.

idle is the picture shown normally and lets RenPy know the size of the button and which parts of it can be clicked on (Usually all of it). Whereas hover is the picture shown when the mouse moves to hover over the idle area. The hover parameter is optional (since the button doesn't NEED to change color or anything), but the idle is absolutely needed, because without it - you haven't got a button and RenPy has no way to know what area of the screen can be clicked.

There are two ways to code an imagebutton statement...

Version #1:

Python:

        imagebutton:
            idle "gui/mm_about_idle.png"
            hover "gui/mm_about_hover.png"
            action ShowMenu("about")

Version #2:

Python:

        imagebutton:
            auto "gui/mm_about_%s.png"
            action ShowMenu("about")

In the version is your game, you're using the 2nd version. But with all the parameters on one line rather than spread over three. Both ways work fine.

Version 1 explicitly tells the game where to find the idle and hover images.

Version 2 uses auto. What "auto" does is try to replace "%s" with the words "idle", "hover, "selected_hover" and a couple of other choices and then sees if a matching image file is located where the code says to look. If the corresponding image can be found, it uses it. Otherwise it's ignored. Usually only "idle" and "hover" images are used.

So in your case, the game went looking for...

/game/gui/mm_about_idle.png and /game/gui/mm_about_hover.png ... and a couple more.

... but didn't find them.

As I've said above... not finding a hover image is fine. But the idle image was needed. So when it couldn't find one during startup, it threw the error you saw (Exception: imagebutton does not have a idle image. (auto=u'gui/mm_about_%s.png')).

Based on the original screenshot. It looks like the author of the "tutorial" drew images for all the other buttons, but not that one. Whatever the reason, you are missing the file /game/gui/mm_about_idle.png.

Listing the imagebutton lines you copied my my example...

Python:

        imagebutton auto "gui/mm_start_%s.png" action Start()
        imagebutton auto "gui/mm_history_%s.png" action ShowMenu("history")
        imagebutton auto "gui/mm_save_%s.png" action ShowMenu("save")
        imagebutton auto "gui/mm_load_%s.png" action ShowMenu("load")
        imagebutton auto "gui/mm_preferences_%s.png" action ShowMenu("preferences")
        imagebutton auto "gui/mm_endreplay_%s.png" action EndReplay(confirm=True)
        imagebutton auto "gui/mm_mainmenu_%s.png" action MainMenu()
        imagebutton auto "gui/mm_about_%s.png" action ShowMenu("about")
        imagebutton auto "gui/mm_help_%s.png" action ShowMenu("help")
        imagebutton auto "gui/mm_quit_%s.png" action Quit(confirm=not main_menu)

That pretty much means it found images for "start", "history", "save", "load", "preferences", "endreplay", "mainmenu" and then reached "about" and couldn't find it.

I'm very surprised "history", "endreplay" and "mainmenu" were found. But it could be that the game hasn't tried to access them yet and they might throw errors in the future.

So you need to decide if you still want those menu choices ... in which case, you'd need to find or create images for them.
Or your can decide to not to show those options on your menus ... in which case, you can just remove the whole line for that menu choice.

I also want to repeat something I said above...

79flavors said:
It would be very tempting to just copy/paste this into your game. But please try to read through the explanations and understand WHY this probably works rather than doing that. At the very least, so you can fix it yourself in the future.

[...]

I haven't tested this. It might still need a little tweaking, but at the very least - it should be 90% the way there. My only real concern is that the preferences menu choice will be too wide. But that's your problem.

Our frustrations are that you don't seem to be trying to think for yourself. Three of us explained WHY the original "I can't click on the buttons" was broken. I went so far as to do a step by step explanation of why it didn't work and what you might be able to do to fix it, including code which would work if all the original menu choices had been converted to images. But instead you seemed to have just copied and pasted the code without really understanding the explanations that went with it.

Penfold Mole · Jun 10, 2021

79flavors said:
Our frustrations are that you don't seem to be trying to think for yourself. Three of us explained WHY the original "I can't click on the buttons" was broken. I went so far as to do a step by step explanation of why it didn't work and what you might be able to do to fix it, including code which would work if all the original menu choices had been converted to images. But instead you seemed to have just copied and pasted the code without really understanding the explanations that went with it.

What I'm seeing since the start of the thread is that Romalous is clearly starting his first Ren'Py game from the wrong end, biting a chunk too large for him to swallow or even chew through.

Romalous
When you are such a beginner that you don't seem to understand some programming basics like comments/remarks and clearly have no idea about what the code you are just basically copying from others actually does, you shouldn't waste your time trying to completely redesign Ren'Py UI.
Ren'Py has a highly functional default UI that you can redesign or if you are really ready, replace later on, when you already have some idea about what you are doing. But right now what it looks like to me is that you have removed the default UI and its image files and you are trying to create your own just by following a "tutorial" made by someone who also has no idea what he's doing.

If you really want to get started with Ren'Py and create your game in Ren'Py, start from creating the game content instead. Writing a linear or mostly linear game script in Ren'Py is much easier and gives you a chance to start from the easier tasks, get acquainted to programming basics and Ren'Py documentation and other Ren'Py games. Try to read default Ren'Py files in the game subfolder with the help of Ren'Py documentation, try to understand what is happening in there. And use those files as a base for your own design later as others already suggested.

You don't seem to be ready for the task at hand at the moment. Learn to sail before you try to design your own sail boat without any previous knowledge of sailing.

Ren'Py Renpy Menu button alignment issue

Active Member

Well-Known Member

I'm not grumpy, I'm just coded that way.

Active Member

Active Member

Active Member

I'm not grumpy, I'm just coded that way.

Active Member

Forum Fanatic

Active Member

Forum Fanatic

Well-Known Member

I'm not grumpy, I'm just coded that way.

Active Member

Well-Known Member

I'm not grumpy, I'm just coded that way.

Active Member

I'm not grumpy, I'm just coded that way.

Well-Known Member

Engaged Member