AR games: hunt and destroy all elements in time limit

Experience overview 📖

This experience proposes an entertaining game dynamic, which can be associated with different types of events, festivals, or advertising or marketing actions of any brand. The user, once he finds a game point, has a mission: to destroy as many elements as possible within a time limit. The idea is to offer a basic yet entertaining mission to users who are in a specific environment: music festival, marketing campaign in a city, dynamic in a shopping mall, etc. 

These types of experiences use a fairly simple AR mode, which is to place elements around the user, using sensors such as the gyroscope to position the elements in their immediate environment, making rotation or movements, thus making it difficult to find the content to hunt. 

In this example the user has a time limit, which can be about 15 seconds approximately, to hunt the total number of logos. For each logo he will be given points, and if he manages to catch all of them he will have an extra score.

Uses and benefits 🌱

Gamification and entertainment experiences make Web AR a very powerful tool for dynamics and advertising campaigns, marketing, and also for different activities such as music festivals, exhibitions, openings of new establishments, treasure hunts or gymkhanas in shopping malls, and so on. 

These types of experiences can also be easily connected to a more complex system with elements such as:

• New user registration system: customer acquisition. 
• Scoring system: engagement, retention, loyalty.
• Access to prizes and other types of benefits: brand image, customer relationship, reward systems.

Features and tips💡

In this case a dynamic has been made in Onirix using the most complex customization elements of the tool in addition to the Onirix Studio scene editor: Online code editor and Embed SDK for web AR. With these components you can go to a higher level of complexity, thus accessing the web programming component developed by Onirix with its SDK for JavaScript. We also rely on more common elements of this type of experiences: scene editor, audios, and events and interactions.

Code editor: HTML, CSS and JavaScript.

Within this type of experience, a game structure has been created, which the user can modify as he/she wishes. In this structure we can see an OnirixGame class, which has a series of callbacks: onStart, onTimeChange, onGameEnd, onScoreChange. 

By copying this experience you will be able to analyze the code in detail, seeing how we shape the whole game, and its changes in the user interface, through the different events that happen in the AR scene.

In addition, thanks to the code editor we can add different elements of the UI of the game relevant to this type of dynamics:

• Onboarding: initial tips screen to explain the dynamics of the game.
• Scoring: top menu where we show the status of the game (number of logos that have been hunted so far, for example).
• Timer: game seconds indicator (the remaining seconds or those that are passing).
• Final screen: at the end of each game a summary screen is shown with the score obtained.

Access the online code editor documentation.

Embed SDK for webAR in JavaScript

As discussed in the previous section, a game structure has been created within Onirix, which the user can modify to generate their own versions. In addition, access to the Onirix SDK is provided, where it is possible to subscribe to various events and thereby modify different parts of the AR scene.

In the case of the game in question the following events are programmed to manipulate interactions with the scene:

• EmbedSDK.Events.SCENE_LOAD_END: the scene full load event is used to start the game and thus leave the initial user interface ready with all its components.
• EmbedSDK.Events.ELEMENT_CLICK: this event allows to manipulate the click on each of the elements of the scene, and therefore to program the activation of the destruction animation of each logo, as well as the disappearance of them. It is also the entry point to the addition of new points in the game and the evolution of the game.

 Access the complete embed SDK documentation.

Events & interactions

Apart from the programming of the game itself, the scene starts with all the AR content included in it, i.e., all the logos to be hunted are already available in the scene. In this case, the experience starts with a fixed rotating logo, which when clicked “launches” the game dynamics. A total of 15 logos appear floating around the user, with different movements. All these contents and their movements are included in the scene editor, with different associated events:

• 15 3D logos grouped in 3 “orbital” collections in the scene. 15 3D models with destruction animations for each of the 3D elements.
• The 3 collections start disabled (hidden) and when clicking on the start logo they are shown to the user.
• In addition, rotation events are triggered for the 3 orbitals, with different speeds and turns in various axes, thus achieving the desired effect.

For more information see the documentation on events and interaction.

Sounds and effects

Also included as part of this experience are sounds that make the dynamics take on a greater level of immersion. 

• A videogame-like background music is included, which plays throughout the experience. 
• In addition, a destruction type sound effect is added, every time an element is clicked on, giving a more realistic feeling to the user.

For more information see our documentation on sounds and effects.

Surface scene: gyroscope tracking and autoload.

In this kind of experience where it is not necessary to have any kind of concrete marker (neither an image, nor a specific surface), the use of an AR mode in which the phone’s gyroscope is the most effective way. The scene is loaded using a Surface-like scene feature: autoload. With this the user does not have to make any decision where to place the content, it simply appears in front of them and they can start interacting with the content. The advantage of this type of scenes is that they can be placed anywhere, indoors or outdoors, and do not require any physical reference for proper consumption.