The Desk - an experiment with animation 2

[gryff]

Well actually an experiment with animation and interaction.

The Desk and Book 1

The scene is simple enough a desk and a book - each with their own rig. So experiment1 was whether I could handle two skeletons in my code

The book rig is really simple - a master bone with two small bones for the spine and the pages that rotate (a simple set of frames that rotate the spine and the pages from closed->open->closed). Since the book is constructed in an open form, right when the scene is loaded a single frame, last frame of the open->close, is applied to the book so that it is closed when you view it.. The book is also a test of babylon.js uvOffset functionality. Open the book several times - the pages will change (experiment 2).

The desk rig and animation is more complicated. The rig has a master bone and five small bones that are linked to the two doors and three drawers (see first image below). Each of these smaller bone controls one door or drawer. The tricky part was figuring out the animation - eg. keeping a door open while I opened a drawer. I found a rather neat solution from a little, almost throwaway, comment by DK on one of the threads here - bones can be animated individually. So I created a rather odd animation in Blender - 30 frames with the doors and drawers all open or all closed (see image blow). Then used this code (experiment 3):

 

window.addEventListener("click", function (evt) {                 var pickResult = myScene.pick(evt.clientX, evt.clientY, null, false, null);         console.log(pickResult);         if (pickResult.hit)            {            //console.log(pickResult.hit);                var objname = pickResult.pickedMesh.name;            console.log(objname);                switch(objname) {                    case "l_cupboard" :                        open(1);                    break;                    case "l_drawer" :                        open(4);                    break;                    case "m_drawer" :                        open(5);                    break;                    case "r_cupboard" :                        open(2);                    break;                                  ...                    function open(ndx)         {            if (!isOpen[ndx] && !isPlay)            {                isPlay = true;                //sound.play();                                myScene.beginAnimation(mySkeleton[0].bones[ndx], 1, 15, false, 0.5, function(){                    divPick.textContent = "opened" ;                    isPlay = false;                    isOpen[ndx] = true;                });            }                                    else if (!isPlay) {                isPlay = true;                //sound.play();                myScene.beginAnimation(mySkeleton[0].bones[ndx], 16, 30, false, 0.5, function(){                    divPick.textContent = "closed" ;                    isPlay = false;                    isOpen[ndx] = false;                });            }                    //});        return;        };

Note the code for animating individual bones by their index:

myScene.beginAnimation(mySkeleton[0].bones[ndx], 16, 30, false, 0.5, function(){...});

With each pick case (for the desk) a function is called that receives an index number for a particular bone - and only the frames for that bone are used to drive the animation. Worked like a charm and also allowed me to use the same code to animated different parts of the desk. (My original code had lots of code for each Switch/Case.)

Closing the drawers and doors is a bit odd - you have to click where the doors/drawers started out - not where they are now. (Try clicking from the side.).

The only issue I had with the desk/book pick interaction was I had to set the "fastCheck" to false otherwise it was impossible to open the book and the opening/closing of doors and drawers could erratic. I assume it has something to do with bounding boxes

The Desk and Book 2

Try opening the book - almost impossible- the mesh detected will be displayed in the box at top left. Also click between the middle drawer and the drawer on the right - you can open the right drawer sometimes.

The final two little experiments were using my Dropbox to hold the textures and babylon files ( so I hope the above links work) and trying out "BABYLON.SceneLoader.ImportMesh({ .... });" to load the book into the scene created from another babylon file containing the desk.

Sorry if this is long winded - I just hope it might be helpful to other people and be a little more positive about babylon.js than some of the recent threads.

cheers, gryff

[gwenael]

Thanks gryff for sharing this. It could become a reference for me when I want to play with bones.

[GameMonetize]

That's awesome!! And I'm pretty sure you will love my new features called "Actions" 

[GameMonetize]

Here what you can do with actions:

    var prepareButton = function(mesh, color, light) {        var goToColorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", color, 1000, null, true);        mesh.actionManager = new BABYLON.ActionManager(scene);        mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", BABYLON.Color3.Black(), 1000))            .then(new BABYLON.CombineAction(BABYLON.ActionManager.NoneTrigger, [ // Then is used to add a child action used alternatively with the root action.                 goToColorAction,                                                 // First click: root action. Second click: child action. Third click: going back to root action and so on...                   new BABYLON.SetValueAction(BABYLON.ActionManager.NoneTrigger, mesh.material, "wireframe", false)            ]));        mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, mesh.material, "wireframe", true))            .then(new BABYLON.DoNothingAction());    }    prepareButton(redBox, BABYLON.Color3.Red(), light1);    prepareButton(greenBox, BABYLON.Color3.Green(), light2);    prepareButton(blueBox, BABYLON.Color3.Blue(), light3);

I think you can use this to handle all your click on your desk:)

[GameMonetize]

BTW, in your case the good action is BABYLON.PlayAnimation(trigger: number, target: any, public from: number, public to: number, public loop?: boolean, condition?: Condition)

[GameMonetize]

I'm feeling generous today. Here is a SUPER SECRET new tool for you guys but please for now keep it secret

http://www.babylonjs.com/playground/index.html?16

 

It will be easier to understand actions with this tool

[Dad72]

This cool 

[GameMonetize]

And here is the doc for actions:

https://github.com/BabylonJS/Babylon.js/wiki/How-to-use-Actions

[Dad72]

Not simple to understand the systeme actions, but it is interesting, it gives me some idea for my editor to make any dynamics components.

Thanks for the tutorial. Examples step by step would be interesting to take control of the system.

[GameMonetize]

Could you tell me what is not clear? I will try to update the documentation this way

[gryff]

Thanks for the nice comments though I have to say gwenael, I feel you are way better than me when it comes to writing code "to play with bones"

 

DK this Action stuff looks interesting - and I will have to go over the tutorial and look at the "Playground" example. I think I might have a lot of questions.

 

It almost seems like as I get an understanding of some functionality of Babylon.js you add a whole lot more - one step forward, two steps back

 

Keep the innovation coming - hopefully sooner or later I will catch up

 

cheers, gryff

 

PS is it really meant to be "BABYLON.tateCondition.IsEqual" or or should it be "BABYLON.StateCondition.IsEqual" - did you copy/paste the same typo 3 times?

[reddozen]

PS is it really meant to be "BABYLON.tateCondition.IsEqual" or or should it be "BABYLON.StateCondition.IsEqual" - did you copy/paste the same typo 3 times?

 

LOL... I saw that too...

[Dad72]

Could you tell me what is not clear? I will try to update the documentation this way

 

I was thinking more like a very simple code example (base) and then a small example that adds more ((base + condition)  .... Your tutorial is good DK. just simple examples of using missing.

[GameMonetize]

Oups fixed:)

 

!Dad72: ok will try to add that:)

[gwenael]

Thanks for the nice comments though I have to say gwenael, I feel you are way better than me when it comes to writing code "to play with bones"

 

yeah, you're right, my code "to play with bones" is awesome, there is no bug at all, BUT wait, it's maybe because there is no such code wrote by me

 

Thanks for trusting in me that much

[gwenael]

Sorry since my post is out of subject: Deltakosh, we are about to celebrate your 1000th post!

[GameMonetize]

OH MY!!

[gwenael]

And here is the doc for actions:

https://github.com/BabylonJS/Babylon.js/wiki/How-to-use-Actions

 

Great. Quick question without reading the code before (...): is it possible to add its own triggers? It would be something like the NoneTrigger for the first action with a condition.

[GameMonetize]

You can use the OnEveryFrameTrigger on the scene for that:

scene.actionManager = new BABYLON.ActionManager(scene);scene.actionManager.registerAction(new BABYLON.IncrementValueAction(BABYLON.ActionManager.OnEveryFrameTrigger, mesh, "rotation.y", 0.01, condition));

[GameMonetize]

I added a section for you Dad72 Experimenting actions

[Dad72]

Thanks Deltakosh. This me helps has better understand more simply.

This action systeme is really interesting to create switches, levers and other in a game.

Thanks again. 

 

[Wingnut]

Gryff, I hear ya... with the one step forward, two steps back.    I have only learned 34% of Babylon 1.8.5 ! 

 

And boy, did you get your thread hijacked!  Weren't we talking about a book?

 

Now we are talking about actionManagers and playgrounds and bones... and... hmm.    Deltakosh has been sneaking around the dark back alleys, dropping secret keys and writing urls on bathroom walls, lately.  It is his favorite way to operate.  He's a coder, not a public relations guy. 

 

And we all know that Gwenael always has some new invention just around the corner.  He's just as much a "mad scientist" as Deltakosh.

 

Gryff, you didn't expect that one of your desk drawers was going to be used for a late-night meeting of the BJS Founders Society, did you?  And I think every one of them has been drinking.    Cool desk, by the way.  I think you are going to need to clip-on your sheriff's badge to get this drunken saloon back under control.  The boys have obviously been out on some kind of cattle drive, and have rode into your town to raise hell. hehe. 

 

Reminder:  http://www.html5gamedevs.com/topic/6544-load-scene-from-data-streams/?p=38960 - have we got any answers for this?  He/She has been unanswered for a few days now, and I don't have the knowledge to answer.  Can anyone help?  Thanks.

[GameMonetize]

Per Gryff request, I cleaned this topic