RenPy Tutorial using Side Image | Adding portraits in your Ren'Py Game

If you want to show the character's portrait above your UI, this tutorial is for you. In RenPy, those are called side images. Side images are usually used for the main character when he/she speaks. It gives the players a deeper connection with their character. Older RPGs use side images to show their dialogue.

Note:
- I'm using 1920 x 1080 resolution in the Ren'Py project.
- You must know the Ren'Py basics to understand this video.
To learn the basics, you can watch this video:

📚 Chapters
0:00 Intro
0:22 Basic
1:02 Notes

👐 Ren'Py has an active and helpful community.
People share their work as a guide (Ren'Py Cookbook):

Questions are also welcome here:

🌸 My pages:

[なっちゃん-mwx]

Hi Zeil!! Thank you so much for your detailed tutorial!
It worked so well and it is so simple to understand and I literally started using ren'py rn!!
I have one question though, if it's alright to ask 😭
Whenever any other character talks, the side image disappears. Is there a way to make it stay?
I tried doing it by using the "show" command, but somehow her sprite appears in the middle and behind the text only 🤔

[hiitsaudrey]

I've been struggling with trying to figure out how to use a side image for months! Thank you so much!

[splashtheskeleton]

THIS IS PROBABLY ONE OF THE MOST HELPFUL TUTORIALS. Channels out there! As I'm trying to make a game with my friend.. these videos have been really helpful.!

[ZeilLearnings]

📚 Chapters
0:00 Intro
0:22 Basic
1:02 Notes




🎨 itch.io assets




👧 Free assets can be found in:
Characters

Background

[aniraie]

Thank you so much for creating your channel!! 💖🙏🙏Your videos were so helpful, I had to do a visual novel for my Master’s thesis and I couldn’t have done it without you!! Truly thank you so much you saved my academic life 💖💖💖💖

[coralynnremning]

I just can't it to work. the image wont show up. I tried the non shortcut way but then an error occurs =(

[Dark_Lord_X]

i love your tutorial videos, thank you for the side image help

[Morokiii]

If it didn’t work for you just delete the “expression” text when I did that it showed the image. So just “side name.png”. If there’s any other way please tell me I’m struggling

[tori_tsubasa]

There's still a default shadow image appearing in the middle of the screen and it won't just simply be a side image, do you know how to fix htat by any chance?

[ONCEUU]

Hi can you add a tutorial on how to resize the image in ren'py and to move them to left, right or center of the screen? I'm still new at this po kasi thanks.

[Pof]

Hi!! I just found your tutorial I and really helped me. I know you posted it like one year ago but I have a problem my images are too big and cover half of the screen, so my question is if there is any way to change that without resizing the png with an image editor. Like when you use zoom 0.5 on renpy but for this case. Thanks for the tutorial!!

[samberry-fz]

Im kind of late but i have a question..
When I type the "z delighted" thing (but with my own character and expression) it shows the side image but gets rid of the sprite and shows the empty silhouette instead. How do I fix this?

[antworld]

Idk if im doing someething wrong, or what, because I tried what you did and nothing works.

[Spamkromite]

One question. Should we name all of our files without underscores? Like, I has Butler_Neutral_Silent.png, should I name it just Butler Neutral Silent.png for this to be effective?

[jupisdrup]

If I may, I would also like to ask a quick question.
Example: I have three BGimages and in each of the three images there is one line of text and the same "side image".
I change the BGimages "with dissolve".
The "side image" disappears and then appears all the time, which is super annoying.
Is there a way to fix this WITHOUT turning off the dissolve of the BGimage?

e.g. ->

show 1 with dissolve


s happy "*No no no*"

show 2 with dissolve


s happy "*yes yers yes*"


show 3 with None

s happy "*whatever....*"

####

so in the first two steps the sideimage keeps disappearing/appearing, even it is "show" not "scene", it seems to overlay the sideimage?
because in the last "show with None" it doesn't and the SI doesn't disappear

I just can't get it to work...

[greenies_sys]

Does anyone know the dimensions of the little side drawing?
Thanks! If anyone can leave a comment telling me them.

[cotton.sapling]

Thank you for the tutorial! It worked perfectly! But I was wondering if I could ask a question, I want to organize the character sprites into a subfolder inside the image files. It worked fine with the normal sprites, but when I do that for the side image, the game won't display the side image sprite.

I saved the side image sprite like this:
images > characters > mc (this is the folder where the side image sprites are located)

And so I coded the define thing like this:
define m = Character("[mc]", image="characters/mc/side mc", color="#7d57b5")
I also tried doing image="characters/mc/mc" but it still won't work. Could you point out where my mistake is?

I hope my explanation is good enough ^^;;

[SabiFu]

Thanks, this helps a lot! Do you know how to do the reverse of your tip #1? E.g. so that
> a sad ""
> a ""

turns into the default "a" side image instead of staying "sad"? Thanks!

[Qertyans]

side images its only for z delighted ?
after trying, I cant make z.png become side image

[leonstorywritetor]

I am having issues with side images where one of my images is saying it cannot accept a attribute do you know why this is the case?