Anime a skeleton on onchange Event ?

[Zino54220]

Hi everyone!

 

I need you again !

 

So my problem :

 

I have a scene (and a dream too...but it's not the question actualy...  ....)

 

Here, a .gif of my scene :

 

 

Like you can see, I play animations of basics meshes on html select onchange event without difficulties...But when I try to play a skeleton animation with the last select html tag with the onchange event, I get an error in console like this :

 

 

If I play my animation in the callback function parameter of the "Scene.Loader.ImportMesh(...)" function, there is no problem....I tried to create a "homemade" callback function but I had the same result...

 

Here my scene code :

'use strict';// A voir pour popup patiente//var canvas = document.getElementById('myCanvas');//var context = canvas.getContext('2d');//var imageObj = new Image();////imageObj.onload = function() {//context.drawImage(imageObj, 69, 50);//};//imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';var scene;var engine;var posXSkel = 0;var posYSkel = -3;var posZSkel = 5;var objBrasSqueletteSupportExterne;var objBrasSqueletteSupportInterne;var objBrasSquelette;var objBrasProgramationSupportExterne;var objBrasProgramationSupportInterne;var objBrasProgramation;var objBrasPieceSupportExterne;var objBrasPieceSupportInterne;var objBrasPieceSupport;var objBrasPieceOutil;var objCapot;var objTrappeContour;var drapAnimationStart; var nameLastSkelAtelier;var tabMeshImportes = [];var tabSkelImportes = [];var tabAnimationSquelette = [];var tabAnimationPiece = [];var objAnimTest;//Start the demofunction runVisuAtelier(canvasId,listeParamsSkel) {    var canvas = document.getElementById(canvasId);    engine = new BABYLON.Engine(canvas, true);        nameLastSkelAtelier = "";       scene = new BABYLON.Scene(engine);       BABYLON.SceneLoader.Load("", "SceneAtelier.babylon", engine, function (newScene) {                        // Wait for textures and shaders to be ready            //newScene.executeWhenReady(function () {                                // Attach camera to canvas inputs                newScene.activeCamera.attachControl(canvas);                                // Get the scene's objects                objCapot = newScene.getMeshByName("MeshCapotTrappeAtelier");                objBrasSqueletteSupportExterne = newScene.getMeshByName("MeshSupportExterneBrasSkeletteAtelier");                objBrasSqueletteSupportInterne = newScene.getMeshByName("MeshSupportInterneBrasSkeletteAtelier");                objBrasSquelette = newScene.getMeshByName("MeshAimantBrasSkeletteAtelier");                objBrasProgramationSupportExterne = newScene.getMeshByName("MeshSupportExterneBrasProgramationAtelier");                objBrasProgramationSupportInterne = newScene.getMeshByName("MeshSupportInterneBrasProgrammationAtelier");                objBrasProgramation = newScene.getMeshByName("MeshCasqueProgramationAtelier");                objBrasPieceSupportExterne = newScene.getMeshByName("MeshSupportExterneBrasPieceAtelier");                objBrasPieceSupportInterne = newScene.getMeshByName("MeshSupportInterneBrasPieceAtelier");                objBrasPieceSupport = newScene.getMeshByName("MeshBrasPieceSupportAtelier");                objBrasPieceOutil = newScene.getMeshByName("MeshBrasPieceOutilsAtelier");                objTrappeContour = newScene.getMeshByName("MeshContourCapotAtelier");                                // In default, the scene plays all animations                newScene.stopAnimation(objCapot);                newScene.stopAnimation(objBrasSqueletteSupportExterne);                newScene.stopAnimation(objBrasSqueletteSupportInterne);                newScene.stopAnimation(objBrasSquelette);                newScene.stopAnimation(objBrasProgramationSupportExterne);                newScene.stopAnimation(objBrasProgramationSupportInterne);                newScene.stopAnimation(objBrasProgramation);                newScene.stopAnimation(objBrasPieceSupportExterne);                newScene.stopAnimation(objBrasPieceSupportInterne);                newScene.stopAnimation(objBrasPieceSupport);                newScene.stopAnimation(objBrasPieceOutil);                newScene.stopAnimation(objTrappeContour);                                    // Set up the select tag                initSelectPackPiecesAte();                initSelectAnimaSkelAte();                initSelectAnimaPackPieceAte();                //scene.beginAnimation(target, from, to, loop, speedRatio, onAnimationEnd)                 //newScene.beginAnimation(objCapot, 140, 160, true, 1.0, function(){});                               scene = newScene;                            createSkybox();                createAllSkeletons(listeParamsSkel);                                                drapAnimationStart = false;                                // Once the scene is loaded, just register a render loop to render it                engine.runRenderLoop(function() {                                        scene.render();                                    });                            //});                    });}//Create the skyboxfunction createSkybox() {    var sMaterial = new BABYLON.StandardMaterial("skyboxMaterialMagasin", scene);    sMaterial.backFaceCulling = false;        //sMaterial.reflectionTexture = new BABYLON.CubeTexture("images/skybox/skybox", scene);    sMaterial.reflectionTexture = new BABYLON.CubeTexture("../../Bll/MoteurJeu/Img/IMG_Decor/Skybox/skyboxArene", scene);    sMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;    var skybox = BABYLON.Mesh.CreateBox("SkyboxMagasin", 50, scene);    skybox.material = sMaterial;        skybox.checkCollisions = true; }// Set the position of meshfunction setupMeshWithPosFix(obj,meshes,posX,posY,posZ){    obj = meshes[0];    obj.position = new BABYLON.Vector3(posX,posY,posZ);     return obj;}// Create the skeleton into the cylinderfunction createSkeleAtelier(tabParamsSkel){        if(tabParamsSkel != null)    {        var skelAtelier;        var nomSkelAtelier = tabParamsSkel[0].NomBlender;        //var chemVersFichierSkelAtelier = tabParamsSkel[0].ChemVersFichier;        //var nomFichierSkelAtelier = tabParamsSkel[0].NomFichier;                        if(nameLastSkelAtelier != "")        {            skelAtelier = scene.getMeshByID(nameLastSkelAtelier);                    if(skelAtelier != null)            {                scene.beginAnimation(objCapot, 500, 540, false, 1.0, function(){});                skelAtelier.position = new BABYLON.Vector3(posXSkel, posYSkel-10, posZSkel-2.0);                            if(tabMeshImportes.length > 0)                {                    var i = 0;                    var nbMeshesImportes = tabMeshImportes.length;                    for(i=0;i<nbMeshesImportes;i++)                    {                        var mesh = scene.getMeshByID(tabMeshImportes[i]);                        mesh.position = new BABYLON.Vector3(posXSkel, posYSkel-10, posZSkel-2.0);                    }                }                            }                        }                        // Charger le squelette de démo pour l'aperçu de la pièce        //skelAtelier = scene.getMeshByName(nameLastSkelAtelier);            //skelAtelier = scene.getMeshByName(nomSkelAtelier);            //skelAtelier = scene.getSkeletonByName("Armature");            //skelAtelier = scene.getSkeletonById(nomSkelAtelier);            skelAtelier = scene.getMeshByID(nomSkelAtelier);        // If mesh already exists        if(skelAtelier != null)        {                        // Jouer l'animation d'entrée du squelette            scene.beginAnimation(objBrasSqueletteSupportExterne, 0, 100, false, 1.0, function(){});            scene.beginAnimation(objBrasSqueletteSupportInterne, 0, 100, false, 1.0, function(){});            scene.beginAnimation(objBrasSquelette, 0, 100, false, 1.0, function(){});            scene.beginAnimation(objTrappeContour, 0, 100, false, 1.0, function(){                                scene.beginAnimation(objTrappeContour, 100, 190, false, 1.0, function(){});                scene.beginAnimation(objBrasSquelette, 100, 190, false, 1.0, function(){});                scene.beginAnimation(objBrasSqueletteSupportInterne, 100, 190, false, 1.0, function(){});                scene.beginAnimation(objBrasSqueletteSupportExterne, 100, 190, false, 1.0, function(){});                                                skelAtelier.position = new BABYLON.Vector3(posXSkel, posYSkel+3.5, posZSkel-2.0);            });        }                nameLastSkelAtelier = nomSkelAtelier;                }}// Load all of the skeleton at the beginning of in the scenefunction createAllSkeletons(listeParamsSkel){        var tabParamsSkel = eval(listeParamsSkel);        if(tabParamsSkel != null)    {        var i;        for (i=0;i<tabParamsSkel.length;i++)        //for (i=0;i<1;i++)			// for test the first skeleton only        {               var skelAtelier;            var nomSkelAtelier = tabParamsSkel[i].NomBlender;            var chemVersFichierSkelAtelier = tabParamsSkel[i].ChemVersFichier;            var nomFichierSkelAtelier = tabParamsSkel[i].NomFichier;            BABYLON.SceneLoader.ImportMesh(nomSkelAtelier, "../../Bll/MoteurJeu/" + chemVersFichierSkelAtelier, nomFichierSkelAtelier, scene,             function (newMeshesSkel,particleSystems, skeletons) {                // -10 in y to load the skeleton under the floor and +3.5 in final position                skelAtelier = setupMeshWithPosFix(skelAtelier,newMeshesSkel,posXSkel, posYSkel-10, posZSkel-2.0);                     //skelAtelier = setupMeshWithPosFix(skelAtelier,newMeshesSkel,skeletons,posXSkel, posYSkel+3.5, posZSkel-2.0);                                     // Animation of skeleton is good here !!!!                //objAnimTest = scene.beginAnimation(skeletons[0], 10, 55, true, 1.0, function(){});                //objAnimTest.stop();                            });            tabSkelImportes.push(tabParamsSkel[i]);        }            }}// Create the device on the robotfunction createPieceAtelier(tabParamsPiece){           if(tabParamsPiece != null)    {        // Play the scene animations...        scene.beginAnimation(objBrasPieceSupportExterne, 200, 270, false, 1.0, function(){});        scene.beginAnimation(objBrasPieceSupportInterne, 200, 270, false, 1.0, function(){});        scene.beginAnimation(objBrasPieceSupport, 200, 270, false, 1.0, function(){});        scene.beginAnimation(objBrasPieceOutil, 200, 270, false, 1.0, function(){                        var i;            var nbPieces = tabParamsPiece.length;            for(i=0;i<nbPieces;i++)            {                var nomBlenderPiece = tabParamsPiece[i].NomBlender;                var chemVersFichierPiece = tabParamsPiece[i].ChemVersFichier;                var nomFichierPiece = tabParamsPiece[i].NomFichier;                var piece;                                var pos = tabMeshImportes.indexOf(nomBlenderPiece);                if(pos == -1)                {                                        // Import the mesh                    BABYLON.SceneLoader.ImportMesh(nomBlenderPiece, "../../Bll/MoteurJeu/" + chemVersFichierPiece, nomFichierPiece, scene,                     function (newMeshes) {                        piece = setupMeshWithPosFix(piece,newMeshes,posXSkel, posYSkel+3.5, posZSkel-2.0);                        piece.name = nomBlenderPiece;                    });                    tabMeshImportes.push(nomBlenderPiece);                }                else                {                    var mesh = scene.getMeshByID(tabMeshImportes[pos]);                                        if(mesh != null)                        mesh.position = new BABYLON.Vector3(posXSkel, posYSkel+3.5, posZSkel-2.0);                }                            }                        scene.beginAnimation(objBrasPieceOutil, 270, 340, false, 1.0, function(){});            scene.beginAnimation(objBrasPieceSupport, 270, 340, false, 1.0, function(){});            scene.beginAnimation(objBrasPieceSupportInterne, 270, 340, false, 1.0, function(){});            scene.beginAnimation(objBrasPieceSupportExterne, 270, 340, false, 1.0, function(){});                    });                    }}// Create the animation of the skeletonfunction createAnimation(idSkel,idAnimationSkel){    if(!drapAnimationStart)    {        var i = 0;        var skelAtelier;        var keyDeb;        var keyFin;        var nbSkel = tabSkelImportes.length;        for(i=0;i<nbSkel;i++)        {            if(tabSkelImportes[i].ID == idSkel)            {                var nomSkel = tabSkelImportes[i].NomBlender;                skelAtelier = scene.getMeshByID(nomSkel);                if(skelAtelier != null)                {                    // Find keyframes of the animation                    var j = 0;                    var nbAnimsSkel = tabAnimationSquelette.length;                    for(j=0;j<nbAnimsSkel;j++)                    {                        if(tabAnimationSquelette[j].ID == idAnimationSkel)                        {                            keyDeb = tabAnimationSquelette[j].KeyFrameDeb;                            keyFin = tabAnimationSquelette[j].KeyFrameFin;                        }                    }                }            }        }                if(!drapAnimationStart)        {            var objAnim = scene.beginAnimation(skelAtelier.skeleton, keyDeb, keyFin , false, 1.0, function(){                drapAnimationStart = false;                            });            drapAnimationStart = true;        }                //objAnimTest.restart();        //skelAtelier = scene.getSkeletonByName("Armature");                /*        var objAnim = scene.beginAnimation(skelAtelier.skeleton, keyDeb, keyFin , false, 1.0, function(){            drapAnimationStart = false;                        });        drapAnimationStart = true;        */                //test(retour2,skelAtelier.skeleton, keyDeb, keyFin ); // affiche 'Retour 2'                //scene.render();        //scene.unregisterBeforeRender(function(){                      //});                //scene.registerBeforeRender(function(){                    /*            if(!drapAnimationStart)            {                var objAnim = scene.beginAnimation(skelAtelier.skeleton, keyDeb, keyFin , false, 1.0, function(){                    drapAnimationStart = false;                                });                drapAnimationStart = true;            }            */                //});    }    }function addInTabAnimationSquelette(animationSkel){    tabAnimationSquelette.push(animationSkel);}function addInTabAnimationPiece(animationPiece){    tabAnimationPiece.push(animationPiece);}// Test of callback functionfunction retour2(lObjSkel,lImgeDeb,lImgeFin) {  //alert('Retour 2');      if(!drapAnimationStart)    {        var objAnim = scene.beginAnimation(lObjSkel, lImgeDeb, lImgeFin, false, 1.0, function(){            drapAnimationStart = false;                        });        drapAnimationStart = true;    }    }function test(fct_retour,objSkel,imgDeb,imgFin) {  fct_retour(objSkel,imgDeb,imgFin); // appel de la fonction}

 and here my onchange event function of the html select "Liste des Ids des packs de pieces" :

function getValComboAnimationSkelAtelier(idDeComboSkel,idDeCombo){    // Get the skeleton    var selectBox = document.getElementById(idDeComboSkel);        var txtCombo = selectBox.options[selectBox.selectedIndex].textContent;        var posBal = txtCombo.indexOf(':');        var idSkelStr = txtCombo.substr(0,posBal);        // Get the num skeleton    selectBox = document.getElementById(idDeCombo);        txtCombo = selectBox.options[selectBox.selectedIndex].textContent;        posBal = txtCombo.indexOf(':');        var idAnimationStr = txtCombo.substr(0,posBal);        if(idAnimationStr != "")    {        createAnimation(idSkelStr.trim(),idAnimationStr.trim());    }    }

Anyone has an idea ???

 

Thanks !!

 

Zino 

[Zino54220]

I tried to translate my code's comments in English but don't hesitat to ask me if you need more informations...

[Zino54220]

I found it !!!!!!!!! The problem was here :

if(!drapAnimationStart)        {            var objAnim = scene.beginAnimation(skelAtelier.skeleton, keyDeb, keyFin , false, 1.0, function(){                drapAnimationStart = false;                            });            drapAnimationStart = true;        }

My variables "keyDeb" and "keyFin" was from type string certainly and of course, beginAnimation need type int....

 

So to resolve this problem, you must use the "parseInt" function and it's good!

if(!drapAnimationStart)        {            var objAnim = scene.beginAnimation(skelAtelier.skeleton, parseInt(keyDeb), parseInt(keyFin) , false, 1.0, function(){                drapAnimationStart = false;                            });            drapAnimationStart = true;        }

[GameMonetize]

Good job