Skip to main content

How to use Side Image?

Author: NingNing
Last update:2022-05-26

Maybe you will want to know how to use Side Image on your project
Or if you don't know what a Side Image is, here's one example Preview:
Image Alt

Prepare in advance​

First of all, you need to prepare all images you want to use!
So let's put some sprites in the project first.
Then define the character in script.rpy 

define e = Character("Alice", image="alice")
  • My character's name is Alice and it will automatically detect image begins with alice

So now inside my game/images I have 4 images
2 full body portraits and 2 face pictures as Side Images

As a preview I will put another background image

image room = "images/bg/room.jpg"

Define Side Image​

Now let's define the Side Image to use
I will use the same picture as the sprite as the Side Image
So you can trim the image to the correct size beforehand Example:
Image Alt

Then now we use side to tell Renpy that the image behind is a Side image
Example:

  • image side alice normal = "side_alice_normal.png" -> 對應 image alice normal = "alice_normal.png"
  • image side alice talk = "side_alice_talk.png" -> 對應 image alice talk = "alice_talk.png"

So here's the code before label start: 

define e = Character("Alice", image="alice")
image room = "images/bg/room.jpg"
image alice normal = "alice_normal.png"
image alice talk = "alice_talk.png"
image side alice normal = "side_alice_normal.png"
image side alice talk = "side_alice_talk.png"

Use Side Image​

Let's start using the side image when everything is ready in advance!
If the above code is correct, we can directly use show to display the picture
Example:

  • show alice talk The screen will look like this:
    Image Alt

You can also write the emotion you want to use directly after the character's name
Example:

  • e normal -> Here Renpy will use alice_normal.png and side_alice_normal.png

One Example Dialogue:

    show alice talk
    e "Hello~"
    e normal "The weather is so nice today"

Don't keep our Alice talking to herself now let's add another character
I choose to join a character like a elf
The name I choose for him is Noah 

image noah smile = "noah_smile.png"
image side noah smile = "side_noah_smile.png"

image noah talk = "noah_talk.png"
image side noah talk = "side_noah_talk.png"

image noah happy = "noah_happy.png"
image side noah happy = "side_noah_happy.png"

After adding a character, it's dialogue time! 

     e talk "Hi Hi~"
     n smile "good evening"
     e normal "Good evening~"
     n happy "Nice to meet you"
     e talk "I'm glad to see you too!"
  • Just some random dialogue ~

You can click the link below to preview what the above conversation + above Side Image looks like:
https://youtu.be/e96jnekSZO4

Change Side Image Position​

Maybe if you want to change the position of Side Image from left to right you can open your screen.rpy first
Inside screen.rpy find screen say(who, what):
Below it you can find

     if not renpy.variant("small"):

Under this sentence, you can customize the position of your Side Image or other settings.
Like adding a border (like the project I used to preview)

The original sentence is this: 

add SideImage() xalign 0.0 yalign 1.0
  • If you want Side Image to appear in the middle, you can change it to --> add SideImage() xalign 0.5
  • If you want Side Image to appear on the right, you can change it to --> add SideImage() xalign 1.0
  • You can change the xalign and yalign to adjust the position according to your needs!

Side Image Border / Frame​

If you want to do something like this:
Image Alt
You can put this line after the right sentence --> add SideImage() xalign 0.0 yalign 1.0: add "gui/image path.png" xalign XX yalign xx

  • Example: add "gui/FrameForSideImage.png" xalign 0.5 yalign 1.0
    Then your border will appear at the position you define!

This post is over now~ You can give me / my website a clap if this help you! My website --> https://spaceofningningen.blogspot.com/ Image Alt

Thank you for your support~​

Related-Links: