Playing sequential animation on mouse / touch click

Help & Support
1

Hi there,

Was just looking around for some pointers to help with something I am trying to create.

I want to have a model that contains 3 animations and each time the user clicks or touches the next animation plays, and only enables the next after the last one has finished playing. On the last animation completion I want to change the scene.

Is there a good example of this kind of thing in use somewhere? If not any pointers would be really helpful!

Thank you!

2

You have to check the animation length with the current animation time once is finished you pass to the next animation and you can also change scene

3

Interesting approach in terms of changing scene - thank you.

4

Welcome since you needed something ‘movie style’ i guess that’s the most fitting solution

6

Hi,

Having a few issues on this. I’ve searched through the API and looked extensively but the below doesn’t seem to work - can anyone point out where I’ve gone wrong?

Thank you

*/
    this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
    this.on('destroy', function() {
        console.log('destroy');
        this.app.mouse.off(pc.EVENT_MOUSEUP, this.onMouseUp, this);
    }, this);
};

ChangingScenes.prototype.onMouseDown = function(event) {
    if (!this.app.mouse.wasPressed(event.key)) {
        return;
    }
    if (event.button == pc.MOUSEBUTTON_LEFT) {
        event.event.preventDefault();

        var oldHierarchy = this.app.root.findByName ('Root');
        this.loadScene(this.sceneId, function() {
            oldHierarchy.destroy();
        });
    } else if (event.button == pc.MOUSEBUTTON_LEFT) {
        event.event.preventDefault();

        this.loadSceneSettings(this.mySceneId, function() {
        });
    }
};
7

So you have 3 animations. If animation has finished, it will stop unless the player clicks or had clicked during playback of the animation. It will then play the next animation or load a scene if it is the last animation.

Is that right?

So far you have only posted code related to change scenes, is that the only part you are having trouble with? If so, there is a tutorial sample here: https://developer.playcanvas.com/en/tutorials/changing-scenes/

8

well we all need that for some games like shooters so we should find a way

9

Well if i understand correctly you could use the new Anim Component and an “AnimStateGraph” where you connect your 3 Animations and set the right duration per transition.

1 Like