Iavra Animate Everything (+ Easing Library)

Aramis-IX

Villager
Member
Joined
Sep 23, 2014
Messages
15
Reaction score
20
First Language
English
Primarily Uses
This is a remarkable script; thank you so much for sharing it! I can see all the possibilities, I just wish I was knowledgeable enough to take full advantage of it! I have a question about how to perform a tween on an object whose internal property is an array. To be specific, I'm attempting to change the values within $gameVariables._data but I can't intuit the technique or formatting to do so. If it is possible, what might the code look like? Thanks!
 
Last edited by a moderator:

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,615
Reaction score
1,417
First Language
French
Primarily Uses
RMMV
Not yet (the VX Ace version actually never got one...), but i can give you a short example. If you display picture 1 and want to have it move to the point [0, 200], you could do it like this:



new IAVRA.ANIMATE.Tween($gameScreen.picture(1), {_x: 0, _y: 200}).duration(60).start();


At 60 FPS, this animation would take about 1 second.


Now, if you want to move the picture at that position and afterwards have it fade out over 100 frames, you can do it like this:



new IAVRA.ANIMATE.Tween($gameScreen.picture(1), {_x: 0, _y: 200}).duration(60).chain( new IAVRA.ANIMATE.Tween($gameScreen.picture(1), {_opacity: 0}).duration(100)).start();


All those animations use linear easing (default), which you can imagine as a straight line "time -> value". You can always specify a different function like this:



new IAVRA.ANIMATE.Tween($gameScreen.picture(1), {_x: 0, _y: 200}).easing(IAVRA.EASING.bounce.out).duration(60).start();


This will cause the picture to move to the point [0, 200] and bounce back a few times, before coming to a rest.


As you can see, all those calls are kinda complex, but allow for great flexibility. If i ever manage to overcome my laziness when it comes to making videos, i'll make a proper demonstration showcasing all (or, at least, most) of the possibilities.


/edit: Note that it's currently not possible to overwrite the default easing. I have already written the code to be able to, but have to test it first once i get home.
Tank for this nice explain, the plugin work very good.


i found some other reference js tween easing library


https://github.com/nefD/impact-tween


https://github.com/tweenjs/tween.js


http://greensock.com/gsap


http://tweener.ivank.net/


You can test bunny here for bech your webgl


http://lib.ivank.net/?p=demos&d=bunnymark


about 3500 bunny i drop 120 to 60 fps :)


Tank you
 

Skurge

" (GASP) What's going on!? "
Veteran
Joined
Jul 12, 2015
Messages
1,137
Reaction score
233
First Language
English
Primarily Uses
N/A
Just to clarify amongts all the heavy detail here: this is specified for pictures not even or other ingame objects?
 

Ossra

Formerly Exhydra
Veteran
Joined
Aug 21, 2013
Messages
965
Reaction score
709
First Language
English
Primarily Uses
RMMV
@Skurge You can use the plugin for essentially everything ... pictures, events, and so on. Like so :




 
 
Last edited by a moderator:

Skurge

" (GASP) What's going on!? "
Veteran
Joined
Jul 12, 2015
Messages
1,137
Reaction score
233
First Language
English
Primarily Uses
N/A
Having a visual animation like you posted just then lit my eyes up.


That looks incredible- I can think of multible things I could do with it.
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,615
Reaction score
1,417
First Language
French
Primarily Uses
RMMV
@Ossra  @lavra  is it possible to apply easing for the tint picture ?


Example with :


$gameScreen.tintPicture(TempDiceID, [255,255,255,100], 1);


ho i can easing tint for my picture ?


var TempDiceID = $gameVariables.value(2);
LastSelectedID = TempDiceID; // store for old back valur
var TempX = $gameScreen.picture(TempDiceID)._x;
var TempY = $gameScreen.picture(TempDiceID)._y;
new IAVRA.ANIMATE.Tween($gameScreen.picture(55),
{_x: TempX, _y: TempY,_scaleX:56, _scaleY:56}).easing(IAVRA.EASING.elastic.out).duration(35).start();
new IAVRA.ANIMATE.Tween($gameScreen.picture(TempDiceID),
{_x: TempX, _y: TempY,_scaleX:110, _scaleY:110}).easing(IAVRA.EASING.elastic.out).duration(65).start();

// how easing this tint picture ?
$gameScreen.tintPicture(TempDiceID, [255,255,255,100], 1);
$gameScreen.tintPicture(55, [255,255,50,100], 1);


tanks
 

Ossra

Formerly Exhydra
Veteran
Joined
Aug 21, 2013
Messages
965
Reaction score
709
First Language
English
Primarily Uses
RMMV
@Jonforum Give the following a try :


Ossra - Plugin Framework : Base


Ossra - Picture Control : Tone Channels

Code:
new IAVRA.ANIMATE.Tween($gameScreen.picture(1), {_toneRed: 200, _toneGreen: 55, _toneBlue: 115, _toneGray: 25}).easing(IAVRA.EASING.elastic.out).duration(65).start();

new IAVRA.ANIMATE.Tween($gameScreen.picture(1), {_toneRed: 0, _toneGreen: 0, _toneBlue: 0, _toneGray: 0}).easing(IAVRA.EASING.elastic.out).duration(65).start();
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,615
Reaction score
1,417
First Language
French
Primarily Uses
RMMV


hi, 


How to reset animation to start again .


i try example this with the .clear function
But have a bug, the animation doesn't reset if a call it very fast


new IAVRA.ANIMATE.Tween($gameScreen.picture(56)).clear;
new IAVRA.ANIMATE.Tween($gameScreen.picture(56), { _y: TempOriginY-75, _angle: 360,  _scaleX:160, _scaleY:95}).easing(IAVRA.EASING.quart.out).duration(15).chain
( new IAVRA.ANIMATE.Tween($gameScreen.picture(56), { _y: TempOriginY, _angle: 0,  _scaleX:115, _scaleY:115}).easing(IAVRA.EASING.elastic.out).duration(70)).start();


How to clean and start animation again even if it is not complete.
This animation happen when click on a icon, so each time click , need restart the animation.


tanks you for help 
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,615
Reaction score
1,417
First Language
French
Primarily Uses
RMMV
hi everybody.


How to use ' stop() or clear() '  only on a animated specific object group ?


An example of context :


IAVRA.ANIMATE.clear(); // it stop and clear all objets (1,2,3) , but if i need to clear() or stop() only objets 2 & 3! how ?
new IAVRA.ANIMATE.Tween($gameScreen.picture(1), {_x:10}).easing(IAVRA.EASING.elastic.out).duration(65).start(); // objet 2
new IAVRA.ANIMATE.Tween($gameScreen.picture(2), {_x:10}).easing(IAVRA.EASING.elastic.out).duration(65).start(); // objet 2
new IAVRA.ANIMATE.Tween($gameScreen.picture(3), { _x:10}).easing(IAVRA.EASING.elastic.out).duration(65).start(); // objet 3


Thanks you for help or suggestion  :D
 

Diatonis

Villager
Member
Joined
Apr 23, 2016
Messages
24
Reaction score
10
First Language
english
Primarily Uses
Finally got the courage to check this out, and it's amazing, especially when used in conjunction with lavra's gif plug-in. 


But it is quite advanced. I'm a beginner at scripting, and for doing anything other than simple movements/fades and chaining them together, I'm at a loss. 


Since there's not a long help file, could anyone familiar with this plug-in just post up a few more script command examples, and a brief description of what those scripts do? 


That way I can reverse engineer what's going on, and figure it out for myself. I'm especially interested in seeing how to animate Objects other than simple game screen pictures...
 
Last edited by a moderator:

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,615
Reaction score
1,417
First Language
French
Primarily Uses
RMMV
Hello.
Someone would have an idea to apply this plugin to the object $gameMap.
I would like an example of how I could integrate.
I think the 3 prototypes are the following.
If someone more pro could help me, that would also allow me to learn.
have try without sucess

Code:
$gameMap._scrollDirection=4;
new IAVRA.ANIMATE.Tween($gameMap, {_scrollSpeed:1,_scrollRest:4}).easing(IAVRA.EASING.quad.out).duration(30).start()
Code:
Game_Map.prototype.updateScroll = function() {
console.log('$gameMap._scrollDirection:_scrollRest:_scrollSpeed ', $gameMap._scrollDirection,$gameMap._scrollRest,$gameMap._scrollSpeed);
    if (this.isScrolling()) {
        var lastX = this._displayX;
        var lastY = this._displayY;
        this.doScroll(this._scrollDirection, this.scrollDistance());
        if (this._displayX === lastX && this._displayY === lastY) {
            this._scrollRest = 0;
        } else {
            this._scrollRest -= this.scrollDistance();
        }
    }
};

Game_Map.prototype.scrollDistance = function() {
    return Math.pow(2, this._scrollSpeed) / 256;
};

Game_Map.prototype.startScroll = function(direction, distance, speed) {
    this._scrollDirection = direction;
    this._scrollRest = distance;
    this._scrollSpeed = speed;
    console.log('speed: ', speed);
    //this.teslavra = new IAVRA.ANIMATE.Tween($gameMap, {_scrollSpeed:1}).easing(IAVRA.EASING.quad.out).duration(30).start()
   
}
EDIT: OK I FOUND
for people interest
Code:
new IAVRA.ANIMATE.Tween($gameMap, {_displayX:0,_parallaxX:0}).easing(IAVRA.EASING.quad.out).duration(80).start()
change 0 to new value
 
Last edited:

Diatonis

Villager
Member
Joined
Apr 23, 2016
Messages
24
Reaction score
10
First Language
english
Primarily Uses
EDIT: OK I FOUND
for people interest
Code:
new IAVRA.ANIMATE.Tween($gameMap, {_displayX:0,_parallaxX:0}).easing(IAVRA.EASING.quad.out).duration(80).start()
change 0 to new value
This is amazing. Using the easing library on this looks unbelievable. So many possibilities.

Questions: (1)After the camera pans (animates) to the coordinates, it snaps back to the player very quickly. I can't figure out how to keep the camera there using this plug-in's scripts. Have you? (ONE inelegant workaround is to combine this with a plug in like Galv's camera control, and just time everything out.)
(2) Do you know which other parameters I can modulate in the $game.map? Can I use this to animate/ease zooms?

This plug in is so cool, and so difficult. I'm just starting to learn js, so it's a challenge. Would anyone care to give me some script commands to use to animate the text box? I can't figure out for the life of me how to call the text box.

But mostly thanks again IAVRA for this amazing plug in. Just using it for events and pictures already has blown my game wide open.
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,615
Reaction score
1,417
First Language
French
Primarily Uses
RMMV
This is amazing. Using the easing library on this looks unbelievable. So many possibilities.

Questions: (1)After the camera pans (animates) to the coordinates, it snaps back to the player very quickly. I can't figure out how to keep the camera there using this plug-in's scripts. Have you? (ONE inelegant workaround is to combine this with a plug in like Galv's camera control, and just time everything out.)
(2) Do you know which other parameters I can modulate in the $game.map? Can I use this to animate/ease zooms?

This plug in is so cool, and so difficult. I'm just starting to learn js, so it's a challenge. Would anyone care to give me some script commands to use to animate the text box? I can't figure out for the life of me how to call the text box.

But mostly thanks again IAVRA for this amazing plug in. Just using it for events and pictures already has blown my game wide open.

After the camera pans (animates) to the coordinates, it snaps back to the player very quickly.
is another plugin maybe try to keep the focus on your heroes.
Desactive all camera plugin.

and yes you can use fore make ease all object in the engine.

insert
$gameMap
in your console debug (F8) and you will see all object
 

Diatonis

Villager
Member
Joined
Apr 23, 2016
Messages
24
Reaction score
10
First Language
english
Primarily Uses


is another plugin maybe try to keep the focus on your heroes.
Desactive all camera plugin.

and yes you can use fore make ease all object in the engine.

insert
$gameMap
in your console debug (F8) and you will see all object

Perfect! Thanks so much. Holy moly, this opens up EVERYTHING
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,615
Reaction score
1,417
First Language
French
Primarily Uses
RMMV
The elastic formula is a bit heavy in javascript code.
Especially if it is used on more than 50 moving picture.

Code:
out: function(k) {
            var s;
            var a = 0.1;
            var p = 0.4;

            if (k === 0.0) {
                return 0;
            }
            if (k === 1.0) {
                return 1;
            }
            if (!a || a < 1) {
                a = 1;
                s = p / 4;
            } else {
                s = p * Math.asin(1 / a) / (2 * Math.PI);
            }
            return (a * Math.pow(2, - 10 * k) * Math.sin((k - s) * (2 * Math.PI) / p) + 1);
        },
You can simply replace it with this code

Code:
out: function(k) {
         var p = 0.3;
        return Math.pow(2,-10*k) * Math.sin((k-p/4)*(2*Math.PI)/p) + 1;
        },
Save you hundreds of MS
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,615
Reaction score
1,417
First Language
French
Primarily Uses
RMMV
I noticed a little forgetting about this place.
this._running always remains true, even after the animation completes.
Here is the correction.

Code:
            if(complete) {
                if(this._onCompleteCallback !== undefined) {
                    this._onCompleteCallback(this._object);
                }
                this._running = false; // ****
                this._chainedTweens.forEach(function(tween) {
                    tween.start();
                });
               
            }
This allows you to add conditional during or after the animation by checking if it is finished.
 

Jonforum

Veteran
Veteran
Joined
Mar 28, 2016
Messages
1,615
Reaction score
1,417
First Language
French
Primarily Uses
RMMV
I propose a small improvement here.
There was some smalls bugs and incorrects.
The improvement is as follows.

  • Stop () automatic on several calls if, the animation is already in play
  • set.delay() to 0, if animation call again very fast on .move
  • add preSets feature, □ .preY() □ .preX() □ .preSx() □ .preSy() □ .preAn() □ .preOp() (+=value on target objet) && not afected by delay() or if animation are curently running !:thumbsup-left:
  • add some other method (see list on image)
  • automaticly reset all callback on Stop or move()
  • Some minor code reviewed to get the maximum performance. (maximum ms)
  • Shortened some methods names, for more cleanliness.
easing .gif
and here some very fast several click

all method are like thats
here a working example sample
sample-easing.jpg
Enjoy !
 

Attachments

Last edited:

Espilonarge

Veteran
Veteran
Joined
Apr 24, 2016
Messages
128
Reaction score
60
First Language
English
Primarily Uses
Sorry to bump an old topic but I've ran in to a quirk with the plugin.

I've been converting my project from VXAce to MV for the past couple of years and one of the scripts I was originally using was TDD's easing script. It allowed the ability to use easing functions for both pictures and events however I ran in to a major issue with your plugin.

While the easing functions work perfectly for pictures, all events are ignoring the primary easing functions. They will still move around normally but they just refuse to accept any of the easing functions (bounce, quad, etc) along with the set duration (the event still uses the "speed" value). I also made sure to test in a clean project to make sure it wasn't a conflicting plugin issue and the events will still not use any of the easing functions.

Judging by the date the topic was made, I'm guessing it might be possible that an update may have changed the behavior of events that's causing the plugin to not work with them correctly (there doesn't seem to be any errors, just that they'll still move but ignore the easing functions). It might also be that easing functions weren't added properly or at all for events themselves (I can't be sure at the moment since I'm not sure what might be the cause of the issue).
 

Kyuukon

主人公
Veteran
Joined
Aug 22, 2013
Messages
2,217
Reaction score
1,077
First Language
Spanish
Primarily Uses
RMMV
This is amazing! Thank you so much!
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Posts

Latest Profile Posts

Managed to find a way to hang a bed cover over my window. So no more being toasted alive in the afternoon!:kaoswt2:
So, uh, has anyone tried buying any resources from KokoroReflections? Because I've been looking for a 'buy' button on the site for like 10 minutes now and can't find one.
Any also thought it's too cringy to put the word "and you" in your credit as a special thanks?
Cause that's what I thought...
Everyone in the US right now: Please stay safe.
Symphony Celestia: Prophecy of the Falling Stars RPG Maker music pack WIP. Symphony Celestia is a new series that focuses on symphonic and orchestrated music to tell a story. Each story will include compositions that make up that story from beginning to end. Themes include: Battles, adventures, character themes, etc. Below is a video preview to the first story.

Forum statistics

Threads
97,982
Messages
948,350
Members
129,248
Latest member
connoruption
Top