Play Timeline on Entering AR/VR

🌵 Needle Engine
1

Hi… is there a best/preferred way to get a timeline to run when a user hits the AR or VR buttons?

I have a script that successfully starts the timeline running ‘on user interaction’. However, I’ve noted that if a user is wearing a headset and doesn’t interact with the scene before hitting the VR button the timeline doesn’t play and, instead, everything in the VR environment is static.

The script I’m currently using is:-


export class Play extends Behaviour
{
   @serializable(PlayableDirector)
   timeline? : PlayableDirector;
    
    update(){
        if(this.context.input.getPointerDown(0)) this.timeline?.play();
        
    }
}```

[Original Post on Discord](https://discord.com/channels/717429793926283276/1075696161882640384)

*by user 908977119781060648*
2

Hello @frannie :beer: you can use the events that the webXR component exposes:

WebXR.addEventListener(WebXREvent.XRStarted, () => this.timeline?play())

3

Many thanks @marwie1 :cactus: I’ll try to implement that :+1:

by user 908977119781060648

4

So, just to doubIe-check… I should have the following?


export class Play extends Behaviour
{
   @serializable(PlayableDirector)
   timeline? : PlayableDirector;
    
    update(){
        WebXR.addEventListener(WebXREvent.XRStarted, () => this.timeline?play())
        
    }
}```

*by user 908977119781060648*
5

Not in update :slightly_smiling_face: do that in start() (you only want to receive the event once, if you put the code like this in update you will subscribe 1000s of times to the event (every frame) and your app will be very very slow over time.

6

You also need to import WebXR and WebXREvent (vscode should suggest you how)

7

Ah, okay… I’ll have another look at it all :slightly_smiling_face:

by user 908977119781060648

8

And maybe you want to keep the previous code with the pointer down event in there as well? Unless you only want the animation to play in VR?

9

Btw what you also could try to do is just this, maybe it works for both vr and desktop:


export class Play extends Behaviour
{
   @serializable(PlayableDirector)
   timeline? : PlayableDirector;
    
    awake(){
        window.addEventListener("pointerdown", () => this.timeline?.play())
        
    }
}```
10

Oooooooo, right, I’ll give that a try! Thank you!

by user 908977119781060648

11

You might also just hook into the function that the audiolistener is using. Sorry as im currently travelling its a bit slow/hard to look things up and help ^^ it will be better again next week

12

AudioSource.registerWaitForAllowAudio(()=> .... )

13

That might also do it (when you put play timeline where the dots are :slightly_smiling_face: )

14

Thank you! I’ll try that too! Your time and input is greatly appreciated!!! :smiling_face_with_three_hearts:

by user 908977119781060648

15

Quick update on progress…

The script you suggested …


export class Play extends Behaviour
{
   @serializable(PlayableDirector)
   timeline? : PlayableDirector;
    
    awake(){
        window.addEventListener("pointerdown", () => this.timeline?.play())
        
    }
}```

... works brilliantly well for desktop and VR. However, it doesn't appear to start the timeline in AR.

That's totally *not a deal-breaker* though. I'm absolutely delighted that pretty much everything's working as hoped-for. That'll do for me for now... I'm more than content with how things are going 😊 😊 😊 😊 😊  Huge thanks for all your help!

*by user 908977119781060648*
16

You can add the webxr code from above to call play once more when entering AR

17

I’ll give that a go :grinning: :+1:

by user 908977119781060648

18

Quick progress update #2…

I’ve tried the following:-

import { WebXREvent } from "@needle-tools/engine/engine-components/WebXR";

export class Play extends Behaviour
{
   @serializable(PlayableDirector)
   timeline? : PlayableDirector;
    
    awake(){
        window.addEventListener("pointerdown", () => this.timeline?.play())
        
    }

    start() {
        WebXR.addEventListener(WebXREvent.XRStarted, () => this.timeline?.play())

    }
}```

... but unfortunately it still doesn't seem to start the timeline in AR. However, it could be that my phone is an issue; so I'm not going to worry too much for now, in case it's working normally but just not for me 🙂

*by user 908977119781060648*
19

I dont think its your phone. Maybe the problem is caused by the fact that the timeline is disabled while the ar scene is placed and that happens after the play call.

Please try changing awake like so:

awake(){
        window.addEventListener("pointerdown", () => {
  if(this.timeline){
   this.tineline.playOnAwake = true;
   this.timeline.play();
    }
  }
)
}

(Excuse the terrible formatting, hard to code on a phone haha)

20

If that fixes it you might not even need the code in start anymore