How to create your own Scavenger Hunt for augmented reality web

In this post we are going to explain in a simple way how to create your own treasure hunt game using augmented reality for web browsers, or the so-called web AR. It is a post mainly aimed at personnel with knowledge of web development (more specifically Javascript), although if you are interested in creating one of these dynamics, and you do not have technical staff in your team, we invite you to continue reading to better understand what this type of games.

Within this treasure hunt, or also called Scavenger Hunt, a small web portal will be created where there will be different types of elements to take into account. As a summary, these are highlighted:

  • Initial data form: necessary to register new players and their data, such as their email. With this, you can create a database and player records.
  • Game logic and scoring system: each game may have different needs: number of games, points received for each hunt, player limit. All these rules are part of the game logic that must be programmed.
  • Interaction screen with augmented reality: the essence of this type of game is the interaction through the camera and the real world. In the augmented reality viewer, the way to interact with the images of the environment is provided and thus discover the hidden contents.
  • Points summary and ranking screen: once a hunt or a complete game is finished, the user will have their associated points. Through this final summary, your ranking and points will be shown, and they can also be associated with your previously stored user profile.

It is also important to bear in mind that when operating on a web environment, through web AR as already mentioned, it will not be necessary to download any application to play or share the experience with other users. The process is very simple: simply read a QR code, which launches a web page where the game can be started. Once the basic data has been filled in, you can start searching and detecting the images that make up the game, which hide the desired treasure. Each time the user earns points or prizes, they can be related to their profile, previously stored in a database associated with the game.

What is an image-based scavenger hunt game?

One of the most widely used modes of augmented reality is the detection and placement of content on images. These images can be anything: a supermarket poster, a product package, a toy box, or even the facade of a building.

A treasure hunt game is about hiding different types of content, mainly prizes, coins, points, discounts; in different images associated with some type of event or campaign.

augmented reality prizes

Thanks to augmented reality, what can be done is to generate a dynamic of this style, in which users, visitors to an event, buyers in a supermarket, etc; can search and detect different images that hide a prize. To interact with this type of content, it is simply necessary to have a mobile phone and an internet connection.

Thus, for example, we can think of a dynamic like the following: a child enters a department store with her parents, and to complete the game he must find the 5 prizes hidden in 5 of the toys in the establishment. While they make their purchases, the child will be entertained looking for which toys have a hidden prize, and the establishment on her side will be obtaining valuable information about their buyers, in addition to providing a completely innovative entertainment mechanism.

How can I develop my own game with Javascript? Onirix Web AR SDK

At Onirix we have developed a complete SDK so that our most technical users can unleash their imagination and develop their own web experiences without any limit.

This SDK is designed to work with online 3D renderers such as three.js, aframe, or Babylon.js. Specifically, dealing with the topic of the treasure hunt, on our Github page you can find an extensive example on how to develop one of these games from scratch, step by step: https://github.com/onirix-ar/scavenger-hunt

augmented reality scavenger hunt mall

In this example, we provide the programmers with a demo where we cover the main parts of the game: registration, augmented reality interactions, and the score screen. From there you can include all the functionality you want, include a storage system, web analytics, and other relevant components.

How to customize the Scavenger Hunt for my company or client

Being a web component, it is very easy to customize and adapt to the needs of an end customer. Your brand, your logo, your colors. It is as simple as making a web design and layout using HTML and CSS for each of the parts of the game.

In case you do not have a web development team, from Onirix we also offer our services for the ideation, creation, design, and complete development of this type of dynamics. There are several types of games that we have already made with different clients, adapting the entire process to their needs.

Lead R&D Software Architect at Onirix Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *