Zenn
🤖

clusterベータ アバターにアニメーションを付けるボタンを作る方法 #cluster #clusterベータ

2023/09/28に公開
Unity
cluster
tech

先日 公開された clusterベータ機能 を使って アバターにアニメーションを付けるボタンを作る手順を説明します。
今回は ベータ機能を使って インタラクトしたプレイヤーがダンスを開始し、もうちどインタラクトするとダンスが終わるボタン を作ってみようと思います。

ベータ機能 について

以前はできなかった事ができるようになるアップデートで、作ったアイテムはクラフトアイテムとして使える事も大きな特徴です。

公式サイトからの引用

Cluster Creator Kit の機能の一部を正式リリース前のベータ版として使用できる機能です。

これまでのワールドクラフトではつくるのが難しかった機能やアイテム、Cluster Creator Kitの可能性を広げることができます。
ただ、ベータであることから不安定な挙動をしたり将来的に挙動が変わる可能性があります。

ベータ機能 を有効にしてワールドアップロード

既存のワールドでは ベータ機能 が有効にならないので 新規で ベータ機能 をONにしてアップロードする必要があります。

参考
https://creator.cluster.mu/cck_beta/

使うもの

アイテムコンポーネント
Humanoid Animation List
Scriptable Item

Cluster Creator Kit Script
$.onInteract
$.onUpdate
$.humanoidAnimation
HumanoidAnimation.getSample

作り方

ボタン

スイッチとして使うボタンの見た目を作る

  1. Hierarchy で 右クリック Create Empty で GameObject を作成する
  2. 作成した GameObject の名前を SwitchHumanoidAnimation 等好きな名前に変更する
  3. 2で作った SwitchHumanoidAnimation の下に Cube を配置して scale 0.2 くらいにする
  4. 2で作った SwitchHumanoidAnimation の位置を 0,0.7,0 などアクセスしやすい場所に変更する

コンポーネントを追加する

上記手順で作った GameObject SwitchHumanoidAnimationに 必要なコンポーネントを追加する

  1. Hierarchy で SwitchHumanoidAnimation を選択する
  2. Inspector で Add Component を実行して HumanoidAnimationList を追加する
  3. アニメーションさせたい AnimationClip (.anim) ファイルを設定する
  4. Inspector で Add Component を実行して Scriptable Item を追加する

Scriptable Item に設定するスクリプト

下の内容を SwitchHumanoidAnimation.js などの名前のファイルで保存して
Scriptable Item の Source Code Asset 欄に設定する

コード内の animationID は HumanoidAnimationListコンポーネントで追加した
AnimationClip に付けたIDとなります

/** インタクトしたら設定された ヒューマノイドアニメーションを実行する 
 * 
 * https://docs.cluster.mu/script/interfaces/PlayerHandle.html
 * 
*/
const animationID = "rabbit";

// 最大で10回/秒
const MAX_SEC = 10;
const sec = 1 / MAX_SEC;
let animation = null;
let animationLength = 0;

$.onInteract((player) => {
    $.log("interacted " + player.id);
    player.setHumanoidPose(null);
    $.state.isActive = false;

    if ($.state.player){
        // すでに設定されているプレイヤーのアニメーションを停止
        $.state.player.setHumanoidPose(null);

        if ($.state.player.id == player.id) {
            // 同じプレイヤーがインタクトした場合は終了
            $.state.player = null;
            return;
        }
    }

    $.state.player = player;
    $.state.time = 0;
    $.state.animationSample = 0;
    animation = $.humanoidAnimation(animationID);
    animationLength = animation.getLength();

    $.state.isActive = true;
});

$.onUpdate(deltaTime => {
    if (!$.state.isActive) return;
    let animationSample = $.state.animationSample;
    animationSample += deltaTime;
    animationSample %= animationLength;
    let t = $.state.time;
    t += deltaTime;
    if (($.state.time == 0) || (t > sec)) {
        try {  
            let pose = animation.getSample(animationSample);
            $.state.player.setHumanoidPose(pose);
        }
        catch(e) {
            $.log(e);
        }
        t -= sec;
    }
    $.state.time = t;
    $.state.animationSample = animationSample;
});

アップロードして確認

ベータ機能を有効にしたワールドへ アップロードすると ボタンの動作を確認することができます。

  1. インタラクトしたプレイヤーが アニメーションを開始する
  2. もう一度インタラクトすると アニメーションが停止
  3. 他のプレイヤーがインタラクトすると 停止、インタラクトしたプレイヤーが アニメーション開始する

Discussion