【ClusterScript】自作テンプレートアイテムの解説
はじめに
この記事は別の記事で紹介した「ClusterScriptテンプレートアイテム」の解説です。
より詳しく知りたい方、コードを改変したい方へ向けた記事です。
【元の記事】オブジェクトの表示非表示を切り替える テンプレートアイテム
▼▼▼スクリプト解説▼▼▼
サンプル１： ボタンでオブジェクトの表示非表示を切り替える
// 子オブジェクトを取得
const subNode = $.subNode("子オブジェクト名");
// 静止物をインタラクトしたときの挙動を設定
$.onInteract(() => {
// 保存されている状態を取得
let active = $.state.active;
// 状態が未定義の場合は、現在のアクティブ状態で初期化
if (active == null) active = subNode.getEnabled();
// アクティブ状態を反転
active = !active;
// アクティブ状態を設定（activeがtrueなら表示、falseなら非表示になる）
subNode.setEnabled(active);
// 状態を保存
$.state.active = active;
});const subNode = $.subNode("子オブジェクト名");という行で、子オブジェクトを取得しています。$.subNode("子オブジェクト名")を使用することで、子オブジェクトを取得することができます。
$.onInteract(() => {})という行で、静止物をインタラクトしたときの挙動を設定しています。$.onInteractイベントハンドラを使用することで、静止物をインタラクトしたときに実行される処理を設定することができます。
let active = $.state.active;という行で、保存されている状態を取得しています。$.state変数は、ゲーム内で状態を管理するためのもので、$.state.activeはその中で、子オブジェクトのアクティブ状態を管理するためのものです。
if (active == null) active = subNode.getEnabled();という行で、状態が未定義の場合は、現在のアクティブ状態で初期化する処理をしています。active変数がnullである場合、subNode.getEnabled()を使用して、子オブジェクトの現在のアクティブ状態を取得し、それをactiveに設定しています。
active = !active;という行で、アクティブ状態を反転させています。この行では、activeがtrueならfalseに、falseならtrueに変更されます。
subNode.setEnabled(active);という行で、アクティブ状態を設定しています。subNode.setEnabled(active)を使用することで、子オブジェクトのアクティブ状態を設定することができます。activeがtrueなら表示、falseなら非表示になるように設定されます。
$.state.active = active;という行で、状態を保存しています。$.state.activeにactiveを設定することで、子オブジェクトのアクティブ状態を保存することができます。
サンプル２： オブジェクトを交互に表示非表示する
// 子オブジェクトを取得
const subNode1 = $.subNode("子オブジェクト1名");
const subNode2 = $.subNode("子オブジェクト2名");
// 静止物をインタラクトしたときの挙動を設定
$.onInteract(() => {
// 子オブジェクト1の現在の有効状態を取得
let active1 = subNode1.getEnabled();
// 子オブジェクト2の現在の有効状態を取得
let active2 = subNode2.getEnabled();
// アクティブ状態を更新
if (active1) {
active1 = false;
active2 = true;
} else {
active1 = true;
active2 = false;
}
// アクティブ状態を設定（activeがtrueなら表示、falseなら非表示になる）
subNode1.setEnabled(active1);
subNode2.setEnabled(active2);
// 状態を保存
$.state.active1 = active1;
$.state.active2 = active2;
});let active1 = subNode1.getEnabled();、let active2 = subNode2.getEnabled();というコードで、子オブジェクトの現在の有効状態を取得しています。
次に、if (active1) {...} else {...}というコードで、アクティブ状態を更新しています。active1がtrueの場合、active1をfalse、active2をtrueに更新します。それ以外の場合、active1をtrue、active2をfalseに更新します。
最後に、subNode1.setEnabled(active1);、subNode2.setEnabled(active2);というコードで、アクティブ状態を子オブジェクト1、子オブジェクト2に設定しています。$.state.active1 = active1;、$.state.active2 = active2;というコードで、状態を保存しています。
サンプル３：インタラクトで非表示になった5秒後に再表示される
// 子オブジェクトを取得
const subNode = $.subNode("子オブジェクト名");
// 静止物をインタラクトしたときの挙動を設定
$.onInteract(() => {
// アクティブ状態を非表示にする
subNode.setEnabled(false);
// 5秒後に表示させる
$.state.time = ($.state.time ?? 0) + 5;
});
// 更新時の挙動を設定
$.onUpdate((deltaTime) => {
$.state.time = ($.state.time ?? 0) - deltaTime;
if ($.state.time <= 0) {
// アクティブ状態を表示にする
subNode.setEnabled(true);
// 残り時間をリセット
$.state.time = 0;
}
});まず、$.onInteract(() => {})というコードで、親オブジェクトがインタラクトされたときの挙動を設定しています。その中で、子オブジェクトを非表示にするように、subNode.setEnabled(false);というコードで設定されています。
次に、$.state.time = ($.state.time ?? 0) + 5;というコードで、5秒後に表示させるように設定されています。$.state.timeは、状態を保存するための変数です。($.state.time ?? 0)という記述は、$.state.timeがnullまたはundefinedの場合は0を、それ以外の場合は$.state.timeを返すものです。つまり、$.state.timeがnullまたはundefinedの場合は0、それ以外の場合は$.state.timeに5を加算した値を$.state.timeに設定しています。
そして、$.onUpdate((deltaTime) => {})というコードで、更新時の挙動を設定しています。deltaTimeは、前回の更新からの経過時間を示す値です。
その中で、$.state.time = ($.state.time ?? 0) - deltaTime;というコードで、$.state.timeからdeltaTimeを減算し、経過時間を更新しています。
次に、if ($.state.time <= 0) { ... }というコードで、$.state.timeが0以下になった場合に処理を実行するように設定しています。これは、$.state.timeが5秒を超えた場合に、$.state.timeが0以下になるためです。
その中で、子オブジェクトを表示にするように、subNode.setEnabled(true);というコードで設定されています。
最後に、$.state.time = 0;というコードで、$.state.timeをリセットしています。
サンプル４：インタラクトで表示した5秒後に非表示に戻る
// 子オブジェクトを取得
const subNode = $.subNode("子オブジェクト名");
// 静止物をインタラクトしたときの挙動を設定
$.onInteract(() => {
// 残り時間をリセット
$.state.time = 0;
// アクティブ状態を表示にする
subNode.setEnabled(true);
// 5秒後に非表示にする
$.state.time = ($.state.time ?? 0) + 5;
});
// 更新時の挙動を設定
$.onUpdate((deltaTime) => {
$.state.time = ($.state.time ?? 0) - deltaTime;
if ($.state.time <= 0) {
// アクティブ状態を非表示にする
subNode.setEnabled(false);
// 残り時間をリセット
$.state.time = 0;
}
});親オブジェクトがインタラクトされるたびに、子オブジェクトを表示し、$.state.timeを5秒増加させるように設定されています。
また、更新時に$.state.timeからdeltaTimeを減算し、$.state.timeが0以下になった場合に子オブジェクトを非表示にするように設定されています。
オブジェクトが表示されている間に再度インタラクトすると秒数がリセットされます。最後のインタラクトから5秒後に非表示となります。
サンプル５：6個の子オブジェクトから1個をランダムに表示する
// 子オブジェクトを配列に入れる
const subNodes = [
$.subNode("子オブジェクト0名"),
$.subNode("子オブジェクト1名"),
$.subNode("子オブジェクト2名"),
$.subNode("子オブジェクト3名"),
$.subNode("子オブジェクト4名"),
$.subNode("子オブジェクト5名"),
];
// 静止物をインタラクトしたときの挙動を設定
$.onInteract(() => {
// 全ての子オブジェクトを非表示にする
for (const subNode of subNodes) {
subNode.setEnabled(false);
}
// ランダムに１つの子オブジェクトを表示状態にする
const index = Math.floor(Math.random() * 6); // 0〜5のランダムな数字を生成
subNodes[index].setEnabled(true);
});配列"subNodes"に、名前を"子オブジェクト0名"～"子オブジェクト5名"として取得した子オブジェクトを順番に入れます。この配列は、以降の処理で簡単に各子オブジェクトにアクセスするために使用されます。
次に、$.onInteractメソッドで、静止物がインタラクトされたときの動作を設定しています。
まず、for文を使って、subNodes配列の各子オブジェクトに対してsetEnabledメソッドを呼び出して、非表示状態にしています（リセット処理）。
次に、Math.randomを使って0〜5のランダムな数字を生成し、subNodes配列から対応する子オブジェクトを取り出し、setEnabledメソッドを呼び出して表示状態にしています。
サンプル６：指定した秒数で表示非表示を繰り返す
// 子オブジェクトを取得
const subNode = $.subNode("子オブジェクト名");
// 表示状態を反転する間隔（秒）
const interval = 1;
$.onUpdate(deltaTime => {
// 初期化処理
if ($.state.time == null) {
$.state.time = interval;
}
// 残り時間を更新
$.state.time -= deltaTime;
// 残り時間が0以下になったら、表示状態を反転する
if ($.state.time <= 0) {
subNode.setEnabled(!subNode.getEnabled());
$.state.time = interval;
}
});まず、$.onUpdateメソッドを使用して、毎フレームごとに実行する処理を設定しています。この中で、$.state.timeという変数が初期化されていなければ、interval（表示状態を反転する間隔）を$.state.timeに設定しています。
次に、$.state.timeからdeltaTime（前回のフレームからの経過時間）を引いて、$.state.timeを更新しています。
最後に、$.state.timeが0以下になったら、子オブジェクトの表示状態を反転させ、$.state.timeをintervalに戻しています。
これにより、毎フレーム$.state.timeが更新され、interval秒ごとに子オブジェクトの表示状態が反転するようになります。
参考サイト
最終更新：2022/12/25 Mikok Hietalahti
謝辞
