Image Tag

[ivilica]

Hey everyone,

I'm working on a visual novel and wondering if there's a way to make images interactive. Specifically, when a player clicks on an image displayed using an image tag in a dialogue, I want to trigger an action, like increasing the image size.

mc "Come on, after me.{image=smile.png}"

I want the image displayed by {image=smile.png} to increase in size when a player clicks on it.
Any advice or suggestions on how to achieve this would be greatly appreciated. Thanks!

[Donmai]

You are describing an image button: https://www.renpy.org/doc/html/screens.html#imagebutton
This tutorial may be too advanced but it will show you some things you can do with clickable characters:

[m_from_space]

Any advice or suggestions on how to achieve this would be greatly appreciated. Thanks!

In Renpy you can basically make every image interactive and clickable, but not images that are placed via image tags. They are used for things like emojis or indicators and as far as I know not able to receive any events.

On the other hand - I just tried this - you can actually use a ConditionSwitch() (which is a special displayable) as an image tag as well, so from the outside you could change the appearance of an on-screen in-dialogue image. Which is funny. But as I said, you cannot make it receive any hover or click events. The only thing possible would be that the player hovers over a specific area in the say screen, that triggers the ConditionSwitch() values to change.

Hmm, now that I think of it, maybe it's possible to do a trick here. Letting the say screen show an invisible copy of the dialogue text, and trying to figure out where to place an invisible button, that's right over the image, that was placed within the text. And this button could then of course receive events and change the values for the ConditionSwitch().

Too complicated. Do you really need it? What's the point?

[Ocelot]

You can get a reaction on clicking by emberdding your image within {a} tag:

Code: Select all

"Click here: {a=jump:somewhere}{image=target.png}{/a}"

If you want reactions on hover, you need to be more inventive and remember that image tag can accept not only image files but also images. And you can put arbitrary displayables into those:
https://drive.google.com/file/d/18--4EE ... p=drivesdk

Code: Select all

image inline_text:
    TextButton("X", clicked=NullAction())
    on idle:
        TextButton("X", clicked=NullAction())
    on hover:
        TextButton("O", clicked=Jump("end"))

label start:
    scene
    "{image=inline_text}"

    return

label end:
    "end"
    return

And if you don't need drastic changes like completely changing displayable on hover, you can simply rely on displayable style properties instead, so there would be only a single displayable definition within image, without any explicit event handlers.

[ivilica]

Thank you, that solves it!