# Play Timeline on Entering AR/VR

**URL:** <https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636>\
**Category:** 🌵 Needle Engine\
**Tags:** question\
**Created:** [February 16, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636 "2023-02-16T00:00:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [February 16, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/1 "2023-02-16T00:00:00Z")

</div>

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:-

````import

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*
````

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/2 "2023-02-17T00:00:00Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/3 "2023-02-17T00:00:00Z")

</div>

Many thanks @Marcel_Wiessler1 🌵 I’ll try to implement that 👍

_by user 908977119781060648_

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/4 "2023-02-17T00:00:00Z")

</div>

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

````import

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

*by user 908977119781060648*
````

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/5 "2023-02-17T00:00:00Z")

</div>

Not in update 🙂 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.

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/6 "2023-02-17T00:00:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/7 "2023-02-17T00:00:00Z")

</div>

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

_by user 908977119781060648_

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/8 "2023-02-17T00:00:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/9 "2023-02-17T00:00:00Z")

</div>

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

````import

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

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/10 "2023-02-17T00:00:00Z")

</div>

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

_by user 908977119781060648_

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/11 "2023-02-17T00:00:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/12 "2023-02-17T00:00:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/13 "2023-02-17T00:00:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/14 "2023-02-17T00:00:00Z")

</div>

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

_by user 908977119781060648_

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/15 "2023-02-17T00:00:00Z")

</div>

Quick update on progress…

The script you suggested …

````import

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*
````

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/16 "2023-02-17T00:00:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [February 17, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/17 "2023-02-17T00:00:00Z")

</div>

I’ll give that a go 😀 👍

_by user 908977119781060648_

---

<div class="post-metadata">

**Author:** ![discord-import](https://forum.needle.tools/user_avatar/forum.needle.tools/discord-import/32/33_2.png) [@discord-import](https://forum.needle.tools/u/discord-import)\
**Post date:** [February 18, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/18 "2023-02-18T00:00:00Z")

</div>

Quick progress update #2…

I’ve tried the following:-

````import
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*
````

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 18, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/19 "2023-02-18T00:00:00Z")

</div>

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:

```auto
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)

---

<div class="post-metadata">

**Author:** ![Marcel\_Wiessler1](https://forum.needle.tools/user_avatar/forum.needle.tools/marcel_wiessler1/32/21_2.png) [@Marcel\_Wiessler1](https://forum.needle.tools/u/Marcel_Wiessler1)\
**Post date:** [February 18, 2023, 12:00am UTC](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636/20 "2023-02-18T00:00:00Z")

</div>

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

[Next page](https://forum.needle.tools/t/play-timeline-on-entering-ar-vr/636.md?page=2)