Ren'py Screens Tutorial

[@vimi]

If you want to see all the screen code from my examples above, I uploaded them all up here: github.com/VimislikArt/ScreenExamples

[@vimi]

@CN I'm pretty sure you just need to add a viewport to the main menu section of your screens.rpy file; then set it to display a variable string equal to your changelog. If you want more specifics than what I can show in a youtube comment, you might want to submit this question up on r/renpy, or at the ren'py discord. There are some real ren'py wizards out there! www.renpy.org/doc/html/screens.html?highlight=scrollbar#viewport

[@Mjumiman]

I really like how you explain these mechanics. The only instances when I used custom screens in Lovewood was for the menu of imagebuttons to choose which character to hang out with/date, and for the daily transition screen. I recall struggling a lot when I first tried getting into it XD Looking forward to anything you'll do next!

[@vimi]

That's great! Once you start getting the hang of screens, you start finding lots of little nice uses for them that can help enrich your visual novel, and help it stand out from the crowd!

[@nerdzforhirezane8426]

This has helped me figure out how to use image buttons on-screen, like in a kitchen. Each individual item in the kitchen gets a button. I have made it where the sink and faucets allow the player to do the dishes, the fridge a place where she can get the food needed for dinner, and the stove to cook that dinner on. once the dishes are done, the image button no longer accepts any click and so on. If you already made dinner, then the screen calls the if statement. I learned most of this from you, and thanks!!!

[@vimi]

That's a great application of screens!

[@jyc8291]

Yes! Looking forward to watching the 'drag & drop' tutorial!

[@vimi]

The plan is to have it up next Friday, fingers crossed!

[@Katy133]

Me too! I'm excited to see it!

[@nieldak]

You are sooooo funny! Today I'm binge learning Ren'py so I've played 2 of your games "King of the CulDeS" and "Romancing flash" and now I'm watching a couple of your videos too. Thank you for being such an amazing teacher, your lessons are very well planned and easy to understand! =D

[@vimi]

Thank you! Best of luck on your game dev journey!

[@klleptic]

All your videos have been so helpful so far! Very inspired to use all this info for NanoReno coming up! I would love a video further explaining how to create image buttons! There's not too many tutorials that exist that really show you how to create them from both the art to actually setting them up in the engine for more of a point and click style experience.

[@vimi]

I'm working my way up to videos involving art :)

[@yabuki2923]

This is EXACTLY what i needed for my current project. Thanks as always.

[@vimi]

I'm glad to hear it! Keep programming!

[@JoaoNeto-up8zi]

Your explanation is very good, the only thing is that at the end you did not explain how to use the variable value as a text for a textbutton, so it throws an error. Solution is to the the str() function as the text for the textbutton and it'll work.

[@vimi]

Ack! You're right! I covered how to display variables in text in one of my first tutorials, so I didn't even think to include that part of the code! I'll just throw some of this code up on github for anyone interested! Thanks!

[@PointlessSideQuestLP]

This has been SO tremendously helpful, thank you so much!

[@AndrewKramerenko]

Thank you so much, it's so helpful you don't even know how!

[@ennui8839]

Bless this channel, you're a life saver!

[@vimi]

Thanks for watching!

[@Annokan6]

I wished you showed the project with imagemap No one seems to post the whole code just words

[@vimi]

No image maps! I think I showed all the relevant code on screen; buttons and text boxes inside of the screen, called in the main project with "call screen" or "show screen". When I get home, I can see if I have a copy of the project; was there any particular aspect of screen integration you're having with your project?

[@vimi]

OK, i see now that at kzbin.info/www/bejne/iGW5p6mVqsajmM0, I show an imagemap screen... but I just grabbed that from the ren'py documentation for the example of imagemaps: www.renpy.org/doc/html/screens.html?highlight=imagemap#imagemap-statements I can safely say I haven't used image maps for any projects - it's much easier to use multiple images, less of a chance of error with overlapping rectangles, and it's far more responsive and user friendly to use imagebuttons instead!

[@JimmyCrackorn]

I don't know if you're still checking the comments on this video, but I'm trying to do something pretty cool. A part of that is playing music in one of my galleries. Unfortunately, I haven't gotten the music to play yet though. I tested the file in my script, and it works. It also works with my splash screen. The weird things is that my hover and activate sounds work 100% of the time. I tried placing a label at the top, and adding the music to the label. The game runs but the music won't play. I experimented with adding it to the scene, even though I was sure it wouldn't work, and the game wouldn't run. Then I moved the label below the screen, not inside it, and the rules changed on top of it not playing the music. If I ever get all of the pieces working, I'd love to show you this gallery I'm creating. I've never seen anyone do it before.

[@vimi]

I can't know for sure without seeing the code. I'd suggest going to the renpy subreddit or discord, or Devtalk's programming discord, and asking there. When you post, make sure to include the relevant code, explain what you're trying to do, how the code is currently working, and how it's not performing the way you want.

[@JimmyCrackorn]

@@vimi Yeah, we couldn't figure it out on the Discord lol I might have manifested a rare bug, or something. I've been considering updating to the newest version of Ren'Py. But I really meant I'd love to show you the completed gallery in response to your call to action on this upload. It's such a cool idea that I'd love to show you the results if I ever get it all working. It's something I hope others will want to use once they see it.

[@Sannosama]

Am I tripping? Or @ 4:19 did you make the "Click Like button" on YT highlighted with a freakin' rainbow WHILE explaining how to click buttons?! If you did, that is some serious wizardry, sir.

[@vimi]

KZbin does that automatically now

[@RacleandRaHill]

how do you attach a custom screen to a character? Ive trued adding a screen=custom_screen when defining a character but it does not seem to work…

[@sihirbaz_arttzz3297]

hello, I made the picture button by changing the UI settings in renpy and main_menu, but when I enter the load or settings section, the buttons I made do not go, what can I do? can you help me? (I'm not good at English so I couldn't understand the video, sorry)

[@andreimircea2254]

I’ve seen Visual Novels use pictures for choices, like if I click on a certain picture, I chose to add a point to one character’s flag that will help me get on it’s route, how do it is done? Do they use screens for that?

[@vimi]

I'd advise using screens for that - that way you can easily create custom hover images for them. I cover that all in the "Part you'll pause a lot" section of this video!

[@andreimircea2254]

@@vimi Thank you.

[@egot1stical]

i tried to make an extra screen for the main menu, and uses a text button with two actions. but for some reason the colour is always set to the selected colour even when it's not selected? it uses the same style as the rest of the menu (default style, i've only changed the colours) and it works as intended when i only have one action , so i'm not sure what the problem is or what i need to mess with to fix it

[@vimi]

Try using "hovered" instead of "selected" on the text button; I think that's closer to what you want? The Ren'py Documentation isn't always clear about the difference between the different property states on buttons.

[@egot1stical]

@@vimi I don’t believe it’s a problem with the selected/hovered code (like that anyway) because it works completely fine with every other button as long as it only has one action? If I remove the second action from the button the colours work fine, when I add it back in it’s always overridden by the selected colour somehow I tried creating a custom style for just the new button and the not selected/hovered colours worked fine on their own but the moment I added the selected colour that’s all it would ever be I added a second action to a pre-existing button (the save one) and encountered the same issue- is there something in the default style that expects buttons to have a certain amount of actions? That’s my only guess but I have little to no experience

[@vimi]

@@egot1stical I'd have to see your code to know for sure what the issue is; I just added two actions to one of the main menu buttons, and it's still working like before.

[@dan.a.delion]

I'm sorry can you please help me? how i add a button for "back to the main menu" in game menu? i made my custom menu with options like start load etc like buttons in phone, imagebuttons, and with this style, there is no way to come back in main menu! So i want to add button in game menu but how i should do that? (or which video to watch?) i think it has to do something with ShowMenu action but I'm not sure where to put everything, i am definition of noob...

[@vimi]

If you're just making a replacement for the main menu, but you're still using Ren'py's basic structure, you should just need to use: textbutton _("Return"): style "return_button" action Return() But if you really changed up the architecture, you can check under "screen navigation():" in screens.rpy, and you should see a line of code for a Main Menu text button: textbutton _("{size=-10}Main Menu{/size}") action MainMenu() Use that action!

[@phoenix_lore]

Hello, I would like to know if it is possible to display a screen when we start the game... I would like that when we click on "new game", instead of displaying directly the game, it displays another menu with write something and then a start button that brings him to the beginning of the game ... Thanks in advance for the answer!

[@vimi]

I'd have to test it later, but I think you can use the splashscreen functionality to do that? www.renpy.org/doc/html/splashscreen_presplash.html

[@xEndkoNx]

Hello, i'm doing a map with imagebutton in a screen, my problem is when i click in any place of the screen the game go back to the main menu, there are any code to block the click?

[@vimi]

YES! I do this a LOT! So, the way I like to do it, is I'll create a character with the attribute "advance=False", and then whenever I want the user to not be able to advance further, except with an input from a screen, I'll call that character at the same time I call the screen. define z = Character (None, advance=False) Then later in the code, it'll be something like: Character2 "Here, let's look at this screen after the click." call screen menuoption z ""

[@codemonkey5519]

Will screens stay open if you don't specifically hide them? Would they just pile up if you keep calling screens?

[@vimi]

You got it! That's why you want to "call" screens if you just need them for one interactable, and "show" screens only if you're going to need them up for a while. That's why I like to set up certain buttons in these screens to do double duty; jump to the next part of the VN, and to self-close the screen.

[@jamessnow9405]

Hey there! I was wondering if there was a way to have multiple custom frames that can be used for text buttons in Renpy?

[@vimi]

Yes! Just make more of them!

[@jamessnow9405]

@@vimi Would it be alright to ask how? I've been trying for the past day and I don't seem to quite understand how to do so.

[@RikardRynoson]

Excellent stuff! Really helpful. What I'd love to see is a tutorial for making an inventory screen - quite like the one you referenced from Baldur's Gate. Playing around with something that complicated I think would really make me get the finer points of what I can do using Screens. Would you possibly care to make such a tutorial?

[@vimi]

Stick around for another couple months, and I'll get to it! I'm currently planning a video on RPG fight mechanics, which will lead to a short video on classes and object oriented programming, and THEN I'll be doing a Ren'py Cookbook video on the prefab inventory system somebody already made below, with some suggestions on how to change it for different purposes: lemmasoft.renai.us/forums/viewtopic.php?f=51&t=23071#p289693

[@RikardRynoson]

@@vimi - I'm looking forward to it! :D Thank you.

[@outismedia]

An extremely useful tutorial.

[@vimi]

I'm glad it was useful! Extremely so!

[@haybeedenzebee]

Hello! I'm not sure if you still check the comments on here, but I have a slight problem with NullAction screen crea(): imagebutton auto "crea_%s.png" focus_mask True action NullAction The error is probably some very dumb thing but it says TypeError : get_tooltip() missing 1 required positional argument : "self". It only happens when I hover on my image so... yup, I have no idea what I've done wrong in a single line of code.

[@vimi]

This thread will give you your answer: lemmasoft.renai.us/forums/viewtopic.php?t=65629

[@stillfangirlingtoday1468]

Hello! Thank you for everything! I have probably a dumb question, but maybe I did not look at the proper tutorial section. My question is: would you be able to tell me how can I change how the text appears? What I mean by this is something similar to "The Life and Suffering of Sir Brante", where the GUI layout is also the "set" to the text and the sprites, so it wouldn't be the classic "text at the bottom" format, but more like a book with pictures. I really don't know how to go about this. I would really appreciate it if you could clarify this for me, or point me to any article or to one of your videos if I missed that segment!

[@thekasanegros8508]

Hello bro, I have a question. I made a menu with imagebutton where you can select a character (for example in Mortal Kombat X). The problem is that when I choose a character, the others are blocked. I hope I have explained myself well, my English is very bad.

[@vimi]

I'd have to check your code more closely to see what's going on, but when you're troubleshooting, try to test out every component of your code, and see which one is operating differently than you intend.

[@Rupturedspace]

Hi VimislikArt, I'm trying renpy for the first time, i don't get all just yet, but i'm trying to start out within a house with rooms, i got the rooms covered with imagebutton, but not the dialogue, when i enter det kitchen, a dialogue is shown, but i just want it to be just that one time, not when i also reenter. I use action Jump and labels for all the rooms and imagebuttons.

[@vimi]

You'll want a variable that just says if you've entered a room before. Set an if statement before that first dialogue; if the room entering varaible says "no", display the entrance dialogue. If it says "Yes," it'll skip past that dialogue.

[@Rupturedspace]

@@vimi okey, thanks man:)

[@Rupturedspace]

@@vimi I've tried reading up on if statement, but i couldn't manage to write the correct line of code, do you happen to have a video on it? the kitchen code is. label kitchen: scene bg_kitchen show eileen happy at left with dissolve e "Hello [mcname]" hide eileen happy show eileen happy happy at right with dissolve m "Hello mom" call screen bg_kitchen screen bg_kitchen: add "bg_kitchen" imagebutton: focus_mask True idle "Kitchen/to_livingroom_idle.png" hover "kitchen/to_livingroom_hover.png" action Jump("upstairs")

[@vimi]

@@Rupturedspace $ kitchenentered = "No" if kitchenentered == "No": show eileen happy at left with dissolve e "Hello [mcname]" hide eileen happy show eileen happy happy at right with dissolve m "Hello mom" that should do it

[@Rupturedspace]

@@vimi oh okey, so you can just enter $ randomname ="" and if with randomname, thank you

[@ArtisticVoid]

PLEASE SHOW HOW TO MAKE A CUSTOM QUIT BUTTON

[@vimi]

textbutton "Quit" action Quit(confirm=None) ^^ Put that in a screen, and then call the screen, and then that should work?

[@dandalord]

hello bro, my name is Daniel, thank you very much for your tutorials man they are very helpful, the best of all is that you explain not only the basics but also codes that make the projects look much more professional and interactive! Thanks to this tutorial I was able to create a main lobby where the interactions of sleeping, eating and fishing were displayed along the edges in the form of text buttons with the screens. thank you very much, I would like to ask you if you know of any easy minigame that can be done in ren py? I would like it to be as an easy puzzle or something so that the character gains experience, not as a fight (I think it would be very difficult for me even I'm new to this) it would be great if you know of any or if you plan to make a video about it. thank you very much again sorry for my bad english XD (my language is spanish)

[@vimi]

I mean, if you can imagine it, you can probably make a minigame about it! I'll probably post some videos in the next couple months focusing on minigames I've put in my own Ren'py visual novels, but here's the easiest one I ever made: Rapid tap minigame! I would ask the user to tap the screen X number of times to do something (Pet the cat! Pick up the trash on the ground! Put the quarters in the machine!), and as long as you make some element tap, wiggle, or otherwise react when the user presses the screen, you can get away with just using ren'py dialogue to advance it. "You picked up one piece of trash!" "You picked up two pieces of trash!" etc, etc, etc...

[@dandalord]

@@vimi bro a question, could you put the choices menu on the left or right? I mean something like the character is seen in the middle and the menu is shown next to it, idk something like menu at left or something like that?

[@vimi]

​@@dandalord I found this reddit thread that covers what you might be looking for: www.reddit.com/r/RenPy/comments/p8vce8/is_there_a_way_to_make_the_choice_menu_appear_in/

[@settantuno1550]

I’m almost embarassed to ask this but I haven’t find a solution yet despite I’ve been looking for it for a long time. When I keep moving the cursor on imagebuttons or even hotspots, the background (if it’s an animation) stops. The code is all right. The animation of background is defined at the beginning of the script and it works fine. The problem comes when i move the cursor on a clickable area such as an imagebutton or a hotspot. And if the imagebutton has the “hover” option, it stays hovered even when I move the cursor away if I don’t stop it at some point. All of this makes my games appearing kinda laggy. Does this problem have a solution? Thank you for the answer :)

[@vimi]

I'd have to see your code to know for sure, but let me ask some clarifying questions: 1) When you say "the animation is defined at the beginning of the script", do you mean you have an image defined BEFORE the script starts, or do you mean that you have an image with repeatable transforms located in the script? 2) Is the hover state for the imagebutton defined in the image name with the "%s" feature (referred to as buttonname_%s in code, but the actual buttons are buttonname_hover and buttonname_idle), or is this a separately hovered state for the button?

[@settantuno1550]

@@vimi First, let me thank you for the fast response! :D script.rpy: (…) call screen map_screen >map.rpy: screen map_screen(): add “firstfloor.jpg” imagebutton: auto “bedroom_%s.png” focus_mask True action Jump(“bedroom”) ----- Just to clarify, I’ve also tried to use smaller imagebuttons in order to not use focus_mask but it didn’t work.

[@settantuno1550]

Ok I finally managed to solve it!! I’ll comment what I did in case someone has the same problem. The idle/hover were the issue. Instead I used the hovered and unhovered functions with the help of another screen. Here’s the code: screen hover_bedroom: add “bedroom.png” screen home: imagebutton: idle “bedroom.png” hovered Show(“hover_bedroom”) unhovered Hide(“hove_bedroom”) focus_mask True action [Hide (“hover_bedroom”), Jump(“bedroom”)] Now it’s super smooth! Thank you anyway Vimi! I love your channel!:D

[@vimi]

@@settantuno1550 Ack! Sorry I was AFK, but I'm glad you solved your issue!

[@shunpogoddess6319]

My screen still doesn’t come up idk what’s going on

[@vimi]

Can you post the relevant code?

[@shunpogoddess6319]

@@vimi actually I was able to get it to work but I was wondering is there a way to save it on one computer and email the file and stuff to another so I can open it on another computer?

[@vimi]

@@shunpogoddess6319 Yup! Most programmers use Github, because it's an easy way to save any changes you make to your game no matter what computer you're working on it from! It's also great for working on games collaboratively!

[@BasicNP1]

Hi V.N.D I tried using your code for the input_screen frame: screen input_screen: frame: xalign 0.5 yalign 0.5 ypadding 50 xpadding 100 has vbox text "Input some text!" input default "Right in here!" value VariableInputValue("the_text") frame: top_margin 50 xpadding 20 ypadding 10 textbutton "I'm done typing text" action Return(value="the_text") but I get the error KeyError: 'the_text' cant wait for you to help me and i will continue watching the rest !

[@vimi]

In my example, I really only needed to use "default" to set the text value, but I also really wanted to show off the VariableInputValue function, so I included it in the code as well, but I think I cut that part out of the lesson out of the final edit! You can add a default variable with that value, using "default the_text = "Right in here!"" above "label start", and if you want, then you can remove the "default "Right In here!" part of the screen. Otherwise, you can remove the part of the code that says "value VariableInputValue("the_text")", and it should also work!

[@BasicNP1]

@@vimi Thanks you! It worked. Beginner so everything is very much over my head. Try ing to learn from other renpy games but I don't understand like 90% of the code hehe.

[@danielecampanaro435]

You are a king.

[@vimi]

👑

[@tarawutsri-on3569]

thank for great tutorial ,I appreciate it.

[@vimi]

I appreciate you watching it!

[@JuleSan_jk]

Ugh - It feels like you've broken the 4th wall at the end! Bam

[@vimi]

I EXIST IN A PLACE BEYOND SPACE AND TIME

[@JuleSan_jk]

@@vimi Indeed! That moment felt pretty weird - much realer than in DDLC X'D

[@hutala]

I was wondering, how can I make the cursor change when it hovers over an image button, as in change into a magnifying glass etc.

[@vimi]

You can define a displayable custom mouse cursor, and when you hover over a defined button or hotspot, you can provide the mouse property, giving the name of that custom cursor. www.renpy.org/doc/html/mouse.html#displayable-mouse-cursor

[@igretrovods9189]

Awesome

[@nekogrimoire]

Hello again! :3 So... I must be bad at searching, because I still haven't found a solution 🥺 Specifically within the "input_screen" (better if can be used outside as well), how can I make it so that keys typed result to other keys on the screen. For example, if I type "1", the result is the number 5. Follow-up question, is it possible that no matter what the player types, the resulting letter/number is random? Of course, this will be implemented in specific parts of the game, not always. Super appreciate the help!

[@vimi]

I'm not sure, actually! That sounds interesting though - if/when you find a solution, let me know!

[@ArtisticVoid]

listen quit doesnt work. i typed out your code and nothing just errors

[@memesahoy79]

pump up your video volume

[@TheHASgamers]

First

[@vimi]

ugh

[@igretrovods9189]

Haha, I was looking for this comment

[@Красный_Туман]

Why THE FUCK does none of the Ren'Py tutorials and those freakin videos explain how to change FRAME?! Fuck, I just want to screen frame to have a blue background, but NO ONE gives an answer how to do it. I hate Ren'Py

[@creator-link]

Did you ever figure it out?

[@InfiresAngel]

Me too :(

[@DanielVeril]

it doesn't work

[@vimi]

can you be more specific?

[@DanielVeril]

@@vimi it doesn't show anything ;/

[@vimi]

@@DanielVerilCan you post some code? I can't tell why it isn't working if I can't see how you're implementing it.

[@DanielVeril]

@@vimi screen textmiddle: frame: xpadding 40 ypadding 20 xalign 0.5 yalign 0.5 text "Welcome

[@DanielVeril]

but it doesn't show on middle anything

[@waltage]

trading face