ZEPETOキャラクターの色と着用アイテムの色の変更

7 分

このガイドは、魅力的なコンテンツを作成する手助けを目的としています。

ZEPETOキャラクターの色を変更する

ZEPETOキャラクターは、実行時にZepetoCharacterオブジェクトとしてインスタンス化されます。

ZepetoCharacterの構造を調べると、Zepeto Contextというサブオブジェクトが見つかります。Zepeto Contextの中には、bodyという別のオブジェクトがあります。

スクリプトを使用して実行時にbodyオブジェクトのbody(Clone)マテリアルを置き換えることで、ZEPETOキャラクターの色を変更できます。

アニメーションされていないアバターの場合、このアプローチは顔全体と体の色を変更します。

ただし、アニメーションされたアバターの場合、bodyオブジェクトの子であるANIME_BASEMODELのbody(Clone)マテリアルも変更する必要があります。

マテリアルの置き換えは、同じ長さのマテリアル配列で可能であることに注意してください。

📘 Unity マテリアル https://docs.unity3d.com/2020.3/Documentation/Manual/Materials.html

以下は、ローカルプレイヤーのボディカラーを変更するサンプルコードです。

キャラクターがロードされた後にのみキャラクターの色が変更されるようにロジックを実装してください。

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() {
        // ローカルプレイヤーを見つけて、_localCharacterに設定します
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // ローカルプレイヤーのzepetoコンテキストのマテリアルを見つけます
            this._bodyRend= this._localCharacter.Context.GetComponentInChildren<SkinnedMeshRenderer>();
            // 元のマテリアルを保存します
            this._originalColorMaterial = this._bodyRend.material;

            
            // アニメーションされたアバターかどうかを判断し、関連情報を保存します
            this._bodyRends= this._localCharacter.GetComponentsInChildren<SkinnedMeshRenderer>();
            this._bodyRends.forEach((currentRenderer) =>{
                if(currentRenderer.name.includes("ANIME_BASEMODEL")){
                    this._animeRend = currentRenderer; 
                    this._originalAnimeMaterials = this._animeRend.sharedMaterials;
                }
            });
        });

        // ボタンが押されたときにプリセットマテリアルに置き換えます
        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;
                }
            }
        });

        // ボタンが押されたときに元のマテリアルに戻ります
        this.originalColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._bodyRend.material = this._originalColorMaterial;

                if(this._animeRend != null) {
                    this._animeRend.sharedMaterials = this._originalAnimeMaterials;
                }
            }
        });
    }
}

ボディ素材を変更すると、ZEPETOアバターのメイクアップが正しく表示されない可能性があります。

使用済みアイテムの色を変更する

使用済みアイテムは、ボディオブジェクトの下にサブオブジェクトとしてインスタンス化されます。

アイテムオブジェクトのマテリアルセクションから、各アイテムに適用されたマテリアルを確認できます。

スクリプトを使用してランタイムでマテリアルを置き換えることで、アイテムの色を変更できます。

以下は、ローカルプレイヤーが装備している最初のアイテムの色を変更するサンプルコードです。

キャラクターがロードされた後にのみアイテムの色が変更されることを確認してください。

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() {
        // ローカルプレイヤーを見つけて、_localCharacterに設定します
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // ローカルプレイヤーのZepetoコンテキストのボディにアクセスします
            this._body = this._localCharacter.Context.GetComponentInChildren<SkinnedMeshRenderer>().gameObject;
            // ボディの最初の子アイテムのマテリアルにアクセスします
            this._itemRend = this._body.transform.GetChild(0).GetComponent<SkinnedMeshRenderer>();
            // 元のマテリアルを保存します
            this._originalColorMaterial = this._itemRend.material;
        });

        // ボタンが押されたときにプリセットマテリアルに置き換えます
        this.changeColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._itemRend.material = this.newColorMaterial;
            }
        });

        // ボタンが押されたときに元のマテリアルに戻ります
        this.originalColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._itemRend.material = this._originalColorMaterial;
            }
        });
    }
}

コードの説明
- this.body.transform.GetChild(0) は、装備されているアイテムの中で最初のアイテム、すなわちインデックス0のアイテムを指します。
- 他の装備アイテムの色を変更するためにこれを適応できます。
- 複数のマテリアルを使用しているアイテムの場合、マテリアルの置き換えには同じ長さのマテリアル配列が必要であることを忘れないでください。

ZEPETOキャラクターとすべてのアイテムの色を変更する

これまで得た洞察を活用することで、キャラクターとすべてのアイテムの色を一様に変更できます。

"色を変更"ボタンがクリックされたときにローカルプレイヤーのキャラクターとアイテムの色を完全に変更し、"元の色"ボタンがクリックされたときに元に戻るサンプルコードです:

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() {
        // ローカルプレイヤーを見つけて _localCharacter に設定
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            
            // 元のマテリアルを保持するために保存
            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]);
                }
            });
        });

        // ボタンが押されたときにプリセットマテリアルに置き換える
        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;
                });
            }
        });

        // ボタンが押されたときに元のマテリアルに戻る
        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; 
                });
            }
        });
    }
}

この方法はローカルプレイヤーだけでなく、実行時に作成されたすべてのZEPETOキャラクター、NPCキャラクターを含むにも適用できます。
自由に創造的になり、楽しい方法で適用してください！