HELP!! HOW TO SAVE THIS CRAPPY GUI!

[sharikah]

So this is my very, very first try at a GUI I decided to go with a certain amount of colors and decided to use a code I thought would work the best with me but small details is where I failed.. And no that is not the final thumb and not the final Options BG.. It's pink too much mint.. Right now it's 1280x720

Code:

Code: Select all

##############################################################################
# Main Menu
#
# Screen that's used to display the main menu, when Ren'Py first starts
# http://www.renpy.org/doc/html/screen_special.html#main-menu

screen main_menu:

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

    # The background of the main menu.
    window:
        style "mm_root"

    # The main menu buttons.
    vbox:
        xpos 0
        ypos 0
        spacing 0

        imagebutton auto "ui/start_%s.png" action [Start(), Play("sound", "se/open.ogg")] hovered Play("sound", "se/select.ogg")
        imagebutton auto "ui/load_%s.png" action [ShowMenu("load"), Play("sound", "se/open.ogg")] hovered Play("sound", "se/select.ogg")
        imagebutton auto "ui/options_%s.png" action [ShowMenu("preferences"), Play("sound", "se/open.ogg")] hovered Play("sound", "se/select.ogg")
        imagebutton auto "ui/quit_%s.png" action [Quit(confirm=True), Play("sound", "se/open.ogg")] hovered Play("sound", "se/select.ogg")
        
init -2 python:

    # Make all the main menu buttons be the same size.
    style.mm_button.size_group = "mm"


##############################################################################
# Navigation
#
# Screen that's included in other screens to display the game menu
# navigation and background.
# http://www.renpy.org/doc/html/screen_special.html#navigation
screen navigation:

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

    # The various buttons.
    vbox:
        xpos 0
        ypos 0
        spacing 0

        imagebutton auto "ui/return_%s.png" action [Return(), Play("sound", "se/open.ogg")] hovered Play("sound", "se/select.ogg")
        imagebutton auto "ui/save_%s.png" action [ShowMenu("save"), Play("sound", "se/open.ogg")] hovered Play("sound", "se/select.ogg")
        imagebutton auto "ui/load_%s.png" action [ShowMenu("load"), Play("sound", "se/open.ogg")] hovered Play("sound", "se/select.ogg")
        imagebutton auto "ui/options_%s.png" action [ShowMenu("preferences"), Play("sound", "se/open.ogg")] hovered Play("sound", "se/select.ogg")
        imagebutton auto "ui/main_%s.png" action [MainMenu(confirm=False), Play("sound", "se/open.ogg")] hovered Play("sound", "se/select.ogg")

init -2 python:
    style.gm_nav_button.size_group = "gm_nav"


##############################################################################
# Save, Load
#
# Screens that allow the user to save and load the game.
# http://www.renpy.org/doc/html/screen_special.html#save
# http://www.renpy.org/doc/html/screen_special.html#load

# Since saving and loading are so similar, we combine them into
# a single screen, file_picker. We then use the file_picker screen
# from simple load and save screens.

screen file_picker:

    frame:
        xpadding 0
        ypadding 0
        xalign 0.07
        yalign 0.95
        background None
        has vbox
        spacing 0
        
        hbox:
            xalign 1.0
            spacing 0.1
            for i in range(1, 3):
                vbox:
                    spacing 0.5
                    button:
                        style "savebutton"
                        action [FileAction(i), Play("sound", "se/alert.ogg")]
                        key "save_delete" action [FileDelete(i), Play("sound", "se/alert.ogg")]
                        hovered Play("sound", "se/select.ogg")
                        
                        add FileScreenshot(i) xalign 0.5 yalign 0.5
                        
                    $ description = "% 2s. %s\n%s" % (
                        FileSlotName(i, 2 * 2),
                        FileTime(i, empty=_("Empty Slot.")),
                        FileSaveName(i))
                    
                    text description size 15 xalign 0.5
                    
        hbox:
            xalign 0.1
            spacing 0
            for i in range(3, 5):
                vbox:
                    spacing 0.5
                    button:
                        style "savebutton"
                        action [FileAction(i), Play("sound", "se/alert.ogg")]
                        key "save_delete" action [FileDelete(i), Play("sound", "se/alert.ogg")]
                        hovered Play("sound", "se/select.ogg")
                        
                        add FileScreenshot(i) xalign 0.5 yalign 0.5
                        
                    $ description = "% 2s. %s\n%s" % (
                        FileSlotName(i, 2 * 2),
                        FileTime(i, empty=_("Empty Slot.")),
                        FileSaveName(i))
                    
                    text description size 15 xalign 0.5
                    
        hbox:
            xalign 0.52
            
            textbutton _("Auto"):
                action FilePage("auto") style "savenavigation"
            null width 20

            textbutton _("Quick"):
                action FilePage("quick") style "savenavigation"
            null width 20

            for i in range(1, 9):
                textbutton str(i):
                    action FilePage(i) style "savenavigation"
                null width 10
            null width 20
            
    imagebutton auto "ui/back_%s.png" action [FilePagePrevious(), Play("sound", "se/select.ogg")] hovered Play("sound", "se/select.ogg") xalign 0.08 yalign 0.99 style "savenavigation"
    imagebutton auto "ui/forward_%s.png" action [FilePageNext(max=8), Play("sound", "se/select.ogg")] hovered Play("sound", "se/select.ogg") xalign 0.44 yalign 0.99 style "savenavigation"


screen save:

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

    use navigation
    use file_picker
    
    text "SAVE" xalign 0.26 yalign 0.25 size 34

screen load:

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

    use navigation
    use file_picker
    
    text "LOAD" xalign 0.26 yalign 0.25 size 34

init -2 python:
    style.file_picker_frame = Style(style.menu_frame)

    style.file_picker_nav_button = Style(style.small_button)
    style.file_picker_nav_button_text = Style(style.small_button_text)

    style.file_picker_button = Style(style.large_button)
    style.file_picker_text = Style(style.large_button_text)

    style.savebutton = Style(style.default)
    #style.savebutton.insensitive_foreground = ("ui/save_bg.png")
    #style.savebutton.idle_foreground = ("ui/save_bg.png")
    #style.savebutton.hover_foreground = ("ui/save_bg.png")
    style.savebutton.insensitive_background = ("ui/save_bg.png")
    style.savebutton.idle_background = ("ui/save_bg.png")
    style.savebutton.hover_background = ("ui/save_bg.png")
    style.savebutton.xmaximum = 308
    style.savebutton.ymaximum = 208
    
    style.savenavigation = Style(style.default)
    style.savenavigation.background = None
    style.savenavigation_text.idle_color = "#000"
    style.savenavigation_text.hover_color = "#000"
    style.savenavigation_text.selected_color = "#000"

##############################################################################
# Preferences
#
# Screen that allows the user to change the preferences.
# http://www.renpy.org/doc/html/screen_special.html#prefereces

screen preferences:

    tag menu

    # Include the navigation.
    use navigation
    
    text "OPTIONS" xalign 0.26 yalign 0.25 size 34

    # Put the navigation columns in a three-wide grid.
    grid 2 1:
        style_group "prefs"
        transpose True
        xfill False
        xmaximum 310
        xalign 0.07
        yalign 0.70


        # The left column.
        vbox:
            spacing 10
            
            frame:
                style_group "pref"
                has vbox

                
                label _("Display")
                textbutton _("Window") action Preference("display", "window")
                textbutton _("Fullscreen") action Preference("display", "fullscreen")

            frame:
                style_group "pref"
                has vbox

                label _("Transitions")
                textbutton _("All") action Preference("transitions", "all")
                textbutton _("None") action Preference("transitions", "none")

            frame:
                style_group "pref"
                has vbox

                label _("Text Speed")
                bar value Preference("text speed")
                
            frame:
                style_group "pref"
                has vbox

                label _("Skip")
                textbutton _("Seen Messages") action Preference("skip", "seen")
                textbutton _("All Messages") action Preference("skip", "all")

        vbox:
            spacing 10
            
            frame:
                style_group "pref"
                has vbox

                label _("After Choices")
                textbutton _("Stop Skipping") action Preference("after choices", "stop")
                textbutton _("Keep Skipping") action Preference("after choices", "skip")

            frame:
                style_group "pref"
                has vbox

                label _("Auto-Forward Time")
                bar value Preference("auto-forward time")

                if config.has_voice:
                    textbutton _("Wait for Voice") action Preference("wait for voice", "toggle")

            frame:
                style_group "pref"
                has vbox

                label _("Music Volume")
                bar value Preference("music volume")

            frame:
                style_group "pref"
                has vbox

                label _("Sound Volume")
                bar value Preference("sound volume")

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

            if config.has_voice:
                frame:
                    style_group "pref"
                    has vbox

                    label _("Voice Volume")
                    bar value Preference("voice volume")

                    textbutton _("Voice Sustain") action Preference("voice sustain", "toggle")
                    if config.sample_voice:
                        textbutton _("Test"):
                            action Play("voice", config.sample_voice)
                            style "soundtest_button"

init -2 python:
    style.pref_frame.xfill = False
    style.pref_frame.xmargin = 5
    style.pref_frame.top_margin = 5
    style.pref_frame.background = "ui/label_bg.png"

    style.pref_vbox.xfill = True

    style.pref_button.size_group = "pref"
    style.pref_button.xalign = 0.5
    style.pref_button.background = None
    style.pref_label_text.size= 20
    style.pref_button_text.font = "Comfortaa-Regular.ttf"
    style.pref_button_text.idle_color = "#000"
    style.pref_button_text.hover_color = "#000000"
    style.pref_button_text.selected_color = "#000000"

    style.pref_slider.xmaximum = 280
    style.pref_slider.ymaximum = 53
    style.pref_slider.xalign = 0.1
    style.pref_slider.yalign = 1
    style.pref_slider.left_bar = "ui/bar-full.png"
    style.pref_slider.right_bar = "ui/bar-empty.png"
    style.pref_slider.thumb = "ui/thumb.png"
    
    style.pref_label.xmaximum = 300
    style.pref_label.xalign = 0
    style.pref_label_text.xalign = 0.5
    style.pref_label_text.size= 25
    style.pref_label_text.font = "Comfortaa-Bold.ttf"
    style.pref_label_text.color = "#000"

    style.soundtest_button.xalign = 1.0


##############################################################################
# Yes/No Prompt
#
# Screen that asks the user a yes or no question.
# http://www.renpy.org/doc/html/screen_special.html#yesno-prompt

screen yesno_prompt:

    modal True

    window:
        style "gm_root"
        background None

    frame:
        style_group "yesno"
        background "ui/yes-no.png"

        xfill True
        xmargin 0
        ypos 150
        yanchor 0
        ypadding 100

        has vbox:
            xalign .5
            yalign .5
            spacing 30

        label _(message):
            xalign 0.5

        hbox:
            xalign 0.5
            spacing 10

            imagebutton auto "ui/yes_%s.png" action yes_action hovered Play("sound", "se/select.ogg")
            imagebutton auto "ui/no_%s.png" action [no_action, Play("sound", "se/close.ogg")] hovered Play("sound", "se/select.ogg")

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

init -2 python:
    style.yesno_button.size_group = "yesno"
    style.yesno_label_text.text_align = 0.5
    style.yesno_label_text.layout = "subtitle"
    style.yesno_label_text.color = "#000"

##############################################################################
# Quick Menu
#
# A screen that's included by the default say screen, and adds quick access to
# several useful functions.
screen quick_menu():

    # Add an in-game quick menu.
    hbox:
        style_group "quick"

        xalign 1.0
        yalign 1.0

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

init -2:
    style quick_button:
        is default
        background None
        xpadding 5

    style quick_button_text:
        is default
        size 12
        idle_color "#000000"
        hover_color "#b7e3d3"
        selected_idle_color "#f6989d"
        selected_hover_color "#ffffff"
        insensitive_color "#e5dbc9"

Screenshots:

Nav Screen (Hover)



Nav Screen (Ground)



Load/Save (Not it's not the best)



Options



Yes/No Screen (Fav)



Options BG



Folder with never ending Buttons..



No it's not the best but at least I tried guys.. Laugh silently.. I also don't have a quick menu..Thanks for your help..

[SinnyROM]

If you have something specific in mind you want to change, someone can help with your coding. Otherwise what's considered a good-looking design can be pretty subjective!

I do have a few suggestions to run by you for starters:

• The screen names are white, but only that, making it tough to read depending on the background. Add a text outline or background to set it apart, or even position it elsewhere, like the top centre of the screen. Similarly for the save's empty slot text and save page navigation.
• The screen elements cover the navigation buttons which cover the poor guy on the left. Centring the screen elements would be a better idea so they can be neatly sectioned between the guys.
• I'm not sure what to do with the navigation buttons. Maybe shrink the ones for the navigation screen so that all the buttons show at least, but there's still the issue of covering part of the guy. You can try aligning them horizontally near the bottom of the screen and see how that looks.

[sharikah]

That's exactly what meant it's the coding and I don't understand the coding that well.. Everything you mentioned is the problems that I have.. And need help with..

If you have something specific in mind you want to change, someone can help with your coding. Otherwise what's considered a good-looking design can be pretty subjective!

I do have a few suggestions to run by you for starters:

• The screen names are white, but only that, making it tough to read depending on the background. Add a text outline or background to set it apart, or even position it elsewhere, like the top centre of the screen. Similarly for the save's empty slot text and save page navigation.
• The screen elements cover the navigation buttons which cover the poor guy on the left. Centring the screen elements would be a better idea so they can be neatly sectioned between the guys.
• I'm not sure what to do with the navigation buttons. Maybe shrink the ones for the navigation screen so that all the buttons show at least, but there's still the issue of covering part of the guy. You can try aligning them horizontally near the bottom of the screen and see how that looks.

[SinnyROM]

I gave a few possible approaches to the issues, so being really specific about what you're going for helps me a lot. Keep in mind there's more than one way to solve a problem, especially in a GUI design!

For the readable text, let's combine the methods. This is how to add a background and outline to text (documentation explains its format: http://www.renpy.org/doc/html/style_pro ... properties)

Code: Select all

frame:
    background "#ccffcc" # a light green background, can be an image too
    text "OPTIONS" xalign 0.26 yalign 0.25 size 34 outlines [(5, "#000000", 1, 1)]

For centring the screen elements:

Code: Select all

screen file_picker: # for save/load
    # ...
    frame:
        xalign 0.5
        # ...

Code: Select all

screen preferences:
    # ...
    grid 2 1:
        xalign 0.5
        # ...

The size of the navigation buttons depend on your image size, so changing the images will shrink them. If you want them horizontal instead:

Code: Select all

screen navigation:

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

    # The various buttons.
    hbox: # changed from vbox to hbox for horizontal
        # ...

[sharikah]

Thanks I will try and tell you what happens..

I gave a few possible approaches to the issues, so being really specific about what you're going for helps me a lot. Keep in mind there's more than one way to solve a problem, especially in a GUI design!

For the readable text, let's combine the methods. This is how to add a background and outline to text (documentation explains its format: http://www.renpy.org/doc/html/style_pro ... properties)

Code: Select all

frame:
    background "#ccffcc" # a light green background, can be an image too
    text "OPTIONS" xalign 0.26 yalign 0.25 size 34 outlines [(5, "#000000", 1, 1)]

For centring the screen elements:

Code: Select all

screen file_picker: # for save/load
    # ...
    frame:
        xalign 0.5
        # ...

Code: Select all

screen preferences:
    # ...
    grid 2 1:
        xalign 0.5
        # ...

The size of the navigation buttons depend on your image size, so changing the images will shrink them. If you want them horizontal instead:

Code: Select all

screen navigation:

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

    # The various buttons.
    hbox: # changed from vbox to hbox for horizontal
        # ...

[sharikah]

Thanks it worked..

I gave a few possible approaches to the issues, so being really specific about what you're going for helps me a lot. Keep in mind there's more than one way to solve a problem, especially in a GUI design!

For the readable text, let's combine the methods. This is how to add a background and outline to text (documentation explains its format: http://www.renpy.org/doc/html/style_pro ... properties)

Code: Select all

frame:
    background "#ccffcc" # a light green background, can be an image too
    text "OPTIONS" xalign 0.26 yalign 0.25 size 34 outlines [(5, "#000000", 1, 1)]

For centring the screen elements:

Code: Select all

screen file_picker: # for save/load
    # ...
    frame:
        xalign 0.5
        # ...

Code: Select all

screen preferences:
    # ...
    grid 2 1:
        xalign 0.5
        # ...

The size of the navigation buttons depend on your image size, so changing the images will shrink them. If you want them horizontal instead:

Code: Select all

screen navigation:

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

    # The various buttons.
    hbox: # changed from vbox to hbox for horizontal
        # ...

[SinnyROM]

Glad to hear. If you need more help converting design to code, don't hesitate to ask. Good luck with your programming!

[sharikah]

Thanks I will!!!

Glad to hear. If you need more help converting design to code, don't hesitate to ask. Good luck with your programming!