Tutorial: Create an Avatar Scaling Button

You can build content in High Fidelity that breaks the laws of physical boundaries by making them oversized or extremely small. To give any visiting users access to such an experience, you can add an avatar scaling button to your domain. This will help users fit into the spaces you design.

On This Page:

Prerequisites

Consider getting familiar with the following concepts before starting this tutorial:

Write an Avatar Scaling Script

To define the behavior of your avatar and the button, you need to write a client entity script that:

  • attaches to an entity (a button in your domain).
  • shrinks or increases the size of an avatar.
  • defines what happens when a user clicks on or triggers the entity.

In this tutorial, we’ve used shrink-avatar.js, an avatar scaling script used to shrink an avatar down to a tiny size. You can use this script, modify it, or write your own to suit your needs.

The shrink-avatar.js uses High Fidelity’s JavaScript API to determine when a user clicks with the mouse or triggers the entity with their hand controllers. It then scales the avatar to one-tenth its original size.

Create an Entity to Use as a Button

The entity you create for your button has to be triggerable so that the script can detect when you trigger or push the button with your hand controllers.

  1. In Interface, pull up your HUD or Tablet and go to Create.
  2. Create an entity to be used as a button. This can be a 3D model, cube, or sphere entity.
  3. Go to the ‘Properties’ tab and scroll down to ‘Behavior’.
  4. Next to ‘Script’, paste the script URL. In this case, it is ‘shrink-avatar.js’.
  5. Ensure that ‘Triggerable’ is selected.
  6. After you exit the Create app, test your script by clicking or triggering the button to observe your avatar scale down.

../../_images/shrink-avatar.gif

See Also