Changing ZEPETO character color and worn item color

this guide aims to assist in creating engaging content changing the color of zepeto characters zepeto characters are instantiated at runtime as a zepetocharacter object if you inspect the structure of zepetocharacter, you'll find a sub object named zepeto context further within zepeto context, there's another object named body by replacing the body(clone) material of the body object at runtime using scripts, you can change the color of the zepeto character for non animated avatars, this approach changes the color of the entire face and body however, for animated avatars, you need to also modify the body(clone) material of the anime basemodel, which is a child of the body object please note that material replacements are feasible with material arrays of the same length 📘 unity materials https //docs unity3d com/2020 3/documentation/manual/materials html https //docs unity3d com/2020 3/documentation/manual/materials html below is a sample code that changes the body color of the local player make sure to implement the logic so the character's color is changed only after the character has loaded import { zepetoscriptbehaviour } from 'zepeto script' import {localplayer, spawninfo, zepetocharacter, zepetocharactercreator, zepetoplayers} from "zepeto character controller"; import {zepetopropertyflag} from "zepeto"; import { gameobject, material, renderer, skinnedmeshrenderer, transform, waitforseconds } from 'unityengine'; import { button } from 'unityengine ui'; export default class changeskincolor extends zepetoscriptbehaviour { public newcolormaterial material; public changecolorbutton button; public originalcolorbutton button; private originalcolormaterial material; private originalanimematerials material\[]; private animerend renderer; private bodyrend renderer; private bodyrends renderer\[]; private localcharacter zepetocharacter; start() { // find the local player and set it to localcharacter zepetoplayers instance onaddedlocalplayer addlistener(() => { this localcharacter = zepetoplayers instance localplayer zepetoplayer character; // find the material of the local player's zepeto context this bodyrend= this localcharacter context getcomponentinchildren\<skinnedmeshrenderer>(); // store the original material this originalcolormaterial = this bodyrend material; // determine if it is an animated avatar and save related information this bodyrends= this localcharacter getcomponentsinchildren\<skinnedmeshrenderer>(); this bodyrends foreach((currentrenderer) =>{ if(currentrenderer name includes("anime basemodel")){ this animerend = currentrenderer; this originalanimematerials = this animerend sharedmaterials; } }); }); // replace with the preset material when the button is pressed this changecolorbutton onclick addlistener(() => { if(this localcharacter != null) { this bodyrend material = this newcolormaterial; if(this animerend != null) { let tempmaterials material\[] = \[this animerend sharedmaterials\[0],this animerend sharedmaterials\[1],this newcolormaterial,this animerend sharedmaterials\[3]]; this animerend sharedmaterials = tempmaterials; } } }); // return to the original material when the button is pressed this originalcolorbutton onclick addlistener(() => { if(this localcharacter != null) { this bodyrend material = this originalcolormaterial; if(this animerend != null) { this animerend sharedmaterials = this originalanimematerials; } } }); } } altering the body material may result in the zepeto avatar's makeup not being displayed correctly changing the color of worn items worn items are instantiated as sub objects under the body object you can check the applied material for each item from the materials section of the item object by replacing the materials at runtime using scripts, you can change the color of the items below is a sample code that changes the color of the first item worn by the local player ensure that the item's color is changed only after the character has loaded import { zepetoscriptbehaviour } from 'zepeto script' import {localplayer, zepetocharacter, zepetoplayers} from "zepeto character controller"; import { gameobject, material, renderer, skinnedmeshrenderer, transform, waitforseconds } from 'unityengine'; import { button } from 'unityengine ui'; export default class changeskincolor extends zepetoscriptbehaviour { public newcolormaterial material; public changecolorbutton button; public originalcolorbutton button; private originalcolormaterial material; private body gameobject; private itemrend renderer; private localcharacter zepetocharacter; start() { // find the local player and set it to localcharacter zepetoplayers instance onaddedlocalplayer addlistener(() => { this localcharacter = zepetoplayers instance localplayer zepetoplayer character; // access the body of the local player's zepeto context this body = this localcharacter context getcomponentinchildren\<skinnedmeshrenderer>() gameobject; // access the material of the first child item of the body this itemrend = this body transform getchild(0) getcomponent\<skinnedmeshrenderer>(); // store the original material this originalcolormaterial = this itemrend material; }); // replace with the preset material when the button is pressed this changecolorbutton onclick addlistener(() => { if(this localcharacter != null) { this itemrend material = this newcolormaterial; } }); // return to the original material when the button is pressed this originalcolorbutton onclick addlistener(() => { if(this localcharacter != null) { this itemrend material = this originalcolormaterial; } }); } } code explanation this body transform getchild(0) refers to the first item among the worn items, i e , the item at index 0 you can adapt this to change the color of other worn items for items using multiple materials, remember that material replacements require material arrays of the same length changing the color of both zepeto characters and all items by leveraging the insights we've gained so far, you can modify the color of both the character and all items uniformly here's a sample code that alters the color of the local player's character and item colors entirely when the "change color" button is clicked and reverts back to the original when the "original color" button is clicked import { zepetoscriptbehaviour } from 'zepeto script' import {localplayer, zepetocharacter, zepetoplayers} from "zepeto character controller"; import { gameobject, material, renderer, skinnedmeshrenderer, transform, waitforseconds } from 'unityengine'; import { button } from 'unityengine ui'; export default class changeallmaterial extends zepetoscriptbehaviour { public newcolormaterial material; public changecolorbutton button; public originalcolorbutton button; private originalmaterials material\[] = new array(); private bodyrends renderer\[]; private localcharacter zepetocharacter; start() { // find the local player and set it to localcharacter zepetoplayers instance onaddedlocalplayer addlistener(() => { this localcharacter = zepetoplayers instance localplayer zepetoplayer character; // save to keep original materials this bodyrends= this localcharacter getcomponentsinchildren\<skinnedmeshrenderer>(); this bodyrends foreach((currentrenderer) =>{ for(let i=0; i\<currentrenderer sharedmaterials length;i++){ this originalmaterials push(currentrenderer sharedmaterials\[i]); } }); }); // replace with the preset material when the button is pressed this changecolorbutton onclick addlistener(() => { if(this localcharacter != null) { this bodyrends foreach((currentrenderer) =>{ let tempmaterials material\[] = new array(); for(let i=0; i\<currentrenderer sharedmaterials length;i++){ tempmaterials push(this newcolormaterial); } currentrenderer sharedmaterials = tempmaterials; }); } }); // return to the original material when the button is pressed this originalcolorbutton onclick addlistener(() => { if(this localcharacter != null) { let indexnum = 0; this bodyrends= this localcharacter getcomponentsinchildren\<skinnedmeshrenderer>(); this bodyrends foreach((currentrenderer) =>{ let tempmaterials material\[] = new array(); for(let i=0; i\<currentrenderer sharedmaterials length;i++){ tempmaterials push(this originalmaterials\[indexnum]); indexnum++; } currentrenderer sharedmaterials = tempmaterials; }); } }); } } this method is not only applicable to the local player but also to any zepeto characters created at runtime, including npc characters feel free to get creative and apply it in fun ways!