LogoLogo
WebsiteBlogForumsSign up
  • Welcome
  • How Ready Player Me works
  • FAQ
  • 👩‍💻Integration Guides
    • Overview
    • Unity
      • Quickstart
      • Avatar Creator Integration
        • WebView Avatar Creator
          • Avatar Creator for Android & iOS
          • Avatar Creator for WebGL
        • Build your own Avatar Creator
          • Start with the sample
          • Elements
            • Asset Selection Element
            • Color Selection Element
            • Template Selection Element
            • Body Shapes Selection Element
            • Gender Selection Element
            • Avatar List Element
            • Photo Capture Element
            • Signup Element
            • Login Element
            • Logout Element
          • User Management
      • Load 2D Renders
      • Avatar Loader Window
      • Setup Multiplayer
      • Setup for XR (Beta)
        • Setup the Player Avatar
        • Setup Meta Movement SDK
        • Setup Final IK
        • Setup XR Hands
          • RpmHandDriver script
        • Facial Animations
        • VR Avatar Creator
      • Animations
        • Ready Player Me Animation Library
        • Mixamo Animations
      • Optimize
        • Avatar Configuration
        • Avatar Caching
        • Defer Agents
      • Code Samples
        • Loading 3D Avatars
        • Loading 2D Avatars
        • Avatar Creator (WebGL)
        • Avatar Creator (Desktop)
        • Avatar Creator (Mobile)
        • Distance-based LODs
      • Troubleshooting
        • Editor UI Window Issues
        • Avatar loading issues
        • iOS issues
        • WebGL issues
        • Firewall issues
        • Updating the SDK
          • Unity SDK 3.0.0 Migration guide
          • Unity SDK 4.0.0 Migration guide
          • Unity SDK 5.0.0
          • Unity SDK 7.0.0
          • WebView 2.0 Migration
        • Package installation issues
      • Help us improve the Unity SDK
      • FAQ for Unity
      • Early Access Features
    • Unreal Engine
      • Quickstart
        • Import SDK Manually
      • Avatar Creator Integration
        • Build your own Avatar Creator
          • Sample Structure
          • Customization Guide
        • WebView Avatar Creator
      • Load Avatars
      • Animations
        • Ready Player Me Animation Library
        • Loading Mixamo animations
        • Mannequin animation retargeting
        • Blender FBX export to UE
        • Oculus Lipsync integration
      • Optimize
        • Avatar configuration
        • Avatar caching
        • Avatar preloading
      • Code Samples
        • Unreal Engine 5 samples
        • Lyra project integration example
        • VR Avatars
        • Unreal Engine 4
      • Troubleshooting
        • Project compilation issues
        • Missing materials on built applications
        • Avatar loading issues
        • Animation issues
        • Unreal SDK breaking changes
        • Avatar lighting issues
        • Updating from earlier versions
          • Unreal SDK 3.0.0 Migration guide
        • Auto LOD issues
      • Help us improve the Unreal Engine SDK
      • FAQ for Unreal Engine
      • Early Access Features
    • React
      • Quickstart
    • React Native
    • iOS Native
    • Android Native
    • Web Integration
      • Quickstart
      • User Management
        • Guest Accounts
        • Account Linking
      • Avatar Creator integration
      • Optimize
    • API Integration
      • Quickstart
      • Custom Avatar Creator
      • User management
        • Ready Player Me Account
        • Anonymous Accounts
    • UX/UI Guidelines
      • Summary & quick tips
      • UX and UI guidelines and essentials
        • Foundation for good user experience
          • Layout
          • Colors
          • Typography
          • Icons
          • Dark mode and light mode
        • Mobile best practices
          • Layout
        • Making Ready Player Me feel native
          • Seamless Avatar Integration
          • Consistent Branding
          • Responsive Layout
          • Performance Optimization
        • Discoverability of the avatar editor
          • Onboarding tutorial
          • Clear navigation
          • Contextual Placement
  • 🖌️Customizing Guides
    • Studio (Developer Dashboard)
    • Avatar Creator Appearance
      • Avatar URLs
      • Avatar Shortcodes
    • Upload and Manage Custom Assets
      • Asset Manager in Studio
      • Configure in Studio
      • Manage custom assets using the API
      • Unlocking assets through API (Beta)
    • Create Custom Assets
      • Fullbody Outfits
        • Checking Skin Weights
      • Tops, Bottoms, Shoes
        • Editing templates
      • Hairstyle
      • Headwear
      • Facewear
      • Glasses
      • Hero Characters
      • Modeling Guidelines
  • 🔃API Reference
    • REST API
      • Authentication
      • Avatars
        • GET - 3D avatar
        • GET - 2D Render of an Avatar
        • GET - Metadata
        • PUT - Equip an asset
        • PUT - Unequip an asset
      • Assets
        • Asset Entity Properties
        • POST - Create Asset
        • GET - List Assets
        • PATCH - Update Asset
        • POST - Upload Asset Files
        • POST - Add Asset to Application
        • DELETE - Remove Asset from Application
        • PUT - Unlock asset for a user
        • PUT - Lock asset for a user
      • Users
        • POST - Create User
      • Auth
        • GET - Token
      • Changelog
    • Avatars
      • Full-body avatars
      • Full-body XR avatars
      • Half-body avatars
      • Morph targets
        • Apple ARKit
        • Oculus OVR LipSync
    • Avatar Creator
  • 🔉Support
    • Forums
    • Licensing & Privacy
Powered by GitBook
On this page
  • Usage
  • Customizing
  • Button Element Prefab
  • Select Icon Prefab
  • Asset Type

Was this helpful?

  1. Integration Guides
  2. Unity
  3. Avatar Creator Integration
  4. Build your own Avatar Creator
  5. Elements

Asset Selection Element

PreviousElementsNextColor Selection Element

Last updated 1 year ago

Was this helpful?

The AssetSelectionElement displays all assets of an asset type and manages the callback for a selection.

Usage

Place the AssetSelectionElementin your Hierarchy and access the AssetSelectionElement script's public methods to load assets and manage their selection.

To load the assets, you need to call the LoadAndCreateButtons method. It requires the OutfitGender, so that it knows which assets to load (there are differences between female and male outfits). You can get the OutfitGender from the AvatarProperties when you first load the Avatar.

public async Task LoadAndCreateButtons(OutfitGender gender);

When an asset button is clicked, the AssetSelectionElement fires a UnityEvent. The IAssetData contains all the information needed for the AvatarManager to update and load the new avatar.

public UnityEvent<IAssetData> OnAssetSelected;

Customizing

The AssetSelectionElement consists of a Scroll View with a nested ButtonContainer (Grid Layout). All asset selection buttons inside the button container are instantiated at runtime.

You can modify the grid layout (padding, spacing etc.) to match your desired UI.

For each AssetSelectionElement, you can define a ButtonElement Prefab, a SelectionIcon and the Asset Type.

Button Element Prefab

You can customize the appearance of an asset button by creating a Prefab Variant of the linked ButtonElement and replace the reference in the hierarchy. In the example below, the background image has been replaced, colors have been adjusted to match the UI theme (blue), and the RawImage, where at runtime the asset-icon will be loaded, contains a temporary loading image.

Select Icon Prefab

You can customize the appearance of the selection highlighter for the asset list by changing the SelectIcon Prefab. You can create a Prefab Variant and reference it in the SelectIcon Prefab field in the Inspector. The SelectIcon Prefab gets instantiated at runtime and parented under the selected item.

In this example, the icon is replaced with a different image and matches the style of the background of the button element.

Asset Type

For each AssetSelectionElement, you have to define the Asset Type it shows.

  • You can't mix asset types in one selection element.

  • You don't need to include all asset types in your application.

For example, if you only want to give your users control over the hairstyle, you can only inlcude that one asset selection element in your Avatar Creator.

The list of available asset types is as follows.

Head Customization

  • HairStyle

  • BeardStyle (facial hair)

  • EyeShape

  • EyebrowStyle

  • FaceShape

  • NoseShape

  • LipShape

Accessories

  • FaceMasks (face tattoos)

  • Glasses

  • Facewear (scarfs, etc.)

  • Headwear (helmets, caps, etc.)

Clothing

  • Outfit (fullbody outfits)

  • Shirt (outfits for half-body avatars, only needed when you use half-body avatars)

  • Bottom (pants for modular outfits)

  • Top (shirts, sweaters, etc. for modular outfits)

  • Footwear (shoes for modular outfits)

👩‍💻
Footwear selection Item, with a customized Grid Layout Group.
Customize the Asset Selection Element
ButtonElement Prefab Variant
Customized Asset Selection Buttons.
Customized Selected Icon (Rect Transform and Image got adjusted to match the Game UI.)