2024年10月19日 - メタバース

clusterのスクリプトで時計を制作

「clusterのスクリプトでドアを制作」でドアを制作しましたが、今回は、clusterのスクリプトを使用して時計を制作します。

clusterのスクリプトで時計を制作

時計の3DCGモデルを制作

Blenderで時計の3DCGモデルを制作し、FBXに出力します。時計の長針と短針を時間に合わせて回転させるために、それぞれの回転軸を原点に設定します。FBXに出力する方法は、下記を参考にしてください。

Blender3.3でFBXを出力して、Unityで読み込み

制作環境構築

clusterのワールド制作環境を構築します。詳細は下記ページの「clusterでスクリプトを実行するための基本手順」を参考にしてください。

clusterでスクリプト入門(1)

時計のFBXをUnityで読み込み

Unityで空のゲームオブジェクトを作成し、名前を「clock」にします。時計のFBXをUnityで読み込み、「clock」の子オブジェクトとして追加します。

「clock」のインスペクタの「コンポーネントを追加」をクリックして、「Scriptable Item」を追加し、「Source Code Asset」に「clock.js」を設定します。

スクリプトの記述

clock.jsにスクリプトを記述します。

定数の宣言と初期設定

トップレベルで、時計の針の更新間隔を設定する定数refreshpertimeを宣言します。次に、時計の長針と短針の子オブジェクトを取得します。また、$.onStartでタイマーを初期化します。


//時計の針の更新間隔(秒)
const refreshpertime = 10.0;
//長針の取得
const longhand = $.subNode('needleLong');
//短針の取得
const shorthand = $.subNode('needleShort');

$.onStart(() => {
    //タイマーを初期化
    $.state.time = 0;
});

$.onUpdate(deltaTime => {
});

時計の針を設定する関数

時計の針は、setClock関数で設定します。この関数は現在時刻を取得し、その情報を基に時計の針の角度を計算します。
まず、現在の分を取得し、その値を360度に換算します。次に、現在の時間を取得し、同様に角度に変換します。ただし、時間の角度計算では分も考慮します（時間+分/60）。これにより、時間の針はより正確に表示されます。
最後に、計算した角度を使用して、長針と短針の回転を設定します。長針と短針の回転はQuaternionとVector3を使って設定します。


$.onStart(() => {
    $.state.time = 0;
    //初回の針の位置を設定
    setClock();
});

function setClock(){
    //現在時刻を取得
    const nowTime = new Date();
  
    //現在の分を取得して角度に変換
    const minutes = nowTime.getMinutes();
    const minutesRot = minutes * 360 / 60;
  
    //現在の時間を取得して角度に変換
    const hours = nowTime.getHours();
    const hoursRot = (hours % 12 + minutes / 60) * 360 / 12;
  
    //長針の回転を設定
    longhand.setRotation(new Quaternion().setFromEulerAngles(new Vector3(0,0,minutesRot)));
    //短針の回転を設定
    shorthand.setRotation(new Quaternion().setFromEulerAngles(new Vector3(0,0,hoursRot)));
}

毎フレームの更新処理

$.onUpdateでは、deltaTimeを使ってタイマーに経過時間を加算します。タイマーが更新間隔を超えたとき、setClock関数を呼び出して針を更新します。その後、タイマーをリセットします。これにより、時計の針は一定間隔で正確に更新され続けます。


$.onUpdate(deltaTime => {
    //タイマーに経過時間を加算
    $.state.time += deltaTime;

    //タイマーが更新間隔を超えたら針を更新
    if($.state.time >= refreshpertime){
        setClock();
    
        //タイマーをリセット
        $.state.time -= refreshpertime;
    }
});

clock.js

完成したclock.jsになります。時計の針が現在の時刻を表示しています。

clusterのスクリプトはUnity上では動作しないため、スクリプトの動作確認は、ワールドをアップロードして行います。


//時計の針の更新間隔(秒)
const refreshpertime = 1.0;
//長針の取得
const longhand = $.subNode('needleLong');
//短針の取得
const shorthand = $.subNode('needleShort');

//時計の針を設定する関数
function setClock(){
    //現在時刻を取得
    const nowTime = new Date();
  
    //現在の分を取得して角度に変換
    const minutes = nowTime.getMinutes();
    const minutesRot = minutes * 360 / 60;
  
    //現在の時間を取得して角度に変換
    const hours = nowTime.getHours();
    const hoursRot = (hours % 12 + minutes / 60) * 360 / 12;
  
    //長針の回転を設定
    longhand.setRotation(new Quaternion().setFromEulerAngles(new Vector3(0,0,minutesRot)));
    //短針の回転を設定
    shorthand.setRotation(new Quaternion().setFromEulerAngles(new Vector3(0,0,hoursRot)));
}

//初期設定
$.onStart(() => {
    //タイマーを初期化
    $.state.time = 0;
    //初回の針の位置を設定
    setClock();
});

//毎フレームの更新処理
$.onUpdate(deltaTime => {
    //タイマーに経過時間を加算
    $.state.time += deltaTime;

    //タイマーが更新間隔を超えたら針を更新
    if($.state.time >= refreshpertime){
        setClock();
    
        //タイマーをリセット
        $.state.time -= refreshpertime;
    }
});