Welcome back! Fellow programmers!
Hello and welcome back to my 5 part guide “How to code a VN with Ren’py.”
Today we will have a special guide, a walkthrough on how to code an actual VN project. Last time we coded a mock VN however this time I’ll be using a personal project as a guideline to teach you how everything’s done straight from the drawing board! Fear not as you are on the right track and if you’ve checked out part 1 and part 2 then you’ll have no problem figuring this third part out. (Hopefully, since my explaining is terrible. XD)
That said please bear in mind once more that this is not an infallible guide to program with python or ren’py and it will not make you an expert after you’ve read it.
However I’ll do my best to try and explain how to code a VN with Ren’py to the best of my ability and I will be with you for the entirety of this guide.
So let’s go fellow programmers! the sky is not the limit as your creativity is…boundless. Let’s start, shall we?
first off, open your HUB and go to your active projects, then launch your stub project which should look
similar to this:
The background is black to emphasize that we have nothing set so far, some of you might have a different color depending on your stock theme. The resolution you use for your VN will also be present from the moment you boot. In my case, I’m developing this VN in 1920×1080 resolution.
Now, we need to get rid of this boring background and plain GUI design. Let’s make a custom main menu.
First, close your stub VN, go to your HUB and click on the “screens.rpy” link. This will open the script for screens, the place where we will create our very own main menu.
Leave that open for now and then open your favourite image editing software, photoshop, SAI, illustrator, Paint studio, etc. Create a blank image with the resolution of your VN (for example, if the resolution of your VN is 800×600, then you make a blank image with those dimensions.) After that just get creative, use some flaming skulls and bleeding hearts or whatever you like. Alternatively you can just use text (That’s what I’ll do since my project has a minimalistic UI by design. xD )
the point here is to edit the main menu to your liking. So let’s go and see how it will look:
This is my title screen. The focus of my VN is to make a reference to retro games, hence the austere 8 bit console look.
You ought to make something different as my project is only a guideline, remember that. Now back on topic, as you can see, the clickable sections are displayed in this image, so you might be wondering: “can’t
you do that with Ren’py?” Yes and no. Ren’py allows custom styles but those are limited in a sense and require you to have more than just the basic python knowledge so we’ll be going with this option because it’s unconstrained and it allows you to make your VN look any way you like.
So back to those clickable sections such as “new game” and “continue”, what are they for? They are your mouse hotspots. We’ll be using those to give coordinates to ren’py so it remembers where they are located and map an action to said hotspots.
This image above will be called your “ground image.” This is the way it looks when you are not hovering the mouse over any options. Now once you’re done with this let’s go and make the “hover version” which will look like this:
As you can see I added an orange arrow to every clickable option. This will reflect each hotspot “hover” action when I pass the pointer over them. This will be our “hover image”.
Note that you can do whatever you want for your own hover effect, for example you can make the text grow larger or smaller, change colors or add a blending effect like glow or a simple transform. Once you’re done with this, save both images in .png and place them inside the “game” folder, then let’s go back to the “screens.rpy” script that we left open.
Back in the screens script, scroll down till you reach this part:
This is the default main menu that all stub VNs have. Don’t worry about all that code though, we’re going to completely replace it
with our own. Let’s start with making an “imagemap.”
First delete all the code shown on the image (except for the red parts, so you remember what you are changing. XD)
Then type in this:
(this line is very important when using custom screens, forget to add it and you will regret it.)
ground "your ground image.png"
(remember to replace the filenames with your own. Also don't forget that images need to be inside the "game" folder.)
hover "your hover image.png"
hotspot (xxx, xxx, xx, xx) action Start()
hotspot (xxx, xxx xx, xx) action ShowMenu("load")
hotspot (xxx, xxx, xx, xx) action ShowMenu("preferences")
hotspot (xxx, xxx, xx, xx) action Quit(confirm=True)
There you have it. It’s a basic imagemap with the essential functions of a main menu. Pretty simple, no?
So you might be wondering, what are those “X” symbols right next to “hotspots” Well, those are coordinates for the mouse. Those coordinates will tell Ren’py where your hotspots are located so let’s go ahead and find these coordinates.
Don’t save any changes yet, instead go to your HUB and launch your project, then press SHIFT+D to enter the developers menu. while navigating through the menu find the “image location picker” option which will summon a list of all the images that are inside the “game” folder. Find your hover image and open it:
As the image says, draw a rectangle over the area where you want your hotspot to be recognised.
You’ll get he coordinates for this hotspot on the lower left corner of the window. Input these coordinates on the screens script where the “X’s” are. Repeat this process for each hotspot and remember to input the coordinates that match each section, don’t go mixing them by mistake. XD
Once you’re done, your hotspot section will look smilar to this:
hotspot (720, 611, 391, 70) action Start()
hotspot (726, 691, 384, 60) action ShowMenu("load")
hotspot (726, 758, 378, 63) action ShowMenu("preferences")
hotspot (815, 828, 209, 59) action Quit(confirm=True)
These are my coordinates by the way, don’t copy/paste them because they won’t work for you. Get your own coordinates.
Once you’re done typing the coordinates in, save your changes to screens script and close it. Then boot up your project to check your brand new custom title screen. If all went well you’ll have a fully functional main menu, otherwise scroll back and try to follow the instructions to the letter.
Previously we covered assets though briefly. This time we’re focusing on the essential things to make an actual VN project, that said we already have the most important asset of them all. YOU. Yep you only need one person to make a VN.
This in paper however is terribly inefficient and making your VN would take you a lot longer than if you had help. But, you can’t always sit around waiting for help to come, you need to show something to the community to get feedback, and maybe help, later on. So you need to get some placeholder assets and show your idea to the world. It’s what I did and what you should do if you plan on making a large scale project.
However there’s always the alternative to go solo, which is totally possible and moreso if you happen to be a really talented individual who has all the skills needed for making a VN, if not then there’s always the “one man army method” which we will cover below.
There’s 3 ways to deal with backgrounds when getting started/going solo:
1. You have the artistic skills and you draw them by yourself.
2.You use the stock VN backgrounds readily available online (Uncle Mugen’s collection is pretty solid.) just be aware that thousands of other people will be using them on their VNs as well. And
3. You use RL photographs. Out of all the choices for starter programmers and project leaders this is the most sensible option, you take a camera and venture outside to take pics of suitable locations for your VN. Contrary to popular belief, this method is used by professional studios, although this largely depends on the visual style of your project.
That said you don’t have to use the photos as is. You can make them look more cartoony and more suited for VN format:
1. You take your photo to Photoshop and add an image filter to it. A combination of sponge+cutout gives it a painting feel for example.
2. You take your photo to Illustrator and image trace it for “low fidelity” then crank up the paths and corners to 100% and finally export as .png
(this is the method I’m using for this project.)
3. You do an outline tracing by hand and then paint over the details with Photoshop or SAI and a tablet. (you need some basic art skills for this.)
Out of these 3, number 1 is the fastest and simplest to do. Chances are you have Photoshop installed no matter if you dabble on art or design or not and filtering is just 2 clicks away. Number 2 has a nicer looking tracing effect but you require Illustrator and the 3rd one is so tedious and time consuming that you probably shouldn’t consider it unless your VN has less than 10 backgrounds or something like that.
Those aren’t the only methods available though, you can always come up with one of your own and use it, Go wild, make that creativity explode!
For reference, here’s what I did for one of my backgrounds:
Here’s the RL picture:
Here’s the traced and edited version. As you can see I boosted the vibrance for added cartoony feel and even added some otaku touches to the room…
……I’ll give a cookie to the one who identifies them all
Of course that doesn’t end there. You can always make variants for other times of the day as well
For example late afternoon:
And even artificial light:
There’s tons of things you can do with photographs, so don’t feel discouraged if you are not an artist or can’t find artists. Always remember:
Creativity is boundless.
This one isn’t particularly hard and it’s the same deal as with art mostly.
1. You compose music yourself if you have the talent and skill for it.
2.You use the readily available stock of P.B. (Public Domain) or R.F. (Royalty free) music. In both instances make sure to credit the composers properly. A good site for all things sound is freeSFX.co.uk
Here comes the big fish. One of the most important parts in any VN in existence. The graphical representations of your characters. AKA sprites.
The lack of artistic skill shoots down many projects because there’s not a “quick fix” for this. There are public use sprites but they are not very good and they might not suit your needs or the style of your VN. In this case if you’re a one man army, you grit your teeth and start drawing. I had to that myself at some point.
Practice makes perfect and while your sprites will not always be professional looking, you can only get better as you practice. If you simply cannot draw to save your life, you can always use the “rotoscope” technique.
Don’t be fooled by the word tho, It’s just a mock term and you only need a camera and a PC. You get volunteers, take their pictures, transfer them to your PC crop and edit them the same way you do with backgrounds. You can make them look more cartoony or hell you can even go with black and white + stamp effect to make a Sin City style VN! If you are still inclined to make your own sprites however, you certainly can. That’s what I’m doing for this project.
Here a sample of my main heroine.
What do you think? isn’t she cute? Mind you, she went through 3 redesigns so indeed it’s no easy task.
And this will be all for now concerning the one man army method. If you have all your assets in order then let’s get coding already! Let’s get a test script underway. Remember that this is an actual VN project and not a mock script as before so if there’s something you don’t understand. Please do tell me
With your assets handy, go to HUB and then open your stub script, then check that you have the following things in order. (Add stuff as needed.)
REMEMBER: THESE ARE MY ASSETS, YOU NEED TO REPLACE NAMES AND FILES YOU SEE HERE WITH YOUR OWN:
1. Image definitions: Like we covered previously, you have to define most images here in the main script:
2. Character definitions: Same drill, follow the coding and remember what we’ve seen part 1 and 2:
3. CTC animation: a click to continue animation. it will appear when a character has finished talking. It won’t activate with narration unless you define the narrator as a character.
Follow the code and replace with your own animation. All you need is a set of frames in .png (images should be 30 to 50 pixels wide.) For example: a blinking arrow.
The x and y values at the end must be tweaked to match the position of your textbox.
4.Custom position definitions: Chances are your sprites appear cut off from the screen or too low. Ren’py is not exactly intuitive so you can use this code to create a default position value for your sprites.
Results will vary depending on the size of your sprites and the resolution of your VN. You can also use this code for custom sprite positions.
To use this position remember what you learned in part 1 and 2:
example: show Neru at myposition
5.Custom transitions: Ever felt the fade out was too fast or the dissolve effect needed some tweaks? Worry not, as you can make custom transitions out of the existent ones. In this case this is a slow “drop down” but you can also make a custom dissolve,
example: dissolve (0.5, 1.0, 0.5), which is a very slow dissolve effect.
6. Splash screen: Ren’py doesn’t have stock code for splash screens. You can make a splash image appear while your game is loading, but the loading is so fast that the splash appears for half a second sometimes.
Thankfully there’s custom code to make your VN boot to a splash screen before the title screen! Follow this code replacing “mysplashscreen” and “mysplashsound” with your own.
As of now Helvetica standard did not release part 4-5. but we will update in time.
for now give Helvetica Standard some praise for this impressive guide.