Combining the Fullscreen tap-through with swiping

Hi Bram! 

Yes, this is possible. You just need to modify the FullscreenTemplateState.js inside the Scripts folder. 

You'll notice that in this script, inside the function createTouchManager, we have an event that calls the following:

if (getTime() > script.stateStartTime)
{
    onStateEnd();
}

This is how the template knows to proceed to the next state. So, all we need to do, is call this using our own logic instead of on TouchStartEvent. 

Let's say we want to proceed to the next state by swiping right. What we need to do is get where in the screen we started touching, and check that against where we ended. If where we ended is greater that where we started, then we have swiped right. We can replace our touchTapEvent with something like the following:

var touchStartPos;

var event = script.createEvent("TouchStartEvent");
 event.bind(function(eventData){
 touchStartPos = eventData.getTouchPosition();
 });

var event = script.createEvent("TouchEndEvent"); 
 event.bind(function(eventData){
 if (touchStartPos) {
 var currentPos = eventData.getTouchPosition();
 var posChange = new vec2(currentPos.x - touchStartPos.x, currentPos.y - touchStartPos.y);
 
 if (posChange.x > 0) {
 print("Swiped Right");
 }
 }
 });

Now that we can detect when the user swipes right, we can call tell the Lens to go to the next state when this happens.

Putting it all together, our new createTouchManager looks something like:

function createTouchManager () {

var touchStartPos;

var event = script.createEvent("TouchStartEvent");
 event.bind(function(eventData){
 touchStartPos = eventData.getTouchPosition();
 });

var event = script.createEvent("TouchEndEvent"); 
 event.bind(function(eventData){
 if (touchStartPos) {
 var currentPos = eventData.getTouchPosition();
 var posChange = new vec2(currentPos.x - touchStartPos.x, currentPos.y - touchStartPos.y);
 
 if (posChange.x > 0) {
 print("Swiped Right");
 if (getTime() > script.stateStartTime)
 {
 onStateEnd();
 }
 }
 }
 });


 global.touchSystem.touchBlocking = true;
 global.touchSystem.enableTouchBlockingException("TouchTypeDoubleTap", true);
 global.touchSystem.enableTouchBlockingException("TouchTypeSwipe", true);
}

Don't forget to share with us what you end up making :)

Cheers!

Jon

Hi Cyrielle,

By default, Fullscreen Template relies on Tap to advance to the next state. All we need to do is point it to a sprite so that it only listens to touches on that sprite rather than the whole screen. 

To do this, all we need to do is to create a touch component. In the Objects panel, select your state. Then in it's Inspector panel, press Add Component > Touch.

Since your sprite will be rendered on the Orthographic camera, set that to be your camera in the new Touch component. Finally, in the same component, press "Choose Mesh Visual" then select the Sprite that you want to use to trigger the next state. 

Your should end up with something like this:

Now, you will need to tap that sprite specifically to go to the next state.

Let me know if you need any clarification. And as always, don't forget to share the result :)

Cheers,

Jon

Glad it was helpful! 

By default, after the last state, you will be brought back to the first state. Is this not what you mean?

Hi Cyrielle!

Are you adding your Face Mask to the On End > Disable Objects list on your state?

With the Reset on End selected:

I am able to get the mask to disappear:

Let me know if this works for you :)

Thanks,

Jon

Hi Cyrielle,

As the template name suggests, this template is aimed at fullscreen interactivity.

If you're not tied to using the Fullscreen template, you can add a Touch component to your sprite so that it only detects touches on the sprite. 

In the new touch component, assign Orthographic Camera as the Camera, and your Sprite as the Mesh Visual. 

Now when you add a Script component on Touch, it will only be called if you touch the sprite!

Then in this new script you can get a list of objects to enable and disable which will be called when the sprite is touched. Something like: 

// @input SceneObject[] toEnable
// @input SceneObject[] toDisable

for (var i = 0; i < script.toEnable.length; i++) {
 script.toEnable[i].enabled = true;
}

for (var i = 0; i < script.toDisable.length; i++) {
 script.toDisable[i].enabled = false;
}

Finally, you can list your face mask in the Inspector panel of the script:

Let me know if you need any clarification!

Can't wait to see the final result :) 

Cheers,

Jon