Web AR platform game: Dream Forest

Experience overview 📖

With this type of dynamics it is possible to create an interaction between the products and their buyers. In this case it is a platform game, where an animated character has to overcome obstacles by jumping between platforms to reach his final destination. This type of experience allows us to generate an interesting game universe, with character, background sound and common aesthetics. In this case we have focused on an experience oriented to a child audience, with a simple dynamic, in which you do not have to spend too much time to complete.

Uses and benefits 🌱

This experience is designed to generate interaction with product packaging. In this way, a relationship between product and consumer is generated, making it possible to generate a higher level interaction channel with the brand. While the child waits for his breakfast, he could play his platform game on the cereal box he eats in the morning. This type of experience helps to:

• Enhance brand image and perception.
• Make product packages have a longer life and therefore a greater impact on consumers.
• Associate a series of different contents, which allow to increase the level and engagement, with the same physical format, that is, without investing in new graphic contents.
• Generate loyalty and reward campaigns associated with specific products.

Features and tips💡

The following features have been used to shape this experience:

3D models and animations

In Onirix different types of resources or Assets can be added to the scenes. One of the most commonly used in this type of experience are 3D models. With this Asset format you can add elements that include fully animated scenes. These animations can be activated at different times within the Onirix scene editor, and therefore, these animations can be used to tell stories. 

In the case of this experience there is a 3D model of some platforms and a character of a little fox. As the character advances in the game, jumping or falling animations are activated depending on the result of the user’s action. 

For more information see our documentation on 3D models in Onirix.

Sounds and effects

Four types of sounds have been added to shape the experience:

• Background music: to make the experience more immersive.
• Jump sound: when the fox manages to move forward on the path.
• Fall sound: when the fox fails to reach the next platform.
• Success sound: when the dynamic is completed.

All sounds are triggered by events and interactions as discussed in the next point.

Access the documentation on audios and sound effects.

Events and interactions

Different elements of the AR scenes can include events that occur at different moments of the execution. In the case of this experience these events have been added:

• Upon successful jumping:
  • The corresponding jump animation is activated.
  • The jump sound is activated.
  • Interface elements are hidden until the animation is completed.
• On failing to get the jump:
  • The corresponding fall animation is activated.
  • The drop sound is activated.
  • The scene is restarted so that the character returns to the beginning of the game.

For more information see the documentation on events and interaction.

Code editor: HTML, CSS and JavaScript. Embed SDK.

In this experience different modifications have been made through the code editor. The most significant are the inclusion of the UI to manage the jump bar, including the possibility of adding more or less speed in the movement, and therefore make the game can be more or less easy to complete. All the logic of jumps and activations of animations is done inside the editor using the Embed SDK. 

Here to access the online documentation of the code editor.

Here to access the Embed SDK documentation.

Scene image tracking

Any image can act as a marker. In this example we have created a marker that could be part of a cookie or cereal box design. This marker would be the starting point of the game, and it will live inside the product we want to promote through this type of experience. 

Access here to the documentation on image-tracking scenes.