Mouth Opened Animation Trigger

Follow

Neel's Music Corner

Snap Lens Network Member Lens Studio Team

• May 07, 2018 20:39

Hey, I am not good at scripting, i wanted to know how can I add animation that can be triggered when mouth is opened, and what is the scripting and how can the animation be imported? Like does it need to be gif or 2d images... and can i use particles coming out of mouth when opened. please help, Thank You !

0

• 

  Jonathan Solichin

  Snap Lens Network Member Lens Studio Team

  • May 09, 2018 17:52

  Hi Neel!

  Adding 2D Animation

  You can import both 2D images and gif into Studio. To bring it in, simply drag the file into the Resources panel. Then in your Objects panel, you can press Add New and select Billboard (display animation on the screen), Sprite (display animation in 3D space), Face Sprite (display animation attached to the face). 

  Take a look at https://lensstudio.snapchat.com/guides/2d/2d-animation/ for more information. Additionally, you can import directly from Giphy. Take a look at https://lensstudio.snapchat.com/guides/2d/giphy-import/ for details. 

  

  Starting Particle on Mouth Opened

  Yes, you can start a particle on mouth opened. First open the Particles template to make the particles you want to emit. Take a look at the Particles template guide for all the controls you can do. https://lensstudio.snapchat.com/templates/world/particles/

  Then, follow the "Exporting & Importing Particles" section in the guide to bring your particle into your lens project. 

  Finally, to get it to play on mouth opened, we need to use a script so that we can control the time in the particle system. To do this, first lets tell our particle to use an external time. 

  In the Resources panel, select your particle material and check the "External Time" box. 

  

  Then let's use a script to tell the particle system the time. In your Resources panel, click Add New > Script. Then select the new script in your Resources panel and paste this code in the Inspector Panel:

  var playingParticles = false;
  
  function onMouthOpened(time)
  {
   global.controlTime = getTime();
   playingParticles = true;
  }
  var mouthOpenedEvent = script.createEvent("MouthOpenedEvent");
  mouthOpenedEvent.bind(onMouthOpened);
  
  function onUpdate (time)
  {
   if (playingParticles) {
  
  global.animTime = global.controlTime - getTime();
   var positiveTime = -animTime * 0.5;
  
  script
   .getSceneObject()
   .getFirstComponent("Component.MeshVisual")
   .getMaterial(0)
   .mainPass
   .externalTimeInput = positiveTime; 
   }
  }
  var updateEvent = script.createEvent("UpdateEvent");
  updateEvent.bind(onUpdate);

  What this code is doing is, when you open your mouth, it tells the script that we should play particles. Then every frame update when we are playing particles, we increment the time in our particle system. 

  

  Put this script where ever the Mesh Visual for your particle is. and set it to "Initialized" 

  

  Now, when you open your mouth, your particle should play!

  

  Don't forget to show us what you make!

  Cheers,

  Jon

   

   

  Comment actions Permalink

Please sign in to leave a comment.