Tutorial
Heading
Nov 2, 2023

Creating the 100Avatars as clothing for Zepeto

At Zepeto, we got the successful integration of the 100Avatars collection creating 100 distinct beanies, meticulously designed and textured to match each avatar

Premise

Welcome to Zepeto!

Zepeto is a new platform that is taken Asia in a storm, and more recently is ramping up in global expansion. It allows the user to create their own virtual worlds as well as develop their own metaverse identity.

One of its features involves an Instagram look alike social media that allows you to create posts with your avatar wearing different outfits, allowing you to further develop your virtual persona.

Mission

In order to review the process and how it works, we decide to develop a small collection of outfits that you could wear inside the application. The chosen 100Avatars collection.

100Avatars is one of those avatar collections whose lovable and amusing designs allows us to develop new designs that are memorable, with that in mind we set ourselves to create 100 beanies that will be able to catch you eye very easily.

Resources

  • Maya
  • Substance Painter
  • Unity

Development

Once we decide in which collection we wanted to adapt to Zepeto, came the difficult question on how to prepare it and which way were going we to implement it. After a little bit of deliberation we decided on beanies and hats of all sorts.

That way we will also allow the public to be able to further customize their avatar with different accessories, if they desire so.

Step 1 : design

One of the concepts we wanted to keep from the 100Avatars its the essence of each avatar and their design. For that purpose we first observe each character and tried to come with an engaging design that keeps the main features of the avatar.

Below you can see how this ideas were captured on paper. However together with this came another challenge, being how many were very similar in concept.

Original concept design

When we noticed that issue what we decided to do them was group them and take advantage of the 3D model avatars to add them the unique characteristic of each character directly into the model.

Additional notes, in order to model the hats, so that they would fit in Zepeto, we acquired a dummy model with hair from their website which allowed us to obtain these results. You can find this model and another meaningful resources on their website on the documentation tab.

For example on the vampire we decided to take the face and the necktie and add them to the main beanie model.

Beanies with additional shapes from the characters

This can be also be appreciated in other models, like these Bucket Head down below, where we took the face of both character and put them over the hat to make the recognizable. After adapting the sizing to the limitation and polycount to Zepeto, we could move to the next steps.

Bucket Head

Step 2 : textures

Following the design, we continued with the textures. in which we decided to keep the same color palette as their counterpart . In some cases we could take advantage of the main texture of the avatar.

To achieve this we used several ways, that I’m going to briefly explain in this section. On the first case we used (when the limitations and artistic view allowed it) the 3D avatar as the hat in this case we added to the main texture the elements we created. In the case of the butter the toast.

Butter textures

On the second case, we added parts of the avatar to create the hat. On example bellow you can view this with Kate. On these case we used substance painter to take paint the wearables using the same color palette as the character in question.

Kate textures

On the last case we used part of the texture and projected or painted it on substance painter to recreate the main detail we wanted to portrait. In the case of the zombie you can see how we painted the brin in the beanie.

Zombie textures

Once the textures were finished we exported them to unity. a couple of things of importance, Zepeto detects the opacity channel however the textures have to very light so the size we have to export them was 1024x1024 px.

Step 3 : rigging and Unity

After having texturing the models we begun the final step to create our beanies. This part is divided in 2 phases one in unity and the other in Maya.

To rig these models we counted with the help of our Rig team, that weighted these models on the provided skeleton from Zepeto. One of the impressive aspects of Zepeto is that you can add bones to create dynamic joints that allow your wearables to be more natural in a lot of aspects. In the two examples below you can appreciate the final results.

Dynamic bone example 1
Dynamic bones example 2

Unity is the motor that Zepeto uses in order to transform your FBXs into ZEP that is the native file for Zepeto. You can find this unity package on their website. From there you will be able to select the material asign textures and test your wearable before finally exporting it. You can find all the info here:

https://docs.zepeto.me/studio/docs/converting_export

Conclusion

Thank you for reading

Turning a collection into Zepeto avatars was no small feat. We kicked things off with some creative designing, making sure each avatar's essence shone through and tackling those moments when the designs seemed a bit too similar.

With this we hoped to have achieve a memorable collection that marks the possible. Beginning in Zepeto, as well as an atemporal collection that pays homage to the original 100Avatars.

Avatars
Zepeto
Maya
Unity
Laura Usón
Creative Art Director

Passionate about videogames, movies and creatures. Artist by day and superhero at night.

Adrián Mateos
3D Character Artist

I’m a 3D lover, I enjoy bringing characters to life

Case Study
Making 3D Avatars for Bored Ape Yacht Club
News
Transforming Icons: Bored Ape Yacht Club 3D Avatar Collection
Tutorial
How to import Decentraland SkyboxEditor into Unity