Imagebutton after click action and animation

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.
Post Reply
Message
Author
User avatar
AoiUsui
Regular
Posts: 42
Joined: Mon Nov 26, 2012 11:21 am
Completed: Alice's Dolls
Projects: Alice's Dolls, Tappy Virus
Organization: Otaku Brigade
itch: otakubrigade
Location: Philippines
Contact:

Imagebutton after click action and animation

#1 Post by AoiUsui »

Good day, :)

I would like to ask for your help in regards to my problem in imagebuttons.

First, I would like the imagebutton to be invisible (at least) or to go out of sight (whether taking it out of position) after I click the button but the other buttons will still be in the screen. I just want to the button to disappear after I clicked it.

Then second, that button when clicked will be adding a certain number to a variable (actually all other imagebuttons will be adding a number to that variable).

Thank you very much for the support and help.

User avatar
saguaro
Miko-Class Veteran
Posts: 560
Joined: Sun Feb 12, 2012 9:17 am
Completed: Locked-In, Sunrise, The Censor
Organization: Lucky Special Games
itch: saguarofoo
Location: USA
Contact:

Re: Imagebutton after click action and animation

#2 Post by saguaro »

Here you go.

Code: Select all

label start:
    $ button1_variable = True
    $ counter = 0    
    show screen image_button_test
    "Top disappears, bottom increments counter."    
    return    
    
screen image_button_test:
    frame:
        vbox:
            if button1_variable:
                imagebutton:
                    idle "black_button"
                    hover "black_button"
                    action ToggleVariable("button1_variable")          
            else:
                null height 50  # added a null so the screen size doesn't change, you can remove this else statement altogether
            imagebutton:
                idle "white_button"
                hover "white_button"
                action SetVariable("counter", counter+1)
            text str(counter)

User avatar
AoiUsui
Regular
Posts: 42
Joined: Mon Nov 26, 2012 11:21 am
Completed: Alice's Dolls
Projects: Alice's Dolls, Tappy Virus
Organization: Otaku Brigade
itch: otakubrigade
Location: Philippines
Contact:

Re: Imagebutton after click action and animation

#3 Post by AoiUsui »

Thank you very much! :D

It works!

But how can I do both in one button?

Another problem is, if the player clicks on the other part of the screen, the dialogues continues. How can I make disabled aside on those buttons?

User avatar
saguaro
Miko-Class Veteran
Posts: 560
Joined: Sun Feb 12, 2012 9:17 am
Completed: Locked-In, Sunrise, The Censor
Organization: Lucky Special Games
itch: saguarofoo
Location: USA
Contact:

Re: Imagebutton after click action and animation

#4 Post by saguaro »

You can assign multiple actions like this

Code: Select all

action [ToggleVariable("button1_variable"), SetVariable("counter", counter+1)]
You will want to set the screen's modal to True to prevent other interactions.
http://www.renpy.org/doc/html/screens.h ... -statement

User avatar
AoiUsui
Regular
Posts: 42
Joined: Mon Nov 26, 2012 11:21 am
Completed: Alice's Dolls
Projects: Alice's Dolls, Tappy Virus
Organization: Otaku Brigade
itch: otakubrigade
Location: Philippines
Contact:

Re: Imagebutton after click action and animation

#5 Post by AoiUsui »

That helped a lot! :D

Another question, how about the variable counter reaches a certain value then I need it to jump to the next scene, how can I do that?

Thank you very much again. I know I'm asking too much.

User avatar
saguaro
Miko-Class Veteran
Posts: 560
Joined: Sun Feb 12, 2012 9:17 am
Completed: Locked-In, Sunrise, The Censor
Organization: Lucky Special Games
itch: saguarofoo
Location: USA
Contact:

Re: Imagebutton after click action and animation

#6 Post by saguaro »

Not at all.

It sounds like you need to 1. check the value of the variable. 2. jump to a label and hide the screen when a certain value is reached.

There is a way to give a button a conditional action using If.
http://www.renpy.org/doc/html/screen_ac ... er-actions

Code: Select all

action If(counter==2, [SetVariable("counter", counter+1), Hide("image_button_test"), Jump("test_label")], SetVariable("counter", counter+1))
When they click the button the 3rd time, it will increment the counter, hide the screen, and jump to label test_label.

User avatar
AoiUsui
Regular
Posts: 42
Joined: Mon Nov 26, 2012 11:21 am
Completed: Alice's Dolls
Projects: Alice's Dolls, Tappy Virus
Organization: Otaku Brigade
itch: otakubrigade
Location: Philippines
Contact:

Re: Imagebutton after click action and animation

#7 Post by AoiUsui »

It answers my problem! But currently I encountered another problem, when I click a button, the button is displacing. I need them to be in place even I already clicked a button(s). Is the problem coming from xpos and ypos? I also tried xalign and yalign but they are also displacing the button.

Thank you very much again for helping! :)

Here is the code:

Code: Select all

    label test2:
        $ button1_variable = True
        $ button2_variable = True
        $ button3_variable = True
        $ memo_timer = 10
        $ counter = 0
        call screen image_button_test

label test3:    
screen image_button_test:
    timer 1.0 action If (memo_timer > 1, SetVariable("memo_timer", memo_timer - 1), Jump("end") ) repeat True
    text str(memo_timer) xalign 0.95 yalign 0.05
    frame:
        vbox:
            style "nvl_window"
            if button3_variable:
                imagebutton:
                    xpos 100
                    ypos 200
                    idle "gui/testButton_idle.png"
                    hover "gui/testButton_hover.png"
                    action If(counter==2, [Hide("image_button_test"), Jump("end")], [SetVariable("counter", counter+1), ToggleVariable("button3_variable")])

            
            if button1_variable:
                imagebutton:
                    xpos 200
                    ypos 200
                    idle "gui/testButton_idle.png"
                    hover "gui/testButton_hover.png"
                    action If(counter==2, [Hide("image_button_test"), Jump("end")], [SetVariable("counter", counter+1), ToggleVariable("button1_variable")])
              
               
            if button2_variable:
                imagebutton:
                    xpos 300
                    ypos 200
                    idle "gui/testButton_idle.png"
                    hover "gui/testButton_hover.png"
                    action If(counter==2, [Hide("image_button_test"), Jump("end")], [SetVariable("counter", counter+1), ToggleVariable("button2_variable")])


                text str(counter)
        

label end:
  t "end"
  
return

neowired
Regular
Posts: 199
Joined: Mon Dec 01, 2008 2:33 pm
Contact:

Re: Imagebutton after click action and animation

#8 Post by neowired »

If you want the buttons to stay in position even when some vanish, you could try setting a vbox with a separate xpos/vpos for each button and put the if statements inside the vboxes

something like this:

Code: Select all

frame:
  vbox xpos 0:
     if button:
        button
  vbox xpos 50:
     if button:
        button
  vbox xpos 100:
     if button:
        button
that way if a button gets removed the layout should not change

User avatar
saguaro
Miko-Class Veteran
Posts: 560
Joined: Sun Feb 12, 2012 9:17 am
Completed: Locked-In, Sunrise, The Censor
Organization: Lucky Special Games
itch: saguarofoo
Location: USA
Contact:

Re: Imagebutton after click action and animation

#9 Post by saguaro »

If you look back at that first example, you'll see that for the if statement I had an else with a null. That's so if the button isn't there, a null displayable of the same size is created to fill the place.

User avatar
AoiUsui
Regular
Posts: 42
Joined: Mon Nov 26, 2012 11:21 am
Completed: Alice's Dolls
Projects: Alice's Dolls, Tappy Virus
Organization: Otaku Brigade
itch: otakubrigade
Location: Philippines
Contact:

Re: Imagebutton after click action and animation

#10 Post by AoiUsui »

I think i've found a solution also.

Thank you very much guys!

I'll try to update you guys here at the forum if my project is completed. :D

User avatar
AoiUsui
Regular
Posts: 42
Joined: Mon Nov 26, 2012 11:21 am
Completed: Alice's Dolls
Projects: Alice's Dolls, Tappy Virus
Organization: Otaku Brigade
itch: otakubrigade
Location: Philippines
Contact:

Re: Imagebutton after click action and animation

#11 Post by AoiUsui »

Hello guys! Sorry if I didn't update you guys. I would like you to know I will now continue this project. My target is within 3 months. I hope you can again help me. Thank you very much. :D

User avatar
AoiUsui
Regular
Posts: 42
Joined: Mon Nov 26, 2012 11:21 am
Completed: Alice's Dolls
Projects: Alice's Dolls, Tappy Virus
Organization: Otaku Brigade
itch: otakubrigade
Location: Philippines
Contact:

Re: Imagebutton after click action and animation

#12 Post by AoiUsui »

May I ask if how can I add animation/transformation using this imagebutton codes? I'm having a problem in that. For example, I would like the buttons to zoom while it still not being clicked.
Thank you very much! :)

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Bing [Bot]