Spine play new animation after a specific animation has finished

Help & Support
22

Hmm, I tried waiting half a second before I re-enable it but it didn’t seem to work. I also tried scaling it to zero and back again when it finds the image but I always get that last frame playing once before the anim starts.

Perhaps 8th wall is doing something odd with it?

Out of interest, does ‘entity.enable’ actually disable/enable the entity and scripts components on the entity or just set its visibility?

CHeers

23

It calls specific logic on each component but doesn’t actually disable or enable them.

I doubt 8th Wall is doing something specific to Spine but I wonder if it’s changing time scale? It would be worth asking in the 8th Wall Slack

Would you be able to add yaustar to the project and I can try to take a quick look

24

Okay. I just added you :slight_smile:
Most of the important stuff is in the playanim script attached to Image Target Red Packet/Spine Entity.

25

Can you share the tracking image please? Edit: Nevermind, I’ve just realised I can add my own :stuck_out_tongue:

26

I’ve added you to a fixed fork project.

What I’ve done is:

  • Made the playAnim.js script into a general controller script so it’s not on entity that is disabled when the tracking is lost.
  • Disabled the particle effect and spine entity when the image is lost.
  • Enabled the particle effect and spine entity on the next update frame after the image found event is fired. Animation is played in this update frame

The image found event is probably fired AFTER the spine system update so enabling the spine entity then shows the spine entity for that frame but the logic to set it’s state/colour/position etc isn’t done till the next update frame.

1 Like
27
28

Wow!! Can I buy you lunch?

1 Like
29

Here is it working with different packets. Thank you so much for your help!!

https://www.dropbox.com/s/wc05ob7a4eqnbev/SVID_20210420_150130_1.mp4?dl=0

1 Like
30

Nice! Quick question: aren’t the instructions meant to disappear with the red packet?

31

Yes. I looked at the code. Seems fine.??!?! Why would it work correctly with the other packets?

32

I don’t think the instructions are disabled in the initialisation of playAnim.js

33

They aren’t, but shouldn’t they still get disabled each time the ‘imageFound’ function runs?

I will add a
this.instruction_text.enabled=true;
to the initialization.

Maybe that will help it?

34

Actually, I think to simplify this, it be easier to do the following:

// initialize code called once per entity
PlayAnim.prototype.postInitialize = function() {

    this._spine = this.entity.findByName('Spine Entity');
    this._playNextFrame = true;

    //find objects in scene to hide/show
    this.instruction_text=this.app.root.findByName("Instruction Text");
    this.button_group=this.app.root.findByName("Button Group");
    this.smoke_particle=this.app.root.findByName("Smoke Particle");
    
    const imageFound = (detail) => 
    {
        this.instruction_text.enabled=false;
        this.slide_in_buttons();

        this._playNextFrame = true;
    };


    const imageLost = (detail) => 
    {
        this.instruction_text.enabled=true;
        this.slide_out_buttons();
        
        this.smoke_particle.particlesystem.reset();
        
        this._spine.enabled = false;
        this.smoke_particle.enable = false;
    };

    this.app.on('xr:imagefound', imageFound, this);
    this.app.on('xr:imagelost', imageLost, this);

    var spineData = this._spine.spine.data.spine;
    for (var materialName in spineData._materials) {
        var spineMaterial = spineData._materials[materialName];
        spineMaterial.diffuse.set(0.1, 0.1, 0.1);
        spineMaterial.update();

    }    
};

That way, it’s always using the same code to start the animations.

35

Is the only difference…:

this._playNextFrame = true;

at the top, instead of

this._playNextFrame = false;

36

That’s one of the differences, I’ve also removed a chunk of code too

37

Hi, with this code I’m trying to add some other simple simple actions (disabling some object or starting a tween) to happen at the start of the app but its not working. Something to do with this skipping the first frame code that I don’t understand I think.

I’ve tried inside the postInitialize function and/or creating a new OnInitialize function but the commands don’t seem to run in either of those. Its very odd.

38

Tweening should work being called in the initialize/postInitialize calls. Can you create a new project that showcases the issue?

39

I shared the project with you.
You can see on lines 33 (postInitialize) and 136 (update) of playAnim.js that I tried to start the tween without success in both cases…

I’m expecting the scan graphic (square in centre of screen) to be pulsing at the start of the app in a continuous loop.

40

Sorry, I’m going to need a smaller project to look as I’m afraid I don’t have the bandwidth to investigate a full project.

41

Hmm, okay, I deleted a bunch of stuff but Its only 2 meg smaller (there’s not really that much in the project) so I’m not sure why its 38meg.

The problem is that I’ve tried inserting the following line inside Initialize, the PostInitiliaze AND the Update functions (inside the first frame only) but it never seems to trigger in any of those functions.

    this.scan_border.tween(this.scan_border.getLocalScale()).to(new pc.Vec3(0.95,0.95,0.95), 0.5, pc.SineInOut).yoyo(true).loop(true).start();