🤏

creator kit script を使ってプログレスバーを作る方法 #cluster

2023/12/09に公開

Unity

cluster

tech

この記事は cluster民とクラフトする非公式 Advent Calendar 2023 の記事です。

昨日はチャーリー@Cabin1365 さんの "cluster用に作ったアイテムの共有方法について" の記事でした、フレンドと協力してアイテム制作するの楽しそうです！データの共有方法に悩むの少しわかります。方法は色々あるけど、Creater Kit トークンを使う方法は意外な使い方だなーとちょっと驚来ましたー。案外手軽でいいのかもしれませんね。

プログレスバーを作る方法

https://youtu.be/OUpY7Ot-i80

Cluster Creator Kit Script を使ってプログレスバーを作ってみようと思い参考になる記事を探していて見つけた TED 私たちを安心させてくれるプログレスバーを参考にプログレスバーを実装してみました。
RPGゲームの経験値や必殺技？ゲージなどに使うといいかもしれません。

使うもの

Cluster Creator Kit 導入済みのプロジェクト

ClusterCreatorKitTemplate

Cluster Creator Kit

On Create Item Trigger
Set Fill Amount Gimmick
Scriptable Item
Interact Item Trigger

Cluster Creator Kit Script

$.onUpdate(deltaTime => {})
$.setStateCompat
$.sendSignalCompat

用意するもの

32x32ping画像

プログレスバー(進捗バー)見た目を作る

まず、プログレスバーの見た目を簡単に作っていきます。

Hierarchy で右クリック Create Empty して GameObject をs作成
名前を ProgressBar に変更する
背景となるパネルを作成する ProgressBar を選択して Hierarchy で右クリック 3D -> Quad を選択
Quad の名前を background に変更
Scale を X: 1.2 Y: 0.2 Z: 1 にする
進捗を表示する image を追加します。
ProgressBarを選択して Hierarchy で右クリック UI -> image を選択する
作成された Canvas を選択して
Canvas 位置とサイズとRender Mode を変更する
X:0 Y:0 Z: 0 Width: 1 Height: 0.1
Render Mode を World Space
Canvas -> Image のスケールを変更する
Width: 1 Height: 0.1
Canvas -> Image に source image に 32x32ping画像を設定する
Canvas -> Image 色も変更する
color 00B8FF など好きな色にする

ここまでの設定で 3D空間に表示されるプログレスバーの見た目が作成されました。
次は Creator Kit コンポーネントを追加していきます。

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

次は Creator Kit コンポーネントを ProgressBar に追加していきます。

Hierarchy の ProgressBar を選択する
Movable Item を追加
Rigidbodyの Is Kinematic を ONにする
初期値を設定するために On Create Item trigger を追加する
Target this KEY SPEED Integer 128
Target this KEY MAX_SPEED Integer 255
Canvas -> Image に Set Fill Amount Gimmick を追加する
Target Item
KEY UPDATE_VALUE
Item ProgressBar
Parameter Type Integer
MinValue 0
MaxValue 100
Canvas -> Image の値設定
Fill Mode horizontal
Fill Amount 0

Creator Kit Script のコードを書く

次は Creator Kit Script コンポーネントを ProgressBar に追加してコードを書いていきます。

Hierarchy の ProgressBar を選択する
Scriptable Item を追加
ProgressBar.js ファイルを保存するフォルダを作成する Assets/t_furu/ProgressBar/ を作成
Assets/t_furu/ProgressBar/ProgressBar.js を作成
Scriptable Item に Source Code Asset に ProgressBar.js に設定する
ProgressBar.js を VSCode などで開いて下記のコードを書く

/** ProgressBar アイテム
 * 
 * 
 * Cluster Creator Kit ドキュメント
 * https://docs.cluster.mu/creatorkit/
 * 
 * Cluster Creator Kit Script Reference 
 * https://docs.cluster.mu/script/
 * 
*/

const ADD_VALUE = 1.0;
const MAX_VALUE = 100.0;
const POW_VALUE = 5.0;
const MIN_FIRE_TIME_SEC = 0.05;

// 初期化
initialize = () => {
    $.state.value = 0;
    $.state.timer = 0;
    
    // On Create Item Trigger で設定された値を取得
    const speed = $.getStateCompat("this", "SPEED", "double");
    const max_speed = $.getStateCompat("this", "MAX_SPEED", "double");
    $.state.FIRE_TIME_SEC = (max_speed - speed) / max_speed + MIN_FIRE_TIME_SEC;

    $.log(`FIRE_TIME_SEC ${$.state.FIRE_TIME_SEC}`);
    $.state.initialized = true;
}


$.onUpdate(deltaTime => {
    if ($.state.initialized == null) {
        // 初期化
        initialize();
        return;
    }
    
    // インタラクトしたらステータスばーが動作する
    const cmd = $.getStateCompat("this", "CMD", "boolean");
    if ((cmd == null) || (cmd == 0)) {
        return;
    }

    // 経過時間を計測
    var t = $.state.timer
    t += deltaTime;
    $.state.timer = t;    

    if ($.state.timer < $.state.FIRE_TIME_SEC) {
        return;
    }
    $.state.timer = 0;

    if (cmd == true) {
        // プログレスバーの値を更新
        var v = $.state.value;
        v += ADD_VALUE;
        $.state.value = v;
    }
    // Tips 安心させてくれるプログレスバー にするための計算
    // プログレスバーの表示更新 Math.pow(value/MAX, 1/POW) * 100[%]
    var progress = Math.pow( $.state.value / MAX_VALUE, 1/POW_VALUE) * 100;
    $.log(`progress ${progress}`);

    $.setStateCompat("this", "UPDATE_VALUE", progress);
    $.sendSignalCompat("this", "UPDATE");
})

// とりあえず インタラクトしたら動作するようにする
$.onInteract(player => {
    const cmd = $.getStateCompat("this", "CMD", "boolean");
    if (cmd == null) {
        $.setStateCompat("this", "CMD", true);
        cmd = true;
    }

    if (cmd == true) {
    　　// 表示をリセット
        $.state.value = 0;
	$.setStateCompat("this", "UPDATE_VALUE", 0);
    }
    $.setStateCompat("this", "CMD", !cmd);    
});

デモワールド

creator kit script を使ってプログレスバーを作る方法

応用例動画

勇敢なわんこと散歩できるワールドです。敵を見つけるとわんこが走っていて攻撃をします。

わんこが攻撃するタイミングを表示したかったのでプログレスバー使っています。

https://youtu.be/HVBUR3YHKIs

まとめ

Creator Kit Script のおかげで比較的簡単に安心させてくれるプログレスバーを作ることができたと思います! 応用してゲームの作成などに利用してもらえると嬉しいです！

明日のアドベントカレンダーは焔さんの 今年の初めていろいろ です。色々活動してチャレンジしてそうなので気になりますね！

cluster民とクラフトする非公式 Advent Calendar 2023