interactive images

[Izzayuh]

I am currently making an interactive music album using Ren'Py for my current University project.
What I want to do is design a series of panels which will be shown on the screen at the same time, and when one is clicked it will change with another image, while the unclicked images are left unchanged
(I used this video as concept research as this is the type of thing I want, but no transition of sweeping across the page, they will all be in the same position on screen http://jeffbuckley.com/interactive/)
Is there any code I could use which does this, or will I have to turn to other software?
And will I also be able to use simple animations on the clickable images, such as the bobbing of a figure, or would the images have to be still PNGs?
I thought I could have a series of images showing the different parts of each songs story, and when clicked they would show another perspective of the same story, and then once one song is finished, the game would jump to the next scene which would be when the next song on the album would play

[Ocelot]

Nothing really hard about that. A bunch of buttons which will call a python function which will assign next displayable in list to currently displayed one. And a simple timer to change scenes/songs (and if there is a callback when track finishes playin, it is even easier)

As for animations, you can either use movie sprites, meaning that you will have to turn your gif into videofile or disassemble it to several frames and build animation inside RenPy using ATL.

[Izzayuh]

Nothing really hard about that. A bunch of buttons which will call a python function which will assign next displayable in list to currently displayed one. And a simple timer to change scenes/songs (and if there is a callback when track finishes playin, it is even easier)

As for animations, you can either use movie sprites, meaning that you will have to turn your gif into videofile or disassemble it to several frames and build animation inside RenPy using ATL.

okay, so would I set a single image as a button, and then when it was clicked it would change or would the button be above the image as a seperate thing?
I'm pretty new to this software so sorry about that, I'm just still confused as to how to code this

[Ocelot]

A quick example:

Code: Select all

init python:
    buttons = ["images/red.png", "images/green.png", "images/blue.png"]
    button = buttons[0]
    def change_button():
        global button
        global buttons
        buttons = buttons[1:] + buttons[:1]
        button = buttons[0]
        
screen bb:
    imagebutton idle "[button]" action Function(change_button) xalign 0.5 yalign 0.5

Make sure that there are images called "red", "green" and "blue" in "images" folder and later in your code you can do

Code: Select all

show screen bb

and you will see button you can click to change color of the button.

[Izzayuh]

A quick example:

Code: Select all

init python:
    buttons = ["images/red.png", "images/green.png", "images/blue.png"]
    button = buttons[0]
    def change_button():
        global button
        global buttons
        buttons = buttons[1:] + buttons[:1]
        button = buttons[0]
        
screen bb:
    imagebutton idle "[button]" action Function(change_button) xalign 0.5 yalign 0.5

Make sure that there are images called "red", "green" and "blue" in "images" folder and later in your code you can do

Code: Select all

show screen bb

and you will see button you can click to change color of the button.

thank you so so much for the help, this has cleared things up a lot for me. for
"screen bb:
imagebutton idle "[button]" action Function(change_button) xalign 0.5 yalign 0.5[/code]"
the xalign and yalign are what decides the position of the images in this code, correct?

[Ocelot]

Yes it does set position of image. You really want to read documentation: https://www.renpy.org/doc/html/