Createra Guide: Object Animation

This article is about object animation. You can read more about objects and their animations here.

You can animate an object using the animate([],{}) method. First you need to initialize your VOXA model through the JS code editor, then you can describe the necessary animation.

const obj = world.querySelector('#sumersaifa');
 obj.animate ([
     {position: [x,y,z], duration: 1, meshOrientation: new GameQuaternion(w,x,y,z)}, // default value of meshOrientation is (0,0,0,0) - it's an angle of an object
     {position: [x,y,z], duration: 1, meshOrientation: new GameQuaternion(w,x,y,z)},
],
{
    duration: 16*1, // the first number '16' is frame rate, the second is a time of animation you set
    iterations: 1, // default value is '1', you can set 'Infinity' or another number
})

If 2 animation elements in a row contain the same position, the object will stay at that position for the duration time.
If 2 animation elements in a row have different positions, then the object’s movement time from the first position to the second will be equal to the duration described in the first animation element
meshOrientation allows you to rotate the object along different axes:
- w — rotates the object in space
- x — rotates the object in the x plane around itself (around the y axis)
- y — rotates the object in the y plane around itself
- z — rotates the object in the z plane around itself
The initial angle of rotation of the object is (0,0,0,0)
All parameters can be either -1, 0, or 1
(0,1,0,0) — rotation of the object to the left by 180 degrees around x, (0,1,0,1) — rotation of the object to the left by 90 degrees around x. With negative values the object will be rotated to the right. To make the rotation angle equal to 45 degrees, use 0.3 for x and 0.9 for z.

For example, to make a vertically moving elevator you can use the code sample below:

const obj = world.querySelector('#sumersaifa');
 obj.animate ([
     {position: [0,0,0], duration: 2,}, // default value of meshOrientation is (0,0,0,0) - it's an angle of an object
     {position: [0,10,0], duration: 1,},
     {position: [0,10,0], duration: 1,},
     {position: [0,0,0], duration: 0,},
],
{
    duration: 16*1, // the first number '16' is frame rate, the second is a time of animation you set
    iterations: Infinity, // default value is '1', you can set 'Infinity' or another number
})

But use your coordinates. If you don’t want to set certain numbers, you can write like this:

const obj = world.querySelector('#sumersaifa');
 obj.animate ([
     {position: [obj.position.x,obj.position.y,obj.position.z], duration: 2,}, // default value of meshOrientation is (0,0,0,0) - it's an angle of an object
     {position: [obj.position.x,obj.position.y+10,obj.position.z], duration: 1,},
     {position: [obj.position.x,obj.position.y+10,obj.position.z], duration: 1,},
     {position: [obj.position.x,obj.position.y-10,obj.position.z], duration: 0,},
],
{
    duration: 16*1, // the first number '16' is frame rate, the second is a time of animation you set
    iterations: Infinity, // default value is '1', you can set 'Infinity' or another number
})

For a horizontally moving elevator you need to change the x-coordinate instead of the y-coordinate.

You can use meshOrientation if you want to animate a door for example. You want to make it open after interacting with it. Use this, everything is easy and clear:

const obj = world.querySelector('#door'); 
obj.enableInteract = true; obj.interactRadius = 2;

obj.onInteract(({entity}) => {
        obj.animate ([
            {meshOrientation: new GameQuaternion(0,0,0,0), duration: 2,}, // default degree value of object
            {meshOrientation: new GameQuaternion(0,1,0,1), duration: 0,} // 90 degree to left 
        ],
        {
            duration: 16*1.5, // the first number '16' is frame rate, the second is a time of animation you set
            iterations: 1, // default value is '1', you can set 'Infinity' or another number
        })
});

So, from this article you learned about the most basic and necessary elements of object animation. The next article will be dedicated to the animation of the player’s camera. It will be interesting!
Thank you for your attention!
Stay tuned and become a part of Createra!

Createra’s social media links: Twitter | Discord | Web

Createra API | Explore VOXA’s Vobi Assistant!

Our social media links:

• XC’s media links: Telegram | Discord (oklllll#5374)
• SourDiesel’s media links: Telegram | Discord (SourDiesel#8726)

#CreateraStudentCreators #Createra #LoserTeam