Playing three 2D sprites, based on 3 or more types of triggers and making them appear to reset back to original "idle state"

Georgie Boy

Snap Lens Network Member Lens Studio Team

March 07, 2019 04:09

Hey Scripting Community,

Can anyone think of a clever way to solve the following problem --> I want to have three 2D animations on sprites directly in front of the camera orthographic style, all three animations have the same starting point, and the same ending point, so when a user triggers Animation1 with "mouth open" the animation plays through once and returns to the idle position. Then when a user triggers Animation2 with "raise brows" the 2nd animation plays through once and returns back to idle position)

The issue I keep running into is, since there are three animations they have to be arranged in Z space, so if Animation1 is closest to camera, how can I show Animation2 if the user triggers it. Since the Animation1 sprite will block Animation2 and Animation3 since they are behind Animation1 in Z space. I tried using the behavior script to hack together a way to do it, and it sort of works, but it breaks when you go between some types of face event triggers.

Anyone have some creative workarounds? I have no programming language experience, and have never written a line of Java Script. Anyone have insights into solving this with a simple script or a pre-provided Lens Studio script that's included inside the templates?

Thanks for any info or ideas!

Jacob

Snap Lens Network Member Lens Studio Team

March 13, 2019 02:16
Edited

Hi Georgie Boy,

Here's a quick script that should let you set up something like this on your own. It's a bit messy but should get the job done.

//@input Component.SpriteVisual sprite

//@input string[] eventTypes
//@input Asset.Texture[] textures

// @input bool loop

var eventIndex = 0;

function waitForNextEvent() {
    var eventName = script.eventTypes[eventIndex];
    if (eventName.length > 0) {
        print("binding " + eventName);
        var evt = script.createEvent(eventName);
        evt.bind(function() {
            script.removeEvent(evt);
            playNextTexture();
        }); 
    } else {
        playNextTexture();
    }
}

function playNextTexture() {
    print ("playing next texture");
    var tex = script.textures[eventIndex];
    if (tex) {
        script.sprite.mainPass.baseTex = tex;
        tex.control.setOnFinish(nextPhase);
        tex.control.play(1, 0);
    } else {
        nextPhase();
    }
}

function nextPhase() {
    eventIndex++;
    if (eventIndex >= script.textures.length || eventIndex >= script.eventTypes.length) {
        if (script.loop) {
            eventIndex = 0;
            waitForNextEvent();
        }
    } else {
        waitForNextEvent();
    }
}

if (script.textures.length > 0 && script.eventTypes.length > 0) {
    script.sprite.mainPass.baseTex = script.textures[0];
    waitForNextEvent();
}

Just fill in the events list with the name of each event you'd like the lens to wait for. You can use the "Scripting Name" column in the events list found here. Then fill in the textures list with the animations you'd like to play after each corresponding event. Here's an example of what it might look like:

I hope I understood your situation correctly, let me know if this works for you!

Georgie Boy
Snap Lens Network Member Lens Studio Team

March 14, 2019 06:14
Hey Jacob,

This definitely works, although the user is forced to go in an event sequence decided by the value numbers, ie: following the Value0-3 order. I want the user to decide what trigger they want to use in any order they decide on the fly. It works, but forces the animations to play in a pre-designated order, anyway around that? Maybe I'm using it wrong?

Thanks for your time and expertise! I've gotta learn to write Java Script, that's what I've figured out in the last 4 days.
Comment actions Permalink
Georgie Boy
Snap Lens Network Member Lens Studio Team

March 14, 2019 17:54
Also, the loop check box is the only way to keep the cycle open for the user? If I don't check "Loop" then the user can only go through the sequence of face triggers one time. The loop option just reruns the script from the beginning again? I think that's what's happening. Correct me if I'm wrong here.

I'm going to explore this technique pointed out by: Jonathan Solichin

https://lensstudio.zendesk.com/hc/en-us/community/posts/360042611971/comments/360004835751

I think his method will work, but I haven't fully assembled the project with this method in mind.

What do you think?
Comment actions Permalink

Jacob

Snap Lens Network Member Lens Studio Team

March 15, 2019 18:21

Sorry, I think I misunderstood, I thought you wanted them to play in order :)

What Jonathan is proposing should work and might be easier if you want to steer clear of coding and stick with Behavior script.

If you want to use a script though (might be a little easier to set up), I adjusted it to work in any order, and always loop this time.

//@input Component.SpriteVisual sprite
//@input string[] eventTypes
//@input Asset.Texture[] textures

var events = [];
for (var i=0; i<script.eventTypes.length; i++) {
    events[i] = initEvent(script.eventTypes[i], script.textures[i]);
}

function initEvent(eventType, texture) {
    var event = script.createEvent(eventType);
    event.bind(function() {
        enableEvents(false);
        playTexture(texture);
    });

    texture.control.setOnFinish(function() {
        enableEvents(true);
    });
    return event;
}

function enableEvents(enable) {
    for (var i=0; i<events.length; i++) {
        events[i].enabled = enable;
    }
}

function playTexture(texture) {
    script.sprite.mainPass.baseTex = texture;
    texture.control.play(1, 0);
}

Hope this works for you and let me know if you need any help understanding it!

Georgie Boy
Snap Lens Network Member Lens Studio Team

March 15, 2019 19:30
Hey Jacob,

Thanks for helping me out! I created a new script and pasted your revised code, for whatever reason it still only seems to move from one animation to the next in a sequential order. My goal is to have it be non-sequential for the user to trigger. Also, once an animation is triggered, it can't be interrupted by a new trigger until the animation finishes playing.

For reference,

I have the following set:

Do I have something setup wrong?
Comment actions Permalink
Jacob
Snap Lens Network Member Lens Studio Team

March 15, 2019 20:12
Hey Georgie, that looks like you're still using the old script. The new one doesn't have the "Loop" option anymore.
Comment actions Permalink
Georgie Boy
Snap Lens Network Member Lens Studio Team

March 15, 2019 21:20
Oh sorry, I must have accidentally copy and pasted from the first script. Now, it definitely works as you said, sorry about that. Actually, the first time I copied it, I added still image textures into the Textures fields (instead of 2D animations), would that break it? I could have sworn I copied the correct code: This is what I'm talking about when referring to still image textures instead of animations:

Thanks Jacob, I'll have to pick through the code and figure out how it works. I'm going to start learning Java scripting, that's what I've learned, behavior scripts only get me so far!

Thanks for the help,

- George
Comment actions Permalink
Georgie Boy
Snap Lens Network Member Lens Studio Team

March 15, 2019 21:24
Additionally, I see this in the log when I open the project, or reset the lens:

I saw that the first time I tried it as well. It shows up after I hit the lens refresh button in the preview panel.
Comment actions Permalink
Jacob
Snap Lens Network Member Lens Studio Team

March 15, 2019 21:45
That would suggest that there are non animated textures added, like you mentioned earlier. In which case you might as well just use behavior scripts since there aren't any events to block during animation? You can have them all pointed at the same sprite with different textures like this:
Comment actions Permalink
Georgie Boy
Snap Lens Network Member Lens Studio Team

March 15, 2019 22:15
Hey Jacob,

Sorry to mislead, I'm waiting on some animations to render out, so I was using stills as temporary placeholders. The revised script you provided works great with animations added to the texture fields. Can't thank you enough, your script is much more elegant than my method that uses 21 behavior scripts to accomplish the same outcome.

Thanks for your smarts,

- George
Comment actions Permalink

Playing three 2D sprites, based on 3 or more types of triggers and making them appear to reset back to original "idle state"

We're here to help! We just need a little bit of information...

What system do you run Lens Studio on?

Follow the next steps to help us solve your issue:

Thanks for submitting this issue.

We'll try to resolve this issue as soon as possible. Thanks for letting us know about it!