Hopscotch

Inspiration

When was the last time you played hopscotch? We all remember it being fun in childhood! And that is exactly why we wanted to bring a game of hopscotch to the AR world: to have some fun :)

What it does

You can place a virtual court on the ground and play hopscotch wherever you want. You can record yourself doing incredible jumps and share it in your Reels. Gather some friends and play together. You can choose from several difficulty levels: from the classical 10x layout to harder, randomly generated ones.

How we built it

We used a build-in plane tracker to place a court on the ground. We also use segmentation to separate the legs from the background and make them appear on top of the projected court to help effect appear as in real life.

Challenges we ran into

The biggest challenge was to make the court appear under the legs when jumping, as this breaks the illusion and makes the whole filter unusable.

To make it work, we decided to make a make-shift "shadow" that will make an area right under the camera translucent. That proved to be harder than it sounded. Spark AR's simulator has information about the device's position in the space, and that seemed exactly what was needed. But on real devices that information turned out to be limited just to device's rotation and not position. Well, that didn't stop us. We've moved the "shadow" object to the camera space, and with some magic rotations, we were able to position it to always appear under the camera.

The next issue was with translucency. We were planning to use occluders to make court semi-transparent, but as it turns out, with occluders, it's either completely visible or completely hidden, no state in between. So this is what we ended up with: small, semi-transparent circle right under the camera that completely hides the court. Surprisingly, it works quite well and makes the illusion immersive.

An unexpected better solution came up when looking through the filters gallery on Instagram. One of the filters, that was replacing the background, worked with the back camera while pointed at the feet. That is exactly what we needed. As per documentation, segmentation works only for the upper half of the body, but in practice, it works with legs as well, at least when wearing shorts.

Since segmentation works very differently on different phones, we decided to keep shadow mode as an option and add a UI button to switch between modes.

Accomplishments that we're proud of

We are very happy with the result. Looking at all the challenges on the way, we are even a bit surprised how good the filter turned out. Hopscotch is actually playable with this filter, and that is amazing.

What we learned

We learned how to go around the limitations of the software, be creative with the solutions, and keep trying new approaches until one of them works.

What's next for Hopscotch

We have some ideas on how we can use shaders to help make shadow semi-transparent. With the further development of the AR capabilities of Spark AR, we are hoping to make the experience even more immersive, better leg separation, better plane tracking, obstacle detection, and maybe even a shared world with friends around you.

As for the current functionality, we are planning on adding more challenging levels and more customization for the game: more visual and play styles.