Ren'Py Image buttons for 6 animations (problem - solved)

[Deleted member 1394645]

Hi guys,

unfortunately I´m a total noob in coding.

I want to release my first VN. The renders are ready, for animations, too.

I want to add in my scene 6 buttons on the right site, like those in the example. Each button should start one animation.
During all the buttons all 6 buttons should be visible, too. To jump between all 6 animations. Plus, there should be a 7th button for "continue to cum-images.

I tried a lot of codes for image buttons, but nothing worked... I´m fucking frustrated... Can anybody help me, please?

Spoiler: explicit example

You don't have permission to view the spoiler content. Log in or register now.

My code looks like this:

scene ip 00177

    al "Are you ready?"
    ma "Yes!"

    label mov3:
    show blowjob1
    window hide
    pause

    label mov4:
    show blowjob2
    window hide
    pause

    label mov5:
    show blowjob3
    window hide
    pause

.....

 

[rayminator]

how are you coding your imagebuttons?

Example:

screen townhallUI():
     modal True # this will make the screen come through over the other screens   

    vbox:
        xalign 1.0
        yalign 0.5
        imagebutton:
            focus_mask True
            idle "gui/char/tomo/tomo_at_work.png"
            hover (im.MatrixColor("gui/char/tomo/tomo_at_work.png",im.matrix.brightness(0.10)))
            action Call("Tomo_at_townhall")

 

[Deleted member 1394645]

I was trying this:


imagebutton:
idle "bathroom_idle_shower.png"
hover "bathroom_hover_shower.png"
focus_mask True
xpos 0 ypos 0
action Jump("takeshower_label")


and this:

You must be registered to see the links

But I hadn´t success.


I´m sorry but I can´t use your code. I never used vbox or modal True. I get error notifications for almost every line.

    vbox:

    xalign 1.0
    yalign 0.5

    imagebutton:

        focus_mask True
        idle "slow1.png"
        hover (im.MatrixColor("slow1.png",im.matrix.brightness(0.10)))
        action Call("mov3")

 

[Deleted member 1394645]

This was my previous code, but it doesn´t work... I just want a few buttons on the right. If you click on the first, it starts the first animation, if you then click on the second, it navigates to the second, etc...

    scene ip 00177

    al "Are you ready?"
    ma "Yes!"


    imagebutton:
        idle "1slow.png"
        hover "1slow.png"
        focus_mask True
        xpos 0.1 ypos 0.2
        action Jump("mov3_label")

    imagebutton:
        idle "1fast.png"
        hover "1fast.png"
        focus_mask True
        xpos 0.1 ypos 0.4
        action Jump("mov4_label")

    label mov3:
    show blowjob1
    window hide
    pause

    label mov4:
    show blowjob2
    window hide
    pause

 

[rayminator]

imagebutton:
idle "bathroom_idle_shower.png"
hover "bathroom_hover_shower.png"
focus_mask True
xpos 0 ypos 0
action Jump("takeshower_label")

you getting can't find image error where are the images for the button are located at

imagebutton:
    idle "images/bathroom_idle_shower.png"
    hover "images/bathroom_hover_shower.png"
    focus_mask True
    xpos 0 ypos 0
    action Jump("takeshower_label")

or

iimagebutton:
    idle "gui/bathroom_idle_shower.png"
    hover "gui/bathroom_hover_shower.png"
    focus_mask True
    xpos 0 ypos 0
    action Jump("takeshower_label")

or if you have it in those folders but in it's own folder

imagebutton:
    idle "images/your_image_folder/bathroom_idle_shower.png"
    hover "images/your_image_folder/bathroom_hover_shower.png"
    focus_mask True
    xpos 0 ypos 0
    action Jump("takeshower_label")

or

iimagebutton:
    idle "gui/your_image_folder/bathroom_idle_shower.png"
    hover "gui/your_image_folder/bathroom_hover_shower.png"
    focus_mask True
    xpos 0 ypos 0
    action Jump("takeshower_label")

This was my previous code, but it doesn´t work... I just want a few buttons on the right. If you click on the first, it starts the first animation, if you then click on the second, it navigates to the second, etc...

    scene ip 00177

    al "Are you ready?"
    ma "Yes!"


    imagebutton:
        idle "1slow.png"
        hover "1slow.png"
        focus_mask True
        xpos 0.1 ypos 0.2
        action Jump("mov3_label")

    imagebutton:
        idle "1fast.png"
        hover "1fast.png"
        focus_mask True
        xpos 0.1 ypos 0.4
        action Jump("mov4_label")

    label mov3:
    show blowjob1
    window hide
    pause

    label mov4:
    show blowjob2
    window hide
    pause

you have to put those imagebuttons into screen not inside a label and on a new file

just like I showed you before

screen townhallUI():
    modal True # this will make the screen come through over the other screens 

    vbox:
        xalign 1.0
        yalign 0.5
        imagebutton:
            focus_mask True
            idle "gui/char/tomo/tomo_at_work.png"
            hover (im.MatrixColor("gui/char/tomo/tomo_at_work.png",im.matrix.brightness(0.10)))
            action Call("Tomo_at_townhall")

and this part here

label whats_your_label_name:
    scene ip 00177


    al "Are you ready?"

    ma "Yes!"
  
    show screen your_screen_name
  
    blah blah you text
  
    hide screen your_screen_name

this might help you out some more this youtuber has a game on this site

 

[mickydoo]

label yumi_bj1:
     show img138 with fade
     call screen button1
   
 
label yumi_bj2:
     show img138 with fade
     call screen button1  
   

   
label yumi_bj3:
     show img140 with fade
     call screen button1    
   
   
screen button1:
    imagebutton:
        idle "whatever1.png"
        hover "whatever2.png"
        xalign 0.98
        yalign 0.03
        action Jump("yumi_bj2")
       
       
       
    imagebutton:
        idle "whatever1.png"
        hover "whatever1.png"
        xalign 0.98
        yalign 0.15
        action Jump("yumi_bj3")

Mine is simple like that.

 

[anne O'nymous]

    scene ip 00177

    al "Are you ready?"
    ma "Yes!"


    imagebutton:
        idle "1slow.png"
        hover "1slow.png"
        focus_mask True
        xpos 0.1 ypos 0.2
        action Jump("mov3_label")

    imagebutton:
        idle "1fast.png"
        hover "1fast.png"
        focus_mask True
        xpos 0.1 ypos 0.4
        action Jump("mov4_label")

    label mov3:
    show blowjob1
    window hide
    pause

    label mov4:
    show blowjob2
    window hide
    pause

Wait, this is your code ?

I mean, your code really have label declaration (the label lines) at the same level of indentation than their content, and imagebutton defined in the middle of the labels instead of a screen ?

Sorry, but everything is wrong here. See mickydoo code, there's other way to do it, but globally speaking it's how it must be done.

 

[79flavors]

Completely unrelated to your original question, but I would like to add something that may make your future RenPy life easier.

Anytime a line of code ends in a colon ( : )... the next line/block below it should be indented by 4 spaces.

It's a tiny thing, and there are exceptions (I'm looking at YOU label). But if you always follow this rule, a lot of the initial compilation errors will go away. The same is true for screen code too.

Some other minor explanations:

vbox is just a way of stacking some other screen components vertically. Think of it like a spreadsheet. A vbox would a column in that spreadsheet. Each item you add within that vbox becomes another "cell" added to the bottom. Combine it with the corresponding hbox (horizontal boxes) and you've got the potential for a full spreadsheet like display area. It's a handy way of lining things up, so they're all aligned and equally spaced out down the screen - especially if some of the buttons/text/whatever is optional.

modal True is something you include as a parameter of any screen you NEED the player to interact with before the player can continue. It effectively makes all other buttons / clickable areas of the screen unavailable until this specific screen is dealt with (except the quickbar). You'd normally add modal True to any screen using call screen and omit it for screens invoked using show screen.

And whilst you didn't mention it, I'll also add...

focus_mask True is a away of using irregularly shaped buttons. Basically, any part of the image that is NOT transparent is clickable, whereas the transparent areas are ignored. Obviously, you'd need to use an image format like .png or .webp that supports transparency.

Finally...

You've mentioned coding stuff like:

   imagebutton:
        idle "1slow.png"
        hover "1slow.png"
        focus_mask True
        xpos 0.1 ypos 0.2
        action Jump("mov3_label")

If the hover image and the idle image are the same - you don't need the hover line at all. An imagebutton NEEDS an idle definition... but everything else is optional.

There's also code like:

    imagebutton:
        idle "bathroom_idle_shower.png"
        hover "bathroom_hover_shower.png"
        focus_mask True
        xpos 0 ypos 0
        action Jump("takeshower_label")

A shortcut is to use auto instead of idle and hover. auto auto replaces %s in the filename and looks for matching images using the words idle, hover and some others you probably don't care about at this stage. As long as the correct files exist in the /images/ folder, things will be fine.

Instead, it would looks like:

    imagebutton:
        auto "bathroom_%s_shower.png"
        focus_mask True
        xpos 0 ypos 0
        action Jump("takeshower_label")

For the record, I'd probably do as Mickeydoo has suggest. A single screen with all your buttons on, jumping to labels which change the scene background and then reshowing the buttons. It's RenPy... there undoubtedly other ways to do it... but this one is works and is relatively simple.

 

[Deleted member 1394645]

Hi guys, thank you very much for your contribution! It helped me a lot. It seems to work.

But there is only one probem:
It´s not possible to click on the third button to play mov6, and then to click on the first button to play mov4, again.
It´s only possible to play all animations top-down. Is there a solution to fix that?

I used the "simple" version of mickydoo.

Here is my code:

label mov3:
        show blowjob1 with fade
        call screen button1
        window hide
        pause

    label mov4:
        show blowjob2 with fade
        call screen button1
        window hide
        pause

    label mov5:
        show blowjob3 with fade
        call screen button1
        window hide
        pause

    label mov6:
        show blowjob4 with fade
        call screen button1
        window hide
        pause

    label mov7:
        show blowjob6 with fade
        call screen button1
        window hide
        pause

    label mov8:
        show blowjob5 with fade
        call screen button1
        window hide
        pause

    screen button1:
        imagebutton:
            idle "1slow.png"
            hover "1slow.png"
            xalign 0.98
            yalign 0.03
            action Jump("mov4")

        imagebutton:
            idle "1fast.png"
            hover "1fast.png"
            xalign 0.98
            yalign 0.15
            action Jump("mov3")

        imagebutton:
            idle "2slow.png"
            hover "2slow.png"
            xalign 0.98
            yalign 0.27
            action Jump("mov6")

        imagebutton:
            idle "2fast.png"
            hover "2fast.png"
            xalign 0.98
            yalign 0.39
            action Jump("mov5")

        imagebutton:
            idle "3slow.png"
            hover "3slow.png"
            xalign 0.98
            yalign 0.51
            action Jump("mov7")

        imagebutton:
            idle "3fast.png"
            hover "3fast.png"
            xalign 0.98
            yalign 0.63
            action Jump("mov8")

 

[rayminator]

Hi guys, thank you very much for your contribution! It helped me a lot. It seems to work.

But there is only one probem:
It´s not possible to click on the third button to play mov6, and then to click on the first button to play mov4, again.
It´s only possible to play all animations top-down. Is there a solution to fix that?

I used the "simple" version of mickydoo.

Here is my code:

label mov3:
        show blowjob1 with fade
        call screen button1
        window hide
        pause

    label mov4:
        show blowjob2 with fade
        call screen button1
        window hide
        pause

    label mov5:
        show blowjob3 with fade
        call screen button1
        window hide
        pause

    label mov6:
        show blowjob4 with fade
        call screen button1
        window hide
        pause

    label mov7:
        show blowjob6 with fade
        call screen button1
        window hide
        pause

    label mov8:
        show blowjob5 with fade
        call screen button1
        window hide
        pause

    screen button1:
        imagebutton:
            idle "1slow.png"
            hover "1slow.png"
            xalign 0.98
            yalign 0.03
            action Jump("mov4")

        imagebutton:
            idle "1fast.png"
            hover "1fast.png"
            xalign 0.98
            yalign 0.15
            action Jump("mov3")

        imagebutton:
            idle "2slow.png"
            hover "2slow.png"
            xalign 0.98
            yalign 0.27
            action Jump("mov6")

        imagebutton:
            idle "2fast.png"
            hover "2fast.png"
            xalign 0.98
            yalign 0.39
            action Jump("mov5")

        imagebutton:
            idle "3slow.png"
            hover "3slow.png"
            xalign 0.98
            yalign 0.51
            action Jump("mov7")

        imagebutton:
            idle "3fast.png"
            hover "3fast.png"
            xalign 0.98
            yalign 0.63
            action Jump("mov8")

are the images the exact same size width and height or all of them are different sizes?

if so this when to use focus_mask True

 

[79flavors]

Those window hide and pause statements are doing nothing.
An image is shown and then screen button1 is called. The screen will await a player interaction, at which point it will action Jump() somewhere.

It may or may not be factor... but you should probably be showing the images using scene instead of show. show just overlays the image on top of the existing scene. Depending on how the player interacts with the game - you could end up with dozens of images all being shown at the same time, each hidden by the image on top of it.

As I said earlier, I personally would remove the hover lines. But they are doing no harm.

But no, I don't see anything that would do what you're describing. There's certainly nothing stopping anyone clicking the buttons in any order... at least, as far as I can see. The show thing might be responsible - but I don't see why, unless the screen is appearing on a specific screen layer and then the later show statements are being displayed in front of it. But if that were the case, I'd expect you to be only be able to click a single button and then not be able to click anything after that.

If I were writing it (without a vbox), it would look like this...

screen button1():
    modal True

    imagebutton:
        idle "1slow.png"
        xalign 0.98
        yalign 0.03
        action Jump("mov4")

    imagebutton:
        idle "1fast.png"
        xalign 0.98
        yalign 0.15
        action Jump("mov3")

    imagebutton:
        idle "2slow.png"
        xalign 0.98
        yalign 0.27
        action Jump("mov6")

    imagebutton:
        idle "2fast.png"
        xalign 0.98
        yalign 0.39
        action Jump("mov5")

    imagebutton:
        idle "3slow.png"
        xalign 0.98
        yalign 0.51
        action Jump("mov7")

    imagebutton:
        idle "3fast.png"
        xalign 0.98
        yalign 0.63
        action Jump("mov8")

    textbutton "[ EXIT ]":
        xalign 0.98
        yalign 0.75
        action Jump("button1_exit")

label start:

    scene black with fade
    "*** START ***"

    jump mov3

label mov3:
    scene blowjob1 with fade
    call screen button1

label mov4:
    scene blowjob2 with fade
    call screen button1

label mov5:
    scene blowjob3 with fade
    call screen button1

label mov6:
    scene blowjob4 with fade
    call screen button1

label mov7:
    scene blowjob6 with fade
    call screen button1

label mov8:
    show blowjob5 with fade
    call screen button1

label button1_exit:

    scene black with fade.
    "<<< THE END >>>"

    return

 

[Deleted member 1394645]

are the images the exact same size width and height or all of them are different sizes?

if so this when to use focus_mask True

Every render has 1980 x 1080 px.

 

[rayminator]

Every render has 1980 x 1080 px.

I was asking about your images for your imagebuttons not the background/main images

is it like this


or like this 1920 x 1080

 

[Deleted member 1394645]

Those window hide and pause statements are doing nothing.
An image is shown and then screen button1 is called. The screen will await a player interaction, at which point it will action Jump() somewhere.

It may or may not be factor... but you should probably be showing the images using scene instead of show. show just overlays the image on top of the existing scene. Depending on how the player interacts with the game - you could end up with dozens of images all being shown at the same time, each hidden by the image on top of it.

As I said earlier, I personally would remove the hover lines. But they are doing no harm.

But no, I don't see anything that would do what you're describing. There's certainly nothing stopping anyone clicking the buttons in any order... at least, as far as I can see. The show thing might be responsible - but I don't see why, unless the screen is appearing on a specific screen layer and then the later show statements are being displayed in front of it. But if that were the case, I'd expect you to be only be able to click a single button and then not be able to click anything after that.

If I were writing it (without a vbox), it would look like this...

screen button1():
    modal True

    imagebutton:
        idle "1slow.png"
        xalign 0.98
        yalign 0.03
        action Jump("mov4")

    imagebutton:
        idle "1fast.png"
        xalign 0.98
        yalign 0.15
        action Jump("mov3")

    imagebutton:
        idle "2slow.png"
        xalign 0.98
        yalign 0.27
        action Jump("mov6")

    imagebutton:
        idle "2fast.png"
        xalign 0.98
        yalign 0.39
        action Jump("mov5")

    imagebutton:
        idle "3slow.png"
        xalign 0.98
        yalign 0.51
        action Jump("mov7")

    imagebutton:
        idle "3fast.png"
        xalign 0.98
        yalign 0.63
        action Jump("mov8")

    textbutton "[ EXIT ]":
        xalign 0.98
        yalign 0.75
        action Jump("button1_exit")

label start:

    scene black with fade
    "*** START ***"

    jump mov3

label mov3:
    scene blowjob1 with fade
    call screen button1

label mov4:
    scene blowjob2 with fade
    call screen button1

label mov5:
    scene blowjob3 with fade
    call screen button1

label mov6:
    scene blowjob4 with fade
    call screen button1

label mov7:
    scene blowjob6 with fade
    call screen button1

label mov8:
    show blowjob5 with fade
    call screen button1

label button1_exit:

    scene black with fade.
    "<<< THE END >>>"

    return

Thank you so much! I had to change the code, but it works perfrectly now! I will leave the "hover"-lines, because I will add edited buttons, too. Furthermore, I added a "cum"-imagebutton to skip to the image par, again. WOW, now I can use it for all animations... It´s so amazing! And the performance is way better than before. Thanks a lot! You will see the result here on the forum, soon.

Here is the edited code:

screen button1():
    modal True

    imagebutton:
        idle "1slow.png"
        xalign 0.98
        yalign 0.03
        action Jump("mov4")

    imagebutton:
        idle "1fast.png"
        xalign 0.98
        yalign 0.15
        action Jump("mov3")

    imagebutton:
        idle "2slow.png"
        xalign 0.98
        yalign 0.27
        action Jump("mov6")

    imagebutton:
        idle "2fast.png"
        xalign 0.98
        yalign 0.39
        action Jump("mov5")

    imagebutton:
        idle "3slow.png"
        xalign 0.98
        yalign 0.51
        action Jump("mov7")

    imagebutton:
        idle "3fast.png"
        xalign 0.98
        yalign 0.63
        action Jump("mov8")

    imagebutton:
        idle "cum.png"
        xalign 0.98
        yalign 0.75
        action Jump("button1_exit")

label mov3:
    scene blowjob1 with fade
    call screen button1

label mov4:
    scene blowjob2 with fade
    call screen button1

label mov5:
    scene blowjob3 with fade
    call screen button1

label mov6:
    scene blowjob4 with fade
    call screen button1

label mov7:
    scene blowjob6 with fade
    call screen button1

label mov8:
    show blowjob5 with fade
    call screen button1

label button1_exit:

 

[Deleted member 1394645]

I was asking about your images for your imagebuttons not the background/main images

is it like this
View attachment 1425362

or like this 1920 x 1080

View attachment 1425363

I created simple square buttons with gimp, so it´s like your anal lube picture.

 

[mickydoo]

It may or may not be factor... but you should probably be showing the images using scene instead of show

I get an issue with a transparent gap between the images what I use scene, hence why I use show and hide, which is a pain cos 90% I forget the hide and scream "WHY YOU NOT WORKING"

modal True is something you include as a parameter of any screen you NEED the player to interact with before the player can continue. It effectively makes all other buttons / clickable areas of the screen unavailable until this specific screen is dealt with (except the quickbar). You'd normally add modal True to any screen using call screen and omit it for screens invoked using show screen.

Why then 5 episode's ago I forgot to add modal True (and have omitted it ever since) and it still works as intended?

 

[79flavors]

I get an issue with a transparent gap between the images when I use scene, hence why I use show and hide, which is a pain cos 90% I forget the hide and scream "WHY YOU NOT WORKING"

Yeah. I get it. Although I tend to only see actual transparency after using call screen without a background of it's own or when showing video.

I know some people dislike scene because it hides the textbox for dialogue briefly until a new line of dialogue is shown - which can get a little "blinky" when you have scenes with very little dialogue between each new image, especially when using a transition that increases the time until the dialogue appears (like with dissolve). But I've long regarded that as "something that makes RenPy, RenPy". Especially when trying to work around it is such a PITA.

One thing I'll mention though, in case it helps in the future... You can give any image another name/identifier using as. I think RenPy calls them "displayable tags" or something. But RenPy will only let one image with a matching tag be on screen at any one time.

So if you did something like:

    scene black with fade

    pause 0.5

    show mypic1 as img at left
    pause 0.75

    show mypic2 as img at right
    pause 0.75

    show mypic3 as img at truecenter
    pause 0.75

    show mypic4 as img with dissolve
    pause 0.75

    show mypic5 as img with dissolve
    pause 0.75

    hide img

... you don't need to hide "mypic1", "mypic2", "mypic3" or "mypic4" - because RenPy knows them all by their alias "img" (can be any unique name) and will only let one appear on screen at any given time. You still need to manually hide that final image ... unless the next statement was a scene... in which case... no need. Of course, it's extra typing and just as easily forgotten as any new idea that hasn't become ingrained into your brain yet. Personally, I'd still use scene - but only because of the time I've spent here on the forums "solving" devs problems who decided to use show and didn't understand the difference.

It's especially handy when you've used show with a displayable that is not easily identifiable afterward. Like show image(my_var1). Coding that as show image(my_var1) as im1 means you can hide im1 without caring what the value of the variable was. Similar logic for showing animations/videos that aren't fullscreen.

Why then 5 episode's ago I forgot to add modal True (and have omitted it ever since) and it still works as intended?

It would very much depend on your game and your screen(s).

This is my simple test script to demonstrate what modal True does...

Spoiler: modal True - Test Script

You don't have permission to view the spoiler content. Log in or register now.

 

[mickydoo]

If I had to guess about your game, it's probably that you include all your buttons/clickable areas within a whole screen and only one screen is being used at any one time.
[/spoiler]

Makes sense now