Free Portrait mode GUI template

[Imperf3kt]

Tiny update.
The planned update to the history screen won't work how I wanted (it can be implemented, but must be manually added, so can't be made part of the screen)
See this post by strayerror for more details.

I transferred over the edits I made to the settings screen from my current WIP (which uses this GUI) and increased the size of sliders to account for fingers being bigger than a mouse cursor. I also changed the slider thumb to a circle, for the same reason.
Due to this, accuracy in setting a specific value has been decreased a little bit, but it never really mattered much anyway. I'm not sure if I like the change or not, it wasn't really necessary.

Additionally, I rolled back one change, and have music, SFX and voice volume sliders showing by default. I had previously removed them as they were not necessary, but in the months since, I've found a few edge case needs for them, so feel it best to let the developer decide if they should be removed or not (remember, the device has its own volume control, so in most cases, they really are unnecessary)

Here's how the changes look


Instead of a point release, I'll just attach the changes to this post.

Replace the settings screen with this

Code: Select all

## 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

## This is necessary for the vibration toggle to function
default persistent.allow_vibration = True


screen preferences():
    
    $ tooltip = GetTooltip()

    tag menu

    use game_menu(_("Settings"), scroll="viewport"):
        
        vbox:
            ysize 90

            if tooltip:
                text "[tooltip]"
            else:
                vbox:
                    if renpy.mobile:
                        text "Press and hold an option for a short description of its function"
                    else:
                        text "Hover over an option for a short description of its function"

        vbox:
            if renpy.variant("pc"):
                vbox:
                    style_prefix "radio"
                    label _("Display")
                    textbutton _("Window") action Preference("display", "window") tooltip "Display the game in a window"
                    textbutton _("Fullscreen") action Preference("display", "fullscreen") tooltip "Display the game in fullscreen"
                    
            if renpy.variant("mobile"):
                vbox:
                    style_prefix "radio"
                    label _("Vibration")
                    textbutton _("ON") action SetField(persistent, "allow_vibration", True) tooltip "Enable vibration"
                    textbutton _("OFF") action SetField(persistent, "allow_vibration", False) tooltip "Disable vibration"

#            vbox:
#                style_prefix "radio"
#                label _("Rollback Side")
#                if renpy.variant("pc"):
#                    textbutton _("Disabled") action Preference("rollback side", "disable") tooltip "Rollback is only accessible through the scroll wheel and back button"
#                else:
#                    textbutton _("Disabled") action Preference("rollback side", "disable") tooltip "Rollback is only accessible via the back button"
#                textbutton _("Left") action Preference("rollback side", "left") tooltip "Touch the left side of the screen to rollback"
#                textbutton _("Right") action Preference("rollback side", "right") tooltip "Touch the right side of the screen to rollback"

#            vbox:
#                style_prefix "check"
#                label _("Skip")
#                textbutton _("Unseen Text") action Preference("skip", "toggle") tooltip "Allow skipping of unseen text"
#                textbutton _("After Choices") action Preference("after choices", "toggle") tooltip "Continue skipping after choices"
#                textbutton _("Transitions") action InvertSelected(Preference("transitions", "toggle")) tooltip "Skip through scene transitions"


            null height (4 * gui.pref_spacing)

            hbox:
                style_prefix "slider"
                box_wrap True

                vbox:

                    label _("Text Speed")

                    bar value Preference("text speed") tooltip "Adjust the speed text appears on screen"

                    label _("Auto-Forward Time")

                    bar value Preference("auto-forward time") tooltip "Adjust wait time before automatically advancing the game"
                
                vbox:

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

                        hbox:
                            bar value Preference("music volume") tooltip "Change the music volume"

                    if config.has_sound:

                        label _("Sound Volume")

                        hbox:
                            bar value Preference("sound volume") tooltip "Change the SFX volume"

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


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

                        hbox:
                            bar value Preference("voice volume") tooltip "Change the volume of speech in the game"

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

                    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"
                            tooltip "Stop all audio"
                
                


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 2

style pref_label_text:
    yalign 1.0

style pref_vbox:
    xsize 225

style radio_vbox:
    spacing gui.pref_button_spacing

style radio_button:
    properties gui.button_properties("radio_button")
    foreground "gui/button/check_[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 640

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

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

style slider_vbox:
    xsize 450

And here's the images (check the name and place them in gui/slider)
horizontal_idle_thumb.png


horizontal_hover_thumb.png


In gui.rpy, replace lines 322 to 324 with the following

Code: Select all

define gui.bar_size = 45
define gui.scrollbar_size = 25
define gui.slider_size = 45

Note that this hasn't been extensively checked. I'll make sure there's no conflicts and all related parts (like the test button, if used) are properly aligned, before the next release, which might be version 2.0 as I plan it to be a large update making some pretty major changes.

[Zelan]

Tiny note - you would want to use "its" instead of "it's" on the setting screen (the apostrophe makes it mean "it is").

[Imperf3kt]

Thanks, I fixed the grammatical issue
I had always thought the apostrophe signified possession (the function belonging to the button), but after studying the correct use, I see my mistake.

After more careful inspection, I see that I have once again messed up.
I inadvertently left out the rollback and skipping settings. I'll fix that in the next update.

[Imperf3kt]

I've begun switching out the textbuttons for imagebuttons (made using text)

On an Android device


On a PC

This has slightly complicated the creation of buttons, but I will ensure its use is fully explained so even a beginner can understand it.

The preferences screen code section has grown significantly.

Code: Select all

screen preferences():
    
    $ tooltip = GetTooltip()

    tag menu

    use game_menu(_("Settings"), scroll="viewport"):
        
        vbox:
            ysize 90

            if tooltip:
                text "[tooltip]"
            else:
                vbox:
                    if renpy.mobile:
                        text "Press and hold an option for a short description of its function"
                    else:
                        text "Hover over an option for a short description of its function"

        vbox:
            if renpy.variant("pc"):
                vbox:
                    style_prefix "radio"
                    label _("Display")
                    hbox:
                        
                        imagebutton:
                            alt "window"
                            auto "gui/button/settings_%s.png"
                            hover_foreground Text("{u}Window{/u}", xalign=0.5, yalign=0.5)
                            idle_foreground Text("Window", xalign=0.5, yalign=0.5)
                            selected_idle "gui/button/settings_selected_idle.png"
                            selected_hover "gui/button/settings_selected_hover.png"
                            action Preference("display", "any window")
                            tooltip "Display the game in a window"
                        
                        imagebutton:
                            alt "fullscreen"
                            auto "gui/button/settings_%s.png"
                            hover_foreground Text("{u}Fullscreen{/u}", xalign=0.5, yalign=0.5)
                            idle_foreground Text("Fullscreen", xalign=0.5, yalign=0.5)
                            selected_idle "gui/button/settings_selected_idle.png"
                            selected_hover "gui/button/settings_selected_hover.png"
                            action Preference("display", "fullscreen")
                            tooltip "Display the game in fullscreen"
                            
            if renpy.variant("mobile"):
                vbox:
                    style_prefix "radio"
                    label _("Vibration")
                    
                    hbox:
                    
                        imagebutton:
                            alt "on"
                            auto "gui/button/settings_%s.png"
                            hover_foreground Text("{u}ON{/u}", xalign=0.5, yalign=0.5)
                            idle_foreground Text("ON", xalign=0.5, yalign=0.5)
                            selected_idle "gui/button/settings_selected_idle.png"
                            selected_hover "gui/button/settings_selected_hover.png"
                            action SetField(persistent, "allow_vibration", True)
                            tooltip "Enable vibration"
                        
                        imagebutton:
                            alt "off"
                            auto "gui/button/settings_%s.png"
                            hover_foreground Text("{u}OFF{/u}", xalign=0.5, yalign=0.5)
                            idle_foreground Text("OFF", xalign=0.5, yalign=0.5)
                            selected_idle "gui/button/settings_selected_idle.png"
                            selected_hover "gui/button/settings_selected_hover.png"
                            action SetField(persistent, "allow_vibration", False)
                            tooltip "disable vibration"


            vbox:
                style_prefix "radio"
                label _("Rollback Side")
                hbox:
                    if renpy.variant("pc"):
                        imagebutton:
                            alt "disabled"
                            auto "gui/button/settings_%s.png"
                            hover_foreground Text("{u}Disabled{/u}", xalign=0.5, yalign=0.5)
                            idle_foreground Text("Disabled", xalign=0.5, yalign=0.5)
                            selected_idle "gui/button/settings_selected_idle.png"
                            selected_hover "gui/button/settings_selected_hover.png"
                            action Preference("rollback side", "disable")
                            tooltip "Rollback is only accessible through the scroll wheel and back button"
                    else:
                        imagebutton:
                            alt "disabled"
                            auto "gui/button/settings_%s.png"
                            hover_foreground Text("{u}Disabled{/u}", xalign=0.5, yalign=0.5)
                            idle_foreground Text("Disabled", xalign=0.5, yalign=0.5)
                            selected_idle "gui/button/settings_selected_idle.png"
                            selected_hover "gui/button/settings_selected_hover.png"
                            action Preference("rollback side", "disable")
                            tooltip "Rollback is only accessible via the back button"
                    
                    imagebutton:
                        alt "left"
                        auto "gui/button/settings_%s.png"
                        hover_foreground Text("{u}Left{/u}", xalign=0.5, yalign=0.5)
                        idle_foreground Text("Left", xalign=0.5, yalign=0.5)
                        selected_idle "gui/button/settings_selected_idle.png"
                        selected_hover "gui/button/settings_selected_hover.png"
                        action Preference("rollback side", "left")
                        tooltip "Touch the left side of the screen to rollback"
                    
                    imagebutton:
                        alt "right"
                        auto "gui/button/settings_%s.png"
                        hover_foreground Text("{u}Right{/u}", xalign=0.5, yalign=0.5)
                        idle_foreground Text("Right", xalign=0.5, yalign=0.5)
                        selected_idle "gui/button/settings_selected_idle.png"
                        selected_hover "gui/button/settings_selected_hover.png"
                        action Preference("rollback side", "right")
                        tooltip "Touch the right side of the screen to rollback"
                        
            vbox:
                style_prefix "check"
                label _("Skip")
                hbox:
                    imagebutton:
                        alt "skip all text"
                        auto "gui/button/settings_%s.png"
                        hover_foreground Text("{u}All text{/u}", xalign=0.5, yalign=0.5)
                        idle_foreground Text("All text", xalign=0.5, yalign=0.5)
                        selected_idle "gui/button/settings_selected_idle.png"
                        selected_hover "gui/button/settings_selected_hover.png"
                        action Preference("skip", "all")
                        tooltip "Skip all text"
                        
                    imagebutton:
                        alt "skip only previously read text"
                        auto "gui/button/settings_%s.png"
                        hover_foreground Text("{u}Seen text{/u}", xalign=0.5, yalign=0.5)
                        idle_foreground Text("Seen text", xalign=0.5, yalign=0.5)
                        selected_idle "gui/button/settings_selected_idle.png"
                        selected_hover "gui/button/settings_selected_hover.png"
                        action Preference("skip", "seen")
                        tooltip "Skip only previously read text"
                    
                label _("After Choices")
                
                hbox:
                    imagebutton:
                        alt "continue skipping after making choices"
                        auto "gui/button/settings_%s.png"
                        hover_foreground Text("{u}Keep skipping{/u}", xalign=0.5, yalign=0.5)
                        idle_foreground Text("Keep skipping", xalign=0.5, yalign=0.5)
                        selected_idle "gui/button/settings_selected_idle.png"
                        selected_hover "gui/button/settings_selected_hover.png"
                        action Preference("after choices", "skip")
                        tooltip "Continue skipping after making choices"
                    
                    imagebutton:
                        alt "stop skipping after making choices"
                        auto "gui/button/settings_%s.png"
                        hover_foreground Text("{u}Stop skipping{/u}", xalign=0.5, yalign=0.5)
                        idle_foreground Text("Stop skipping", xalign=0.5, yalign=0.5)
                        selected_idle "gui/button/settings_selected_idle.png"
                        selected_hover "gui/button/settings_selected_hover.png"
                        action Preference("after choices", "stop")
                        tooltip "Stop skipping after making choices"
                    
                    imagebutton:
                        alt "skip through scene transitions"
                        auto "gui/button/settings_%s.png"
                        hover_foreground Text("{u}Transitions{/u}", xalign=0.5, yalign=0.5)
                        idle_foreground Text("Transitions", xalign=0.5, yalign=0.5)
                        selected_idle "gui/button/settings_selected_idle.png"
                        selected_hover "gui/button/settings_selected_hover.png"
                        action InvertSelected(Preference("transitions", "toggle"))
                        tooltip "Skip through scene transitions"


            null height (4 * gui.pref_spacing)

            hbox:
                style_prefix "slider"
                box_wrap True

                vbox:

                    label _("Text Speed")

                    bar value Preference("text speed") tooltip "Adjust the speed text appears on screen"

                    label _("Auto-Forward Time")

                    bar value Preference("auto-forward time") tooltip "Adjust wait time before automatically advancing the game"
                
                vbox:

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

                        hbox:
                            bar value Preference("music volume") tooltip "Change the music volume"

                    if config.has_sound:

                        label _("Sound Volume")

                        hbox:
                            bar value Preference("sound volume") tooltip "Change the SFX volume"

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


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

                        hbox:
                            bar value Preference("voice volume") tooltip "Change the volume of speech in the game"

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

                    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"
                            tooltip "Stop all audio"
                
                


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 2

style pref_label_text:
    yalign 1.0

style pref_vbox:
    xsize 225

style radio_vbox:
    spacing gui.pref_button_spacing

style radio_button:
    properties gui.button_properties("radio_button")
    foreground "gui/button/check_[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 600

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

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

style slider_vbox:
    xsize 450
    

The images are 200px x 100px and go in gui/button


I think this suits well enough for a template. I will include this in version 2.0 when ready unless there are concerns.
Still a few minor tweaks to do (still need to check audio "test" buttons), but we're making progress


----------------------------------------------

Latest update Android file (uninstall previous Google Play version first)
https://mega.nz/#!xVFCEKaJ!AHFQ0mkrE1O_ ... ChjcFXnN5o
This update fixes translation of most menu text and buttons, and switches a few textbuttons out for imagebuttons and adds a new button to toggle between menu styles.

[Imperf3kt]

I'm working towards a v2.0 release and decided to release this interim release for feedback before I complete the rework.
This will probably be my last update until I finish v2.0

So, without further ado, I present to you several hours of effort for the biggest update yet - v1.20

This update makes some rather dramatic changes to the GUI.
I am working toward a configurable GUI, so in an effort to achieve that, I have created a file called "config.rpy". This file contains (or will contain when I am finished) everything necessary to adjust the entire GUI by simply changing a variable between True and False.

The most noticeable change is the switch from pure textbuttons, to text-based imagebuttons. These work exactly the same as textbuttons, but look better and are easier to press on a touchscreen device. The button image can be changed by simply editing four files found in gui/button

The main menu has two styles which can be used. Switch between them via the switch icon at the top left of the screen. This icon is only present while config.developer is True, so once you build a distribution, it will not show.


You'll also notice a new button "Configure GUI", This allows you to see what config settings you have, so you can edit config.rpy appropriately. It also contains instructions for finalising the GUI before building distribution.


The in-game menu also has two new developer-only buttons. The top one adjusts the "close" button style for the menu, the bottom one switches the layout.
This screen is still animated on showing/hiding, and this is handled automatically when changing layouts.


The settings screen has received the previous edits and has additionally been split into system settings and audio separate. This was done to remove the necessity to scroll the settings menu, which on an Android device could cause a player to accidentally adjust settings unintentionally.
This feature is still a work in progress.


In addition to the above changes, I've gone through and tried to ensure all menu text is translation compatible by adding _() where necessary.
Lastly, some minor code tidying was performed.

There is still a lot of work before I consider "v2.0" ready.

Edit:
Small update to screen configs, this will considerably reduce the amount of text we need to type as the GUI grows.

Code: Select all

screen configs():
    tag menu
    
    ## Make the background black
    add "black"
    
    ## Generate the viewport to hold everything
    side "c":
        area (20, 20, 720, 1280)

        viewport id "configuration_viewport":
            draggable True
            scrollbars None
            
            ## RTFM
            vbox:
                text ("""This GUI is configurable while config.developer is True
Play through the demo and adjust the GUI with the provided tools, then check this screen.
Edit config.rpy to match the values here, to use the GUI as it appears.
Delete persistent data before building a distribution.""")
                
                null height 5
                ## Used as a content divider
                bar ysize 5 xsize 680
                
                ## The values
                text "persistent.men_style"
                text "%s" %persistent.men_style
                
                text "persistent.navigation_return_button_style"
                text "%s" %persistent.navigation_return_button_style

                
                text "persistent.navigation_menu_content_style"
                text "%s" %persistent.navigation_menu_content_style
                    
                ## divide (and conquer)
                null height 50
                
                ## We've got to get back out of this screen somehow, right?
                textbutton _("Return") action Return()

[liagel]

Thank you for this amazing work Imperf3kt!
Good luck with v2.0

[DarkChibiShadow]

Oooh! This seems awesome! Gotta check this out sometime and see if I wanna make a game in portrait style, ooo...

[renardjap]

Looks very impressive ! It's a very nice job.

I have two questions:
Is it possible to replace the "quick save, back, skipe, etc." menu of the top edge by a single menu imagebutton ? I Prefer to put all this options in a pop'up you access with an imagebutton to free more screen space.

I think the most important feature is to add a "responsive" screen. I mean, the screen size of the game should adapt to the screen phone. When I launch the game on my phone, I have some black borders to the top and the bottom of my screen phone (samsung note . Do you think it's possible to create a code to let remove the black borders ?

[Imperf3kt]

Looks very impressive ! It's a very nice job.

I have two questions:
Is it possible to replace the "quick save, back, skipe, etc." menu of the top edge by a single menu imagebutton ? I Prefer to put all this options in a pop'up you access with an imagebutton to free more screen space.

I think the most important feature is to add a "responsive" screen. I mean, the screen size of the game should adapt to the screen phone. When I launch the game on my phone, I have some black borders to the top and the bottom of my screen phone (samsung note . Do you think it's possible to create a code to let remove the black borders ?

Hey thanks for the feedback.

I've been a bit busy the last couple of months and haven't had a lot of time to devote to this, but its definitely still a thing I'm working on.

As to your questions, yes replacing the quick menu with a single button that opens a menu is possible. Not something I'd thought of, but easily implemented, I'll see what I can add and maybe release another 1.x version in a few days (not a great deal of new stuff since the last though)

As to the dynamic resolution, it's probably outside my capabilities but something that was recently brought to my attention.
I'm curious to see what I can do about it though, but not sure I can do much without delving into how renpy scales the resolution further.

[tiya_nofurita]

Interesting, maybe someday I'll make use of it

[Imperf3kt]

Been rather busy and haven't worked on this in ages.
Anyway, had a little free time over the last couple of days and used some of it to make a couple of edits.

I've added a crude image gallery (reused code I made as an example for somebody else recently), it needs a fair amount of work to finish it, but the basic thing works
I needed a new button for this, and decided instead of adjusting the menu (which is starting to get rather complex - exactly the opposite of what I intended) I would make a new screen and replace the "about button" with an "extras" menu button.

Currently, this looks like the following.
https://i.imgur.com/A787qr5.png
https://i.imgur.com/C8OIwCo.png
Effectively, it simply replaces the buttons in the main menu, with buttons that take the player to extra content. The rest of the screen is still part of the main menu, so uses the main menus background and audio, etc.
This is achieved via local variables, but I could have done it other ways.

I've noticed a few things that could do with a tidy up, I've got extra code I don't need here and there, so I'll work on that when I can next.

I know I keep saying this, but I'll be working on a 1080x1920 version next and some of the other previously mentioned edits.

If anybody would like the code as-is, just message me and I'll send you along a zipped file, but I'm not ready to release it as an update just yet.

[Imperf3kt]

Notice
There is an issue with the new quick menu style that allows the quick menu to stay on the screen behind the dialogue window.
I have patched a fix for this but it isn't publicly available yet. The fix removes the quick menu from the navigation and puts it in its own screen like it should have in the first place.
I'll add it to the next update which won't be too far out. A major change in the next update will be (finally) updating the GUI to 1080x1920. This has introduced a ton of work as I have to update every GUI asset and every screen.
______________________________________________________________________________________________________

Okay, I haven't worked on this in a very long time due to some health issues and recent longer hours at my day job (50 hours+ a week really sucks)
I thought it about time to devote a little time to updating this and have made some extensive additions, tidying up and general extra work.
Since I'm still not ready for v2.0 I'm going to call this v1.25
You can find it here:
https://mega.nz/file/1F82hZ4Y#Uxqor1e6h ... sN0fKK3Kro

First, I'd like to address some comments.

I think the most important feature is to add a "responsive" screen. I mean, the screen size of the game should adapt to the screen phone. When I launch the game on my phone, I have some black borders to the top and the bottom of my screen phone (samsung note . Do you think it's possible to create a code to let remove the black borders ?

I tried to remedy this issue, but it is something outside my capabilities. I was unable to make a work-around.
According to PyTom at least, this is intended behaviour for the time being and cannot be easily modified.

Is it possible to replace the "quick save, back, skip, etc." menu of the top edge by a single menu imagebutton ? I Prefer to put all this options in a pop'up you access with an imagebutton to free more screen space.

It took me a lot longer than expected but I have made some changes that accommodate this. I'm not happy with how I've done it, but it -works-, and that's the main thing. I may return to this in future and adjust it, but for now I've added a button that will place the quick menu in the navigation screen and show/hide the necessary bits. This button is on the top right of the screen and looks like a typical "hamburger" style button. This button will toggle the navigation menu as it leverages the navigation screen for the new quick menu style.

To change between quick menu styles, I added a third button that shows while the in-game navigation menu is shown. This button will toggle the styles, but if you switch back to the Hamburger style quick menu, you'll have to use the "close" button as toggling the persistent variable won't make the hamburger reappear until an interaction takes place.
Not ideal, but it only shows during development, so I'm not going to spend too much time on it for now.


As mentioned in my last post, an Image Gallery has been implemented. Its still a work in progress and far from finished.

The accent colour has been changed to dark grey because the blue it was previously set to was a bit too hard to distinguish from the other blue screens (Although these are intended to be changed by the user, it makes it hard to test while developing)

The settings screen has received the bulk of the updating. While still a work in progress, it is finished enough to distribute.
I am reasonably happy with how this is turning out.

Text settings have been separated from audio and system settings.

In audio settings, I changed the sliders from the odd semi-translucent circles I was using, to opaque squares with a black outline.I kept them square so it is easier for use with a touchscreen.
In addition I added some sound sample buttons so players can test volume changes as they wish. These are automatic and only show if the related audio channel is in use. By default, all three channels (music, sfx, voice) are True. This is still in options.rpy and adjusted the same as any other game.
I also added some text to the screen that will tell players what percentage the volume is set to, thanks to some help by SypherZent and RicharDann.

In the Text settings you can find text speed and auto forward time sliders, also with numbers to let players know exactly how fast or slow these are set.

I have started work on adding wait for voice and other settings, but this is still experimental - I am relying on the documentation for these settings and have not yet learnt how to use them properly.

System settings has not changed.

Other changes include some code tidying and a bit of experimental additions, these are clearly marked.
Some comments have been added to the code, but there's still a lot to do.

[Imperf3kt]

There was an issue with the new quick menu style that allowed the quick menu to stay on the screen behind the dialogue window in an unintended way. I've fixed the quick menu styles properly now (I hope).
The fix removes the quick menu from the navigation and puts it in its own screen like it should have in the first place. It also mimics one of the navigation styles and appears at the top of the screen among a few other minor fixes / adjustments.

A new button has been added to the screen below the configure GUI button for determining whether to place the quick menu default style to the top of the screen, or align to the top of the say window.

The GUI is now 1080x1920. (Yay) However, this has introduced a ton of work as I have to update every GUI asset and every screen, every piece of positioning information, every gui asset, pretty much the entire thing. Much of the GUI looks a bit out of place. Experienced users should be able to use it as is though until I finish editing everything to bring it up to date.

I haven't worked out why yet, but the quick menu style that aligns the quick menu to the bottom of the screen, while switching between the side and bottom, will appear to sit in the middle of the screen. This fixes itself as soon as you do anything and will not happen outside config.developer, so isn't anything to be concerned with.

What it should / does look like after adjusting: https://i.imgur.com/oG04Fju.png

The main menu secondary style isn't working as intended, the overlay is not filling the space it should be, possibly a frame issue.
I should have this fixed before the next release.
https://i.imgur.com/E2XcMKK.png


The updated v1.26 can be found here, note that this version makes some drastic changes and is not ready for use by the average individual. I won't add this to the opening post.
https://mega.nz/file/9RdxCYpY#kV4KmAy_7 ... pSO91NWrhc

[Imperf3kt]

Fixed the issues outlined above. (Except the unusual quick menu style alignment, but this can still be safely ignored)
Enjoy v1.27
https://mega.nz/file/AM8yQawC#7Y7HjJS-2 ... MD8PmH01Ck


Additionally styled the calibration screen if player has a gamepad connected (Since the default screen was almost impossible to read on the target device)

I'm going to have to write a guide on how to use this GUI, its growing much more complex than I anticipated.

[Imperf3kt]

v1.28 has been tested to run on Ren'Py 7.4.0.1167

The following changes have been made to the GUI:

• Added a changelog.

• Added in_nvl variable (Line 260) for checking if in NVL mode and not show the persistent.quick_menu_align toggle button.

• Adjusted game_menu_label text size and centered it.

• Changed return button design in game_menu to match rest of GUI.

• Updated History screen to fit the new 1080x1920 resolution.

• Added screen nav_content for displaying main menu buttons on screens other than the main menu.

https://mega.nz/file/sEsiCSDT#TT4hkRh90 ... 9peldLTNmc

Load/Save screens need work after the resolution upgrade.