How do I add a side image to my game??

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Message
Author
NeryNight
Regular
Posts: 43
Joined: Wed Jun 01, 2011 12:57 am
Projects: Love Struck (GxB)
Location: A small apartment, in a small city, somewhere in the planet.
Contact:

How do I add a side image to my game??

#1 Post by NeryNight » Thu Aug 25, 2011 3:17 pm

Sorry if other people have already asked this question, but I can't make it work no matter what I do.
I look it up in the forum and ren'py tutorials, but the side image won't show went I launch my game. I was wondering if someone can help me. :?

User avatar
Rewritten Ennui
Veteran
Posts: 279
Joined: Thu Jul 14, 2011 1:50 pm
Organization: TwinTurtle Games
Contact:

Re: How do I add a side image to my game??

#2 Post by Rewritten Ennui » Thu Aug 25, 2011 3:26 pm

Code: Select all

image side e = ("Eileen.png")
define e = Character(show_side_image=Image("Eileen.png", xalign=1.0, yalign=1.0))
Something like that should work. This is will appear on the right of the text box. If you want it on the left, set xalign=0.
I've swapped accounts to CheeryMoya, so this account is no longer in use. Refer to the new account if you want to contact me.

Twinturtle Games Website

User avatar
Gear
Miko-Class Veteran
Posts: 764
Joined: Tue Apr 05, 2011 10:15 pm
Projects: Tempestus Sum
Organization: Xenokos Interactive
IRC Nick: Gear
Skype: Skye.Gear
Location: Grand Prairie, TX
Contact:

Re: How do I add a side image to my game??

#3 Post by Gear » Thu Aug 25, 2011 10:36 pm

This may sound simple, but make sure you check that the file name is correct and in the folder it's supposed to be. The file names may be case-sensitive as well, so double checking that may help.
The best reason to get up in the morning is to outdo yourself: to do it better than you've ever done it before. But if you haven't done it better by nightfall... look at your globe and pick a spot: it's always morning somewhere.

tentacle
Newbie
Posts: 20
Joined: Thu Feb 24, 2011 6:37 am
Contact:

Re: How do I add a side image to my game??

#4 Post by tentacle » Sun Aug 28, 2011 9:41 am

This works for me. Not to hijack the thread, but could someone point me in the right direction if I want to a) animate the side image and b) have the text wrap around the side image (currently the side image appears on top of the text). Are 'screens' the bit I need to be reading up on?

User avatar
Alex
Lemma-Class Veteran
Posts: 2729
Joined: Fri Dec 11, 2009 5:25 pm
Contact:

Re: How do I add a side image to my game??

#5 Post by Alex » Sun Aug 28, 2011 11:03 am

a) animate the side image
Make an animated displayable using ATL and put its name inside your code instead of filename of your side image.
http://www.renpy.org/doc/html/atl.html# ... -atl-block
b) have the text wrap around the side image (currently the side image appears on top of the text)
You need to set textbox paddings for you characters, like in FAQ example
http://www.renpy.org/wiki/renpy/FAQ#How ... y_speak.3F

tentacle
Newbie
Posts: 20
Joined: Thu Feb 24, 2011 6:37 am
Contact:

Re: How do I add a side image to my game??

#6 Post by tentacle » Thu Sep 01, 2011 4:16 pm

Both tips work perfectly, thanks!

But I'm having issues getting both to work at the same time.

Code: Select all

#mika on the left
define ml = Character('Mika', window_left_padding=160, show_side_image="mt", color="#c8ffc8")
image mt:  # Mika's talking head
    "mika_talkC.png"
    pause 0.20
    "mika_talkB.png"
    pause 0.20
    repeat

mt "hi there, my head should be somewhere on the left and the text to the right of it"
Two issues with this:
- the image is at the default position of top left. I can't figure out where to put the xalign/yalign parameters?
- other than that, it appears as I'd expect, animated and correctly padded, but, after I click to continue, I get:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/script.rpy", line 108, in script
        ml "and this is finally ML asda sdas dasd asd asd"
AttributeError: 'NoneType' object has no attribute '_hide'

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\execution.py", line 261, in run
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\ast.py", line 396, in execute
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\exports.py", line 684, in say
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\character.py", line 765, in __call__
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\character.py", line 661, in do_display
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\character.py", line 468, in display_say
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\ui.py", line 236, in interact
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\display\core.py", line 1667, in interact
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\display\core.py", line 555, in replace_transient
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\display\core.py", line 825, in remove
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\display\core.py", line 753, in hide_or_replace
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\display\screen.py", line 200, in _hide
  File "C:\Program Files (x86)\renpy-6.12.2\renpy\display\motion.py", line 636, in _hide
AttributeError: 'NoneType' object has no attribute '_hide'

Any suggestions?

aki
Newbie
Posts: 15
Joined: Thu Sep 01, 2011 6:47 pm
Contact:

Re: How do I add a side image to my game??

#7 Post by aki » Thu Sep 01, 2011 6:53 pm

Hi.

I'm new here. I did what you suggest for adding a figure to the text of my character, but I have a problem with the size of the side image. So I change the size before.

I tried the code:

Code: Select all

image alice=Image(im.FactorScale("alice-in-wonderland-2010.jpg", 0.5,0.5), xalign=0.0, yalign=1.0)

define s = Character('Alice',window_left_padding=200, 
    show_side_image="alice")
but I have problem with the alignement. It is located at the top left of the screen, and not at the bottom.

So, if I change the size of the image, the alignment is modiffied.
Could you help me, please?

tentacle
Newbie
Posts: 20
Joined: Thu Feb 24, 2011 6:37 am
Contact:

Re: How do I add a side image to my game??

#8 Post by tentacle » Fri Sep 02, 2011 2:51 pm

I see Aki solved his problem in another thread, and I also solved one of my problems. Here's how I got it to work:

Code: Select all

define ml = Character('Mika', window_left_padding=165, show_side_image="mtl", color="#c8ffc8")
image mtl:  # Mika's talking head
    xalign 0.0 yalign 1.0
    "mika_talkC.png"
    pause 0.20
    "mika_talkB.png"
    pause 0.20
    repeat
ml "I'm on the left now, animated and the text has the correct padding!"
But I still get the "_hide" error when I click to continue....no clue about that. Any help appreciated....

aki
Newbie
Posts: 15
Joined: Thu Sep 01, 2011 6:47 pm
Contact:

Re: How do I add a side image to my game??

#9 Post by aki » Fri Sep 02, 2011 3:49 pm

Hi, tentacle.
I just solved that. You don¡t have to write show_side_image in the definition of the character. You give the tag eileen to the image.
Then, you add the image side you want, resized.
To call it just write the name of the side image after the character and before the text.

Here you have the code:

Code: Select all

define e = Character("Eileen", window_left_padding=165, image="eileen")
image side eileen happy = im.FactorScale("side_eileen_happy.png", 0.5,0.5)

label start:
    e happy concerned "And this one is point B."
I hope it helps :)

BTW, I'm a she ;)

tentacle
Newbie
Posts: 20
Joined: Thu Feb 24, 2011 6:37 am
Contact:

Re: How do I add a side image to my game??

#10 Post by tentacle » Sat Sep 03, 2011 10:57 am

aki wrote:BTW, I'm a she ;)
Oops :wink:

Thanks. What you suggest works, but it seems the xalign and yalign are not respected, the image is instead the default xalign 0.0 yalign 1.0 position!

Code: Select all

# ml is our character (Mika) with an imade that should be on the left at xalign 0.0 and yalign 0.925
define ml = Character('Mika', window_left_padding=165, image="ml", color="#c8ffc8")
image side ml talking:  # Mika's talking head
    xalign 0.0 yalign 0.925
    "mika_talkC.png"
    pause 0.20
    "mika_talkB.png"
    pause 0.20
    repeat

ml talking "Everything works, except the xalign/yalign are ignored!!"
So if I do it the original way (my example with show_side_image) it works perfect except for the _hide_ error.
If I do it your way there's no crash but alignment is ignored.....

:(

aki
Newbie
Posts: 15
Joined: Thu Sep 01, 2011 6:47 pm
Contact:

Re: How do I add a side image to my game??

#11 Post by aki » Sat Sep 03, 2011 11:54 am

Yes, I have problems with the alignments too.
Could it work with ...

Code: Select all

image side eileen happy = Image(im.FactorScale("side_eileen_happy.png", 0.5,0.5)
, xalign=0.0 yalign=0.925))
:?:

tentacle
Newbie
Posts: 20
Joined: Thu Feb 24, 2011 6:37 am
Contact:

Re: How do I add a side image to my game??

#12 Post by tentacle » Mon Sep 05, 2011 4:56 am

I couldn't get it working. So to work around it I'm not using side images, instead I just show and hide the image each time...a little extra typing but I can survive!

So for example I have the normal character definition for when I want the character to speak without any image:

Code: Select all

define m = Character('Mika', color="#c8ffc8")
And if I want the image on the side I use this that adds space to the left for the image:

Code: Select all

define ml = Character('Mika', window_left_padding=165, color="#c8ffc8")
Then I define the image ml with alignments:

Code: Select all

image m left talking: 
    xalign 0.0 yalign 0.925
    "mika_talkC.png"
    pause 0.20
    "mika_talkB.png"
    pause 0.20
    repeat
Then I use it like so:

Code: Select all

    m "Hi, here I have no image"
    show m left talking
    ml "And now you can see me talking to the left"
    hide m
So, this way everything works, it just means some extra typing. I'm sure there's a better way, but I couldn't figure it out.

Tarebear
Newbie
Posts: 12
Joined: Thu Nov 15, 2012 6:36 am
Contact:

Re: How do I add a side image to my game??

#13 Post by Tarebear » Fri Nov 16, 2012 12:52 am

Hi guys! Since I am trying to do this now, I want a side image to change expressions during certain situations, how do I go about doing that?

Thank you for the coding help it's really been a wonderful tutorial.

Tarebear
Newbie
Posts: 12
Joined: Thu Nov 15, 2012 6:36 am
Contact:

Re: How do I add a side image to my game??

#14 Post by Tarebear » Fri Nov 16, 2012 12:59 am

Just one more question...

Code: Select all

image side A = ("Amelia-Normal.png")
define A = Character(show_side_image=Image("Amelia-Normal.png", xalign=1.0, yalign=1.0))
So there is that, and then I also have

Code: Select all

image side Ae = ("Amelia-Exasperated.png")
define Ae = Character(show_side_image=Image("Amelia-Exasperated.png", xalign=1.0, yalign=1.0))

Would that work? I mean I don't mind having to type A or Ae for typing words out if it gets the job done. :D


Gonna go try it out!

User avatar
Azure_Flute
Regular
Posts: 26
Joined: Fri Apr 04, 2014 7:12 pm
Contact:

Re: How do I add a side image to my game??

#15 Post by Azure_Flute » Fri Apr 04, 2014 7:21 pm

How about this then?

Code: Select all

define A = Character('Michi', color="#c8ffc8", image = "Michi", window_left_padding=175)
image side Michi = ("mnormal.png") 
:wink:

Post Reply

Who is online

Users browsing this forum: PyTom