Table Contents show

How to make a millisecond timer with Spark AR Studio

Timers are an essential part of mini games created with Spark AR Studio. If we want to increase the accuracy of our timer, we can use a few objects and lines of code to get the timer to 0.00 format.

Subscribe on YouTube

Patch Editor

There are plenty of ways to keep track of time in Spark AR. I will share two methods; one using the raw output from Runtime, and another using a patch asset I created called Simple Timer.

Add Objects

Select + Add Object and create a 2D Text object to display the timer. Name it “TimerText“.
Edit the text property of the 2D Text object so it displays: 0.00.

Create To Script Variable

Select + Add Assset and choose Script.
With the script.js file selected, go to the properties panel (right side) and select + To Script.
Select Number and name the To Script variable “Timer“
Select the -> arrow next to the variable to add it to the Patch Editor.

Runtime Method

Create the Patch below by selecting + Add Patch and adding the patch objects.

Simple Timer Method

Download Simple Timer and select + Add Asset, “Import From Computer…”
Locate the .arp patch and import into the project.
Drag into the Patch Editor, right click and “Convert to Patch Group”.
Create the Patch below using + Add Patch.

Millisecond Timer with Simple Timer Spark AR Studio

Set Speed to 999
Set Stop Time very high, because we don’t know when we will stop.
Divide the time output by 60
Send to the Timer To Script variable.

These are two methods of achieving the same goal: get and display a timer counting with milliseconds.

Millisecond script.js Code

This is the code display the time in millisecond format, using the object names we created earlier.

// How to load in modules
const Scene = require('Scene');
// Use export keyword to make a symbol available in scripting debug console
export const Diagnostics = require('Diagnostics');
const Patches = require('Patches');

Promise.all([

    Scene.root.findFirst('TimerText'),

]).then(function (results) {

    const timerCountText = results[0];

    Patches.outputs.getScalar('Timer').then(timerObj => {

        timerObj.monitor().subscribe(function (timerEvent) {

            timerCountText.text = timerEvent.newValue.toFixed(2).toString();

        });
    });
});

Result

It works! I wanted to share the Runtime configuration and Simple Timer setup to show how they compare to achieve the same goal. If we wanted to add a stop, reset and bidirectional counting using Runtime, we need more code.

Download Millisecond Example Project

I’ve included a Runtime Timer example in the Simple Timer download page. Check it out if you’re curious, and please leave a star review. It may be helpful in understanding how events are triggered and “subscribed” to in Spark AR Studio.

Please follow and like us:

Millisecond Timer: Spark AR Tutorial