Search Knowledge Base

Angle Mode for Diagonal Swipes


The Angle Mode lets you create a diagonal swipe within a predefined sector on the screen. 

This mode enables a compass view over the bounding box of the selected gesture. Using the hands of the compass, you can define a sector area within which the user can perform a gesture at an angle. In addition to the direction of the movement, you can also define its speed, for example, in a dart-throwing game.

Tip: You can use Angle Mode in combination with Path Mode, which allows you to add multiple directions to your swipe. Just add both types to the same gesture area.

Below are generic steps for creating an Angle gesture (diagonal swipe).

If you want to test the steps and try this type of gesture, start with the additional Create a Full Experience instructions to create a project. For a complete tutorial with sound effects and other features, see Academy tutorials.

How to Create a Diagonal Swipe Gesture
  1. (Optional) If you want to preview a sample project, download the files and create the project as described in Create a Full Experience.
  2. From the Elements panel, drag the Gesture Area element to the current scene and define its Name and Placement properties. If needed, see Add Gestures for details.
  3. In the Properties panel, click Add Gesture to Area and select Angle Mode.
    The scene on the canvas becomes darker, and a compass appears centered over the gesture bounding box. This is Angle Mode view.

  4. Under Properties, click Add Angle Pair.
  5. On the canvas, drag the red hands that appear on the compass to define the desired sector for swiping.
    For example, for a diagonal swipe in the north-east direction, drag the hands to cover approximately the top-right quadrant, as shown below.

  6. In the Properties panel, in the transition set with the number color-coded as the compass hands associated with it, select the appropriate scenes.
    If you are creating a full experience that you want to test, select the scenes shown in the image in step 7.
  7. If the speed of swiping is critical or for testing purposes, select the respective checkboxes and enter the desired decimal values from .01 to 1.0. 
    The speed value is based on the percentage of the screen traversed per time and may work differently on different devices. You may have to experiment a few time before you find the optiomal value for your device.

  8. Repeat steps 4-7 to add as many sectors and transitions as you need, for example, as shown below.

    Canvas View Properties View  
  9. In the Properties panel, click Exit Path Mode and save the project.

If you are going to try it now and preview the project, add four simple transitions as described in step 4 in Create a Full Experience below. 

Create a Full Experience

In this exercise, you will create four diagonal swipes to each corner of a square (north-east, north-west, south-east, and north-west). With each movement, a light ball in the corner will turn on to indicate success. 

Tip: You don’t have to create all swipes. One or two would suffice to understand the functionality. Yet all four are easy to create and are fun to test.

  1. Create a new project, download five video assets, and add them to the project.
  2. Add the following five scenes and drag the respective video assets to each scene as indicated below:
    • Angle Loop scene with the anglemode_loop_01.mp4 file.
    • Swipe NE scene with the swipe_ne_action.mp4 file.
    • Swipe NW scene with the swipe_nw_action.mp4 file.
    • Swipe SE scene with the swipe_se_action.mp4 file.
    • Swipe SW scene with the swipe_sw_action.mp4 file.
  3. Select the Angle Loop scene in the Scenes panel and follow the How to Create a Diagonal Swipe Gesture instructions above.
  4. To be able to replay the experience during preview and testing, select each Swipe scene, go to Events & Actions, and add a transition to the Angle Loop scene. If needed, see Add Transitions for details.

    You should have a total of four transitions from the Swipe scenes to the Loop scene, for example, as shown below.
  5. Save and preview your project with the AppOnboard Studio app.

Was this helpful?

Table of Contents