How to Animate the UI?

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
ArizaLuca
Veteran
Posts: 241
Joined: Tue Feb 20, 2018 12:59 pm
Completed: Through the Screen, Riddle Me This, Trust Fall, Phobias, Another Adventure
Projects: The Souls in the Seams, Fata Morgana, Minecraft: Story Mode - Behind the Scenes
Organization: Astral Autumn Games
Tumblr: astralautumngames
Deviantart: ArizaLuca
itch: astralautumngames
Contact:

How to Animate the UI?

#1 Post by ArizaLuca »

In one game called Zodiac Axis (which is coded in Ren'Py), the UI animates when you hover over it. For example, whenever you hover over the quick menu in the game, it will animate to reveal the icons, when you get certain points or your choice affects you later on, it animates to show you the notification before disappearing, and whenever you hover over choices, the choices will animate to show that you're hovering over it. I've asked them and they said that the components are separated before being animated with the ATL language. Is there any way anybody could tell me how the ATL functions worked in this case?

Zodiac Axis is here: http://www.studiotheophilus.com/zodiaca ... zodiacdemo

There are a few gameplay videos on YouTube that should also show off what the game does, and this post on Tumblr illustrates what I mean for the 'hovering' thing for choices: http://studiotheophilus.tumblr.com/post ... h-of-magic

Thank you!

DannX
Regular
Posts: 99
Joined: Mon Mar 12, 2018 11:15 am
Contact:

Re: How to Animate the UI?

#2 Post by DannX »

Can't check out the game right now but it's probably something like this (untested):

Code: Select all

transform button_trans:
    #if mouse is hovering over button    
    on hover:
        #very simple pulsing animation
        linear .5 zoom 1.2
        linear .5 zoom 1
        repeat
    
    #when mouse is not hovering the button
    on idle:
        zoom 1

screen anim_test():

    textbutton "Click Me":
        xalign .5
        yalign .5
        at button_trans #set the transform so the button pulses when hovered
        action NullAction()
Basically, you can use on statement on a transform to set the behaviour of any displayable (button, image, or other) when hovered with the mouse, when replaced, etc.

You may also want to take a look at hover, idle, hovered and unhovered button and imagebutton properties, here.

Post Reply

Who is online

Users browsing this forum: Bing [Bot], Ocelot