Scripting AR is a new video series where we invite Meta Spark experts from all over the world to demonstrate and discuss how they’re using JavaScript in their AR projects. As part of this series, we’ve asked each expert to contribute a short post highlighting just a few of the tips shared during their interview. Be sure to watch the full-length video below to learn more. Today’s contributor is Beth Wickerson (@bethwickerson)

Hey everyone, I’m Beth, I’m an XR developer based in Kansas City, Missouri, and I’m thrilled to share my interview today as part of the Scripting AR video series. For this episode, we’re talking about situations where using scripts might help you build faster and work more efficiently than you might otherwise be able to do using the Patch Editor alone.

To help make this point, I’m sharing three different AR projects today, including Spikey, Gem Smash World, and Countdown to Vote, to help show you how scripting helped me shortcut the build time and add more interactive elements, faster. Watch the full episode now, and see my three tips after to help you get started with scripting your own AR projects.

EPISODE 3

Moving Beyond the Patch Editor With Scripts

with Beth Wickerson

Something Went Wrong

We're having trouble playing this video.

Learn more

I hope you find this first episode of Scripting AR helpful. Our goal with this series is to make scripting less intimidating and more approachable for all types of Meta Spark creators. Over the next few weeks, we’ll be sharing more information from each interview right here on the Meta Spark blog, including the full-length episodes, so please make sure to keep an eye out for those additional posts coming soon.

Take the next step

Explore what’s possible with scripting in Meta Spark Studio

Additionally, I wanted to highlight just a few of the tips shared in this discussion that I thought were important, especially for those of you who may be new to scripting in Meta Spark Studio.

TIP ONE

Scripting makes repetitive tasks easier to manage

In the case of scripting for the Spikey effect we discussed in today’s video, I was looking at binding the physics rotation to somewhere around 200 bones. Imagine having to create multiple patches for each of those bones!? That doesn’t sound like a very fun process, especially if adjustments need to be made. Scripting makes working with repetitive tasks so much easier, not only with the ability to copy and paste, but also you can highlight and select multiple instances of the same code and edit it all at once. Follow Viv Galinari’s tutorial for an even more efficient way of scripting physics with a loop function.

TIP TWO

Use tutorials to quickly get started, then start customizing

Learning to script by following a tutorial is a great way to start, and you might get even more learning out of it by making adjustments to add a feature. GitHub is a great resource where programmers keep repositories of code that anyone can access. In some cases, the code is open-sourced, giving you the ability to make adjustments and send it back to the developers for review and possibly publishing your work. I definitely recommend the Spark AR Community GitHub, the SparkAR-Snippets repo is full of useful resources and they welcome contributions! That is also where you can find Josh Beckwith’s famous particle fade script with very helpful instructional comments.

For the Gem Smash effect demonstrated in today’s video, I again used Viv’s scripting tutorials, this time for patch bridging and adding the Persistence Module for scorekeeping. In my case, I wanted to show the user’s high score at the beginning of the game, so I made a few adjustments to that script to suit my needs. If you would like to check that out you can access it on my GitHub repo, as it also includes an update for the Persistence Module that will affect Meta Spark v157 and above. As with using any API, sometimes updates need to be made to your code as the API is updated. Following the API reference documentation is useful when determining how to fix any errors you may encounter.

TIP THREE

Vanilla JavaScript works in Meta Spark Studio!

Coming from a web development background, I am very happy to say that vanilla JavaScript works in Meta Spark’s Reactive programming model. There are many types of JS, and “vanilla” script is a descriptive term for an unmodified or plain version of JavaScript. I find it to be a low-effort and more user-friendly developing experience, and it is also where I feel more comfortable. You will also be able to find a lot more information and resources online about how to code in vanilla JS.

For the Countdown to Vote effect, I was able to use some simple JavaScript calculations to create a countdown and night mode trigger, something you can find on multiple forums when searching online. I found a pretty common resource for how to code this on W3schools, and another great resource is jsfiddle where creator Balraj Bains found the snippet that determines what part of the day it is for your user! From that point, you simply need to incorporate your code snippets into an async function with patch bridging for Meta Spark with the Scene Module and any other necessary modules for adding to your effect.

You can find the full project file for the countdown and persistence module on my GitHub repo. Check it out, and if you make something tag me to let me know, I would love to see it!

I hope you find this information helpful. If you’re interested in learning more about scripting, I recommend watching the first episode of Scripting AR which gives a great overview of the scripting capabilities in Meta Spark Studio, as well as how to use the library of documentation and tutorials available.

You can learn more about me and my work @bethwickerson and @signaltheory’s work to combine behavioral science and technology to build stronger human connections. And if you haven’t already, I invite you to join the Meta Spark Community where me and many, many other talented creators and developers regularly talk about our AR projects!

Subscribe to the Meta Spark Blog