Ren'py UI Tutorial (in 5 1/2 Minutes)

customizing your ui can seem a little daunting to newer renpi devs but it's honestly very simple renpi has done an amazing job consolidating and curating everything that you need to adjust your ui in pretty much just two places the gui images folder and then the two rpy files gui and options.rpy let's start with the images in the gui folder this might seem like a lot of images you need to change but it's much simpler than you think it is for starters let's customize windows icon this is the game icon that shows up on your windows desktop and on the top left corner of your game window to customize your icon just open the image up in an image editor of your choice delete the image inside and insert your own image don't change the pixel dimensions and don't change the file name once that's done launch your game and you can see it's already been changed engine now these are the images you should definitely customize in your game main menu this is the main menu image just make it look nice overlay slash main menu this is the frame that appears over the left side of your main menu screen i usually turn this thing off by just turning it into a transparent image game menu this is the overlay that appears over your main menu image when you're going through menu screens this is a partially transparent image by default but feel free to make it opaque if you want the menu screens to have a little bit more of a distinct look nvl text box and name box these are the images that appear behind your game text to separate it from your game assets name box goes behind the character name text box behind the dialog and nvl goes behind text that is displayed in the full screen nvl mode notify and skip these are the images that appear behind notification elements and the renpi skip feature just didn't make them a pretty color frame and overlay slash confirm these are the confirm text box and the overlay that goes behind it over the game background when you exit the game the rest of the important gui elements are the buttons scroll bars and sliders honestly these buttons usually work fine for me by default but if you have a very particular aesthetic in mind or want to flex your ui design skills it's relatively easy to make renpi bend to your will in the button folder we can see the variety of buttons that renpai uses by default we have choice buttons used for choice options in game the background button which is pretty much every button that run pi pairs with text quick background which are the buttons for the quick menu at the bottom of the game screen and the slot buttons which are used for the saving loading screens each of these buttons has an idle state which is how it typically looks and the hover state which is how it looks when your mouse hovers over it this idle hover format is also used in the slider and scroll bar folders sliders are assembled like this for horizontal and vertical formats and the scroll bars are assembled like this with vertical and horizontal formats each with their own idle and hover states back in the button folder the radio and check buttons operate slightly differently they just have selected and foreground states which just designate when they're active or not now there are two gui folders left to cover phone is just a copy of the assets from the rest of the gui folder but with dimensions more suited to mobile devices let's not worry about the bars folder we'll do with that in the next video in this series i'll get to it for now let's go to the rpy files options in gui both have tons of different things you can adjust and customize and all of them are very clearly labeled and defined right in the code for pretty much every game though you'll just want to adjust all the basics in options.rpy it lets you set the name of your game in the main menu and you're going to just want to use the option to turn it off it also lets you define the version of the game which is very useful when you're testing and importantly it also lets you define what text goes in the about screen in your game right here finally you can make a short name for your game used for executables and directories it says to make it short but you still make it descriptive both the options and gui files contain more variables you can use to tightly define and customize your game and again if you have a really particular aesthetic you're going for or just want to use that bachelor fine arts degree you'll want to get well acquainted with all them most games though will really only have to worry about these variables fonts and font sizes change the fonts for in-game text character names and out of game text something more custom i highly suggest making a separate font folder and making these directories reference that folder like this custom fonts go a long way to giving your game a unique aesthetic text box change the height of the text box some games you want to make your dialog box fill up more space but sometimes you can get away with making it a bit thinner this variable just establishes how high the text appears not how big the actual text box is so be sure to change and adjust your text box image separately again there are tons of little adjustments you can make to your ui and i'm sure you're itching to mess with all of them but keep in mind how little changes on one screen can affect other uses of it elsewhere in your game for instance let's say you wanted to move the main menu navigators from the left side of the screen to the right side you could change this variable gui dot navigation underscore x position to a higher number so it's on the right side of the screen which looks fine until you open up the preferences screen look now the buttons overlap so how do we solve this well if you're really in a hurry to make a renpi game you just don't want to have to focus on learning just don't worry about it just design around it you can make a visual novel right now with everything that i've taught you but if you want to learn like some of the tough stuff like the stuff that got me on the rampay homepage right there look it's my game uh you're going to want to click on this video right over here which is going to teach you how

Channel: Visual Novel Design

Views: 42,155

Keywords: renpy, renpy tutorial, renpy tutorial for beginners, renpy games, visual novel, visual novel maker, narrative game tutorial, renpy GUI, renpy UI, renpy UI tutorial, ren'py textboxes, renpy dialogue box, renpy main menu customization, renpy buttons, renpy main menu, renpy about, renpy GUI tutorial, renpy text, renpy font, renpy text color, renpy design, visual novel design, visual novel creator, visual novel dev, visual novel renpy, renpy for beginners

Id: zqc5Bl12mCM

Length: 5min 26sec (326 seconds)

Published: Wed Jan 19 2022