Studio GuideWorld SDK Guide
Log In

Import Friend List / Add Friend / Remove Friend

Using the Social API of ZEPETO.Module, World Creators can load users' friend lists.

World Creators can also follow new users or unfollow users they followed.


How to Install

Please first install Window → Package Manager → ZEPETO.World Package version 1.21.0 or later.

Then, install the ZEPETO.Module Package.


Using a pop-up friend list prefab

ZEPETO.Module Package offers UI prefabs for you to easily create the following/follower list.

  1. In the Project panel, go to Packages > ZEPETO.Module > Social > Runtime > UI > _Resources > Prefab folder.
  2. Out of the prefabs in the folder, drag and drop FollowScrollView.prefab into the scene.

❗️

Caution

When the EventSystem object does not exist in the scene, this feature may not run correctly. Add the object by going to GameObject > UI > EventSystem.


  1. Click the Play button to see the friend list popup appearing on the screen.

  • FollowScrollView.prefab, which creates the friend list popup, uses the FollowScrollView component to load and display the friend list and total user count on the screen.
  • Information configured in the FollowScrollView component is as follows.

Follow Scroll View Component

[1]HeightThe value for the vertical distance between user info cells in the scroll view
[2]Load CountCell Load Count: The number of cell data loaded when the scroll view is scrolled. Configuring a high number for this value may affect the loading speed.
[3]User Info PrefabThe UI prefab for individual cells for displaying the user information
[4]Total Count PrefabThe prefab that displays the total user count. The text can be automatically translated and displayed in multiple languages.
[5]Canvas ScalerCan select the Canvas appearance for friend list UI. Can use premade Canvases.
[6]VerticalRegister vertical screen UI prefab including the Follow View Controller.
[7]HorizontalRegister horizontal screen UI prefab including the Follow View Controller.
[8]BackgroundSemi-transparent black screen that appears when friend list UI is displayed

If the world screen is in horizontal mode when the friend list is generated through FollowScrollView, FollowScrollView_Landscape is applied.

  • When the screen is in vertical mode, FollowScrollView_Portrait is applied.
  • Information configured in the FollowView Controller component applied to FollowScrollView_Landscape and FollowScrollView_Portrait is as follows.

Follow View Component

[1]Follwer TabFollower tab group
[2]Following TabFollowing tab group
[3]ScrollerFriend list scroll view
[4]Empty ImageAn image displayed when the friend list is empty
[5]Loading SpinnerAn image displayed while the friend list is loading
[6]Close ButtonA button to close the friend list popup
[7]TitleA title for the friend list popup
[8]FollowerA button text for displaying the active/hidden state of the follower panel
[9]FollowingA button text for displaying the active/hidden state of the following panel
[10]Empty TextA text displayed when the friend list is empty.
[11]PanelWhole UI panel

As shown below, the cell where the friend information is displayed has the Follow Cell View and UserInfo Cell View components applied. The information in each component is as follows.

User Info Cell View Component

[1]View NameUsername text
[2]View ProfileUser profile image
[3]Btn FollowFollow user button
[4]Btn Un FollowUnfollow user button
[5]View BadgeBadge icon image
[6]View Greeter BadgeGreeter icon image
[7]View FollowFollow button text
[8]View Is FollowingUnfollow button text

👍

Tips

  • ZEPETO Text inherits UnityEngine_UI.Text and provides some additional features for UI convenience within the world. The texts can be easily edited in the FollowScrollView Prefab edit mode.
  • The badge icons displayed next to the user name are icons used to mark special users such as ZEPETO creators and greeters.

Modifying the friend list popup prefab UI

You can customize your friend list by modifying the UI elements.

Select a prefab in Packages and drag and drop the prefab into the Assets folder to copy the prefab.

👍

Tips

Prefabs cannot be modified while in the Packages folder, but they can be modified once they are copied into subfolders of the Assets folder.