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

[@HJBae-hl1ck]

hi, i just started using ren'py and got so overwhelmed! i nearly gave up. but your tutorial was huge help! you took away the complication and made using ren'py less scary! I'm definitely subscribing. i look forward to watching more of your tutorial videos!

[@vimi]

Awesome, that's glad to hear! Ren'py can be a really scary thing to dive into at first, but once you get the swing of it, it's a pretty easy to work with coding environment!

[@josephcyronder7021]

This is quick, to-the-point, and really easy to learn! I’ve never been able to understand how to tweak the UI before, so this was really helpful!

[@vimi]

Thanks! I like to build knowledge bases for other people to expand on themselves!

[@DaZwaehn]

@@vimi This is such a treat, thanks again from me since I'm kinda new to all of it and often struggle to wrap my head around things. So really, thank you!

[@angel5dl]

I've been using Renpy time and time again and have gotten by either reading lemma soft forum threads or asking for help on the discord since other videos have either been uploaded yeeaars ago/really long/hard to see. So super happy to have your channel which is super great and easy to understand! Really appreciate the work and looking forward to more videos!

[@vimi]

Thank you! I'll keep'em coming!

[@hankthepatriot3733]

BRILLIANT!!! EXACTLY THE CHANNEL I'VE BEEN SEARCHING FOR!!! (sorry about the "ALL CAPS" but I'm super EXCITED! BEEN struggling for quite a while!!! Like a VERY long time!!!)

[@vimi]

ALL-CAPS ARE OK BY ME!

[@NeonKix]

Your tutorials are saving me and my use of Ren'Py. Thank you so much.

[@KelpieDuneyrr]

I'm starting to use Ren'Py without an idea of code. Your tutorial is making stuff very easy. I hope I can make little tweaks in the engine like adding sounds to the words when a character speaks like it happens in Undertale and such. I just want to tell quick stories until I'm ready to use GameMaker to add some gaming mechanics like battles and stuff. Hope the engine didn't change too much in 2 years.

[@sayori1145]

Wow, these are sure useful ! Something I've been curious about whether it's possible to have a main menu background update as the player progresses and saves through the game.

[@vimi]

Yup! Instead of making the gui background into a png or jpg, you can define the image, as something that changes when certain variables change. Something along the lines of: image main_menu_bg: if storyvariable == "yes": "secondbg.png" else: "firstbg.png"

[@sayori1145]

@@vimi oh! Thank you so much. I'll try it out when I can

[@goomba478]

@@vimi Brilliant! I've seen games do this sort of thing after you complete the main story for example. Great to know that it's simple to do!

[@nido_ri]

I have a little more advanced question on gui transitions. So I’m wondering if I could use a webm as a custom transition, or at least a sequence of images. I have an animated transition (somthing similar to persona 5 transitions) but I’m not sure how to implement them to renpy.

[@vimi]

That IS a little more advanced! My boilerplate answer is "There's a lot of different ways to do that depending on your needs," but let me do some testing on my end...

[@Hello-hello-hello456]

Your channel is a blessing

[@arindika1]

Please make a tutorial on how to customise Save/Load & Preferences menus. I’d love to learn how to replace the text with imagebuttons without messing up the positions of things.. only tutorial on this right now is in Spanish.

[@vimi]

Textbuttons automatically rescale in vboxes, imagebuttons don't. If the imagebuttons are too big in the menu, you'll want to rescale the images so they fit in the space - you can either do it manually, or you can create a custom transform to scale them down enough to fit in the menu: init: transform preferenceszoom: zoom 0.5 And then in the screen, you can apply the transform to the imagebutton with "at preferencezoom" put in the line, like you would put in "spacing 10" or something. You'll have to restart your game every time to test it, since the transform gets referenced at initialization, but it shouldn't take long to find a size that should work. Otherwise, my Screens video covers most of the other basics you should need: kzbin.info/www/bejne/iGW5p6mVqsajmM0

[@ajflink]

You can actually have animated background in the main menu, but a bug was silently introduced after Ren'Py 7.4.6. Why? I don't know. There is no documentation of what was changed.

[@reactier3375]

This is really helpful and I really am enjoying these tutorials! I really want to test the waters of Ren’py and these tutorials have made it seem less intimidating :) I’m just a artist with a dream, I don’t know much about game development yet. I do have a few questions though, is it possible to change the text box and name box depending on game variables? I feel like there must be since I read in the comments it’s possible to change the main menu depending on variables, but I thought I’d ask. I’m thinking about making a horror novel game and I was thinking the element of lives could be incorporated into the name box so that if you choose badly you lose a life shown on the name box, do you think that’s possible? If the text box could change with variables, does that mean you could also add small trophy stickers to it every time you beat a route that just shows on the name/text box? Also another question while I’m here, are you able to change the game menu? For example, instead of “about” could I change it to something like “completed routes” and add extra buttons? Is the game menu and/or main menu fully adjustable?

[@vimi]

Yes, yes, yes, and yes. You can attach python "if" statements in any definitions, and those can be changed based on variables, but those variables need to be defined before startup! The main/game menu is completely adjustable, and you can add/remove/adjust any of the menus as you want.

[@reactier3375]

Thank you for such a swift reply! This is really reassuring and I’m really excited to learn more! 😁✨

[@Lo0ny_T0ons]

Thank you!!! So easy and right to the point

[@yymage]

Hi, do you have a tutorial on how to make image buttons for the quick menu? 😭 Tysm for this video btw!

[@vimi]

Yup! Check out my screens tutorial for how screen language works: kzbin.info/www/bejne/iGW5p6mVqsajmM0 Specifically for the quick menu, if you check the screens.rpy file, you should see a screen for quick menu; right now those are all textbuttons. You would just replace textbutton with imagebutton, and then include the image you want to use for each of those buttons.

[@yymage]

@@vimi thank you so much, you’re a lifesaver!!

[@tudodica4354]

My dream is to be able to watch a tutorial that teaches how to change the resolution from 1920x1080 to 1280x720. I know it's not just the images that have to be changed, there are a lot of changes to the gui.rpy that need to be configured. I've never found anything that explained this to me decently. 😮‍💨

[@vimi]

If you're making that change mid development, everything that uses pixel positional data needs to be reset - the SECOND easiest thing to do is create a new game with 1280x720 resolution, and then copy/paste the gui.rpy file from that game into the game you want to adjust.

[@Liehl]

Thank you for all this awesome tutorials! Do you know if there is a way to just hide the main menu from the preferences and load screen? I want to leave just the return button for those pages.

[@vimi]

If you haven't messed around with screens before, be sure to check out my Screens tutorial for a quick primer, then follow these steps: In screens.rpy, under the Navigation screen, you'll see at about line 306, there's a line of code that says "if main menu:" with the Start textbutton tabbed underneath it. You'll want to add that "if" statement to any button you want to hide when you're at preferences/load/save screens. You'll also want to comment out any line that says "elif not main_menu:" or "else:", and any textbuttons tabbed underneath them; those are the buttons that aren't usually on the main menu, but do appear when you're navigating through other menu screens. Let me know if that works!

[@Liehl]

@@vimi Oh thank you so much for the fast reply! =) Yes, that worked, main menu is hidden from the other pages! Now I just need to play around and customize the UI buttons for those pages. I'm going through all your videos and it's helping me a lot, thank you for creating this channel and share all this info!

[@vimi]

@@Liehl No problem! Glad I could help!

[@eirdonne_]

love ya work

[@santohiji6117]

So on point, awesome

[@bilgeadamfan8404]

I love your videos! Quick and easy, thank you for your sharing. Is there a place where we can copy the codes in your videos? Because sometimes I make little mistakes and I don't see it for hours.

[@vimi]

I usually provide links to the code in the description when I think it's relevant or necessary. For certain videos where I go over broad concepts, I think it's better to learn the basics and delve into it without existing code to work from - the little mistakes you don't see for hours are part of the learning process, and train you for the hard work of isolating and fixing more difficult bugs in the future!

[@Kababalax]

Have you got a vid on how you set up 'Visual Studio Code' for Ren'Py ?

[@vimi]

On your launcher, under "preferences", select Visual Studio Code, and there should be an option there to install or upgrade visual studio.

[@gabrielescribal8684]

I want to fix the problem of the main menu position overlayng the others menus.. please

[@emresimsek7394]

in 1.14 how can I change the menu's fonts like this (about, start, load, etc and also the text on the top left of the screen) I was trying to figure it but couldn't find how to change the text on the top left of the screen

[@emresimsek7394]

okay I found it

[@LettyneD]

um hello again, i have a new problem now, when i press the Quit button, it shows the "load" screen but this looks like crashed, what should i do?

[@roomahgaming]

So, how do you solve the problem?

[@nonow6101]

just don't worry about it 🦓🦓

[@msgemini4305]

I love your video , thanks a lot

[@seaweed0008]

Hey! I can't find the folder for the easy image swaps :( Where can I find them?

[@vimi]

On your Ren'py launcher, if you go under the "Open Directory" section, "gui" should be on the bottom. Press that, and it should take you to the folder I reference in this video.

[@seaweed0008]

@@vimi Thank you so much!

[@RamiresDuarte-j7f]

You know install and ursing pyjnius in Renpy?

[@Kyleology]

Gee You Ai

[@ezkiimehh7464]

Hey, one thing I noticed about changing the window_icon is that it only shows the new icon whenever the game is launched. After building distributions, the actual icon somehow still stays as the default Ren'Py one for some reason.

[@vimi]

Hmmm... I'll be looking into that. I vaguely recall fixing it for some past projects, but I gotta remember what I did!

[@ezkiimehh7464]

@@vimi that'd be great if you could find a fix! It's been bugging me for months

[@furryfr0g]

@@ezkiimehh7464was there any resolution for this

[@Eli-Xhycy]

for real tho how do i solve the last one😭

[@vimi]

It's really a matter of taste. You can either move everything else over more, which means you need to find all the variables that control the different screen placements, and move them more to the left, and make sure they do not extend past the right side of the screen (lots of work). OR, you can make the main menu placement move back to the default position whenever you open another screen.

[@Eli-Xhycy]

@@vimi oooh thanks! I managed to fix it hehehehe thank you again.

[@inallcaps1715]

ough

[@snocoldman]

Obnoxious thumbnails, great content. You win some, you lose some.

[@vimi]

🤷‍♀

[@snocoldman]

@@vimi Hey, just wanna say, keep making content. It's great and you singlehandedly are helping my solo project more than any other resource. Just my personal opinion.

[@vimi]

@@snocoldman Thank you very much!