Free Portrait mode GUI template

This section is for people to post assets that people can use in their games. Everything here should have a creative commons or other open license, or be in the public domain.
Post Reply
Message
Author
User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2681
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Free Portrait mode GUI template

#1 Post by Imperf3kt » Wed Jul 10, 2019 7:28 am

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.10

Old versions

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

Note: all samples taken from "current" version.

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"
Last edited by Imperf3kt on Tue Jul 23, 2019 6:35 am, edited 7 times in total.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

User avatar
Scribbles
Miko-Class Veteran
Posts: 620
Joined: Wed Sep 21, 2016 4:15 pm
Completed: Pinewood Island
Projects: As We Know It, In Blood
Organization: Jaime Scribbles Games
Deviantart: breakfastdoodles
itch: scribbles
Location: Ohio
Contact:

Re: Free Portrait mode GUI template

#2 Post by Scribbles » Wed Jul 10, 2019 10:39 am

oh this is really handy! Thank you for making this
Image - Image -Image

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2681
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Free Portrait mode GUI template

#3 Post by Imperf3kt » Wed Jul 10, 2019 6:12 pm

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)
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2681
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Free Portrait mode GUI template

#4 Post by Imperf3kt » Thu Jul 11, 2019 7:10 am

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
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

trajano
Regular
Posts: 60
Joined: Sun Jun 16, 2019 7:59 pm
Github: trajano
Contact:

Re: Free Portrait mode GUI template

#5 Post by trajano » Thu Jul 11, 2019 1:32 pm

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

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2681
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Free Portrait mode GUI template

#6 Post by Imperf3kt » Thu Jul 11, 2019 3:43 pm

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.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

trajano
Regular
Posts: 60
Joined: Sun Jun 16, 2019 7:59 pm
Github: trajano
Contact:

Re: Free Portrait mode GUI template

#7 Post by trajano » Sun Jul 14, 2019 2:08 am

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
Last edited by trajano on Sun Jul 14, 2019 3:40 am, edited 1 time in total.

User avatar
xxmissarichanxx
Regular
Posts: 83
Joined: Thu Jul 11, 2013 1:37 am
Completed: Froot Basket Valentine, Devious
Projects: After-Party Chemistry, The Salaryman
Tumblr: xxmissarichanxx
Deviantart: xxmissarichanxx
itch: xxmissarichanxx
Location: US
Contact:

Re: Free Portrait mode GUI template

#8 Post by xxmissarichanxx » Sun Jul 14, 2019 2:30 am

oh hey! this is pretty neat! i was thinking of doing something like this myself. thank you so much for sharing! Cx

User avatar
ComputerArt.Club
Veteran
Posts: 406
Joined: Mon May 22, 2017 8:12 am
Completed: Famous Fables, BoPoMoFo: Learn Chinese, Santa's workshop, Cat's Bath, Computer Art Club
Location: Taiwan
Contact:

Re: Free Portrait mode GUI template

#9 Post by ComputerArt.Club » Sun Jul 14, 2019 8:18 am

Wow! This is beautiful! Always a fan of your work and contributions! Well done!

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2681
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Free Portrait mode GUI template

#10 Post by Imperf3kt » Thu Jul 18, 2019 8:43 am

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 :oops:
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2681
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Free Portrait mode GUI template

#11 Post by Imperf3kt » Fri Jul 19, 2019 3:46 am

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.
Image

Download it here:
v1.03
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2681
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Free Portrait mode GUI template

#12 Post by Imperf3kt » Tue Jul 23, 2019 6:32 am

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
ImageImage
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
Image

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
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

Post Reply

Who is online

Users browsing this forum: No registered users