Explore the practical use of the VIPE Unity SDK with our Example Scene. Located in the Examples folder, this scene demonstrates the SDK's features using two identical scenes adapted for different render pipelines - URP and built-in. Select the one that aligns with your project's needs.

Understanding the Example Scene

When you enter the scene in play mode, you'll encounter several key components:

Login Panel

Upon entering, you'll be greeted with a login panel on the top left part of the screen, as well as the "Cool Banana" avatar in the center of the scene:

XXX

The Login Panel comprises three buttons:

  1. Login VIPE Button: Allows players to access their account using Metamask or Wallet Connect. This enables them to use their own avatars.
  2. Use as Guest Button: Provides a quick way to join the game and offers a pool of avatars for selection, even if the user doesn't own any personal avatars.
  3. Load VRM Button: Enables players to upload a custom VRM avatar from their device.

Avatars Panel

Once you've logged in or selected guest access, the avatars panel will become visible on the left side of the screen:

The panel includes the following features:

  1. Load VRM Button: Allows for the uploading of an avatar via a valid VRM file URL.
  2. Avatar Collection Browsing: Explore a range of avatars from collections licensed under CC0.
  3. Avatar Search Function: Efficiently locate specific avatars by their names.
  4. Avatar Thumbnail Gallery: Showcases avatars corresponding to the chosen collection or derived from search outcomes.

Special Features of the Example Scene

In the VIPE Unity SDK's Example Scene, certain key functionalities are specifically designed to showcase the SDK's capabilities:

  • VRM Playable Avatar: The avatars displayed in the scene are fully interactive, complete with VRM integration and playable components, providing an immersive user experience.
  • Escape Key Functionality: The 'Esc' key in the scene serves two important functions. It toggles the avatar selection interface for a streamlined view and releases the mouse cursor, allowing players to interact with and control their selected avatar in the environment.
  • Dynamic Avatar Gallery: In play mode, the scene's card controller actively generates prefab cards that populate the avatar gallery. This feature dynamically showcases a variety of avatars available for selection, illustrating the flexibility and interactive nature of the SDK.

Example Scene Hierarchy

Below is an illustration of the scene hierarchy, showcasing the essential components:

At the heart of the scene is the VIPE prefab, which includes the MenuManager and Login scripts, forming the backbone of the application's core functionality. The user interface is arranged on a canvas, showcasing both the Login and Avatars Panels, each integrated with card controller scripts.

When in play mode, the card controller dynamically generates instances of prefab cards, populating them within the avatar gallery for display.

Example Scene Scripts

Within the Examples folder where the scene resides, there is a dedicated Scripts folder. This folder encompasses a variety of scripts that are integral to the gameObjects in the scene. These scripts are specifically tailored for the Example Scene, yet they seamlessly integrate and complement the core scripts outlined on the Developer Integration page. This integration exemplifies how the Example Scene scripts can enhance and work in tandem with the foundational scripts of the VIPE Unity SDK, offering a cohesive and functional experience.

Let's explore these custom-designed scripts for the scene:

MenuManager Script

The MenuManager script is the central hub for UI interactions within the Example Scene. It manages avatar and collection loading, UI panel toggling, and search functionalities.

Key Methods in MenuManager:

MethodDescription
LoadAvatarUI()Toggles between the login and avatar panels.
LoadByURL()Loads a VRM model from a user-entered URL.
LoadOwnVRMAsync()Asynchronously loads the user's VRM models.
LoadCollections()Initiates the process of loading NFT collections.
SetSearchField()Sets up the avatar search field.
ExecuteSearch()Executes a search query based on the input value.
LoadAndDisplayAvatars()Displays avatars in the UI based on the fetched data.
LoadOpenSourceAsync()Loads open-source VRM models.

Login Script

The Login script is essential for managing the user authentication process. It handles the login procedure, processes the user's wallet address and signature, and communicates with the VIPE platform for authentication.

Key Methods in Login:

MethodDescription
OnLoginButtonClick()Initiates the login process and opens the login URL.
ProcessMessage()Processes the login message to extract wallet address and signature.
SendLoginData()Sends the login data to the server and manages the login state.
CancelLogin()Cancels the login process, useful in case of errors or timeouts.

CardManager Script

The CardManager script in VIPE SDK is key for handling UI cards, used for both avatar and collection displays. Each time a card is instantiated, this script dynamically sets card data, loads images, and manages toggle interactions, making it integral for interactive UI elements.

Key Functionalities:

MethodPurpose
SetCardData()Configures card details like name and URL, and sets click actions.
LoadCardImage()Applies a Texture2D object as the card's image.
SetToggleGroup()Assigns the card to a ToggleGroup for grouped behavior and visual feedback on state changes.

You should now be well-equipped to seamlessly integrate our tool into your applications, harnessing its full potential to enhance user experience and functionality.