Lemma Soft Forums • [Tutorial] Animation and Transforms by Example

Page 1 of 2

[Tutorial] Animation and Transforms by Example

Posted: Sun Aug 12, 2012 9:33 am

by saguaro

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.

Re: [Tutorial] Animation and Transforms by Example

Posted: Sun Aug 12, 2012 12:08 pm

by Starshine

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.

Re: [Tutorial] Animation and Transforms by Example

Posted: Sun Aug 12, 2012 3:43 pm

by FatUnicornGames

Rad, thanks for all of the contextual examples. Those always help me with my coding.

Re: [Tutorial] Animation and Transforms by Example

Posted: Tue Aug 14, 2012 5:40 pm

by PyTom

These examples are great. Thanks for posting them.

Re: [Tutorial] Animation and Transforms by Example

Posted: Mon Aug 20, 2012 1:40 pm

by SusanTheCat

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

Susan

Re: [Tutorial] Animation and Transforms by Example

Posted: Mon Aug 20, 2012 7:42 pm

by saguaro

Go for it, that's a great idea.

Re: [Tutorial] Animation and Transforms by Example

Posted: Thu Aug 23, 2012 9:03 pm

by saguaro

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.

Re: [Tutorial] Animation and Transforms by Example

Posted: Sat Sep 01, 2012 8:26 pm

by TrickWithAKnife

Thanks a lot for posting these. I'm sure these will come in very handy .

Re: [Tutorial] Animation and Transforms by Example

Posted: Sun Jan 13, 2013 11:06 am

by Geckos

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"

Re: [Tutorial] Animation and Transforms by Example

Posted: Sat Jan 26, 2013 10:41 pm

by CheeryMoya

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?

Re: [Tutorial] Animation and Transforms by Example

Posted: Sun Jan 27, 2013 1:54 am

by saguaro

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.

Re: [Tutorial] Animation and Transforms by Example

Posted: Sun Jan 27, 2013 2:26 am

by CheeryMoya

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*

Re: [Tutorial] Animation and Transforms by Example

Posted: Sun Jan 27, 2013 2:48 am

by nyaatrap

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.

Re: [Tutorial] Animation and Transforms by Example

Posted: Wed Jan 30, 2013 1:41 am

by tiya_nofurita

Great tutorial ! I've tried some and it's successful~ Big thanks !

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~

Re: [Tutorial] Animation and Transforms by Example

Posted: Wed Jan 30, 2013 8:14 am

by saguaro

Yes, you would just show them both.

Code: Select all

label test:
    show rain    
    show lightning
    etc.