Placing images in the choices buttons

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
Vodka
Regular
Posts: 33
Joined: Sun Apr 29, 2012 10:53 pm
Contact:

Placing images in the choices buttons

#1 Post by Vodka »

So, it is possible to place images within choice buttons using {image=}, but there's some problems with doing this.

1) You can't seem to align where the image appears on the button.
2) It throws the alignment of the button's text off.

The code looks similar to this:

Code: Select all

menu:
"{image=imageloc} blah blah":
 "choice text"
I've been playing around in the choice screen in options.rpy but I can't find any way to make this look cleaner.

A lot of RPG's have little icons whenever the player is selecting a dialogue option (Bioware for instance) and I'd like to replicate this in my vn. Has anyone tried implementing this before, and got it to work?

Ideally, I would be able to specify an xalign/yalign or xpos/ypos for the button image. I'm going to keep hacking at the choice screen code and see if I can get it to behave better. I will post updates if I get it to work.

philat
Eileen-Class Veteran
Posts: 1912
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: Placing images in the choices buttons

#2 Post by philat »

Does the image have to be changeable (are you thinking of the jokeyface / angryface icons like in Dragon Age)? If not, I think it'd be easier to just bake the image into a background image. The thing is using the {image} tag is text tag behavior, and customizing that involves editing renpy common files, I think.

A workaround that wouldn't require completely overhauling the menu functions or text tag functions might be something like the following (emphasizing that this is a workaround, not an elegant solution, and that it cribs the idea from this post: http://lemmasoft.renai.us/forums/viewto ... 78#p310660 )

Code: Select all

screen choice(items):
    window: 
        style "menu_window"        
        xalign 0.5
        yalign 0.5   

        vbox:
            style "menu_vbox"
            spacing 2
            
            for caption, action, chosen in items:

                ## add an hbox so the image and button show up side-by-side.
                hbox:
                    if " (angry)" in caption:
                        $ caption = caption.replace(" (angry)", "")
                        add "angry image"
                    
                    if action:                          
                        button:
                            action action
                            style "menu_choice_button"
                            text caption style "menu_choice"                        
                    else:
                        text caption style "menu_caption"

label start:
    menu:
        "Choice 1 (angry)":
            pass
        "Choice 2":
            pass
Depending on how many images you have, you could just hard code the images in with (angry), (happy), etc. Or you could try to parse for it more efficiently if you have a better grasp on python than I do -- I imagine it would require some form of regex, which I know how to read but not write, if you know what I mean.

This method would place the image outside the button, so it may not be what you want (or you could design around it if you'd like), but you could also try fiddling around with placing the image inside the button or not using an hbox and having the image overlap with the button in some form -- it would probably require some trial and error to get the styles right.

Vodka
Regular
Posts: 33
Joined: Sun Apr 29, 2012 10:53 pm
Contact:

Re: Placing images in the choices buttons

#3 Post by Vodka »

Thanks for the link, I was already playing around with the common files but I'll try this method a few ways and see if it works.

Ideally, I'll have an area within each choice button where I'll have an image. I could probably do this by having a few different images, and just put them side-by-side with each choice using an hbox.

I'll post an update once I figure it out.

Vodka
Regular
Posts: 33
Joined: Sun Apr 29, 2012 10:53 pm
Contact:

Re: Placing images in the choices buttons

#4 Post by Vodka »

Alright, I've almost got it working. But I've got one problem.

Code: Select all

            for caption, action, chosen in items:
                
                hbox:
                    spacing 0
                    if "(%s)" in caption:
                        $ caption = caption.replace(" (%s)", "")
                        add "%s"
It's been a while since I actually did anything in Python. So why isn't %s working? I thought %s would tell Ren'Py to 'take whatever string is in the parenthesis and run with it', but apparently this is not the case. Do I need to define %s?

Vodka
Regular
Posts: 33
Joined: Sun Apr 29, 2012 10:53 pm
Contact:

Re: Placing images in the choices buttons

#5 Post by Vodka »

I have to go to class but I'm very, very close now:

Code: Select all

            for caption, action, chosen, in items:
                
                hbox:
                    spacing 0
                    $ finder = caption[caption.find("(")+1:caption.find(")")]
                    $ caption = caption.replace(" (%s)", "")
                    $ choiceimage = "%s" % finder
                    add "%s" % choiceimage
The side images are displaying but I still need to get ride of the (%s) in the caption.

Vodka
Regular
Posts: 33
Joined: Sun Apr 29, 2012 10:53 pm
Contact:

Re: Placing images in the choices buttons

#6 Post by Vodka »

Got it.

Just needed to put the % finder after the (%s) in caption.replace.

Vodka
Regular
Posts: 33
Joined: Sun Apr 29, 2012 10:53 pm
Contact:

Re: Placing images in the choices buttons

#7 Post by Vodka »

Full code for anyone interested:

Code: Select all

            for caption, action, chosen, in items:
                
                hbox:
                    spacing 0
                    $ finder = caption[caption.find("(")+1:caption.find(")")]
                    $ caption = caption.replace(" (%s)" % finder, "")
                    add "%s" % finder
                        
                    if action:  
                        button:
                            action action
                            style "menu_choice_button"                        
                            text caption style "menu_choice"
                            
                    else:
                        text caption style "menu_caption"
And an in-game screenshot:

Image

Edit: the finder and choiceimage was redundant. Problem solved.
Last edited by Vodka on Fri Mar 13, 2015 2:12 pm, edited 1 time in total.

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Placing images in the choices buttons

#8 Post by trooper6 »

Could you show a larger snippet of code? Like how that would be used in context? I'm having a hard time wrapping my head around it at the moment.
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

Vodka
Regular
Posts: 33
Joined: Sun Apr 29, 2012 10:53 pm
Contact:

Re: Placing images in the choices buttons

#9 Post by Vodka »

I really have to go right now but here's a quick breakdown:

1) define an image as 'imageyouwant' the usual way in script.rpy
2) put that code into your choices screen
3) put "blah blah (imageyouwant)" all your choices

Now my code will remove (imageyouwant) from your choices, and place (imageyouwant) in an hbox next to that choice. Just make sure that (imageyouwant) always refers to a defined image, and you won't have any problems.

philat
Eileen-Class Veteran
Posts: 1912
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: Placing images in the choices buttons

#10 Post by philat »

Pretty nice work, Vodka!

trooper6, probably helpful if you look at my prototype code in the second post before you look at Vodka's finished code. Mainly, it lets you write choices like "You look great. (sarcastic)" vs. "You look great. (compliment)" and have an image display to clearly distinguish the two. Another example of how the idea is used would be Dragon Age, like so http://thegrandarmy.com/wp-content/uplo ... dialog.jpg. Here the red fist signifies aggression/anger. But it also allowed DAI to show things like "This option is only available because you are an elf/mage/you have a certain perk", which was a pretty interesting use as well. ( http://dragonage.wikia.com/wiki/Dialogu ... quisition) list of icons in case you'd like to see the use cases). I know you're not always fond of such UI elements that make the game more game-y, but you can see why it's useful. ;)

It's not as flexible as having a custom menu function that would take the image separately (mainly because this means you can't use parentheses other than as image options in a choice menu -- not that parentheses show up very often in choices anyway), but it's simpler to implement.

User avatar
trooper6
Lemma-Class Veteran
Posts: 3712
Joined: Sat Jul 09, 2011 10:33 pm
Projects: A Close Shave
Location: Medford, MA
Contact:

Re: Placing images in the choices buttons

#11 Post by trooper6 »

Thanks Philat!
I don't mind UI elements depending what they are and how they are used...and the context of the game. For example, I love the way Dragon Age used the Dialogue Wheel. One of those RPGS I've played...I can't remember which one...used parenthetical comments in a really exciting way...one that has influenced me as a matter of fact. It was when you had three options like:
-(Honest) I will help you.
-(Lie) Of course, I will help you.
-(Threaten) I'd never help you.

I think the dialogue wheel is quite practical in getting tone in a quick way...and I do like them. Well, I tend to like the wheel to help clarify player intentions, but not to tell you how the NPC will react...if that makes any sense.

Bars on the screen...that also really depends on the game feeling...and the bar.
A Close Shave:
*Last Thing Done (Aug 17): Finished coding emotions and camera for 4/10 main labels.
*Currently Doing: Coding of emotions and camera for the labels--On 5/10
*First Next thing to do: Code in all CG and special animation stuff
*Next Next thing to do: Set up film animation
*Other Thing to Do: Do SFX and Score (maybe think about eye blinks?)
Check out My Clock Cookbook Recipe: http://lemmasoft.renai.us/forums/viewto ... 51&t=21978

Vodka
Regular
Posts: 33
Joined: Sun Apr 29, 2012 10:53 pm
Contact:

Re: Placing images in the choices buttons

#12 Post by Vodka »

Okay, now I'm trying to figure out how to add a separate kind of menu that just uses images with no text. So the player will just be clicking on the item that they want.

Any ideas? I figure I'd just copy the choice screen and make some changes, but how would I call it instead of a menu?

philat
Eileen-Class Veteran
Posts: 1912
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: Placing images in the choices buttons

#13 Post by philat »

Well, it won't be as readable or simple as using the menu scheme, but you could conceivably do something like this. (Disclaimer: I'm not actually all that sure the menu function uses a list as opposed to any other data structure, but I just kind of assumed so here.)

Code: Select all

screen image_choice(items):
    ## copy the choice screen, modified as needed

label start:
    $ image_choice_list = [("image path", Return("label to jump to")), ("image path2", Return("label to jump to2"))]
    call screen image_choice(image_choice_list)
    $ renpy.jump(_return)
The idea being that you're manually supplying the list of 'items' for the screen to use instead of using the menu function to parse things nicely. (I'm assuming you don't want to use the {image} method. ;) )

But on the other hand, at that point, do you even really need to tie it to the "menu" screen functionality? I mean, at that point isn't it pretty much like writing any other screen item selection, e.g., http://lemmasoft.renai.us/forums/viewto ... 51&t=23071 ?

User avatar
xavimat
Eileen-Class Veteran
Posts: 1461
Joined: Sat Feb 25, 2012 8:45 pm
Completed: Yeshua, Jesus Life, Cops&Robbers
Projects: Fear&Love
Organization: Pilgrim Creations
Github: xavi-mat
itch: pilgrimcreations
Location: Spain
Discord: xavimat
Contact:

Re: Placing images in the choices buttons

#14 Post by xavimat »

Vodka wrote:Okay, now I'm trying to figure out how to add a separate kind of menu that just uses images with no text. So the player will just be clicking on the item that they want.
Well, I think you can simply use the same choice screen that you have done, only putting the "add" inside the button, or making it an imagebutton, and call it the same way:

Code: Select all

menu:
    " (sword)":
        pass
    " (axe)":
        pass
    " (hammer)":
        pass
The screen could be:
EDIT. After some tests, this seems to work:

Code: Select all

            for caption, action, chosen in items:

                if action:
                    $ finder = caption[caption.find("(")+1:caption.find(")")]
                    $ caption = caption.replace(" (%s)" % finder, "")

                    button:
                        action action
                        style "menu_choice_button"
                        has hbox
                        if finder:
                            add "%s" % finder
                            null width 10    # some space between the image and the text
                        text caption style "menu_choice"

                else:
                    text caption style "menu_caption"
Comunidad Ren'Py en español: ¡Únete a nuestro Discord!
Rhaier Kingdom A Ren'Py Multiplayer Adventure Visual Novel.
Cops&Robbers A two-player experiment | Fear&Love Why can't we say I love you?
Honest Critique (Avatar made with Chibi Maker by ~gen8)

philat
Eileen-Class Veteran
Posts: 1912
Joined: Wed Dec 04, 2013 12:33 pm
Contact:

Re: Placing images in the choices buttons

#15 Post by philat »

As usual, xavimat is more helpful than I am. :D

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot]