Character Side Image Ren'py HELP

[42riccichase]

Hey, I'm very new to Ren'py (and coding in general) and I seem to be having problems getting my main characters picture to appear on the side of the text bar. I've been reading all the websites and tutorials I can find but my code isn't working and I don't know why. Most of my code I got from online sources and my game is in its "bare bones" phase but here is my code:

[Taleweaver]

Ren'Py-related questions belong into the Ren'Py Questions forum.

Moving.

[42riccichase]

sorry... I don't know how to get to different forums and stuff this is my first time posting on this sight... how do I move it?

[chocoberrie]

sorry... I don't know how to get to different forums and stuff this is my first time posting on this sight... how do I move it?

You don't have to move anything; taleweaver did that for you.

Here's some links to other threads on the forums that explain how to put side images:

http://lemmasoft.renai.us/forums/viewto ... =8&t=25942
http://lemmasoft.renai.us/forums/viewto ... =8&t=25353
http://lemmasoft.renai.us/forums/viewto ... =8&t=24793
http://lemmasoft.renai.us/forums/viewto ... =8&t=25380
http://lemmasoft.renai.us/forums/viewto ... =8&t=24966
http://lemmasoft.renai.us/forums/viewto ... =8&t=25694

Hope this helps

[Donmai]

Also, here is the documentation on side images:
http://www.renpy.org/doc/html/side_imag ... ide-images
And a video tutorial with an example:
http://www.youtube.com/watch?v=8UKLqwJim_Q
Good luck.

[42riccichase]

Thanks guys I'll check it out

[42riccichase]

I can't seem to figure it out... This is what I have:

image side e = ("chark.png")
define e = Character('%(e)s',color="#6495ed", show_side_image=Image("chark.png", xalign=0.0, yalign=1.0))

I have issues reading code due to slight dislexia, so if anyone could point me somewhere with a more clear cut example that would be great. Otherwise I guess I'll just keep trying to read the Ren'py site and forums...

[chocoberrie]

image side e = ("chark.png")
define e = Character('%(e)s',color="#6495ed", show_side_image=Image("chark.png", xalign=0.0, yalign=1.0))

Your code should look like this:

Code: Select all

init:
    image side e = "chark.png"
    $ e = Character("E", color="#6495ed", show_side_image=Image("chark.png", xalign=0.0, yalign=1.0)) 

You're not supposed to have parentheses in the side image definition (image side e).

Hope this helps!

[42riccichase]

Thanks for the help, but it's still not working... The image isn't showing up at all...
Here's what I have now
init:
image side e = "chark.png"
$ e = Character("E", color="#6495ed", show_side_image=Image("chark.png", xalign=0.0, yalign=1.0))

The name also won't change colors. It will work for any name except this one.

[chocoberrie]

First off, did you copy/paste your side image into the game folder? Your code looks correct; I tested it out and it worked just fine. The font color also worked.

Here's the code that I used. It's in the script.rpy file.

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.

init:
    $ e = Character("Ellen", color="#6495ed", window_left_padding=180, show_side_image=Image("girl_side.png", xalign=0.0, yalign=1.0))

# The game starts here.
label start:

    e "You've created a new Ren'Py game."

    e "Once you add a story, pictures, and music, you can release it to the world!"

    return

window_left_padding is used to align the side image so that it doesn't overlap the text in the dialogue box. The number it's set to is dependent on the dimensions of your side image.

Let me know if this works!

[42riccichase]

It still wont work... I going to try uninstalling and re-installing ren'py but if you have time to look at this maybe I have something in the wrong order... Thanks for the help you've provided so far.

# 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"
image RoyalE = "Royalentry.png"
image forest = "forest.png"
image side e = "chark.png"



# Declare characters used by this game.
define e = Character('Eileen', color="#c8ffc8")
init:
$ e = Character("%(r)s", color="#6495ed", window_left_padding=180, show_side_image=Image("chark.png", xalign=0.0, yalign=1.0))


init -1 python:
import renpy.store as store
import renpy.exports as renpy # we need this so Ren'Py properly handles rollback with classes
from operator import attrgetter # we need this for sorting items

inv_page = 0 # initial page of teh inventory screen
item = None
class Player(renpy.store.object):
def __init__(self, name, max_hp=0, max_mp=0, element=None):
self.name=name
self.max_hp=max_hp
self.hp=max_hp
self.max_mp=max_mp
self.mp=max_mp
self.element=element
player = Player("Derp", 100, 50)

class Item(store.object):
def __init__(self, name, player=None, hp=0, mp=0, element="", image="", cost=0):
self.name = name
self.player=player # which character can use this item?
self.hp = hp # does this item restore hp?
self.mp = mp # does this item restore mp?
self.element=element # does this item change elemental damage?
self.image=image # image file to use for this item
self.cost=cost # how much does it cost in shops?
def use(self): #here we define what should happen when we use the item
if self.hp>0: #healing item
player.hp = player.hp+self.hp
if player.hp > player.max_hp: # can't heal beyond max HP
player.hp = player.max_hp
inventory.drop(self) # consumable item - drop after use
elif self.mp>0: #mp restore item
player.mp = player.mp+self.mp
if player.mp > player.max_mp: # can't increase MP beyond max MP
player.mp = player.max_mp
inventory.drop(self) # consumable item - drop after use
else:
player.element=self.element #item to change elemental damage; we don't drop it, since it's not a consumable item

class Inventory(store.object):
def __init__(self, money=10):
self.money = money
self.items = []
def add(self, item): # a simple method that adds an item; we could also add conditions here (like check if there is space in the inventory)
self.items.append(item)
def drop(self, item):
self.items.remove(item)
def buy(self, item):
if self.money >= item.cost:
self.items.append(item)
self.money -= item.cost

def item_use():
item.use()

#Tooltips:
style.tips_top = Style(style.default)
#style.title.font="gui/arial.ttf"
style.tips_top.size=14
style.tips_top.color="fff"
style.tips_top.outlines=[(3, "6b7eef", 0,0)]
style.tips_top.kerning = 5

style.tips_bottom = Style(style.tips_top)
style.tips_top.size=20
style.tips_bottom.outlines=[(0, "6b7eef", 1, 1), (0, "6b7eef", 2, 2)]
style.tips_bottom.kerning = 2

style.button.background=Frame("gui/frame.png",25,25)
style.button.yminimum=52
style.button.xminimum=52
style.button_text.color="000"


showitems = True #turn True to debug the inventory
def display_items_overlay():
if showitems:
inventory_show = "Money:" + str(inventory.money) + " HP: " + str(player.hp) + " bullets: " + str(player.mp) + " element: " + str(player.element) + "\nInventory: "
for i in range(0, len(inventory.items)):
item_name = inventory.items.name
if i > 0:
inventory_show += ", "
inventory_show += item_name

ui.frame()
ui.text(inventory_show, color="#000")
config.overlay_functions.append(display_items_overlay)


screen inventory_button:
textbutton "Show Inventory" action [ Show("inventory_screen"), Hide("inventory_button")] align (1.0,.01)

screen inventory_screen:
add "gui/inventory.png" # the background
modal True #prevent clicking on other stuff when inventory is shown
#use battle_frame(char=player, position=(.97,.20)) # we show characters stats (mp, hp) on the inv. screen
#use battle_frame(char=dog, position=(.97,.50))
hbox align (.95,.04) spacing 20:
textbutton "Close Inventory" action [ Hide("inventory_screen"), Show("inventory_button"), Return(None)] align (1.0,.01)
$ x = 515 # coordinates of the top left item position
$ y = 25
$ i = 0
$ sorted_items = sorted(inventory.items, key=attrgetter('element'), reverse=True) # we sort the items, so non-consumable items that change elemental damage (guns) are listed first
$ next_inv_page = inv_page + 1
if next_inv_page > int(len(inventory.items)/9):
$ next_inv_page = 0
for item in sorted_items:
if i+1 <= (inv_page+1)*9 and i+1>inv_page*9:
$ x += 190
if i%3==0:
$ y += 170
$ x = 515
$ pic = item.image
$ my_tooltip = "tooltip_inventory_" + pic.replace("gui/inv_", "").replace(".png", "") # we use tooltips to describe what the item does.
imagebutton idle pic hover pic xpos x ypos y action [Hide("gui_tooltip"), Show("inventory_button"), SetVariable("item", item), Hide("inventory_screen"), item_use] hovered [ Play ("sound", "sounds/click.wav"), Show("gui_tooltip", my_picture=my_tooltip, my_tt_ypos=693) ] unhovered [Hide("gui_tooltip")] at inv_eff
if player.element and (player.element==item.element): #indicate the selected gun
add "gui/selected.png" xpos x ypos y anchor(.5,.5)
$ i += 1
if len(inventory.items)>9:
textbutton _("Next Page") action [SetVariable('inv_page', next_inv_page), Show("inventory_screen")] xpos .475 ypos .83

screen gui_tooltip (my_picture="", my_tt_xpos=58, my_tt_ypos=687):
add my_picture xpos my_tt_xpos ypos my_tt_ypos

init -1:
transform inv_eff: # too lazy to make another version of each item, we just use ATL to make hovered items super bright
zoom 0.5 xanchor 0.5 yanchor 0.5
on idle:
linear 0.2 alpha 1.0
on hover:
linear 0.2 alpha 2.5

image information = Text("INFORMATION", style="tips_top")
#Tooltips-inventory:
image tooltip_inventory_chocolate=LiveComposite((665, 73), (3,0), ImageReference("information"), (3,30), Text("Generic chocolate to heal\n40 points of health.", style="tips_bottom"))
image tooltip_inventory_banana=LiveComposite((665, 73), (3,0), ImageReference("information"), (3,30), Text("A healthy banana full of potassium! You can also use it as ammo for your guns! O.O Recharges 20 bullets.", style="tips_bottom"))
image tooltip_inventory_gun=LiveComposite((665, 73), (3,0), ImageReference("information"), (3,30), Text("An gun that looks like something a cop would\ncarry around. Most effective on humans.", style="tips_bottom"))
image tooltip_inventory_laser=LiveComposite((665, 73), (3,0), ImageReference("information"), (3,30), Text("An energy gun that shoots photon beams.\nMost effective on aliens.", style="tips_bottom"))

image sidewalk = "Sidewalk.jpg"



# The game starts here.

label start:

python:
player = Player("%(r)s", 100, 50)
player.hp = 50
player.mp = 10
chocolate = Item("Chocolate", hp=40, image="gui/inv_chocolate.png")
banana = Item("Banana", mp=20, image="gui/inv_banana.png")
gun = Item("Gun", element="bullets", image="gui/inv_gun.png", cost=7)
laser = Item("Laser Gun", element="laser", image="gui/inv_laser.png")
inventory = Inventory()
#add items to the initial inventory:
inventory.add(chocolate)
inventory.add(chocolate)
inventory.add(banana)
##############################
#health bar
$ health = 100
show screen health_bar
###########################
$ strength_points = 0
$ ag_points = 0
$ inteligence_points = 0
$ charisma_points = 0
$ perception_points = 0

[42riccichase]

Yeah that didn't work... well if you find anything let me know. Thank you for taking the time to help me.

[chocoberrie]

You don't seem to have any dialogue in your script... This could be why the side image isn't appearing. If you don't have dialogue from the character, then the image won't show up.

Try adding some dialogue

[42riccichase]

sorry I didn't include the dialogue... my bad, here it is with dialogue
# 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"
image RoyalE = "Royalentry.png"
image forest = "forest.png"
image side e = "chark.png"
image sidewalk = "Sidewalk.jpg"
image dark = "dark.jpg"

# Declare characters used by this game.
init:
$ e = Character("e", color="#6495ed", window_left_padding=180, show_side_image=Image("chark.png", xalign=0.0, yalign=1.0))


init -1 python:
import renpy.store as store
import renpy.exports as renpy # we need this so Ren'Py properly handles rollback with classes
from operator import attrgetter # we need this for sorting items

inv_page = 0 # initial page of teh inventory screen
item = None
class Player(renpy.store.object):
def __init__(self, name, max_hp=0, max_mp=0, element=None):
self.name=name
self.max_hp=max_hp
self.hp=max_hp
self.max_mp=max_mp
self.mp=max_mp
self.element=element
player = Player("Derp", 100, 50)

class Item(store.object):
def __init__(self, name, player=None, hp=0, mp=0, element="", image="", cost=0):
self.name = name
self.player=player # which character can use this item?
self.hp = hp # does this item restore hp?
self.mp = mp # does this item restore mp?
self.element=element # does this item change elemental damage?
self.image=image # image file to use for this item
self.cost=cost # how much does it cost in shops?
def use(self): #here we define what should happen when we use the item
if self.hp>0: #healing item
player.hp = player.hp+self.hp
if player.hp > player.max_hp: # can't heal beyond max HP
player.hp = player.max_hp
inventory.drop(self) # consumable item - drop after use
elif self.mp>0: #mp restore item
player.mp = player.mp+self.mp
if player.mp > player.max_mp: # can't increase MP beyond max MP
player.mp = player.max_mp
inventory.drop(self) # consumable item - drop after use
else:
player.element=self.element #item to change elemental damage; we don't drop it, since it's not a consumable item

class Inventory(store.object):
def __init__(self, money=10):
self.money = money
self.items = []
def add(self, item): # a simple method that adds an item; we could also add conditions here (like check if there is space in the inventory)
self.items.append(item)
def drop(self, item):
self.items.remove(item)
def buy(self, item):
if self.money >= item.cost:
self.items.append(item)
self.money -= item.cost

def item_use():
item.use()

#Tooltips:
style.tips_top = Style(style.default)
#style.title.font="gui/arial.ttf"
style.tips_top.size=14
style.tips_top.color="fff"
style.tips_top.outlines=[(3, "6b7eef", 0,0)]
style.tips_top.kerning = 5

style.tips_bottom = Style(style.tips_top)
style.tips_top.size=20
style.tips_bottom.outlines=[(0, "6b7eef", 1, 1), (0, "6b7eef", 2, 2)]
style.tips_bottom.kerning = 2

style.button.background=Frame("gui/frame.png",25,25)
style.button.yminimum=52
style.button.xminimum=52
style.button_text.color="000"


showitems = True #turn True to debug the inventory
def display_items_overlay():
if showitems:
inventory_show = "Money:" + str(inventory.money) + " HP: " + str(player.hp) + " bullets: " + str(player.mp) + " element: " + str(player.element) + "\nInventory: "
for i in range(0, len(inventory.items)):
item_name = inventory.items.name
if i > 0:
inventory_show += ", "
inventory_show += item_name

ui.frame()
ui.text(inventory_show, color="#000")
config.overlay_functions.append(display_items_overlay)


screen inventory_button:
textbutton "Show Inventory" action [ Show("inventory_screen"), Hide("inventory_button")] align (1.0,.01)

screen inventory_screen:
add "gui/inventory.png" # the background
modal True #prevent clicking on other stuff when inventory is shown
#use battle_frame(char=player, position=(.97,.20)) # we show characters stats (mp, hp) on the inv. screen
#use battle_frame(char=dog, position=(.97,.50))
hbox align (.95,.04) spacing 20:
textbutton "Close Inventory" action [ Hide("inventory_screen"), Show("inventory_button"), Return(None)] align (1.0,.01)
$ x = 515 # coordinates of the top left item position
$ y = 25
$ i = 0
$ sorted_items = sorted(inventory.items, key=attrgetter('element'), reverse=True) # we sort the items, so non-consumable items that change elemental damage (guns) are listed first
$ next_inv_page = inv_page + 1
if next_inv_page > int(len(inventory.items)/9):
$ next_inv_page = 0
for item in sorted_items:
if i+1 <= (inv_page+1)*9 and i+1>inv_page*9:
$ x += 190
if i%3==0:
$ y += 170
$ x = 515
$ pic = item.image
$ my_tooltip = "tooltip_inventory_" + pic.replace("gui/inv_", "").replace(".png", "") # we use tooltips to describe what the item does.
imagebutton idle pic hover pic xpos x ypos y action [Hide("gui_tooltip"), Show("inventory_button"), SetVariable("item", item), Hide("inventory_screen"), item_use] hovered [ Play ("sound", "sounds/click.wav"), Show("gui_tooltip", my_picture=my_tooltip, my_tt_ypos=693) ] unhovered [Hide("gui_tooltip")] at inv_eff
if player.element and (player.element==item.element): #indicate the selected gun
add "gui/selected.png" xpos x ypos y anchor(.5,.5)
$ i += 1
if len(inventory.items)>9:
textbutton _("Next Page") action [SetVariable('inv_page', next_inv_page), Show("inventory_screen")] xpos .475 ypos .83

screen gui_tooltip (my_picture="", my_tt_xpos=58, my_tt_ypos=687):
add my_picture xpos my_tt_xpos ypos my_tt_ypos

init -1:
transform inv_eff: # too lazy to make another version of each item, we just use ATL to make hovered items super bright
zoom 0.5 xanchor 0.5 yanchor 0.5
on idle:
linear 0.2 alpha 1.0
on hover:
linear 0.2 alpha 2.5

image information = Text("INFORMATION", style="tips_top")
#Tooltips-inventory:
image tooltip_inventory_chocolate=LiveComposite((665, 73), (3,0), ImageReference("information"), (3,30), Text("Generic chocolate to heal\n40 points of health.", style="tips_bottom"))
image tooltip_inventory_banana=LiveComposite((665, 73), (3,0), ImageReference("information"), (3,30), Text("A healthy banana full of potassium! You can also use it as ammo for your guns! O.O Recharges 20 bullets.", style="tips_bottom"))
image tooltip_inventory_gun=LiveComposite((665, 73), (3,0), ImageReference("information"), (3,30), Text("An gun that looks like something a cop would\ncarry around. Most effective on humans.", style="tips_bottom"))
image tooltip_inventory_laser=LiveComposite((665, 73), (3,0), ImageReference("information"), (3,30), Text("An energy gun that shoots photon beams.\nMost effective on aliens.", style="tips_bottom"))





# The game starts here.

label start:

python:
player = Player("%(e)s", 100, 50)
player.hp = 50
player.mp = 10
chocolate = Item("Chocolate", hp=40, image="gui/inv_chocolate.png")
banana = Item("Banana", mp=20, image="gui/inv_banana.png")
gun = Item("Gun", element="bullets", image="gui/inv_gun.png", cost=7)
laser = Item("Laser Gun", element="laser", image="gui/inv_laser.png")
inventory = Inventory()
#add items to the initial inventory:
inventory.add(chocolate)
inventory.add(chocolate)
inventory.add(banana)
##############################
#health bar
$ health = 100
show screen health_bar
###########################
$ strength_points = 0
$ ag_points = 0
$ inteligence_points = 0
$ charisma_points = 0
$ perception_points = 0
show screen inventory_button
scene dark
"???""Hey, wake up!"
scene forest
"???""Good, you're awake! Now, what's your name?"
$ e = renpy.input("My name is...")

$ e = e.strip()

if e == "":
$ e="Ezra"
"???""%(e)s that's right."
e"Who are you?"
"???""My names Rebecca."
"Rebecca""You hit your head pretty hard, but try to remember. You've been living here at the girl's home for 2 years."
e"So I'm an orphan?"
"Rebecca""Now you are but you used to be a..."
########################################################
"Strange guy" "Hey! You wanna buy a gun?"
e"Okay"
$inventory.buy(gun)
e"Nice"
$inventory.add(laser)
"You found a laser gun!"

"The end."
return

[chocoberrie]

As for why there's no font color showing up for the other characters, it's because you didn't define them in the init block. Like this:

Code: Select all

init:
    $ e = Character("e", color="#6495ed", window_left_padding=180, show_side_image=Image("chark.png", xalign=0.0, yalign=1.0))
    $ r = Character("Rebecca", color="#colorcodehere")
    $ s = Character("Strange Guy", color="#colorcodehere")

Just replace #colorcodehere with the hex color code you want to use.

Unfortunately, I still don't know why your side image for character "E" isn't showing up. Your code works on my end, I'm not sure what the problem is for you.