Scriptable Itemでギミックを動かそう

Cluster Creator KitにScriptable Itemが追加されました。
Scriptable Itemを使うとJavaScriptでアイテムを制御することができます。
さらにこのスクリプトはCluster Creator Kitのギミックとも連携することができ、これまでになかった複雑な機能を持たせることができるようになりました。

今回はこのScriptable Itemを使って実現できるギミックの一例として、アイテムの座標や移動距離を取得してみます!

アイテムの座標を取得
移動距離を計測

Scriptable Itemについて詳しくはこちらのドキュメントを参照してください。また、Scriptable Itemで使えるスクリプトについてのリファレンスはこちらです。

アイテムの座標を取得する

手に持ったアイテムの座標をUIに表示してみます。

  • まずワールドに新しいGameObjectを作成し、Scriptable Itemコンポーネントを追加します。
  • 手で持てるアイテムにするため、Grabbable Itemコンポーネントも追加してください。
  • GameObjectの子に、見た目とコライダーになるCubeも作成しておきましょう。
  • Scriptable ItemコンポーネントのSource Code欄に以下のコードを入力しましょう。
    • スクリプトを書く際はテキストエディタで編集したものを貼り付けるのがオススメです。
$.onUpdate(deltaTime => {
  let position = $.getPosition();
  $.setStateCompat("this", "position", position);
});

$.onUpdate関数に毎フレーム行われる処理を記述します。
$.setStateCompatを使うと他のギミックにメッセージを送ることができます。
ここではこのアイテムの座標を取得し、「position」というKeyでこのアイテムにメッセージを送信しています。

Set Test Gimmickでメッセージを受け取るギミックをつくる

続いてメッセージを受け取るギミックをつくっていきます。

  • シーンにPlayer Local UIを作成しましょう。Safe Areaの子にUI>Legacy>Textを作成します。
  • 作成したTextオブジェクトにSet Text Gimmickを追加してください。
  • Set Text GimmickのTargetは「Item」として、Item欄に先ほどのアイテムを指定します。
    • Keyは「position」、Parameter Typeは「Vector3」としましょう。
    • ※オブジェクトの座標はX, Y, Zの3つの要素を持つVector3形式で表されます。

ここまでできたらアップロードしてみましょう。

※スクリプトの挙動はエディター上では確認できないため、アップロードして確かめる必要があります。

アイテムを持って移動すると、UI上にその座標が表示されます。

移動距離を計測する

スクリプトではもっと複雑な計算を行うこともできます。
アイテムを持った地点からの移動距離を計測してみましょう。

  • Scriptable ItemコンポーネントのSource Code欄を以下のように書き換えてください。
$.onUpdate(deltaTime => {
  let startPosition = $.state.startPosition;
  if (startPosition == null) {
    startPosition = $.getPosition();
    $.state.startPosition = startPosition;
  }
 
  let moveVector = $.getPosition().clone().sub(startPosition);
 
  let distance = moveVector.length();
  $.setStateCompat("this", "distance", distance);
});
 
$.onGrab(isGrab => {
  $.state.startPosition = $.getPosition();
});

$.onGrab関数にはアイテムを掴んだときと離したときに呼ばれる処理を記述します。
$.state.xxxxはアイテムに保持される変数です。
ここではアイテムを掴んだときの座標を$.state.startPositionに保存し、$.onUpdate内で現在座標との差分をとって距離を計算しています。
計算した距離は$.setStateCompatで「distance」Keyとしてメッセージを送信します。

Set Text Gimmickの設定を変更する

Set Text Gimmickの設定も変更します。

  • Keyを「distance」、Parameter Typeを「Float」にしてください。

この状態でアップロードしてみましょう。
アイテムを持った地点からの移動距離がUI上に表示されます。

Scriptable Itemを使うとこれまでは難しかった機能を実装することができます。
自由度の広がったCluster Creator Kitで今までにないワールドをつくってみましょう!

記事をシェアしてワールド制作を盛り上げよう!