× Initiating database migration review
× Database migration started
 
 
 

Animation and time events

 
 

Animations are Nodes attached to other Nodes in order to modify its properties with time change events.


To attach an animation to a node, call the animate() method, returning the Anim node:
var anim = logo.animate();

This animation Node can then be assigned properties, and will be automatically triggered by the engine on the next animation update notification:
// Fade out and translate in X in 1 second.
logo.animate().alpha(0).translate(100, 0, 0).duration(1000); 

An animation can be assigned a set of callbacks to track the animation cycle. This is especially needed for queue animations or timeout events:
// Fade out and back it when done
logo.animate().alpha(0).duration(1000).onEnd = function() {
		logo.animate().alpha(1).duration(1000);
	};
scene.animate().delay(1000).onEnd = function() {
	// Call something after 1 second
};

Note that an animation Node is like any other attached node, and may be assigned a Name, and accessed from the parent with getChild(name) or getChildren() in case you want to check on an animation, modify it, or stop it.

 



 

Animating Images


 
 

Series of images

When the resolution requires, the background of the video cannot be green or none of the add or multiply blend modes can be used we must turn to creating the video out of a series of images for the color channel plus a series of images for its alpha channel. This is also used when a video is already playing as a texture in the same scene.

 
 

Static color and animated alpha channel

The color channel can be static and the alpha to vary, like smoke:

 
 

Example blipp

Download the blippar app and point it at this marker or if you are viewing this on a mobile device with the app installed click on the marker to start the blipp in the app.

 
 
 
 
Here is the image used for the colour channel and two examples of the images used for the alpha channel:
 
 
Colour channel

Alpha channel example

Alpha channel example
 



 

Animated colour and static alpha channel

Also the colour can vary and the alpha can be static, like a shine passing over a logo.

 



 

Animated colour and animated alpha channel

In the blipp example below, note that for the colour images a background very close to the content was used to create the best resulting anti-aliased pixels. Images must have the width and height values in pixels to the power of 2 but the alpha images can be a different (lower) resolution than the colour ones.

 
 

Example blipp

Download the blippar app and point it at this marker or if you are viewing this on a mobile device with the app installed click on the marker to start the blipp in the app.

 
 
 
 
Here is the an example image used for the color channel and an example of an image used for the alpha channel:
 
 
Color image

Alpha image
 



 

Syntax


 
 
1. Associating the files with the model:

  ModelA.setTextures ([
    ['Door_0.jpg','Door_0-A.jpg'],
    ['Door_1.jpg','Door_1-A.jpg'],
    ['Door_2.jpg','Door_2-A.jpg'],
    ['Door_3.jpg','Door_3-A.jpg'],
    ['Door_4.jpg','Door_4-A.jpg'],
    ['Door_5.jpg','Door_5-A.jpg'],
    ['Door_6.jpg','Door_6-A.jpg'],
    ['Door_7.jpg','Door_7-A.jpg'],
    ['Door_8.jpg','Door_8-A.jpg'],
    ['Door_9.jpg','Door_9-A.jpg']
  ]);
 
 
2. Getting and setting the active texture::

// To get the current texture:
var i = obj.getActiveTexture();

// To set the current texture:
obj.setActiveTexture(i);
 
 

Notes:

  • The model can have an initial texture different from all in the animation

  • Once the animation is used the model cannot go back to that initial texture

  • The animation frames count starts at 0

  • Images with alphas must be listed as 2 item arrays like in this example

  • pngsPreload will load all textures into the device memory making the blipp slower to start but the animation very fluid - mind the memory size limit