Jump to content

How to code a VN with Ren'py, Part 3 (Comprehensive Guide)


Recommended Posts

0Kbwu5g.png

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?

 

 

F1XpjXH.png

 

 

 

first off, open your HUB and go to your active projects, then launch your stub project which should look

similar to this:

066ANm1.png

 

 

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 1920x1080 resolution.

Now, we need to get rid of this boring background and plainGUI 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 800x600, 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:

 

 

2YmDTIm.png

 

 

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:

 

 

iPl7arb.png

 

 

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:

 

yE9AVPc.png

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:

 

 

 

screen main_menu:

tag menu  (this line is very important when using custom screens, forget to add it and you will regret it.)

imagemap:

        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:

 

 

 

tIxzTzL.png

 

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. XD

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.

 

TuGqNAs.png

 

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. :P

 

Backgrounds:

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! :D

For reference, here's what I did for one of my backgrounds:

 

Here's the RL picture:

 

TzyLDV8.jpg

 

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 :P

 

fFdhLl1.png

 

Of course that doesn't end there. You can always make variants for other times of the day as well :D

For example late afternoon:

 

P6UptZG.png

 

Night time:

 

cLe0Uh5.png

 

And even artificial light:

 

I342sMA.png

 

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.

 

Music:

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

 

 

Sprites:

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! :D 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. Notice my Tsunako influence? :P

 

m1lHE8k.png

 

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 :)

 

 

DeHbOqs.png

 

 

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:

 

fn3hyVK.png

 

2. Character definitions: Same drill, follow the coding and remember what we've seen part 1 and 2:

 

fAqtPVO.png

 

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.

 

NXQRsKl.png

 

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.

 

ojn9rJk.png

 

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.

 

4Pwt9UR.png

 

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! :D Follow this code replacing "mysplashscreen" and "mysplashsound"

with your own.

 

H1v0eZS.png

 

 

vgHN9Pv.png

 

And that's it for the third part of this guide, kind sirs and madams. I thank you deeply for reading this far and bearing with my ugly

orthography and sorry attempts at explaining. You are now one step ahead into programming your visual novel and we'll work together

for the remainder of this process. Don't forget your passion for VNs and don't lose motivation, programming a VN is hard but your efforts

will certainly pay off. Do join me next time, when I'll be covering the rest of this section and UI styling in detail.

Many thanks for your time and until then. See ya  :D

Kind regards. Helvetica Standard.

Edited by Helvetica Standard
Added warning. Remember to use your own filenames. Using mine WILL NOT WORK.
Link to comment
Share on other sites

Kind reminder for those confused. I apologise if I wasn't clear enough but this 3rd part of the guide is not standalone.
This entry assumes you have read and understood both part 1 and 2 which covers several stuff mentioned there.

Any doubts or questions, don't hesitate to contact me, I'll personally help you out. :)

Link to comment
Share on other sites

I love the way you worded it as a "one man army", because I'm doing just about everything in my VN on my own(Minus voice acting and music). The quick background tutorials are very helpful! I've been doing it as #3 this whole time and it's so slow. x.x My campus has Illustrator and Photoshop, free for the art majors to use, so I'll probably start making uses of them. :D

Link to comment
Share on other sites

  • Emi unpinned this topic

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...