Sign in to follow this  
DylanD

Animation Curves

Recommended Posts

Hi again everybody,

I was wondering if anyone knew how to export Unity animation curves into something compatible with Babylon's/typescript.

Or something similar to animation curves.  I know about making animations and setting them to scenes and what not but I don't understand how exactly that gradually works anyway.

 

I guess my questions are:

1: Is it possible to use a animation curve made in unity in Babylonjs/typescript?

2:Is there something similar to animation curves in Babylonjs/typescript?

3: How exactly does an animation in Babylonjs make things gradual?(below for more on this)?

 

Any ideas?

 

keys.push({frame: 0,value: -Math.PI/12});
keys.push({frame: 5,value:0});
keys.push({frame: 10,value: Math.PI/12});

I have this code for an animation and it gradually goes from -Math.PI/12 to Math.PI/12, but how, linearly or something else?

Thanks for your time!

Share this post


Link to post
Share on other sites

Hi @DylanD,

When you start an animation you set a target framerate, and when supplying the keys you define what happens in each frame. The calculation of the next value (in the case you pasted a float) is done mathematically (and per default - linear). There are easing functions - http://doc.babylonjs.com/babylon101/animations#easing-functions, but they won't create curve.

I had once a project where I needed to define animations between two points using curves, while showing those curves (think - rollercoaster animation). What I ended up using was the wonderful curve3 class (http://doc.babylonjs.com/how_to/how_to_use_curve3) together with Path3D (http://doc.babylonjs.com/how_to/how_to_use_path3d) to get the normals.

I then passed it to animation keys (each point on the curve) and had the curve animation. I am sure there are other ways to achieve that, but I find this way to be clean and simple to implement.

Check the examples and documentations (written by our awesome @jerome) and see if it helps yhou

 

Share this post


Link to post
Share on other sites

Hey again Raanan, I was wondering if you know what this error I get when trying to create a second animation in the same scene as a first animation.

 

So I have an animation already in the scene, and I know works, I have had it working for a while now.  Now I need to add a few more so this is what I have setup so far:

var animation = new BABYLON.Animation("Up","rotation.z",60,BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        var animationSpeed = new BABYLON.Animation("Speed","this.xVel",60,BABYLON.Animation.ANIMATIONTYPE_FLOAT);
      var keys = []; 
        keys.push({frame: 0,value: -Math.PI/12});
        keys.push({frame: 5,value:0});
        keys.push({frame: 10,value: Math.PI/12});
        var keys2 = []; 
        keys2.push({frame: 0,value: 0.1});
        keys2.push({frame: 6000,value: 1.0});
        animation.setKeys(keys);
        animationSpeed.setKeys(keys2);
        this.player.animations = [];
        this.player.animations.push(animationCopter);
        
       this.player.animations.push(animationSpeed);

I get an error that only goes away(as far as I can understand at least) when I comment out the very last line?

this error:

Uncaught toy-error: cannot read property "getRestPose" of undefined

 

Am I doing something wrong when I add in the second animation?

Any ideas?

Thank you for your time!

Share this post


Link to post
Share on other sites

@DylanD

I just delivered two games to Sony, and it is far better to set your (x,y,z,) points in space within the Babylon world space. I found ways to import curves, but what's the point. You have far more flexibility doing it all in Babylon.

 If you need more info on this, I'm happy to help if I have the time.

DB

Share this post


Link to post
Share on other sites
On 6/15/2018 at 5:26 PM, RaananW said:

could you reproduce this on the playground? would be helpful for debugging it

Hello again, I was unable to reproduce the problem in the playground as it worked like I had it so it must be something I'm doing wrong somewhere else, I will have to look at this carefully again.  I did create a playground here to show what I wanted.

So in the playground I have the sphere move along the x and z axis' using animations.

https://playground.babylonjs.com/#XQHPV9

Another question though caught my attention how do I use each animation separately?   In the playground they are being done at the same time even though I pushed them separately.

 

 

On 6/16/2018 at 7:18 AM, dbawel said:

@DylanD

I just delivered two games to Sony, and it is far better to set your (x,y,z,) points in space within the Babylon world space. I found ways to import curves, but what's the point. You have far more flexibility doing it all in Babylon.

 If you need more info on this, I'm happy to help if I have the time.

DB

Dang two games to Sony sounds pretty cool, any I might know of?

No I need to import one or make it as close as possible to an existing curve, sorry, would you be able to explain your process for importing them.  I was thinking of just using an animation curve with the most points and an easing function but that won't be as exact.

Thanks for your time Raanan and dbawel!

Share this post


Link to post
Share on other sites

Hey everyone

So I figured out the problem, it was when I had

var animation = new BABYLON.Animation("Up","rotation.z",60,BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        var animationSpeed = new BABYLON.Animation("Speed","this.xVel",60,BABYLON.Animation.ANIMATIONTYPE_FLOAT);
      var keys = []; 
        keys.push({frame: 0,value: -Math.PI/12});
        keys.push({frame: 5,value:0});
        keys.push({frame: 10,value: Math.PI/12});
        var keys2 = []; 
        keys2.push({frame: 0,value: 0.1});
        keys2.push({frame: 6000,value: 1.0});
        animation.setKeys(keys);
        animationSpeed.setKeys(keys2);
        this.player.animations = [];
        this.player.animations.push(animationCopter);
        
       this.player.animations.push(animationSpeed);

on the second line I try to make the animation edit a public class variable, one that is not attached to the player object, so it could not find this.xVel.

 

Figured it out, still have question in my above post about how to use one animation at a time.

 

Is there a way to edit a public class variable if it is not on an object ?

So if I have a class

public class player{

public xVel:number;

constructor{

      //some code to set up an animation in this class to affect the xVel public var

}

how could I fill the constructor such that it can affect the public class variable xVel.

 

Any ideas?

Share this post


Link to post
Share on other sites

Hey!

I figured out my problem, heres how I fixed it!

So I wanted to set up an animation in a class constructor that change a quality of the instance of the class(or the class in general I guess).  So all I had to do was put the animation on the object "this" instead of sphere.  Then reference the variable as just "xVel" so heres the new code.

 

public class player{
public xVel:number;

constructor(){
//makes a box up here called
var animation = new BABYLON.Animation("Up","rotation.z",60,BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        var animationSpeed = new BABYLON.Animation("Speed","xVel",60,BABYLON.Animation.ANIMATIONTYPE_FLOAT);
      var keys = []; 
        keys.push({frame: 0,value: -Math.PI/12});
        keys.push({frame: 5,value:0});
        keys.push({frame: 10,value: Math.PI/12});
        var keys2 = []; 
        keys2.push({frame: 0,value: 0.1});
        keys2.push({frame: 6000,value: 1.0});
        animation.setKeys(keys);
        animationSpeed.setKeys(keys2);
        this.player.animations = [];
        this.player.animations.push(animationCopter);
        this.animation = [];
       this.animations.push(animationSpeed);
}
}

 

I still would like to know, if I have two animations on the same object how can I call only one animation to play?

 

Thanks everyone

Share this post


Link to post
Share on other sites

hey  @dbawel know anything about making a unity animation curve into a bezierCurveEase?  I think thats my best option.  Specifically set a start an end point in an animation then making the original curve into a bezierCurveEase then have the animations easing function be that bezel curve.  Any ideas?

Share this post


Link to post
Share on other sites

@DylanD

It's simple to create paths in babylon. here's a scene DK worked on that I expanded far beyond - but the code belongs to Sony Electronics:

http://www.babylonjs-playground.com/#172C5E#2

The key for me was to create a loop to generate multiple paths using random (X,Y) points in space. However, if you simply need one path, then it's a far simpler task.

I posted the link below recently, but there are 15 separate paths without intersection using a little math and random positions - within specific thresholds. Also, the playground scene will teach you how to keep the direction and orientation on the path - although I had to make some improvements. It's all about managing tangents, normals, and binormals.

DB

Share this post


Link to post
Share on other sites

@dbawel

Sorry if I wasn't initially clear, I have animation curves in unity that I wish to recreate in babylonjs.  I thought that is what you had done.  I figured out how to create animations and make those animations follow a bezier curve (or and ease function for that matter), so I think I'm pretty close all I need are the specifics from unity which I should be able to figure that out with some playing around.

 

Thanks for your time.

Share this post


Link to post
Share on other sites

@DylanD

We built a curve importer and editor that would export to webgl. Unfortunately, I'm not able to share this, however there are other importers/exporters online which can handle this if you look. But the easiest and fastest way is to parent cubes to each point on your spine, and export these cubes with unique names you can use in Babylon to procedurally  redraw your animation curve. I use this allot when necessary, and it works every time with very few or no issues.

DB

Share this post


Link to post
Share on other sites
7 hours ago, dbawel said:

@DylanD

We built a curve importer and editor that would export to webgl. Unfortunately, I'm not able to share this, however there are other importers/exporters online which can handle this if you look. But the easiest and fastest way is to parent cubes to each point on your spine, and export these cubes with unique names you can use in Babylon to procedurally  redraw your animation curve. I use this allot when necessary, and it works every time with very few or no issues.

DB

I might try this, however I think that either plotting each frame of the animation curve on desmos or just putting all the points into a animation in Babylon.  Thanks though.

 

Did you mean a unity animation curve exporter?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.