Iavra Animate Everything (+ Easing Library)

Discussion in 'JS Plugin Releases (RMMV)' started by Iavra, Oct 24, 2015.

  1. Iavra

    Iavra Veteran Veteran

    Messages:
    1,797
    Likes Received:
    856
    First Language:
    German
    Description


    Provides a generic way to animate every float property on every obj


    Author


    Iavra


    Parameters


    @param Enable Persistence
    @desc If set to true, running animations will be stored in the savefile and continued after loading.
    @default false




    How to Use


    To animate an object a new Tween has to be created and started like this:


    var myTween = new IAVRA.ANIMATE.Tween(object, {_x : 100}).duration(50).start();


    This will cause the property "_x" of "object" to change from its current value to 100 over the next 50 frames, using linear easing (default).


    The IAVRA.ANIMATE.Tween class contains the following functions:

    All functions return the Tween object itself and can be used for chaining.


    The IAVRA.ANIMATE module contains the following functions:

    By default, animations are saved locally and get lost after saving and loading the game. The parameter "Enable Persistence" changes this and stores all animations in the savefile. Note that JSON.stringify() (which MV uses as its save mechanism) discards functions, which means that registered callbacks are lost after loading a game.


    The second script contains JavaScript implementations of the Robert Penner easing functions, which can be used like this:


    new IAVRA.ANIMATE.Tween(object, {...}).easing(IAVRA.EASING.quad.in).start();




    Terms of Use


    Free to use for both commercial and non-commercial games. Please give credit.


    If you use the Easing Library, you must give credit to Robert Penner.


    Download


    Animate Everything: http://pastebin.com/WqZ1Sfs5


    Easing Library: http://pastebin.com/Y6kMyksm


    FAQ


    Q: Can i rename the script or will it break?


    A: You are free to name the files however you want, since i'm using my own method for loading parameters, which doesn't use the filename.
     
    Last edited by a moderator: Feb 1, 2016
    #1
  2. Kes

    Kes Global Moderators Global Mod

    Messages:
    20,977
    Likes Received:
    10,677
    First Language:
    English
    Primarily Uses:
    RMVXA
    I am so pleased to see this port.  I loved using the Animate Everything, it was so versatile.  

    thank you.
     
    #2
  3. Iavra

    Iavra Veteran Veteran

    Messages:
    1,797
    Likes Received:
    856
    First Language:
    German
    Added JS implementations of Robert Penner's easing functions, so nothing will stop you from having those object values bounce all over the place ^^
     
    #3
  4. Iavra

    Iavra Veteran Veteran

    Messages:
    1,797
    Likes Received:
    856
    First Language:
    German
    Since this topic has been moved (thanks to the mod who did this), i'm taking the liberty to push it.


    The plugin has been officially released! So, feel free to play around with it and bomb me with change requests and errors i couldn't find on my own.


    I'm thinking about plugin commands, but the generic functions seem too complex for it. What i could to is commands for specific objects (pictures etc).
     
    #4
  5. Vendon

    Vendon LVL 255 Veteran

    Messages:
    103
    Likes Received:
    21
    Location:
    Germany
    First Language:
    German, English
    Hello. I am not getting what these Plugins actually do. No matter how hard I try to understand. I just don't know what they supposed to do. Is there a video or picture or something?
     
    #5
  6. Iavra

    Iavra Veteran Veteran

    Messages:
    1,797
    Likes Received:
    856
    First Language:
    German
    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:
    Code:
    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.
     
    Last edited by a moderator: Oct 27, 2015
    #6
    Jonforum and snorlord like this.
  7. Vendon

    Vendon LVL 255 Veteran

    Messages:
    103
    Likes Received:
    21
    Location:
    Germany
    First Language:
    German, English
    This sounds like a nice way for making traps. But how do I call it? I just tried to copy what you've mentioned and paste it over script and plugin call but nothing happened :D
     
    #7
  8. Iavra

    Iavra Veteran Veteran

    Messages:
    1,797
    Likes Received:
    856
    First Language:
    German
    You'll need to show the picture, first ^^

    Code:
    $gameScreen.picture(1)
    This grabs the picture #1, but you'll have to display it first via "Show Picture" event command (there would be a script command, too, but i forgot about it).
     
    Last edited by a moderator: Oct 27, 2015
    #8
  9. Vendon

    Vendon LVL 255 Veteran

    Messages:
    103
    Likes Received:
    21
    Location:
    Germany
    First Language:
    German, English
    Well looks like I won't understand it unless I see how to do it xD. Sry my IQ is like over 9000 miles below an ocean xD.

    And thats also my biggest weakness in websites like that. If a video or atleast a picture shows what this script or plugin is supposed to do then I am kinda in big problem :D
     
    Last edited by a moderator: Oct 27, 2015
    #9
  10. wizaerd

    wizaerd Adventurer Member

    Messages:
    219
    Likes Received:
    26
    First Language:
    English
    In an event, call the command Show Picture.  In that command specify the position to show at o,o with the origin set to upper left.  This is a basic RPG Maker command, and nothing all that complex about it.  Now add a script command after that show picture command to your event, and type or paste in

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

    When you run your event, the picture you chose will show, and them over the course of 60 frames it will move down to pixel position 200.

    That os what this plugin does...  allows you to script basic animations such as movements, resizing, transparency, etc...  I imagine any property available to the picture...

    Hey Iavra, what properties are available to adjust?
     
    Last edited by a moderator: Oct 27, 2015
    #10
  11. Vendon

    Vendon LVL 255 Veteran

    Messages:
    103
    Likes Received:
    21
    Location:
    Germany
    First Language:
    German, English
    Yep that's exactly what I did but my picture just stands still. It's moving when my char is moving but the position is the same. Maybe I have to put these plugins to the correct place like below anything?
     
    #11
  12. Iavra

    Iavra Veteran Veteran

    Messages:
    1,797
    Likes Received:
    856
    First Language:
    German
    That depends on the object. Currently i could think of:


    Game_Picture:


    _origin, _x, _y, _scaleX, _scaleY, _opacity


    Game_BattlerBase:


    _hp, _mp, _tp


    Scene_Base._fadeSprite:


    opacity


    Window_Base:


    _x, _y, _width, _height, _opacity, ...


    Also variables and numeric properties of your own classes.


    Note, that we are accessing the "_" variables, which are internal properties of thise object. If you want to use getter and setter methods, instead, either call the access(get, set) method on a Tween or override IAVRA.ANIMATE.defaultCallbacks.propertyGet/propertySet in your own plugin and place that after mine.


    In general, i think this is more of a utility plugin to be used by other plugins, because script calls can get very long. But it shouldn't be too hard to write a wrapper that simplifies these calls for certain use cases.
     
    Last edited by a moderator: Oct 27, 2015
    #12
  13. wizaerd

    wizaerd Adventurer Member

    Messages:
    219
    Likes Received:
    26
    First Language:
    English
    Start simple...  Create an autorun event in an empty map that shows image, then calls the script command over a duration of say 60 frames, a wait command set to 60 (to ensure the picture move finished) then call the remove picture command.  If you still can't get it, when I get home this afternoon I'll put together a quick example...

    lavra, is there a WAIT option, in order to wait until the current tween is done before moving onto the next event command?  If not, could there be...  For me, it would be pretty important to not have to add manual WAIT event commands after every call to the tweener.  It'd also be nice if there was a text object that could be tweened as well for messages outside of a message box or window... That might be outside the scope of this plugin though, just an idle thought I had.
     
    #13
  14. Iavra

    Iavra Veteran Veteran

    Messages:
    1,797
    Likes Received:
    856
    First Language:
    German
    So far this only works on numeric values, so it won't work for text. The default getCallback will try to parseFloat() your String and default to 0, so you would end up overriding the string variable with numbers.

    There's no wait() command so far. You can delay() the tween or chain other tweens, so they will wait for the first one to complete, but there is nothing for other script calls or event commands.

    /edit: If you don't like the additional event command, you can try calling the wait() function of Game_Interpreter:

    Code:
    Game_Interpreter.prototype.wait = function(duration) {    this._waitCount = duration;};
    Since script commands are interpreted by calling eval() inside the Game_Interpreter, you should be able to just wait(20) for a 20 frame wait.
     
    Last edited by a moderator: Oct 27, 2015
    #14
  15. wizaerd

    wizaerd Adventurer Member

    Messages:
    219
    Likes Received:
    26
    First Language:
    English
    Or you could add it as a parameter to your own plugin, making it optional, right? What's the difference between you exposing or using the Game_Interpreter wait() command within your plugin, making it optional as opposed to me adding it after calling the tweener when I want/need it?  Only convenience, which is kind of the point of a plugin to begin with, right?

    If text is an object, then it too might have position properties, scale or font size property, opacity property... All numeric values...
     
    Last edited by a moderator: Oct 27, 2015
    #15
  16. Iavra

    Iavra Veteran Veteran

    Messages:
    1,797
    Likes Received:
    856
    First Language:
    German
    Inside the IAVRA.ANIMATE.Tween class, "this" is the object itself, not Game_Interpreter. Since there is no universal Game_Interpreter, but Game_Troop._interpreter, Game_Map._interpreter, Game_CommonEvent._interpreter and possibly more (i stopped searched at this point) and all tweens are updated in Scene_Base.update(), i would need to first figure out, in what scene i'm currently and use the right interpreter.


    @Vendon: I'm guessing you use either an auto start or parallel event, which will cause the image to get rerendered and "re-tweened" every frame. So the animation will start, but since you are calling "Show Picture" every frame, it will just get overridden.
     
    Last edited by a moderator: Oct 27, 2015
    #16
  17. wizaerd

    wizaerd Adventurer Member

    Messages:
    219
    Likes Received:
    26
    First Language:
    English
    ok, that makes sense... Thanx.
     
    #17
  18. Vendon

    Vendon LVL 255 Veteran

    Messages:
    103
    Likes Received:
    21
    Location:
    Germany
    First Language:
    German, English
    Hmm I just took an npc which calls a picture named 1 when clicking on him then used a script call 'new IAVRA.ANIMATE.Tween($gameScreen.picture(1), {_x: 0, _y: 120}).duration(60).start();' and was trying to do the same with a plugin call but my picture just doesn't move or do anything it's just showing up. oh and I put 120 instead of 200 because my map is 140x140  and 200 didn't work also. First I thought this plugin would make traps possible which would fly around  at a specific place and if they hit you then you'll get dmg. But I think that this plugin is doing not that what I was thinking :D
     
    Last edited by a moderator: Oct 28, 2015
    #18
  19. hermesisdead

    hermesisdead Villager Member

    Messages:
    13
    Likes Received:
    1
    First Language:
    English
    Sorry this is a bit of a dumb question, i'm still pretty new to all this scripting stuff.

    As far as how one would use this for example.. would this be something we could use for like.. say I created an image of fog, we could use this to animate it moving across the screen etc?
     
    #19
  20. wizaerd

    wizaerd Adventurer Member

    Messages:
    219
    Likes Received:
    26
    First Language:
    English
    In theory, without actually testing it, yes.  Of course the hassle would be looping it seamlessly during the entire time your map was active...
     
    #20

Share This Page