Instead of using xpos and ypos to position each individual side image, you can use show_side_image along with xalign and yalign to position all the side images for a character before the rest of the script, like this:
Code: Select all
image side e = ("Eileen.png")
define e = Character(show_side_image=Image("Eileen.png", xalign=0.0, yalign=1.0))
With the above code, you can define a side image and its position on the screen. xalign=0.0 and yalign=1.0 would put the side image at the bottom left corner of the screen.
Here's an example script that shows how you can define more than one side image, if you have sprite side images with emotions (e.g. a side image for happy, a side image for sad, etc.):
Code: Select all
# You can place the script of your game in this file.
# Declare images below this line, using the image statement.
# eg. image eileen happy = "eileen_happy.png"
# Declare characters used by this game.
image side c_curious = "cside_curious.png"
image side c_happy = "cside_happy.png"
image side c_embarassed = "cside_embarassed.png"
define c_curious = Character(show_side_image=Image("cside_curious.png", xalign=0.0, yalign=1.0))
define c_happy = Character(show_side_image=Image("cside_happy.png", xalign=0.0, yalign=1.0))
define c_embarassed = Character(show_side_image=Image("cside_embarassed.png", xalign=0.0, yalign=1.0))
# The game starts here.
label start:
c_curious "You've created a new Ren'Py game."
c_happy "Once you add a story, pictures, and music, you can release it to the world!"
return
Each side image is defined as a character, which is kinda tedious to code, but it does work! You would have to be careful how you call the side images in the script.
In order to keep the side images from appearing on top of the text in the dialogue box at the bottom of the screen, find the following code in options.rpy:
Code: Select all
#########################################
## These settings let you customize the window containing the
## dialogue and narration, by replacing it with an image.
## The background of the window. In a Frame, the two numbers
## are the size of the left/right and top/bottom borders,
## respectively.
# style.window.background = Frame("frame.png", 12, 12)
## Margin is space surrounding the window, where the background
## is not drawn.
# style.window.left_margin = 6
# style.window.right_margin = 6
# style.window.top_margin = 6
# style.window.bottom_margin = 6
## Padding is space inside the window, where the background is
## drawn.
# style.window.left_padding = 6
# style.window.right_padding = 6
# style.window.top_padding = 6
# style.window.bottom_padding = 6
## This is the minimum height of the window, including the margins
## and padding.
# style.window.yminimum = 250
You need to do two things: 1) remove the # sign before style.window.left_padding and fix the indentation, and 2) adjust the number after style.window.left_padding to the width, in pixels, of the side image. So if my side image is 200 pixels wide, my code would look like this:
Code: Select all
#########################################
## These settings let you customize the window containing the
## dialogue and narration, by replacing it with an image.
## The background of the window. In a Frame, the two numbers
## are the size of the left/right and top/bottom borders,
## respectively.
# style.window.background = Frame("frame.png", 12, 12)
## Margin is space surrounding the window, where the background
## is not drawn.
# style.window.left_margin = 6
# style.window.right_margin = 6
# style.window.top_margin = 6
# style.window.bottom_margin = 6
## Padding is space inside the window, where the background is
## drawn.
style.window.left_padding = 200
# style.window.right_padding = 6
# style.window.top_padding = 6
# style.window.bottom_padding = 6
## This is the minimum height of the window, including the margins
## and padding.
# style.window.yminimum = 250