Page 1 of 3
Free Portrait mode GUI template
Posted: Wed Jul 10, 2019 7:28 am
by Imperf3kt
This project has been strewn about the forum in various forms, and its rather often requested so I thought it was time to properly present it.
So I hereby present to you, the completely free (no strings attached) Ren'Py Portrait Mode GUI (Its really free!). No attribution required.
Download it here:
Current version
v1.31 - Optimisation update
Old versions
v1.30 - Screens rework/bug fixes
v1.29 - imagebutton rework
v1.28 - Changelog addition
v1.27 - Resolution upgrade
v1.25 - Quick menu upgrade
v1.20
v1.10
v1.03
v1.02
v1.01
v1.0
The file is a 7zip compressed archive.
Simply extract it into your projects folder and edit it like your regular projects. It is designed for use with an Android smartphone, so I cannot guarantee suitability/compatibility for iOS devices, although it should work fine.
Resolution is 720x1280
Included with the GUI is a short sample of dialogue in both ADV mode and NVL mode to give you an idea of how a game will look and feel. This also serves as an example of how to structure your game and use the vibration function.
The assets used for this sample are all free to use and redistribute or edit/modify, no attribution required.
Edgy-tan is freely provided by Uncle Mugen. Thanks Uncle Mugen!
The Ren'Py Logo belongs to Tom "PyTom" Rothamel.
SAMPLES



Note: all samples taken from version 1.10
There is also a tooltip section in the settings menu that displays information when a player holds their finger on a button.
Important:
You may wish to review the following lines in options.txt
Code: Select all
## line 135 - 145
## If true, hardware video playback will be used on mobile platforms.
## This is faster, but only some formats are supported and only fullscreen video is available.
## If false, software playback will be used, but it may be too slow to be useful.
define config.hw_video = True
## If true, the mobile app will save its state when it loses focus.
## The state is saved in a way that allows it to be automatically loaded
## (and the game to resume its place) when the app starts again.
define config.save_on_mobile_background = False
Additionally, you should probably change this line to avoid potential conflicts with other games using this GUI
Code: Select all
## line 162
define config.save_directory = "AndroidGUI-1536233790"
Re: Free Portrait mode GUI template
Posted: Wed Jul 10, 2019 10:39 am
by Scribbles
oh this is really handy! Thank you for making this
Re: Free Portrait mode GUI template
Posted: Wed Jul 10, 2019 6:12 pm
by Imperf3kt
Thanks for the kind words.
I've noticed a couple of things that require attention.
Android icon is missing
Size of sliders in preference menu are mismatched compared to slider thumb
The character name is slightly cut off in the history screen
NVL mode requires attention, especially with regards to the quick menu, notify screen and skip indicator
define config.save_on_mobile_background should be True by default
I'll update everything later today (currently 8AM)
Re: Free Portrait mode GUI template
Posted: Thu Jul 11, 2019 7:10 am
by Imperf3kt
The GUI has been updated.
Changes include:
- Reduced file size from 1.18MB to 1.12MB
- Minor changes to ensure iOS devices should behave the same as Android
(I am unable to test this)
- Added Android Icon and Android splashscreen
- Fixed slider size discrepancy
- Set
define config.save_on_mobile_background to True by default
- Defaulted music, sfx and voice volumes to 100%
(Volume control is not necessary as the device controls the volume level. Allowing Players to adjust volumes separately is still possible by adding the appropriate sliders from a default GUI)
- Added gesture control, While in-game, swiping from left to right will perform a rollback, while swiping from right to left, will perform a roll forward.
- Added various config options (see options.txt)
Still to fix:
The character name is slightly cut off in the history screen
NVL mode requires attention, especially with regards to the quick menu, notify screen and skip indicator
v1.01 can be downloaded
here
Re: Free Portrait mode GUI template
Posted: Thu Jul 11, 2019 1:32 pm
by trajano
I kinda like the "quick bar" on top that you had. I think that'd be better plus if it gets covered by the "notch" it isn't as much issue. I'm thinking of making the same adjustment on my template
Re: Free Portrait mode GUI template
Posted: Thu Jul 11, 2019 3:43 pm
by Imperf3kt
It's still there, it's just limited to the Android version.
In the screens.rpy file you'll see the quick menu has two sections, one is given a "variant" of 'touch', that's the one that looks like it does in the screenshots.
If you wish to copy it for a PC version, simply delete the first quick_menu screen and remove the variant line from the second.
I've just now noticed that I've not provided access to auto forward mode.
I'll look into this.
Im also planning to add different versions, such an an imagebutton version so people need only swap in their own graphics.
Re: Free Portrait mode GUI template
Posted: Sun Jul 14, 2019 2:08 am
by trajano
Curious, how'd you get the save games to be in "portrait" It looks stretched when I do it.
UPDATE: found it
## The width and height of thumbnails used by the save slots.
define config.thumbnail_width = 99
define config.thumbnail_height = 176
Re: Free Portrait mode GUI template
Posted: Sun Jul 14, 2019 2:30 am
by xxmissarichanxx
oh hey! this is pretty neat! i was thinking of doing something like this myself. thank you so much for sharing! Cx
Re: Free Portrait mode GUI template
Posted: Sun Jul 14, 2019 8:18 am
by ComputerArt.Club
Wow! This is beautiful! Always a fan of your work and contributions! Well done!
Re: Free Portrait mode GUI template
Posted: Thu Jul 18, 2019 8:43 am
by Imperf3kt
A button for auto mode has been added to the quick menu with minimal change to the layout.
Additionally, I removed the "PC" version of the quick menu for simplicity.
If you happened to like it, its still in the files, simply uncomment the related lines and change line 193 of gui.rpy to
define gui.quick_button_text_size = 20
You can also choose where to align the quick menu by simply uncommenting line 277 of screens.rpy - if commented, the quick menu aligns to the top of the screen, if uncommented, it aligns with the top of the textbox.
The cut off name in the history screen has been resolved. This was due to an oversight on my part and poor alignment.
Additional fixes include minor padding adjustments for a cleaner overall look.
NVL mode has been overhauled.
I won't list the changes, but they were many. NVL mode is now much better looking.
There have also been general fixes to the positioning of notifiers (skip, notify)
Many more
fixes and updates are planned.
This brings the gui to v1.02 and takes care of all known bugs and issues.
Additionally, filesize has been further reduced to 1.10MB - a last minute edit took us back to 1.12MB
Download:
https://mega.nz/#!gU91wSCI!iSkFvRBN3uPi ... 9B0v_V1A54
ComputerArt.Club wrote: ↑Sun Jul 14, 2019 8:18 am
Wow! This is beautiful! Always a fan of your work and contributions! Well done!
Thanks!
To be honest, I enjoy fiddling with the gui more than I like actually making games with Ren'Py

Re: Free Portrait mode GUI template
Posted: Fri Jul 19, 2019 3:46 am
by Imperf3kt
There's gonna be a few updates for this rolled out as I complete them, so I apologise for the frequency of posts. They should slow down soon.
If you have any features you think I should add or modify, feel free to make a request, I'll consider all reasonable requests.
I added a help menu. Keyboard and mouse were left in as Android devices support keyboards and mice, even if seldom used.
(note to self, remove self-voicing from keyboard controls as the feature is currently unsupported on Android)
The "Touch" menu only shows when on a device with touch, based on
https://www.renpy.org/doc/html/screens. ... n-variants
Note that not all touch enabled devices appear to work with this (My laptop, for example), but all Android devices should work with this.
Download it here:
v1.03
Re: Free Portrait mode GUI template
Posted: Tue Jul 23, 2019 6:32 am
by Imperf3kt
Found a bug in the previous update where the "keyboard" and "mouse" screens were not accessible because I disrespected how screens work.
Basically, I changed the "device" screen variable based on the output of renpy.variant - within a screen, causing the game to constantly assign that variable, so clicking on a button worked but then the screen would redraw itself, immediately changing the variable back to "touch", no matter what a player had touched/clicked.
Also amended the keyboard entry to remove functions not currently available to Android, when on an Android device.
I have added a second layout style loosely based on another Ren'Py Android game I recently encountered.
To use this style, simply comment out / uncomment the appropriate lines in screens.rpy
Comment out lines 329-353, 415-448, uncomment lines 355-396, 451-495


The game menu is animated to slide in and out from the left.
The "close" button can be replaced with a typical ≡ in the top-right corner of the frame by commenting out lines 394-396 and uncommenting lines 402-406
To use the original style, comment out lines 355-396, 451-495, uncomment lines 329-353, 415-448
Download it here:
v1.10
Or check it out on Google Play!
https://play.google.com/store/apps/deta ... mp.and.gui
Re: Free Portrait mode GUI template
Posted: Wed Mar 18, 2020 1:46 pm
by epistellar
Just wanted to say that this is a godsend!
I've been looking for a mobile-first template for a next game and this is an incredible help. Thanks so much!
Re: Free Portrait mode GUI template
Posted: Thu Mar 19, 2020 7:30 pm
by Imperf3kt
epistellar wrote: ↑Wed Mar 18, 2020 1:46 pm
Just wanted to say that this is a godsend!
I've been looking for a mobile-first template for a next game and this is an incredible help. Thanks so much!
Glad to see it helped
I have a few planned updates eventually coming that should make a few improvements.
When, is unknown at this time as I'm currently massively overworked
Off the top of my head, I wanted to increase the resolution to 1080*1920 (in addition to the 720*1280 option) and a few general tidy ups of the code, including decluttering the two styles available. They are a bit of a mess right now, or at least, not as beginner friendly as this was intended to be.
Also planned is an upgrade to the history screen that allows menu choices to be displayed, so a player can see how they got where they are.
There will also be a large overhaul of the settings screen, I've made some good updates to it that make it look less out of place and fit better with the visual aesthetic.
Following that, I'll add some optional extra screens, such as an image gallery, sound library, and other generally common Visual Novel stuff.
Eventually I want this project to be fully configurable by a simple WYSIWYG interface, but that's a different project.
Suggestions for improvements are welcomed.
Re: Free Portrait mode GUI template
Posted: Fri Apr 10, 2020 3:54 pm
by epistellar
Oof, apologies for the delay, but your planned updates sound fantastic! Thanks so much for taking the time to write them out. I'm in the midst of outlining this next project, actually, so I'm hoping to jump into your framework in a couple of months. In the meantime, if I come across any feedback to offer after a bit of casual messing around, I'll be sure to let you know!
I've downloaded the app for my android phone and the test text plays so smoothly! Just lovely, really well done.