[Tutorial] Animation and Transforms by Example

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
User avatar
saguaro
Miko-Class Veteran
Posts: 555
Joined: Sun Feb 12, 2012 9:17 am
Completed: Locked-In, Sunrise, The Censor
Projects: ?
Organization: Lucky Special Games
Tumblr: saguarofoo
itch: saguarofoo
Location: USA
Contact:

[Tutorial] Animation and Transforms by Example

#1 Post by saguaro » Sun Aug 12, 2012 9:33 am

ATL is very intuitive and can add great polish to your game, but it can seem a little intimidating if you've never used it before. Hopefully people will find these examples useful. The wiki has a great section on Animation and Transformation Language.

Opacity
Custom fades are your friend--you can make a game look much more polished by adding custom fades to sprites instead of having them pop up and vanish. Here's a simple fade effect that occurs during one second. Alpha 0.0 is invisible and alpha 1.0 is opaque. "Linear" means seconds. We add "on show" and "on hide" to have effects for both.

Code: Select all

    transform basicfade:
        on show:
            alpha 0.0
            linear 1.0 alpha 1.0
        on hide:
            linear 1.0 alpha 0.0  		

Code: Select all

    show eileen at basicfade, center
    e "Here I am!"
    e "Buh-bye now!"
    hide elieen
Basic Animations
Realistic Rain
Search for rain animation tutorials to find an easy way to make images. I used this tutorial for Gimp. I got a nice result using three frames. Define your image by indicating the images and the amount of time between each:

Code: Select all

    image rain:
        "rain.png"
        0.1
        "rain2.png"
        0.1
        "rain3.png"
        0.1
        repeat
If you want rain during an exterior, layer your images with rain at the end. (Images are layered on top of each other, so the first image shown will be at the "back" of the screen.)

Code: Select all

    scene darksky
    show house
    show rain
If you want rain on outside of an interior scene, you would layer the rain before the interior image (which needs to have transparent windows or some other way to see the rain on the other side, of course).

Code: Select all

    scene darksky
    show rain
    show bedroom

You can also build a layered image using LiveComposite (it ain't just for sprites).

Code: Select all

    image bedroom:
        LiveComposite((800,600), (0,0), "darksky", (0,0), "rain", (0,0), "bedroom.png")

Code: Select all

    scene bedroom
Flicker
You can take advantage of the Null command in animation loop to make an image flicker. It can create a neat effect on terminal-like objects and screens.

Code: Select all

    image monitor:        
        "scanlines.png"
        1.4
        Null ()
        0.05
        "scanlines.png"
        4.0
        Null ()
        0.05      
        repeat
Basic Horizontal and Vertical Movement
This makes a little airplane go from the left to the right side of the screen over 45 seconds. Since I only used this effect once I included the position commands in the image definition, so you just type

Code: Select all

show airplane
to get the effect.

Code: Select all

    image airplane:
        "airplane.png"
        xalign -0.1 yalign 0.15
        linear 45.0 xalign 1.1 	
You could drop a ball from the top of the screen to the bottom by adjusting the y-position instead.

Code: Select all

    transform falling:
        yalign 0.0 xalign 0.5
        linear 1.0 yalign 1.0

Code: Select all

show ball at falling


Choice and Parallel - Adding Simultaneous and Random Elements

Randomized Lightning
This takes advantage of the choice command to use random images at random positions. Make three (or however many) lightning images, and define the image to show a random lighting picture using choice:

Code: Select all

    image lightning:
        choice:
            "lightning.png"
        choice:
            "lightning2.png"
        choice:
            "lightning3.png"
You can weight the likelihood of choices by adding an integer (the default is 1.0):

Code: Select all

    choice 3.0:
        "lightning.png"
Now we will create a transform that causes the lightning to 1) appear at random places at the top of the screen and 2) flash. To do this we will use parallel statements, which allow us to executes multiple ATL blocks at the same time. The first parallel block sets the image position at one of three x-positions at the top of the screen. The second parallel block causes the image to appear and disappear within 0.5 seconds, simulating a flash.

Code: Select all

    transform flash:
        parallel:
            yalign 0.0
            choice:
                xalign 0.9
            choice:
                xalign 0.5
            choice:
                xalign 0.1
        parallel:    
            alpha 0.0
            linear 0.25 alpha 1.0
            linear 0.25 alpha 0.0

Code: Select all

show lightning at flash
Combine Horizontal and Vertical Motion
In Locked-In there is a scene where a waiter walks by a with a dinner tray. I made the tray move from right to left, AND slightly up and down to simulate walking, by splitting the y movement and the x movement into two parallel blocks.

Code: Select all

    transform tray:
        parallel:
            xalign 2.5
            linear 4.0 xalign -2.0
        parallel:
            yalign 1.5
            block:                
                linear 1.0 yalign 1.0
                linear 1.0 yalign 1.5
                repeat   
Rotate
Analog Clock
For this you will need a separate clock face, minute hand, and hour hand. The hour hand rotates in 60 seconds and the minute hand rotates in 5 seconds. If you get a bad jitter effect on slow rotations you can add subpixel True to smooth things out.

Code: Select all

	
    transform hoursforward:  
        subpixel True
        rotate 0
        linear 60.0 rotate 360
        repeat

Code: Select all

    transform minutesforward:
        subpixel True
        rotate 0
        linear 5.0 rotate 360
        repeat
If you want the hands to rotate counter-clockwise, you can do it by giving a negative rotation:

Code: Select all

    transform hoursbackward:   
        subpixel True
        rotate 0
        linear 60.0 rotate -360
        repeat
Swinging Back and Forth
This is how I made the padlock on the Locked-In logo swing back and forth before coming to a standstill. I use a block statement to separate the latter part of the transform.

Code: Select all

    
    transform lock:
        rotate 0
        linear 0.0 rotate 30
        block:
            linear 0.75 rotate -30
            linear 0.65 rotate 25
            linear 0.60 rotate -25
            linear 0.55 rotate 20
            linear 0.50 rotate -20
            linear 0.45 rotate 15
            linear 0.35 rotate -15
            linear 0.30 rotate 10
            linear 0.25 rotate -10
            linear 0.20 rotate 5
            linear 0.15 rotate -5
            linear 0.1 rotate 0 
If you wanted it to swing back and forth indefinitely, you could do it using a repeating block:

Code: Select all

    transform lock:
        rotate 0
        linear 0.0 rotate 30
        block:
            linear 0.75 rotate -30
            linear 0.75 rotate 30
            repeat
As you can see, zoom is conspicuously absent. If anyone wants to add their own examples/improvements, please do.
Last edited by saguaro on Thu Aug 23, 2012 9:01 pm, edited 1 time in total.

User avatar
Starshine
Veteran
Posts: 247
Joined: Mon Jan 30, 2012 7:50 am
Completed: http://berry-melon.blogspot.co.uk/2016/ ... -2016.html
Projects: Pancake Surprise (2016)
Tumblr: http://bettybooplover.tumblr.com
Deviantart: berry-melon
Soundcloud: sweepea-1
Contact:

Re: [Tutorial] Animation and Transforms by Example

#2 Post by Starshine » Sun Aug 12, 2012 12:08 pm

This is a really good post to put all the codes together as one. The rain code never worked for me, so i ended up trying a difference method. I just replaced the Cherry Blossom png with one of the rain's image files.
http://berry-melon.blogspot.com
I'm not resting until I find
What would make your eyes
Glisten like mine
With loves divine!

Boo-Boo I couldn't aspire....to anything...
Higher...than to fill that one desire to make it
My own....Bop-Bop-a-Dop-Boop-Oop-a-Doop honey?

User avatar
FatUnicornGames
Miko-Class Veteran
Posts: 576
Joined: Sun Mar 25, 2012 7:54 pm
Projects: Club Shuffle
Contact:

Re: [Tutorial] Animation and Transforms by Example

#3 Post by FatUnicornGames » Sun Aug 12, 2012 3:43 pm

Rad, thanks for all of the contextual examples. Those always help me with my coding. :D
Image
Developer Blog for Club Shuffle - Follow and Share?
-Also! You can call me Crystal if you want.-

User avatar
PyTom
Ren'Py Creator
Posts: 15152
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: [Tutorial] Animation and Transforms by Example

#4 Post by PyTom » Tue Aug 14, 2012 5:40 pm

These examples are great. Thanks for posting them.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

User avatar
SusanTheCat
Miko-Class Veteran
Posts: 952
Joined: Mon Dec 13, 2010 9:30 am
Location: New Brunswick, Canada
Contact:

Re: [Tutorial] Animation and Transforms by Example

#5 Post by SusanTheCat » Mon Aug 20, 2012 1:40 pm

Would you be ok with me putting these together into a sampler game?

Susan
" It's not at all important to get it right the first time. It's vitally important to get it right the last time. "
— Andrew Hunt and David Thomas

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

Re: [Tutorial] Animation and Transforms by Example

#6 Post by saguaro » Mon Aug 20, 2012 7:42 pm

Go for it, that's a great idea.

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

Re: [Tutorial] Animation and Transforms by Example

#7 Post by saguaro » Thu Aug 23, 2012 9:03 pm

Added a bit about using LiveComposite to layer bg images (thaaaank you apricotorange). I also added a flicker animation, which was inspired by some code foo PyTom posted in the questions forum a while back.

User avatar
TrickWithAKnife
Eileen-Class Veteran
Posts: 1261
Joined: Fri Mar 16, 2012 11:38 am
Projects: Rika
Organization: Solo (for now)
IRC Nick: Trick
Location: Tokyo, Japan
Contact:

Re: [Tutorial] Animation and Transforms by Example

#8 Post by TrickWithAKnife » Sat Sep 01, 2012 8:26 pm

Thanks a lot for posting these. I'm sure these will come in very handy .
"We must teach them through the tools with which they are comfortable."
The #renpy IRC channel is a great place to chat with other devs. Due to the nature of IRC and timezone differences, people probably won't reply right away.

If you'd like to view or use any code from my VN PM me. All code is freely available without restriction, but also without warranty or (much) support.

User avatar
Geckos
Veteran
Posts: 460
Joined: Fri Aug 17, 2012 8:33 am
Completed: Brilliant Shadows, Perceptions of the Dead, The Phantom Icecream Truck
Projects: Embers of Magic, Pale Spectrum, Perceptions of the Dead
Organization: Ithaqua Labs
Tumblr: geckosart
Deviantart: sitaart
Contact:

Re: [Tutorial] Animation and Transforms by Example

#9 Post by Geckos » Sun Jan 13, 2013 11:06 am

Lovely codes!
When I figured out how to implement them, they were exactly what I was looking for, thanks!

Just in case there are other people out there who missed the easy part.

example:

Code: Select all

    
    show lamp at lock
    transform lock:
        rotate 0
        linear 0.0 rotate 30
        block:
            linear 0.75 rotate -30
            linear 0.65 rotate 25
            linear 0.60 rotate -25
            linear 0.55 rotate 20
            linear 0.50 rotate -20
            linear 0.45 rotate 15
            linear 0.35 rotate -15
            linear 0.30 rotate 10
            linear 0.25 rotate -10
            linear 0.20 rotate 5
            linear 0.15 rotate -5
            linear 0.1 rotate 0 
    
"lamp" is the image which I defined earlier, and "lock" is the name of the transform. Activate it with "at".
"show lamp at lock"
Image ImageImage

CheeryMoya
Miko-Class Veteran
Posts: 892
Joined: Sun Jan 01, 2012 4:09 am

Re: [Tutorial] Animation and Transforms by Example

#10 Post by CheeryMoya » Sat Jan 26, 2013 10:41 pm

I thought I'd be smart enough to figure this out on my own but lol no. Instead of going insane by myself, it'd be a lot faster and less painful to ask the ATL master directly.

Right now I know how to use ATL to make all my sprites appear on the screen simultaneously. I even figured out how to use ATL at custom positions:

Code: Select all

    transform moreright_dissolve:
        on show:
            yalign 0.5 xalign 0.2 alpha 0.0
            linear 2.0 alpha 1.0
        on hide:
            linear 2.0 alpha 0.0
label start:
    show girl at moreright_dissolve
    girl "No lag, no waiting! I love it!"
It looks nice and it's not hard to code after you define your ATL blocks once. However, these ATL transitions only work when you want to show the sprite initially. If I try to do something like this:

Code: Select all

show girl happy at basicfade, right
girl "Man this is nice."
show girl angry at basicfade
girl "Hey wait, why wasn't there a transition?!"
hide girl angry at basicfade
girl "L-A-M-E."
The sprite has no smooth transitions and the new expression is just plastered onto the spot/disappears suddenly. I can use dissolve if I want, but that will make the textbox disappear momentarily, which is okay when it's every so often but we all know that expressions change constantly throughout the script.

In other words, what I am doing wrong here?

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

Re: [Tutorial] Animation and Transforms by Example

#11 Post by saguaro » Sun Jan 27, 2013 1:54 am

Try adding:

Code: Select all

        on replace:
            linear 2.0 alpha 1.0
        on replaced:
            linear 2.0 alpha 0.0
I just learned about that recently myself.

CheeryMoya
Miko-Class Veteran
Posts: 892
Joined: Sun Jan 01, 2012 4:09 am

Re: [Tutorial] Animation and Transforms by Example

#12 Post by CheeryMoya » Sun Jan 27, 2013 2:26 am

It has the odd habit of working 50% of the time :C It works only with certain sprites/expressions, which doesn't make much sense because they should all basically be the same. I've deleted my persistent data just in case but that doesn't change anything either.

I'm not sure if this means anything, but replace and replaced aren't highlighted in brown in Editra. The script doesn't really mean anything either.

Code: Select all

init:
    transform basicfade:
        on show:
            linear 1.0 alpha 1.0
        on hide:
            linear 1.0 alpha 0.0
        on replace:
            linear 1.0 alpha 1.0
        on replaced:
            linear 1.0 alpha 0.0
label start:
    show guy normal at center with dissolve
    guy "Line 1."
    show guy sad at basicfade
    guy "This probably doesn't work."
*sighs and collapses at desk*

User avatar
nyaatrap
Crawling Chaos
Posts: 1823
Joined: Mon Feb 13, 2012 5:37 am
Location: Kimashi Tower, Japan
Contact:

Re: [Tutorial] Animation and Transforms by Example

#13 Post by nyaatrap » Sun Jan 27, 2013 2:48 am

Transform is performed with other processes. So when images are loading/caching, it causes delay and blank. You can overlap the time of face changes to hide this blank, but its difficult to do on pose changes.

User avatar
tiya_nofurita
Miko-Class Veteran
Posts: 523
Joined: Fri Jun 22, 2012 7:23 pm
Completed: Tour de Pharmacy, Tour de Paseban
Projects: ERASER, Last Rx
Organization: VN Project Indonesia
Deviantart: SECONDARY-TARGET
Location: Jakarta, Indonesia
Contact:

Re: [Tutorial] Animation and Transforms by Example

#14 Post by tiya_nofurita » Wed Jan 30, 2013 1:41 am

Great tutorial ! I've tried some and it's successful~ Big thanks ! :mrgreen:
Just wondering because I'm a Renpy noob, can you combine the rain animation and lightning effect at the same time ? What code should I write ? (i don't think parallel statement can be used for animation...)
Thanks again~
Starshine wrote:The rain code never worked for me, so i ended up trying a difference method. I just replaced the Cherry Blossom png with one of the rain's image files.
Just use GIMP or Photosop to make rain effect, vary the noise effect from 50-55% with uniform distribution, then Filter-Motion Blur should do the trick. Just animated it, and voila~
Completed project :
ERASER [before :
PROJECT]


Image

Image
PROJECT-ERASER



"All things are poison, and nothing is without poison; only the dose permits something not to be poisonous" (Paracelsus, The Father of Toxicology)

"Let us learn to DREAM, then we may perhaps find the truth" (August Kekule, the benzene structure inventor)

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

Re: [Tutorial] Animation and Transforms by Example

#15 Post by saguaro » Wed Jan 30, 2013 8:14 am

Yes, you would just show them both.

Code: Select all

label test:
    show rain    
    show lightning
    etc.

Post Reply

Who is online

Users browsing this forum: No registered users