Avatar System

Quick start

Creating avatar container

Avatar should have place where it can get spawned, so for this move prefab LocalObjectsRoot from ReadyGamesNetwork/Example/Prefabs to scene.
Below we will need this object to set up AvatarAppController

Creating and set up AvatarAppController

Avatar app controller contains all required references for default UI Implementation.
First you need move prefab AvatarAppController from ReadyGamesNetwork/Example/Prefabs to scene, then fill up references:
  • On AvatarAppController select Body Size Panel from scene
  • On AvatarAppController select Local Objects Root Manager from scene
  • On ClothingStoreManager select Sub Categories Container from scene by this path: ClothingStorePanel -> SelectedClothesCategory -> BottomPanel -> SubCategories Scroll View -> Viewport -> Content
  • On ClothingStoreManager select Items Container from scene by this path: ClothingStorePanel -> SelectedClothesCategory -> BottomPanel -> Layout -> Items Scroll View -> Viewport -> Content
  • On ClothingStoreManager select Items Container Scroll from scene by this path: ClothingStorePanel -> SelectedClothesCategory -> BottomPanel -> Layout -> Items Scroll View -> Viewport -> Content
  • On ClothingStoreManager select Empty Items Placeholder from scene by this path: ClothingStorePanel -> SelectedClothesCategory -> BottomPanel -> EmptyClothingIcon
  • On ClothingStoreManager select Look Book Button Parent from scene by this path: ClothingStorePanel -> LookBookPanel -> BottomPanel -> Items Scroll View -> Viewport -> Content
  • On MaterialEditorReconstructor select Local Objects Root Manager from scene
  • On CustomThumbnailCreator select Custom Cloths Spawn Point from scene by this path: LocalObjectsRoot -> CustomizationIconManager -> OutfitSpawnPoint
  • On CustomThumbnailCreator select Custom Clothes Photo Camera from scene by this path: LocalObjectsRoot -> CustomizationIconManager -> CustomClothesCamera

Configuring displaying avatar

First of you need that is Camera for avatar rendering, so create additional camera and position it to make it look on avatar container
If you using default Local Objects Root with default position, set camera position equals to (x: 100, y: 1.6, z: -6.1) and rotation equals to (x: 7.35, y: 0, z: 0)
Also FOV should be 24
​
​
Then add two components on created camera, the first is CameraToRenderTexture and the second is CameraController and set up them like on screenshot bellow
Main Camera equals to character camera and Avatar Object equals to LocalObjectsRoot -> LocalAvatarManager -> AvatarSpawnPoint from the scene if you use default Local Objects Root
For displaying avatar easiest way to use Raw Image, so create one in canvas and add two components on it, the first is RTDisplayScaller and the second is AspectRatioFitter, last thing to display avatar use this code:
Texture2D texture = characterCamera.GetComponent<CameraToRenderTexture>().cameraTexture;
avatarRawImage.texture = texture;
avatarRawImage.GetComponent<RTDisplayScaler>().RescaleContainer(texture.width, texture.height);
characterCamera is the created above camera and avatarRawImage is the created above RawImage respectively

Implementing UI

There is two ways to implement UI for avatar module:
  • Default prefab panels
  • Custom prefab panels
Default prefab panels have two variants for portrait and for landscape specific games, you can find them in ReadyGamesNetwork/Example/Prefabs/Panels/Portrait and in ReadyGamesNetwork/Example/Prefabs/Panels/Landscape respectively.

Implementing default prefab panels

Using default prefab panels you also should use default UI panel system called UIRoot.
First you need to create Canvas and setup it like at screenshot below
Then create two child objects, the first named UIRoot and the second named UIPopup
Now move next prefabs under UIRoot:
  • ColorPalettePanel
  • ModularCustomizationPanel
  • MaterialEditorPanel
  • CreatorDashboardPanel
  • JoinCreatorProgramPanel
  • ClothingStorePanel
Then move next prefabs under UIPopup
  • CurrencyErrorPopUpPanel
  • BuyTexturePopUp
  • SaveProfileChangesPopup
  • JoinCreatorProgramPopUp
  • BuyItemsPopUpPanel
  • ColorPickerPopUpPanel
  • SpinnerPopup

Configuring MaterialEditorPanel

  • Select Color Pallete Panel reference from scene by this path: UIRoot -> ColorPalletePanel
  • Select Loading Screen reference from scene by this path: UIPopup -> SpinnerPopup

Configuring ClothingStorePanel

  • Select Color Pallete Panel reference from scene by this path: UIRoot -> ColorPalletePanel
  • Select Color Controller reference from scene by this path: AvatarAppController -> ColorController
  • Select Starting Anchor reference from scene by this path: AvatarAppController -> Cameras -> CameraAnchors -> Clothing Store Landing Anchor
  • Select Zoomed In Anchor reference from scene by this path: AvatarAppController -> Cameras -> CameraAnchors -> Zoomed In Clothing Store Landing Anchor
  • Select Zoomed in Shoe Anchor reference from scene by this path: AvatarAppController -> Cameras -> CameraAnchors -> Clothing Store Shoe Landing Anchor
  • Select Clothes Customization Manager reference from scene by this path: AvatarAppController -> ClothingStoreManager

Configuring ColorPickerPopUpPanel

  • Select UI Camera reference and select camera which you use for UI displaying

API

Retrieving clothing items

For this, you need to add an ClothingStoreModule in Initialisation. Refer Initialise the RGN SDK.
string firebaseStorageUrl = applicationStore.firebaseStorageURL; RGNCoreBuilder.AddModule(new ClothingStoreModule(firebaseStorageUrl));

API call:

ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNClothingStoreData clothingStoreData = await clothingStoreModule.GetItems();

Response:

Return RGNClothingStoreData object, which contains following fields:
  • List<RGNClothingItem> allItems - list of clothing items correspond current application
  • List<RGNCustomizedClothingItem> customizedItems - list of customized items created by current user
  • List<RGNCustomizedClothingItem> allCreatorItems - list of creator items created and published by users
  • List<TextureDatas> allCreatorTextures - contains info about all creator textures
  • List<string> ownedTextures - list of creator textures id which user have
  • List<string> ownedItems - list of clothing item id which user have
  • List<string> allLookIds - list of look id which user created
  • int totalLookbookSlot - number of maximum lookbook slots
  • RGNCurrency lookBookSlotPrice - price to purchase additional lookbook slot
  • string ftuItemId - item id which can be used to tutorial case (allows user purchase this item for free)
  • List<RGNExclusiveCollection> exclusiveCollections - list of clothing item exclusive bundles

Purchase clothing items

In order to buy items, it requires to call the following function by passing list of items unique id (List<string>) as a parameter.

API call:

ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyItemData buyItemData = await clothingStoreModule.BuyItems(itemIds);

Response:

Return RGNBuyItemData object, which contains following fields:
  • bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
  • List<RGNCurrency> currencies - list of actual user currencies after purchasing

Purchase creator item

In order to buy creator item, it requires to call the following function by passing creator item unique id (string) as a parameter.

API call:

ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyCustomizedItemData buyItemData = await clothingStoreModule.BuyCreatorItem(itemId);

Response:

Return RGNBuyCustomizedItemData object, which contains following fields:
  • bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
  • List<RGNCurrency> currencies - list of actual user currencies after purchasing
  • string addedItemId - if purchase is success equals to unique id of purchased creator item

Purchase creator items

Variant of above function which allows to buy list of creator items.

API call:

ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyCustomizedItemsData buyItemsData = await clothingStoreModule.BuyCreatorItems(itemIds);

Response:

Return RGNBuyCustomizedItemsData object, which contains following fields:
  • bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
  • List<RGNCurrency> currencies - list of actual user currencies after purchasing
  • List<RGNCustomizedClothingItem> addedItems - if purchase is success contains list of purchased items

Purchase creator textures

In order to buy creator textures, it requires to call the following function by passing list of creator texture unique id (List<string>) as a parameter.

API call:

ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyCreatorTexturesData purchaseInfo = await clothingStoreModule.BuyCreatorTextures(itemIds);

Response:

Return RGNBuyCreatorTexturesData object, which contains following fields:
  • bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
  • List<RGNCurrency> currencies - list of actual user currencies after purchasing
  • List<TextureDatas> addedItems - if purchase is success contains list of purchased textures

Purchase customized item

In order to buy customized item, it requires to call the following function by passing customized item with needed customizations (RGNCustomizedClothingItem) as a parameter.

API call:

ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyCustomizedItemData purchaseInfo = await clothingStoreModule.BuyCustomizedItem(item);

Response:

Return RGNBuyCustomizedItemData object, which contains following fields:
  • bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
  • List<RGNCurrency> currencies - list of actual user currencies after purchasing
  • string addedItemId - if purchase is success equals to unique id of purchased customized item id

Purchase customized items

Variant of above function which allows buy list of customized items.

API call:

ClothingStoreModule clothingStoreModule = RGNCoreBuilder.I.GetModule<ClothingStoreModule>();
RGNBuyCustomizedItemsData purchaseInfo = await clothingStoreModule.BuyCustomizedItems(items);

Response:

Return RGNBuyCustomizedItemsData object, which contains following fields:
  • bool isSuccess - result of purchasing, can be false if for example user haven't enough currencies
  • List<RGNCurrency> currencies - list of actual user currencies after purchasing
  • List<RGNCustomizedClothingItem> addedItems - if purchase is success contains list of purchased customized items
​
Copy link
On this page
Quick start
Creating avatar container
Creating and set up AvatarAppController
Configuring displaying avatar
Implementing UI
Configuring MaterialEditorPanel
Configuring ClothingStorePanel
Configuring ColorPickerPopUpPanel
API
Retrieving clothing items
Purchase clothing items
Purchase creator item
Purchase creator items
Purchase creator textures
Purchase customized item
Purchase customized items