Jump to content

The Desk - an experiment with animation 2


Recommended Posts

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 :o

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 :)



Link to comment
Share on other sites

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:)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :o


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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...