VR Timeline UI

🌵 Needle Engine
1

Hi, I would love to get feedback or recommendations on how to make a Timeline in VR ?

Thanks :slight_smile: !

2

To create a Timeline UI in VR, consider the following best practices and recommendations:

  1. Use PlayableDirector: Implement the PlayableDirector component for managing timelines. It allows for the playback and control of animations on different game objects. Ensure that the PlayableDirector’s tracks are assigned correctly and export them for use in VR (see the documentation).

  2. Scroll Interaction: Create an interactive timeline that responds to user input. For instance, you can implement a script that allows timeline scrolling through mouse wheel events, translating the scroll input into time adjustments for the PlayableDirector. A suggested implementation is given in the code snippet below (see the documentation).

  3. User Interface Layout: Decide on the layout of your UI in VR. Utilize World Space UI for placing UI elements in the 3D space, ensuring that it feels immersive and adjusts based on the user’s viewpoint (see the documentation).

  4. Event Handling: Ensure your timeline UI can respond to various events, such as clicking buttons for play, pause, and stop actions. Consider creating simple button elements that can be used in VR (see the documentation) (see the documentation).

  5. Performance Optimization: Monitor performance closely when rendering UI in VR. Try to minimize the overhead of UI updates during heavy scenes, ensuring smooth interactions.

Here’s an example code snippet to help you implement a basic timeline interaction:

import { Behaviour, PlayableDirector, serializable, Mathf } from "@needle-tools/engine";

export class ScrollTimeline extends Behaviour {
    @serializable(PlayableDirector)
    timeline?: PlayableDirector;

    @serializable()
    sensitivity: number = 0.5;

    @serializable()
    clamp: boolean = false;

    private _targetTime: number = 0;

    awake() {
        this.context.domElement.addEventListener("wheel", this.onWheel);
        if (this.timeline) this.timeline.pause();
    }

    private onWheel = (e: WheelEvent) => {
        if (this.timeline) {
            this._targetTime = this.timeline.time + e.deltaY * 0.01 * this.sensitivity;
            if (this.clamp) this._targetTime = Mathf.clamp(this._targetTime, 0, this.timeline.duration);
        }
    }

    update(): void {
        if (!this.timeline) return;
        const time = Mathf.lerp(this.timeline.time, this._targetTime, this.context.time.deltaTime / 0.3);
        this.timeline.time = time;
        this.timeline.pause();
        this.timeline.evaluate();
    }
}

This example allows users to control a timeline’s playback in VR by scrolling the mouse wheel, providing an intuitive interaction method. For further reference and in-depth understanding, consult the official Needle Engine documentation (see the documentation).

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

3

Do you mean the UI for a timeline or a timeline animation? Do you have an example?

4

UI for a timeline, I dont have an example, I am just trying to create a UI in VR and was wondering how to make a UI for timeline

5

image