はじめに

この記事ではClusterScriptでオブジェクトの表示・非表示を切り替えるためのコードをまとめます。作成環境はCluster Creator Kit v2.2.0です。

テンプレートアイテムのUnityPackageをダウンロードできます。
ご自由にご活用ください。

コードの解説は別記事をご参照ください

サンプル１： ボタンでオブジェクトの表示非表示を切り替える

Hierarchy構成例

ScriptItem（空オブジェクト、ScriptableItemコンポーネントをつける）
┣ Interact（インタラクト用のボタン）
┗ Model（表示非表示を切り替える対象の子オブジェクト）

サンプルコード

// 子オブジェクトを取得
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;
});

サンプル２： オブジェクトを交互に表示非表示する

Hierarchy構成例

ScriptItem（空オブジェクト、ScriptableItemコンポーネントをつける）
┣ Model1（最初は表示）
┗ Model2（最初は非表示）

サンプルコード

// 子オブジェクトを取得
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;
});

サンプル３：インタラクトで非表示になった5秒後に再表示される

Hierarchy構成例

ScriptItem（空オブジェクト、ScriptableItemコンポーネントをつける）
┗ Model（表示非表示の対象となるオブジェクト）

サンプルコード

// 子オブジェクトを取得
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;
  }
});

サンプル４：インタラクトで表示した5秒後に非表示に戻る

Hierarchy構成例

ScriptItem（空オブジェクト、ScriptableItemコンポーネントをつける）
┣ Interact（インタラクト用のボタン）
┗ Model（最初は非表示。インタラクトで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;
  }
});

サンプル５：6個の子オブジェクトから1個をランダムに表示する

Hierarchy構成例

ScriptItem（空オブジェクト、ScriptableItemコンポーネントをつける）
┣ Interact（インタラクト用のボタン）
┣ Model0（ランダム表示対象の子オブジェクト）
┣ Model1（ランダム表示対象の子オブジェクト）
┣ Model2（ランダム表示対象の子オブジェクト）
┣ Model3（ランダム表示対象の子オブジェクト）
┣ Model4（ランダム表示対象の子オブジェクト）
┗ Model5（ランダム表示対象の子オブジェクト）

サンプルコード

// 子オブジェクトを配列に入れる
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);
});

応用：切り替わりが分かりにくいので、表示前に0.5秒間の間を置く

// 子オブジェクトを配列に入れる
// ※同じなので省略

// 静止物をインタラクトしたときの挙動を設定
$.onInteract(() => {
  // 全ての子オブジェクトを非表示にする
  for (const subNode of subNodes) {
    subNode.setEnabled(false);
  }
  // 0.5秒間の間を置く
  $.state.waitForShow = 0.5;
});
  
$.onUpdate((deltaTime) => {
  // 表示待ち中の処理
  if ($.state.waitForShow > 0) {
  $.state.waitForShow -= deltaTime;
    if ($.state.waitForShow <= 0) {
    // ランダムに１つの子オブジェクトを表示状態にする
    const index = Math.floor(Math.random() * 6); // 0〜5のランダムな数字を生成
    subNodes[index].setEnabled(true);
    }
  }
});

応用：表示後のインタラクトで初期状態（全て非表示）に戻る

// 子オブジェクトを配列に入れる
// ※同じなので省略

// 静止物をインタラクトしたときの挙動を設定
$.onInteract(() => {
  // 子オブジェクトの状態を取得する
  const states = subNodes.map(subNode => subNode.getEnabled());
  // 全ての子オブジェクトが非表示状態であればランダムで１つ表示する
  if (states.every(state => !state)) {
    const index = Math.floor(Math.random() * 6); // 0〜5のランダムな数字を生成
    subNodes[index].setEnabled(true);
  } else {
  // それ以外は全てを非表示にする
  for (const subNode of subNodes) {
    subNode.setEnabled(false);
  }
  }
});

サンプル６：指定した秒数で表示非表示を繰り返す

Hierarchy構成例

ScriptItem（空オブジェクト、ScriptableItemコンポーネントをつける）
┗ Model（表示非表示を繰り返す子オブジェクト）

サンプルコード

// 子オブジェクトを取得
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;
  }
});

応用：複数のオブジェクトを順番に表示する

// 子オブジェクトを取得
const subNode1 = $.subNode("子オブジェクト1名");
const subNode2 = $.subNode("子オブジェクト2名");
const subNode3 = $.subNode("子オブジェクト3名");

// （中略）

  // 残り時間が0以下になったら、表示状態を反転する
  if ($.state.time <= 0) {
    // 子オブジェクト1が表示状態の場合
    if (subNode1.getEnabled()) {
      subNode1.setEnabled(false); // 非表示にする
      subNode2.setEnabled(true); // 表示する
      $.state.time = interval; // 残り時間をリセット
    }
    // 子オブジェクト2が表示状態の場合
    if (subNode2.getEnabled()) {
      subNode2.setEnabled(false); // 非表示にする
      subNode3.setEnabled(true); // 表示する
      $.state.time = interval; // 残り時間をリセット
    }
    // 子オブジェクト3が表示状態の場合
    if (subNode3.getEnabled()) {
      subNode3.setEnabled(false); // 非表示にする
      subNode1.setEnabled(true); // 表示する
      $.state.time = interval; // 残り時間をリセット
    }
  }
});

最後に

はじめにも書きましたが、ここに書かれたコードは自由にご活用ください。全ては人類の創造力を加速するためです。

今後も少しずつ増やしていくので、たまに更新されているかチェックしに来てください。

それではみなさん、良きバーチャルライフを。
最終更新：2022/12/25 Mikko Hietalahti