Ren'Py Tutorial: Exploring Screen Creation Techniques for Visual Novels

[@oopsIDontExist]

Amazing, straightforward and helpful tutorial that's filled with many things. Also i love your unique way of making the video like a VN

[@MiaCodeExpedition]

~Wow, thank you so much! (=^ ◡ ^=) I'm absolutely thrilled to hear that you loved my Ren'Py tutorial on creating screens. I aimed to make it straightforward and packed with helpful content. I'm so glad you enjoyed my video style, presented like a visual novel (^≗ω≗^). If you ever need help or have any questions, just let me know, and I will try my best to help you. Happy creating, and best of luck with your Ren'Py project! (=˃ᆺ˂=)

[@mertcanik-rv9fi]

Wow! Another great tutorial. Really, there was a lot of information in it. But there is something i want to ask; the timer did not appear on the screen. i.e. I didn't see a timeline bar lasting 5 seconds? I think it would be better if the player could see it. Maybe I missed something?

[@MiaCodeExpedition]

~Thank you very much for your support, I'm glad you enjoyed the tutorial. (^=˃ᆺ˂) Indeed, you are right, the timeline does not appear by default if a timer is defined. Fortunately, it is possible to add a chronological bar or a timer with a counter. Let's see together how to make the timer visible. For this I will take the example of the tutorial. First, here is the code of the screen created with the timer that does not appear on the screen: A-0 #example timer screen imagebutton(): frame: modal True xalign 0.5 yalign 0.5 hbox: imagebutton: idle "avatar_mia_default" hover "avatar_mia_hover" action Jump("mia_2") imagebutton: idle "avatar_nico_default" hover "avatar_nico_hover" action Jump("nico_2") imagebutton: idle "avatar_emi_default" hover "avatar_emi_hover" action Jump("emi_2") timer 5.0 action Jump("too_slow") repeat False modal False label start: "example imagebutton" call screen imagebutton In this example taken from the tutorial, the timer is set but it does not appear on the screen. Let's see how to solve this quest together: ω(=＾・＾=)ω A-1: At the beginning of the script, I will add a transform animation block to make the timer appear and make it disappear with an alpha effect. I will also define two variables to define the duration of the timer: interval in seconds of the timer ("timer_count") and the jump to the label if the timer is up ("timer_label"). transform counter_dissolve: alpha 0.0 linear 0.5 alpha 1.0 on hide: linear 0.5 alpha 0 init: $ timer_count = 0 $ timer_label = 0 A-2: I will then modify the timer of the screen so that it takes into account a bar which is reduced according to the timer. For that I will write this code: timer 0.01 repeat True action If(time > 0, true=SetVariable('time', time - 0.01), false=[Hide('countdown'), Jump(timer_label)]) bar value time range timer_count xalign 0.5 yalign 0.0 xmaximum 300 at counter_dissolve This therefore gives: screenimagebutton(): frame: modalTrue xalign 0.5 yalign 0.5 hbox: imagebutton: idle "avatar_mia_default" hover "avatar_mia_hover" action Jump("mia_2") imagebutton: idle "avatar_nico_default" hover "avatar_nico_hover" action Jump("nico_2") imagebutton: idle "avatar_emi_default" hover "avatar_emi_hover" action Jump("emi_2") timer 0.01 repeat True action If(time > 0, true=SetVariable('time', time - 0.01), false=[Hide('countdown'), Jump(timer_label)]) bar value time range timer_count xalign 0.5 yalign 0.0 xmaximum 300 at counter_dissolve Here is a quick explanation of the code to add. At first, the timer elapses by 1 second every second. If the time variable that we will define just after is greater than 0, we subtract one second from this variable as long as this condition is true. If the condition becomes false, we hide the counter then we use the "timer_label" variable to go to the indicated label. Let's see the second line of code. This is a bar containing the value of the time_count variable. Its position is located in the middle (xalign:0.5) and at the top (yalign: 0.0). The counter_dissolve animation effect is then used to make the timer bar appear or disappear A-3: Let's see the last step together. For this I will add a new variable in the label and I will once again define the values of the other two variables. label start: scene gray $ time = 5 $ timer_count = 5 $ timer_label = 'start' "example image button with bar timer" call screen imagebutton Here is an explanation for this block of code. In the label, I defined a new variable called "time" which is used in the "imagebutton" screen to check the value of the timer and make it work. The value of "timer_count" is used to define the time interval for the timer. Finally the value of "timer_label" indicates the label used if the timer has reached the value 0. In this example the timer is set to 5 seconds and the label used is start. So here is the complete code. (≚ᄌ≚)ƶƵ transform counter_dissolve: alpha 0.0 linear 0.5 alpha 1.0 on hide: linear 0.5 alpha 0 init: $ timer_count = 0 $ timer_label = 0 screen imagebutton(): frame: modal True xalign 0.5 yalign 0.5 hbox: imagebutton: idle "avatar_mia_default" hover "avatar_mia_hover" action Jump("mia_2") imagebutton: idle "avatar_nico_default" hover "avatar_nico_hover" action Jump("nico_2") imagebutton: idle "avatar_emi_default" hover "avatar_emi_hover" action Jump("emi_2") timer 0.01 repeat True action If(time > 0, true=SetVariable('time', time - 0.01), false=[Hide('countdown'), Jump(timer_label)]) bar value time range timer_count xalign 0.5 yalign 0.0 xmaximum 300 at counter_dissolve label start: scene gray $ time = 5 $ timer_count = 5 $ timer_label = 'start' "example image button with bar timer" call screen imagebutton If you want to use a timer as a number rather than a bar you can also use this alternative code: init: $ timer_count = 0 $ timer_label = 0 screen imagebutton(): frame: modal True xalign 0.5 yalign 0.5 hbox: imagebutton: idle "avatar_mia_default" hover "avatar_mia_hover" action Jump("mia_2") imagebutton: idle "avatar_nico_default" hover "avatar_nico_hover" action Jump("nico_2") imagebutton: idle "avatar_emi_default" hover "avatar_emi_hover" action Jump("emi_2") timer 1 repeat True action If(time > 0, true=SetVariable('time', time - 1), false=[Hide('countdown'), Jump(timer_label)]) if time

[@mertcanik-rv9fi]

@@MiaCodeExpedition I wouldn't have asked if I'd known the solution contained so much detail. I'm really embarrassed, I can't thank you enough. You're just amazing!

[@MiaCodeExpedition]

@@mertcanik-rv9fi ~Don't worry at all, I'm here to help you, no matter how much detail it takes to solve your problem. (=^･^=) I am delighted to have been able to be of assistance to you and it is with great pleasure to help you. Feel free to contact me again if you need help with your Visual Novel. Good luck in your quest and thank you so much for your support, ~meow! =^∇^*=

[@chaennelchaennel]

wow, thank you so much for sharing!!

[@Zeres-xi3bx]

Gracias por el tutorial ☺️

[@MiaCodeExpedition]

~Thank you very much for your support, I'm glad you enjoyed my Ren'Py tutorial (=^･^=)

[@LivingDead77]

Thanks for the tutorial, I'll watch the whole thing when I'm free. On an unrelated note, I was wondering. I've been leaving the Audio files for my visual novel in the main game directiory but I was wondering if I could definite a new location for music file (Audio folder) the same way I define stuff like transitions and character names/colour?

[@LivingDead77]

Also on a slightly related note, I will most likely be able to release the demo version of my visual novel in 2 or 3 weeks from now.

[@LivingDead77]

Also, what name do I use to credit you? I'm currently tidying up the about section of my game and I'm crediting all those who helped me out in it. It also happens to be an adult game so it's ok if you don't want your name to be listed.

[@MiaCodeExpedition]

@@LivingDead77 ~Hi, congratulations on the upcoming release of your Visual Novel, you can do it! (・∀・) Yes you can define music in the same way as characters or transitions. Let's see how to solve this quest together: In this first example, I will use three audio files named "1.wav", "2.wav", "3.wav". Other formats are supported by Ren'Py such as MP3, FLAC, Ogg (=^･^=) A-1- open the script.rpy file A-2- define the music file before the label: define music_a = "audio/1.wav" define music_b = "audio/2.wav" define music_c = "audio/3.wav" A-3- play the music in the label and add music on hold: $renpy.music.play(music_a, channel='music', loop=False, fadeout=None, synchro_start=False, fadein=0, tight=None, if_changed=False, relative_volume=1.0) $renpy.music.queue([music_b, music_c], channel='music', loop=False, clear_queue=True, fadein=0, tight=None, relative_volume=1.0) A-4- stop the music in the label: $renpy.music.stop(channel='music_example', fadeout=1.0) Here is the complete example of this code block: define e = Character("Eileen") define music_a = "audio/1.wav" define music_b = "audio/2.wav" define music_c = "audio/3.wav" label start: $renpy.music.play(music_a, channel='music_example', loop=False, fadeout=None, synchro_start=False, fadein=0, tight=None, if_changed=False, relative_volume=1.0) $renpy.music.queue([music_b, music_c], channel='music_example', loop=False, clear_queue=True, fadein=0, tight=None, relative_volume=1.0) scene bg room show eileen happy e "You've created a new Ren'Py game." $renpy.music.stop(channel='music_example', fadeout=1.0) e "Once you add a story, pictures, and music, you can release it to the world!" return In this first example, I defined each music. Here is a second example using a list for music: Example B: Using a list to define several songs in a single variable (=^･^=) B-1- set music file before label: define music_a = ["audio/1.wav","audio/2.wav","audio/3.wav"] B-2- play the music in the label and add music on hold: $renpy.music.play(music_a[0], loop=False, fadeout=None, synchro_start=False, fadein=0, tight=None, if_changed=False, relative_volume=1.0) $renpy.music.queue([music_a[1], music_a[2]], loop=True, clear_queue=True, fadein=0, tight=None, relative_volume=1.0) As this is a list containing several musics, I start with the first music at index 0 of the list "music_a[0]" then I continue with the other two musics B-3- stop the music in the label: $renpy.music.stop(fadeout=1.0) Here is the complete example of this second block of code: define e = Character("Eileen") define music_a = ["audio/1.wav","audio/2.wav","audio/3.wav"] label start: $renpy.music.play(music_a[0], loop=False, fadeout=None, synchro_start=False, fadein=0, tight=None, if_changed=False, relative_volume=1.0) $renpy.music.queue([music_a[1], music_a[2]], loop=True, clear_queue=True, fadein=0, tight=None, relative_volume=1.0) scene bg room show eileen happy e "You've created a new Ren'Py game." $renpy.music.stop(fadeout=1.0) e "Once you add a story, pictures, and music, you can release it to the world!" return Example C: Alternate method to define an audio file (=^･^=) C-1- set music file before label: define audio.music_a = "audio/1.wav" define audio.music_b = "audio/2.wav" define audio.music_c = "audio/3.wav" C-2- play the music in the label and add music on hold: play music music_a fadein 1.0 queue music [music_b, music_c] C-3- stop the music in the label: stop music fadeout 1.0 Here is the complete example of this third block of code: define audio.music_a = "audio/1.wav" define audio.music_b = "audio/2.wav" define audio.music_c = "audio/3.wav" label start: play music music_a fadein 1.0 queue music [music_b, music_c] scene bg room show eileen happy "You've created a new Ren'Py game." stop music fadeout 1.0 "Once you add a story, pictures, and music, you can release it to the world!" return ~and there you go, I hope this message will help you a little in your quest, of course you can also choose to stop a piece of music before playing another if it is defined without using the "queue" instruction which allows you to put music on hold as long as the music is defined: example = play music music_a, stop music, play music music_b. Here is also a link to the documentation if you want to know more about using music in Ren'Py: www.renpy.org/doc/html/audio.html Do not hesitate to write to me again if you need help for the realization of your Visual Novel. ~Thank you very much, if you want to add me in the credits of your Visual Novel, you can write "Yvan's Quest" (⁎˃ᆺ˂). Ok, no problem if it's a Visual Novel with adult content. Each game creator is free to create whatever they want to create. The main thing is to achieve what you want to achieve and if you need help, do not hesitate to write to me, I will try to do my best to help. Good quest and congratulations for the publication soon of your Visual Novel, don't hesitate to keep me informed, I don't really play adult games but it's always a pleasure to see new Visual Novel available, ~meow! (^=˃ᆺ˂)

[@LivingDead77]

@@MiaCodeExpedition Alright, thank you very much.

[@hexemeister]

Can you explain how to build an android version?

[@MiaCodeExpedition]

~Meow! Of course! (=^･^=) Let's see together how to build an Android version of a Ren'Py project. (It's possible that I'll make a tutorial on this topic in the future, meow) Here are the steps to follow if you want to export your project: First, install Java Development Kit (version 8). You can download version 8 from this website: (=^･^=) adoptium.net/temurin/archive/?version=8 Note: When you install Java Development Kit (version 8), make sure to check the "java_home" and java_soft environment variables in JDK with hotspot. Once OpenJDK is installed, here are the next steps in this quest: 1. Open the main Ren'Py menu. 2. Click on the Android button below "Build distributions" in the Actions section. 3. Accept the installation of the Ren'Py Android Packaging Tool. 4. Wait for the installation to finish. (≚ᄌ≚)ƶƵ 5. Restart Ren'Py. 6. Click on the Android button again. 7. In the Build section, click on the "Install SDK and Create Keys" button. 8. Wait for the installation to finish. (≚ᄌ≚)ƶƵ 9. Then, the Ren'Py software will ask for a generation key if you want to submit your game to the Play Store, for example, meow. Check yes for the first key, except for the second key (AAB) if you don't submit your game to the Play Store. 10. One of the last steps is to click the "configure" button to add the name of the app and the package name, for example: example.example.project. 11. The last step is to create a build, for which you should check "Universal Apk" if you want to test your visual novel in APK format, then click on the first "build" button. 12. Once the build is done, you can find your application (APK) in your project folder. =^∇^*= I hope this short guide helps you if you want to export your project to an Android smartphone, meow! Good luck with your project. (=^･^=)

[@Myanara1]

That helped me a lot thank you ! I have a question and maybe you did answer it in another video in which case I apologize, but did you made a tutorial on how we could customize fully the loading/saving screen ? It is something I struggle a lot with, I'd love to see you make a video about it !

[@MiaCodeExpedition]

~Thank you for your comment. (=^･^=) Let's try to solve this quest together. To customize the save and load screen, you can modify the "screen file_slots(title)" screen to display a customize screen. Let's see together the steps to follow with an example of code that I wrote: =^∇^*= resources used for this example: image "background_save.png" located in the images folder of the Ren'Py project A - Open the "screens.rpy" file B - Search for "screen file_slots(title)" (line 596 in Visual Studio) C - Modify the code block of this screen to display a personalize screen, here is an example: screen file_slots(title): add "images/background_save.png" vbox: style_prefix "slot" xalign 0.5 yalign 0.5 spacing gui.slot_spacing grid 2 2: for i in range(4): $ slot = i + 1 button: action FileAction(slot) has vbox add FileScreenshot(slot) xalign 0.5 text FileTime(slot, format=_("{#file_time}%A, %B %d %Y, %H:%M"), empty=_("empty slot")): style "slot_time_text" text FileSaveName(slot): style "slot_name_text" key "save_delete" action FileDelete(slot) frame: xalign 1.0 yalign 1.0 hbox: style_prefix "page" spacing gui.page_spacing textbutton _("") action FilePageNext() frame: xalign 0.0 yalign 1.0 textbutton "Return" action Return() The code block represents a custom screen for the save/load system in Ren'Py. This screen displays save slots in a 2x2 grid with slot numbers. Each slot contains a screenshot of the game, the date and time of the save, and the name of the save. At the bottom of the screen, there is a navigation bar that allows you to go to the previous page, to access the autosave function and the quick save function. There are also numbered buttons for direct access to different pages. Finally, there is a "Return" button to return to the previous screen. In summary, you can use for example grids, vertical boxes (vbox) or horizontal boxes (hbox) to fully customize the game save and load page. For this to work also remember to include a button containing for example: action FileAction(slot) here is a link to the documentation concerning the possible actions in Ren'Py to save and load a game. (=^ ◡ ^=) www.renpy.org/doc/html/screen_actions.html If you want to slightly modify the font and the display of the save screen without modifying the structure, you can use the "gui.rpy" file. Here is another link to the documentation: (=^ ◡ ^=) www.renpy.org/doc/html/gui.html Indeed, you are right, I have not yet approached this subject concerning the customization of the save and load screens in Ren'Py, it seems to me to be an excellent idea. I will do a tutorial on this subject after the tutorial on transitions. I prepare a video every 2 or 3 weeks, so the tutorial will be available in quite a long time but I promise you it will be available on the channel. ~Thank you for your video suggestion, I hope this message will help you a little in your quest. Good luck with your Visual Novel (=^･^=)

[@Myanara1]

@@MiaCodeExpedition Thank you for the fast answer ! I will try to follow what you said, some stuff are still very much difficult to understand as I'm very new to all of it and do not worry, I will wait patiently for your video, what you do it already amazing ! Keep up the good work !

[@MiaCodeExpedition]

@@Myanara1 You're most welcome! I'm glad I could provide a fast answer for you. Don't worry if some things are still difficult to understand. Meow, learning takes time, and I'm here to help you every step of the way. (=^ ◡ ^=) I appreciate your patience while waiting for the video. Your support and kind words mean a lot to me! If you have any further questions or need any assistance, feel free to reach out. Happy learning, and thank you again for your encouraging feedback! ~Meow (=^･^=)

[@oigenbu]

BR?

[@MiaCodeExpedition]

~Thank you so much for your comment on my latest Ren'Py screens tutorial! It's really nice to know that you took the time to watch it. I truly appreciate your support! (=^･^=) Now, I have to admit, I'm a bit puzzled about "BR" with the question mark... (=^･ｪ･^=) I thought it might mean "Be right Back ?" but I'm not 100% sure. If that's the case, then yes, you're right. I'm currently working on a new video about transitions for Ren'Py. I'm a bit behind my usual schedule as I've been quite busy lately. If it means something else, please let me know, as I really want to understand what you have in mind. (=^･^=) Anyway, if you have any questions, ideas, or suggestions to improve the tutorial, I'm all ears! =^∇^*= And don't worry, the video will be ready soon; I'm making steady progress. Once again, thank you for your comment, and see you soon! (=^･^=)