Interactive XR Experience
4.09.25
I wanted to do a world lens because I wanted to focus on the users world around them. My goal was to change what they see in their envirnment to create a unique experience.
I followed one of Snap AR's tutorials on youtube to help me get started in creating this lens.
I wanted to create three distincitve interactions within my lens expereince.
Touch to Move Elephant: This interaction allows users to move the elephant by simply touching or tapping on the screen. When the user taps a specific area, the elephant responds by moving to that location, making the interaction feel intuitive and hands-on. This adds a sense of control, allowing users to guide the elephant’s movements within the scene.
Tap to Jump: This interaction triggers the elephant to perform a jump animation when the user taps the screen. It provides immediate visual feedback, making the experience more dynamic and fun. The elephant reacts directly to the user’s touch, creating a playful and responsive experience.
Move to Disappear: In this interaction, the elephant disappears when it reaches a certain location (for example, a hole in the ground or a specific area in the scene). This creates a sense of consequence and adds an element of surprise or storytelling. As the elephant moves toward this specific area, it seamlessly disappears, providing a visually engaging effect within the experience.
I searched for a 3-d objects to use in the asset library. I decided on a jumping elephant to use as the basis for an interaction.
I searched for a 3-d objects to use in the asset library. I decided on a jumping elephant to use as the basis for an interaction.
I searched for a 3-d objects to use in the asset library. I decided on a jumping elephant to use as the basis for an interaction.
This script creates an interactive experience where the elephant in the scene reacts to a user tap by performing a "jump" animation. Initially, the elephant is in an idle state, and when the user taps on the screen, the animation transitions to a jump. The animation change provides immediate visual feedback, a key element of interactive feedback in UX design, ensuring the user understands that their input has been recognized.
By focusing on a simple tap gesture, the interaction remains intuitive and clear, with a seamless flow between the idle and jump states. This reduces cognitive load for the user and enhances the overall experience. The script also lays a foundation for future interaction expansions, such as adding text or sound effects, to further improve user engagement and make the experience more dynamic.
//@input Component.Text jumpText
var jump = 0;
script.elephantAnimation.playClipAt("Idle",0);
function onTapped(eventData)
{
script.elephantAnimation.playClipAt("Tap to Jump",1);
}
var event = script.createEvent("TapEvent");
event.bind(onTapped);
Through a process of trial and error in Lens Studio, I was able to create and refine a custom background texture for the elephant’s environment.
In my Lens Studio project, I wanted to create an interactive experience where an elephant disappears after a user taps the screen. To achieve this, I manipulated the elephant's visibility by using the enabled property of the SceneObject. When the user taps, the script triggers an event that sets the enabled property to false, which effectively hides the elephant from the scene. This action can be customized to trigger based on different events, such as a gesture or any other user interaction within the Lens. It's important to ensure that the elephant object is correctly linked to the SceneObject in the Inspector for everything to work seamlessly. This simple yet effective technique helped me add a layer of interactivity to my lens, creating a more dynamic experience for users.
//@input SceneObject elephant
//@input Component.AnimationPlayer elephantAnimation
// Play "Idle" animation at the start
script.elephantAnimation.playClipAt("Idle", 0);
// Function to make the elephant disappear and play the "Tap to Jump" animation
function onTapped(eventData) {
// Play "Tap to Jump" animation
script.elephantAnimation.playClipAt("Tap to Jump", 1);
// Hide the elephant after a short delay (you can adjust the time as needed)
// This ensures the animation has time to play before the elephant disappears
script.createEvent("DelayedCallbackEvent").bind(function() {
script.elephant.enabled = false; // Disables the elephant, making it disappear
}).reset(1); // Adjust delay time here (1 second in this example)
}
// Bind the tap event
var event = script.createEvent("TapEvent");
event.bind(onTapped);
