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.
- In the Project panel, go to Packages > ZEPETO.Module > Social > Runtime > UI > _Resources > Prefab folder.
- 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.
- 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 | Height | The value for the vertical distance between user info cells in the scroll view |
| 2 | Load Count | Cell 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 Prefab | The UI prefab for individual cells for displaying the user information |
| 4 | Total Count Prefab | The prefab that displays the total user count. The text can be automatically translated and displayed in multiple languages. |
| 5 | Canvas Scaler | Can select the Canvas appearance for friend list UI. Can use premade Canvases. |
| 6 | Vertical | Register vertical screen UI prefab including the Follow View Controller. |
| 7 | Horizontal | Register horizontal screen UI prefab including the Follow View Controller. |
| 8 | Background | Semi-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 Tab | Follower tab group |
| 2 | Following Tab | Following tab group |
| 3 | Scroller | Friend list scroll view |
| 4 | Empty Image | An image displayed when the friend list is empty |
| 5 | Loading Spinner | An image displayed while the friend list is loading |
| 6 | Close Button | A button to close the friend list popup |
| 7 | Title | A title for the friend list popup |
| 8 | Follower | A button text for displaying the active/hidden state of the follower panel |
| 9 | Following | A button text for displaying the active/hidden state of the following panel |
| 10 | Empty Text | A text displayed when the friend list is empty. |
| 11 | Panel | Whole 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 Name | Username text |
| 2 | View Profile | User profile image |
| 3 | Btn Follow | Follow user button |
| 4 | Btn Un Follow | Unfollow user button |
| 5 | View Badge | Badge icon image |
| 6 | View Greeter Badge | Greeter icon image |
| 7 | View Follow | Follow button text |
| 8 | View Is Following | Unfollow 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.