10 I AR Spark- Animate your world!

Augmented Pixels: Section 2 [Mon-Wed 18:30-20:30] | Activities
animation

anim script

Instructions for adding the animation script

  1. Export the frames of your animation from MagicaVoxel and bring them into Spark
  2. Download the two linked scripts in this post (animScript.js and names.js)
  3. Drag the Scripts and your Models into Spark so that they appear in the Assets Folder
  4. Create a Null Object and then parent (drag the 3D models) onto the null object, this will group the frames of the animation in one place.
  5. Click on AnimScript.js and click the '+' where it says "To Script".
  6. Select a number to create a variable and name it "frameIn"
  7. Follow the images in this presentation to create a patch for that variable


1 / 5
animScript.js
names.js
// Load in the required modulesconst Patches = require('Patches');const Scene = require('Scene');const Diagnostics = require('Diagnostics');

let parentNames = ["AnimObject0", "Animation"]

let parentsArray = []let childArray = [];let totalFrames = 0;
// Enable async/await in JS [part 1](async function () {  let name = ""
  for (let anim = 0; anim < parentNames.length; anim++) {    // Locate the animation parent in the Scene    [parentsArray[anim]] = await Promise.all([      Scene.root.findFirst(parentNames[anim])    ]);  }
  //locate the text object in the scene (for debugging)  const [thetext] = await Promise.all([    Scene.root.findFirst('text0')  ]);
  // Get the parent object's children  and log their names to the console  for (let anim = 0; anim < parentNames.length; anim++) {    const children = await parentsArray[anim].findByPath('*');    childArray[anim] = children  }

  // Enable async/await in JS [part 2]})();
Patches.outputs.getScalar('frameIn').then(event => {  event.monitor({}).subscribe(function (values) {    // Diagnostics.log("To Script Number ".concat(values.newValue.toString()));    let frame = values.newValue    totalFrames++
    for (let anim = 0; anim < parentNames.length; anim++) {      if (childArray[anim] != null) {        for (var i = 0; i < childArray[anim].length; i++) {          childArray[anim][i].hidden = !(totalFrames % childArray[anim].length == i);        }      }    }  });});

  // Diagnostics.log(`Child ${i} name: ${children[i].name}`);