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