Make Things Change on Tap

Hey Everyone,

Let’s make something change on tap! In this guide we will go through an example of tapping to change objects, tapping to change sprite textures, and tapping to change material colors.

So in my current project, I have three objects that I want to tap through. In this example each item is an object with a MeshVisual component (3D object), but it can be anything, such as: a sprite, a parent of multiple , a billboard, etc..

First let’s create a box (Add new -> Mesh Visual -> Box) to define where a user’s tap would count and call it TouchCollision. Resize this box to roughly encompass our objects.

Although you can use any MeshVisual, including the actual object you’re displaying, it’s sometimes to have a seperate mesh since it can stay consistent across different objects and allow you to tap on non-MeshVisual object such as a sprite.

Since we don’t actually want to see the TouchCollision, let’s give it an invisible material. In the TouchCollision Inspector panel, under Mesh Visual component, click “Default” to open the material selection window. In this window, we can Add New “Unlit” material. Select the new Unlit material in the Resources panel and uncheck “‘Depth Test”, “Depth Write”, “Color Write”.

To use the TouchCollision, we’ll add a TouchComponent (Inspector Panel -> Add Component -> Touch) and assign the TouchCollision to it.

Next, let’s add a ScriptComponent (Inspector Panel -> Add Component -> Script) on the same object. This script will use theTouchComponent and iterate through our items when we tap.  Add a new script to this component on ‘Initialize’.

Then let’s edit the script (double-click on the script in your Resources panel). To get references to our items in this script, we can create an input that takes in an array of SceneObject. Then in the Inspector Panel of TouchCollision, you can add our objects to the array--in this case item1, item2, item3.

// @input SceneObject[] items

Since we only want to see one object at a time, we can loop through our “items” array and disable everything but the first one.

// Arrays are indexed from 0.
// Disable everything but the first (0th) item 
for (var i = 1; i < script.items.length; i++) {
    script.items[i].enabled = false;
}

Below that, we tell the script that we want to activate the next item in the array when a TouchStartEvent happens.

function activateNextItem () {
    // we’ll fill this in a second
}

// Bind the function to the touch event.
var touchEvent = script.createEvent("TapEvent");
touchEvent.bind(activateNextItem)

When activateNextItem gets called by the TapEvent, we want the Lens to disable the current item and enable the next item. To help us do this, we need to keep track of our current item.

// We remember what item is currently visible.
// When we start it’s the 0th item.
var currentItemIndex = 0;

// Define what happens when you tap.
function activateNextItem () {

    // Disable the current item. 
    script.items[currentItemIndex].enabled = false;

    // Increment the current item index
    currentItemIndex += 1;

    // We need the current item index to wrap around 
    // once it's higher than the number of items we have.
    currentItemIndex = currentItemIndex % script.items.length;

    // Enable the new item. 
    script.items[currentItemIndex].enabled = true;

}

And that’s it! In your preview you should be able to do this:

Our final script:

// @input SceneObject[] items

// Arrays are indexed from 0.
// Disable everything but the first (0th) item .
for (var i = 1; i < script.items.length; i++) {
 script.items[i].enabled = false;
}

// We remember what item is currently visible.
// When we start it's the 0th item.
var currentItemIndex = 0;

// Define what happens when you tap.
function activateNextItem () {
 // Disable the current item. 
 script.items[currentItemIndex].enabled = false;

 // Increment the current item index
 currentItemIndex += 1;

 // We need the current item index to wrap around 
 // once it's higher than the number of items we have.
 currentItemIndex = currentItemIndex % script.items.length;

 // Enable the new item. 
 script.items[currentItemIndex].enabled = true;
}

// Bind the function to the touch event.
var touchEvent = script.createEvent("TapEvent");
touchEvent.bind(activateNextItem)

Bonus:

You can also use similar scripts to modify existing objects:

Instead of passing an array of objects, you can pass in an array of textures and then iterate through the textures on one sprite.

// @input Component.SpriteVisual sprite
// @input Asset.Texture[] textures

// Our starting texture index
var currentItemIndex = 0;

// Assign the initial texture to our sprite
script.sprite.mainPass.baseTex = script.textures[currentItemIndex]

// Define what happens when you tap.
function changeTexture () {

 // Increment the current item index
 currentItemIndex += 1;

 // We need the current item index to wrap around 
 // once it's higher than the number of items we have.
 currentItemIndex = currentItemIndex % script.textures.length;

 // Change the sprite's texture
 script.sprite.mainPass.baseTex = script.textures[currentItemIndex];
}

// Bind the function to the touch event.
var touchEvent = script.createEvent("TapEvent");
touchEvent.bind(changeTexture);

Or instead of passing any array, you can use script to get random results on tap!

// -----JS CODE-----
// @input SceneObject object

// Define what happens when you tap.
function changeColor () {
 // Get the item's mesh visual
 var meshVisual = script.object.getFirstComponent("Component.MeshVisual");
 // Change it's baseColor
 meshVisual.mainPass.baseColor = new vec4(Math.random(), Math.random(), Math.random(), 1.0);
}

// Bind the function to the touch event.
var touchEvent = script.createEvent("TapEvent");
touchEvent.bind(changeColor);

Happy crafting!