TimeLine Speed Issue

🌵 Needle Engine
1

Hi!
I implemented a simple script to play a timeline when the object is clicked. But everytime onclick the timeline resets the speed of timeline increases but in the logs it is still 1. I tried to set the speed manually as well but its still increasing


export class TimelineTest extends Behaviour implements IPointerClickHandler {

    @serializable(PlayableDirector)
    timeline: PlayableDirector = new PlayableDirector;

    start() {
        console.log("Start Test");
    }

    trigger: "tap" | "start" = "tap";
    onPointerClick(args: PointerEventData) {
        args.use();


        if (this.timeline.isPlaying) {
            this.timeline.stop();
        }
        this.timeline.speed = 1;

        this.timeline.play();
    }

}
2

Hello Aayush! It looks like you’re trying to manage the playback speed of a PlayableDirector in your timeline script. From your description, it seems that the timeline speed increments every time you play it after clicking, even though you set it to 1.

Here’s a step-by-step approach to troubleshoot and potentially fix the issue:

  1. Check for Multiple Click Events: Ensure that you’re not triggering multiple click events. When you click rapidly, it might stack the calls, resulting in an increased speed.

  2. Reset Speed Immediately on Click: Before playing the timeline, you should ensure that you reset the speed right at the beginning of the click event method:

  3. Log Timeline Speed: Add logging to see the speed every time it’s set. This will help identify whether the speed is getting set correctly.

Here’s an updated version of your code with these considerations:

import { Behaviour, IPointerClickHandler, PointerEventData, PlayableDirector } from "@needle-tools/engine";

export class TimelineTest extends Behaviour implements IPointerClickHandler {

    @serializable(PlayableDirector)
    timeline: PlayableDirector = new PlayableDirector();

    start() {
        console.log("Start Test");
    }

    trigger: "tap" | "start" = "tap";
    
    onPointerClick(args: PointerEventData) {
        args.use();

        // Reset the speed at the beginning of the click
        this.timeline.speed = 1;
        console.log("Timeline speed set to:", this.timeline.speed);

        if (this.timeline.isPlaying) {
            this.timeline.stop();
        }

        this.timeline.play();
        console.log("Playing timeline");
    }
}

Additional Tips:

  • Consider implementing a cooldown period or disabling the click handler temporarily while the timeline is playing to avoid multiple rapid clicks.
  • For deeper debugging, check the logs before and after setting the speed to catch any unexpected changes.

If the issue persists, please provide more details about how, when, and where the timeline might be manipulated outside of this code to understand the context better.

1 replies left - Get a PRO license for more AI replies.
thread_DD3zbCGEVRazcuTscXK2TlVG
Reply to this message to continue the conversation

3

found the solution [ ADD A DELAY!!!]

4

Hello Aayush! I’m glad to hear that you found the solution by adding a delay!

Introducing a delay between clicks can prevent multiple rapid triggers, which is a common approach to managing similar issues. If you want to implement this, you might consider using setTimeout or similar mechanisms to handle user input effectively.

If you have any further questions or need assistance with another aspect of your project, feel free to ask!

0 replies left - Get a PRO license for more AI replies.
thread_DD3zbCGEVRazcuTscXK2TlVG
Reply to this message to continue the conversation

5

Hi, can you provide a bit more information? It’s not clear to me how the timeline gets faster, there is no such code to my knowledge that would cause this and if it’s a bug it would be good to know what’s causing this