DylanD Posted June 14, 2018 Share Posted June 14, 2018 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! Quote Link to comment Share on other sites More sharing options...
RaananW Posted June 15, 2018 Share Posted June 15, 2018 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 jerome and DylanD 2 Quote Link to comment Share on other sites More sharing options...
DylanD Posted June 15, 2018 Author Share Posted June 15, 2018 Hey Raanan, thanks! I will try these soon! Quote Link to comment Share on other sites More sharing options...
DylanD Posted June 15, 2018 Author Share Posted June 15, 2018 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! Quote Link to comment Share on other sites More sharing options...
RaananW Posted June 15, 2018 Share Posted June 15, 2018 could you reproduce this on the playground? would be helpful for debugging it Quote Link to comment Share on other sites More sharing options...
dbawel Posted June 16, 2018 Share Posted June 16, 2018 @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 DylanD 1 Quote Link to comment Share on other sites More sharing options...
DylanD Posted June 18, 2018 Author Share Posted June 18, 2018 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! Quote Link to comment Share on other sites More sharing options...
DylanD Posted June 18, 2018 Author Share Posted June 18, 2018 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? Quote Link to comment Share on other sites More sharing options...
DylanD Posted June 18, 2018 Author Share Posted June 18, 2018 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 Quote Link to comment Share on other sites More sharing options...
DylanD Posted June 18, 2018 Author Share Posted June 18, 2018 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? Quote Link to comment Share on other sites More sharing options...
dbawel Posted June 18, 2018 Share Posted June 18, 2018 @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 Wingnut 1 Quote Link to comment Share on other sites More sharing options...
DylanD Posted June 18, 2018 Author Share Posted June 18, 2018 @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. Quote Link to comment Share on other sites More sharing options...
dbawel Posted July 9, 2018 Share Posted July 9, 2018 @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 Quote Link to comment Share on other sites More sharing options...
DylanD Posted July 9, 2018 Author Share Posted July 9, 2018 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? Quote Link to comment Share on other sites More sharing options...
dbawel Posted July 9, 2018 Share Posted July 9, 2018 @DylanD A member of my team had success with using 'Curvy". Here's the link: https://curvyeditor.com/documentation/import_export DB DylanD 1 Quote Link to comment Share on other sites More sharing options...
DylanD Posted July 9, 2018 Author Share Posted July 9, 2018 4 minutes ago, dbawel said: @DylanD A member of my team had success with using 'Curvy". Here's the link: https://curvyeditor.com/documentation/import_export DB that does look like it might do the jobs thanks! dbawel 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.