Animations & Interaction with 3D Smart NFTs

Add animation, sounds, and action to your 3D Smart NFTs

After uploading your 3D asset click on the Running Man 'Modify Rules' button to define your animation and sound rules for the Smart NFT.

Animations included in the GLB file will appear as buttons on the right side of your 3d model and you can preview the animations by clicking the buttons.

Underneath the Animations Preview is the Code Editor, where you can use the rule examples below or write your own. These animations can trigger according to campaign and Vatom-specific actions. A full list of fields is available at the bottom of this page. 

ANIMATION RULE EXAMPLES:

Example rule 1 - Animation on Click/Tap

This example plays Walking on a loop until the user clicks/taps on it, then it plays Running on a loop:

[
  {
    "on": "start",
    "play": "1_rotate"
  },
  {
    "on": "click",
    "play": "2_pickup"
  }
]

[
    {
        "on": "start",
        "play": "Walking"
    },
    {
        "on": "animation-complete",
        "target": "Walking",
        "play": "Walking"
    },
    {
        "on": "click",
        "play": "Running",
        "target": "Walking"
    },
    {
        "on": "animation-complete",
        "target": "Running",
        "play": "Walking"
    }
]

Example rule 2 - AR Game "Pickup" Animation

This is an example for 3D Models in the Augmented Reality game. This rule plays the "Idle" animation until the user clicks to pick up the object, then plays "PickupAction" animation before the 

[
  {
    "on": "start",
    "play": "Idle"
  },
  {
    "on": "animation-complete",
    "play": "Idle",
    "target": "Idle"
  },
  {
    "on": "click",
    "action": {
      "name": "Pickup"
    },
    "play": "PickupAnimation",
    "target": "Idle"
  },
  {
    "on": "animation-complete",
    "play": "Idle",
    "target": "PickupAnimation"
  }
]

Example rule 3 - Vending Machine "Dispense" animation

This example plays Idle on a loop until the user clicks/taps on it. On click, the model plays Present and executes the Dispense action:

[
  {
    "on": "start",
    "play": "Idle"
  },
  {
    "on": "animation-complete",
    "play": "Idle",
    "target": "Idle"
  },
  {
    "on": "click",
    "play": "Present",
    "target": "Idle",
    "action": {
      "name": "Dispense"
    }
  }
]

Example Rule 4 - (Play steps)

Play a sound when a character takes a step:

[
    {
        "on": "animation-start",
        "target": "StepForward",
        "sound": {
            "resource_name": "StepSound",
            "is_positional": true
        }
    }
]

Example rule 5 - (Send a Gift)

When the user clicks the Smart NFT, send a gift to the user with an animation:

[
// On click, send the Smart NFT action to the backend. Specify the expected changes
// in the 'modify' field, to improve apparent responsiveness to the user

{ 
    "on": "click", 
    "action": { 
        "name": "GivePrize",
        "modify": {
            "private": { 
                "is_giving_prize": true
            }
        } 
    } 
},

// Backend changes the private field, trigger the give animation

{ 
    "on": "state", 
    "target": "private.is_giving_prize", 
    "value": "yes", 
    "play": "GiveAnimation" 
},

// Play sound when the give animation is played

{ 
    "on": "animation-start", 
    "target": "GiveAnimation", 
    "sound": {
        "resource_name": "GiveSound", 
        "is_positional": true
    }
}
]

Example rule 6 - (Spatial Audio)

In SpatialWeb and other VR environments, when the user walks towards the Smart NFT the volume increases and vice-versa.

[
{
 "on": "start",
 "sound": {
  "resource_name": "MP3Sound",
  "is_positional": true,
  "volume": 1,
  "ref_distance": 5,
  "rolloff_factor": 7,
  "distance_model": "exponential",
  "max_distance": 10,
  "should_loop": true
 }
}
]

Specification

A set of rules that define triggers, animations, sounds, and actions. Each entry in the array is an object describing a trigger and an action.

Fields

List of fields available to be used in each rule entry. All fields are optional unless stated as required.

• on : (string, required) Specifies the trigger type. Can be one of:
  • start
  • click
  • animation-start
  • animation-complete
  • action-complete
  • action-failed
• target : (string) Specifies a target. See the trigger types above for details.
• value : (string) Specifies a value.
• delay : (int) Specifies a delay in milliseconds. If set, the action will only be triggered after this delay.
• play : (string) Specifies a named animation to play in response to this trigger.
• sound : (object) Specifies a sound to be played in response to this trigger.
• action : (object) Specifies a Smart NFT action to perform.

Action object details

• name : (string, required) The action name.
• payload : (object) Any extra fields to pass to the action.
• modify: (object) Expected changes to the Smart NFT. This can be used to improve the user experience for actions that would normally require waiting for the backend to update the Smart NFT state.

Sound Object Details

• resource_name : (string, required) The name of the sound file resource in the Smart NFT.
• is_positional : (bool, default: false) A Boolean value that determines whether audio from this source uses 3D positional mixing.
• volume : (float, default: 1) The volume of the sound from 0 to 1.
• ref_distance: (float, optional) The distance from the Smart NFT that plays the audio at the volume. Beyond this distance, the volume starts to attenuate (decrease).
• max_disance: (float, optional) The maximum distance between the user and the audio source beyond which the volume cannot be reduced further. At this distance, the volume will be 0 (silence).
• rolloff_factor: (float, optional) How quickly the volume is reduced as the user moves away from the audio source.
• distance_model: (string, optional): Algorithm to use to reduce the volume of the audio source as the user moves away or towards it. Select from linear | exponential | inverse. Typically set to linear.
• should_loop: (required, default: false) Should the audio loop?